improved clickable fields behavior

Author: jonesmac

packages/plugins/packages/boundwitness/src/components/_shared/Payloads/PayloadsTable.tsx

@@ -1,7 +1,7 @@
 import type { BoundWitness } from '@xyo-network/boundwitness-model'
 import { BoundWitnessSchema } from '@xyo-network/boundwitness-model'
+import type { ExtendEventNoun } from '@xyo-network/react-event'
 import type { PayloadTableProps } from '@xyo-network/react-payload-table'
-import { usePayloadHash } from '@xyo-network/react-shared'
 import { TableEx } from '@xyo-network/react-table'
 import type { PropsWithChildren } from 'react'
 import React from 'react'
@@ -10,14 +10,18 @@ import { BoundWitnessFilteredPayloadTableBody, BoundWitnessPayloadTableHead } fr
 
 export interface BoundWitnessPayloadTableProps extends PayloadTableProps {
   boundwitness?: BoundWitness
+  clickableFields?: ExtendEventNoun[]
+  eventNoun?: ExtendEventNoun
 }
 
-export const BoundWitnessPayloadsTable: React.FC<BoundWitnessPayloadTableProps> = ({ boundwitness, ...props }) => {
-  const hash = usePayloadHash(boundwitness)
+export const BoundWitnessPayloadsTable: React.FC<BoundWitnessPayloadTableProps> = ({
+  boundwitness, clickableFields, eventNoun = 'payload', ...props
+}) => {
   return (
     <BoundWitnessPayloadsTableInner {...props}>
       <BoundWitnessFilteredPayloadTableBody
-        eventNoun="payload"
+        clickableFields={clickableFields}
+        eventNoun={eventNoun}
         schemaFilter={BoundWitnessSchema}
         bwFilterType="notEqual"
         noResults={boundwitness?.payload_hashes.length === 0}
@@ -28,11 +32,14 @@ export const BoundWitnessPayloadsTable: React.FC<BoundWitnessPayloadTableProps>
   )
 }
 
-export const BoundWitnessPayloadsTableForBWs: React.FC<BoundWitnessPayloadTableProps> = ({ boundwitness, ...props }) => {
+export const BoundWitnessPayloadsTableForBWs: React.FC<BoundWitnessPayloadTableProps> = ({
+  boundwitness, clickableFields, eventNoun = 'boundwitness', ...props
+}) => {
   return (
     <BoundWitnessPayloadsTableInner {...props}>
       <BoundWitnessFilteredPayloadTableBody
-        eventNoun="boundwitness"
+        clickableFields={clickableFields}
+        eventNoun={eventNoun}
         schemaFilter={BoundWitnessSchema}
         noResults={boundwitness?.payload_hashes.length === 0}
         payloadHashes={boundwitness?.payload_hashes}

packages/plugins/packages/boundwitness/src/components/_shared/Payloads/payloads-table/TableBody.stories.tsx

@@ -25,7 +25,13 @@ export default {
   component: BoundWitnessPayloadTableBody,
 } as Meta
 
-const Template: StoryFn<typeof BoundWitnessPayloadTableBody<EventNoun>> = args => <BoundWitnessPayloadTableBody {...args} />
+const Template: StoryFn<typeof BoundWitnessPayloadTableBody<EventNoun>> = (args) => {
+  const [ref] = useEvent<HTMLTableSectionElement>((noun, verb, data) => {
+    alert(`${noun}|${verb}|${data}`)
+  })
+  return <BoundWitnessPayloadTableBody ref={ref} {...args} />
+}
+
 const TemplateWithCustomNouns: StoryFn<typeof BoundWitnessPayloadTableBody<CustomNoun>>
   = (args) => {
     const [ref] = useEvent<HTMLTableSectionElement>((noun, verb, data) => {
@@ -38,13 +44,16 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithData = Template.bind({})
-WithData.args = { ...data, clickableFields: ['payload'] }
+WithData.args = { ...data }
+
+const WithClickableFields = Template.bind({})
+WithClickableFields.args = { ...data, clickableFields: ['schema'] }
 
 const WithCustomNouns = TemplateWithCustomNouns.bind({})
 WithCustomNouns.args = {
-  ...data, eventNoun: 'customNoun', clickableFields: ['customNoun'],
+  ...data, eventNoun: 'customNoun', clickableFields: ['hash'],
 }
 
 export {
-  Default, WithCustomNouns, WithData,
+  Default, WithClickableFields, WithCustomNouns, WithData,
 }

packages/plugins/packages/boundwitness/src/components/_shared/Payloads/payloads-table/TableBody.tsx

@@ -11,16 +11,22 @@ import { useTableHeight } from '@xyo-network/react-table'
 import type { RefObject } from 'react'
 import React, { useLayoutEffect } from 'react'
 
-export interface BoundWitnessPayloadTableBodyProps<TNoun extends ExtendEventNoun<string> = EventNoun> extends PayloadTableBodyProps {
-  clickableFields?: TNoun[]
+type ClickableFields = 'hash' | 'schema'
+
+export interface BoundWitnessPayloadTableBodyProps<
+  TNoun extends ExtendEventNoun<string> = EventNoun,
+> extends PayloadTableBodyProps {
+  clickableFields?: ClickableFields[]
   eventNoun?: TNoun
   payloadHashes?: string[]
   payloadSchemas?: string[]
 }
 
-export const BoundWitnessPayloadTableBody = <TNoun extends ExtendEventNoun<string> = EventNoun>({
+export const BoundWitnessPayloadTableBody = <
+  TNoun extends ExtendEventNoun<string> = EventNoun,
+>({
   clickableFields,
-  eventNoun = 'payload' as TNoun,
+  eventNoun: eventNounOverride,
   payloadHashes,
   payloadSchemas,
   ref,
@@ -40,6 +46,21 @@ export const BoundWitnessPayloadTableBody = <TNoun extends ExtendEventNoun<strin
     }
   })
 
+  const RenderedCell: React.FC<{ field: ClickableFields; value: string }> = ({ field, value }) => {
+    return clickableFields?.includes(field)
+      ? (
+          <Link
+            sx={{ cursor: 'pointer' }}
+            onClick={() => {
+              dispatch (eventNounOverride ?? field as TNoun, 'click', value)
+            }}
+          >
+            {value}
+          </Link>
+        )
+      : value
+  }
+
   return (
     <TableBody {...tableProps}>
       {noResults && NoResultRowComponent
@@ -49,20 +70,11 @@ export const BoundWitnessPayloadTableBody = <TNoun extends ExtendEventNoun<strin
         ? payloadHashes.map((hash, index) => {
             return (
               <TableRow ref={tableRowRef} key={hash}>
-                <TableCell title={payloadSchemas[index]}>{payloadSchemas[index]}</TableCell>
+                <TableCell title={payloadSchemas[index]}>
+                  <RenderedCell field="schema" value={payloadSchemas[index]} />
+                </TableCell>
                 <HashTableCell title={hash} value={hash}>
-                  {clickableFields?.includes(eventNoun)
-                    ? (
-                        <Link
-                          sx={{ cursor: 'pointer' }}
-                          onClick={() => {
-                            dispatch(eventNoun, 'click', hash)
-                          }}
-                        >
-                          {hash}
-                        </Link>
-                      )
-                    : hash}
+                  <RenderedCell field="hash" value={hash} />
                 </HashTableCell>
               </TableRow>
             )

packages/plugins/packages/boundwitness/src/components/_shared/Payloads/payloads-table/TableBodyFiltered.tsx

@@ -10,7 +10,8 @@ export interface BoundWitnessFilteredPayloadTableBodyProps extends BoundWitnessP
 
 export const BoundWitnessFilteredPayloadTableBody: React.FC<BoundWitnessFilteredPayloadTableBodyProps> = ({
   bwFilterType = 'equal',
-  eventNoun = 'payload',
+  clickableFields,
+  eventNoun,
   payloadHashes,
   payloadSchemas,
   schemaFilter,
@@ -48,5 +49,13 @@ export const BoundWitnessFilteredPayloadTableBody: React.FC<BoundWitnessFiltered
       setBWPayloadHashes(filteredHashes)
     }
   }, [bwFilterType, payloadHashes, payloadSchemas, schemaFilter])
-  return <BoundWitnessPayloadTableBody payloadHashes={bwPayloadHashes} payloadSchemas={bwPayloadSchemas} eventNoun={eventNoun} {...props} />
+  return (
+    <BoundWitnessPayloadTableBody
+      payloadHashes={bwPayloadHashes}
+      payloadSchemas={bwPayloadSchemas}
+      clickableFields={clickableFields}
+      eventNoun={eventNoun}
+      {...props}
+    />
+  )
 }