Skip to content

Commit

Permalink
*fix expandable clickable table row
Browse files Browse the repository at this point in the history
  • Loading branch information
Sodik committed Jun 19, 2024
1 parent 40dbaa2 commit 44e9d78
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 22 deletions.
35 changes: 29 additions & 6 deletions packages/ui/src/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import React, {
useMemo,
ReactNode,
useState,
MouseEvent,
} from 'react'
import cn from 'classnames'
import { HotKeys, KeyMap } from 'react-hotkeys'
Expand All @@ -30,6 +31,7 @@ import {
useExpanded,
TableInstance,
SortingRule,
TableExpandedToggleProps,
} from 'react-table'
import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'

Expand Down Expand Up @@ -221,6 +223,7 @@ type CustomTableProps<D extends object> = {
columnsOrdering?: boolean
children?: (table: ReactElement, tableInstance: TableInstance<D>) => ReactElement
renderRowSubComponent?: (props: RowType<D>) => ReactNode
canExpand?: (row: RowType<D>) => void
onCopy?: (data: (string | undefined)[][]) => void
} & CustomTableRowClickProps<D> &
DataTestProp
Expand Down Expand Up @@ -294,6 +297,7 @@ export const Table = <D extends object>({
renderRowSubComponent,
autoResetExpanded = false,
onCopy,
canExpand,
}: TableProps<D>): ReactElement => {
const getOncopy = useRefValue(onCopy)
const [contextMenuAnchorEl, setContextMenuAnchorEl] = useState<HTMLDivElement | null>(null)
Expand Down Expand Up @@ -321,19 +325,38 @@ export const Table = <D extends object>({
id: ROW_EXPANDER_COLUMN_ID,
Header: () => <span role="contentinfo" aria-label="row-expander-column-header" />,
Cell: ({ row }: { row: RowType<D> }) => {
return row.canExpand || renderRowSubComponent ? (
<div tabIndex={0} role="button" data-test="row-expander" className={styles.expander} {...row.getToggleRowExpandedProps()}>
<Icon icon={row.isExpanded ? ChevronUp : ChevronDown} ariaLabel="row-expander" />
</div>
) : null
if ((row.canExpand || renderRowSubComponent) && (!canExpand || (canExpand && canExpand(row)))) {
const rowProps = row.getToggleRowExpandedProps() as TableExpandedToggleProps & {
onClick: (e: MouseEvent<HTMLElement>) => void
}

return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div
tabIndex={0}
role="button"
data-test="row-expander"
className={styles.expander}
{...rowProps}
onClick={(e) => {
e.preventDefault()
rowProps.onClick(e)
}}
>
<Icon icon={row.isExpanded ? ChevronUp : ChevronDown} ariaLabel="row-expander" />
</div>
)
}

return null
},
},
...propColumns,
]
}

return propColumns
}, [propColumns, data, renderRowSubComponent])
}, [propColumns, canExpand, data, renderRowSubComponent])

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const onPaginationChangeDebounced = useAsyncDebounce<(paginationChangeProps: PaginationChangeProps) => void>(onPaginationChange!, 200)
Expand Down
30 changes: 14 additions & 16 deletions packages/ui/src/Table/TableContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,19 +104,23 @@ export const TableContent = <D extends object>(props: TableContentProps<D>) => {
)
})

const expandedRow =
row.isExpanded && renderRowSubComponent ? (
<IgnoreKeys tabIndex={-1} className={styles.subRowWrapper} onContextMenu={handleOnContesxtMenu}>
{renderRowSubComponent(row)}
</IgnoreKeys>
) : null

if (getHref) {
const href = getHref(row)
if (href) {
return (
<LinkRow
key={rowKey}
AnchorComponent={AnchorComponent}
{...restRowProps}
ariaRowIndex={row.index + 1 + cellIndexOffset}
href={href}
>
{cells}
</LinkRow>
<React.Fragment key={rowKey}>
<LinkRow AnchorComponent={AnchorComponent} {...restRowProps} ariaRowIndex={row.index + 1 + cellIndexOffset} href={href}>
{cells}
</LinkRow>
{expandedRow}
</React.Fragment>
)
}
}
Expand All @@ -136,13 +140,7 @@ export const TableContent = <D extends object>(props: TableContentProps<D>) => {
>
{cells}
</Row>
{row.isExpanded
? renderRowSubComponent && (
<IgnoreKeys tabIndex={-1} className={styles.subRowWrapper} onContextMenu={handleOnContesxtMenu}>
{renderRowSubComponent(row)}
</IgnoreKeys>
)
: null}
{expandedRow}
</React.Fragment>
)
})}
Expand Down

0 comments on commit 44e9d78

Please sign in to comment.