diff --git a/packages/components/src/components/common/table/hooks/hooks.tsx b/packages/components/src/components/common/table/hooks/hooks.tsx index 49d3058..c698eff 100644 --- a/packages/components/src/components/common/table/hooks/hooks.tsx +++ b/packages/components/src/components/common/table/hooks/hooks.tsx @@ -123,6 +123,7 @@ export const useMultiSelectRow = (table: Table) => { interface KeyHandlerOptions { multiSelect?: boolean; reorder?: { updateOrder?: (moveIndexes: number[], toIndex: number) => void; getRowId?: (row: TData) => string }; + lazyLoadChildren?: (row: Row) => void; } interface TableKeyboardHandlerProps { @@ -131,7 +132,7 @@ interface TableKeyboardHandlerProps { options?: KeyHandlerOptions; } -export const useTableKeyHandler = (props: TableKeyboardHandlerProps) => { +export const useTableKeyHandler = ({ table, data, options }: TableKeyboardHandlerProps) => { const [rootIndex, setRootIndex] = React.useState(undefined); const handleKeyDown = (event: React.KeyboardEvent, onEnterAction?: (row: Row) => void) => { @@ -140,34 +141,27 @@ export const useTableKeyHandler = (props: TableKeyboardHandlerProps({ - table, - data, - event, - options - }: TableKeyboardHandlerProps & { event: React.KeyboardEvent }) => { + const handleArrowKeyUpDown = (event: React.KeyboardEvent) => { const { multiSelect = false, reorder } = options || {}; const allRows = table.getRowModel().rows; const selectedRows = table.getSelectedRowModel().flatRows; @@ -188,7 +182,7 @@ export const useTableKeyHandler = (props: TableKeyboardHandlerProps(props: TableKeyboardHandlerProps( + const toggleRowWithShift = ( direction: -1 | 1, newIndex: number | undefined, allRows: Array>, @@ -209,26 +203,27 @@ export const useTableKeyHandler = (props: TableKeyboardHandlerProps(rows: Row[], expand: boolean) => { +const handleEnterKey = (selectedRows: Array>, onEnterAction?: (row: Row) => void) => { + if (selectedRows.length === 1 && onEnterAction) { + onEnterAction(selectedRows[0]); + } +}; + +const toggleExpand = (rows: Row[], expand: boolean, loadChildren?: (row: Row) => void) => { if (rows.length === 1) { if (expand && !rows[0].getIsExpanded()) { + loadChildren && loadChildren(rows[0]); rows[0].toggleExpanded(); } else if (!expand && rows[0].getIsExpanded()) { rows[0].toggleExpanded(); diff --git a/packages/components/src/components/editor/browser/browser.tsx b/packages/components/src/components/editor/browser/browser.tsx index b058571..7230ce3 100644 --- a/packages/components/src/components/editor/browser/browser.tsx +++ b/packages/components/src/components/editor/browser/browser.tsx @@ -80,7 +80,7 @@ export const useBrowser = ( ...select.tableState } }); - const { handleKeyDown } = useTableKeyHandler({ table, data }); + const { handleKeyDown } = useTableKeyHandler({ table, data, options: { lazyLoadChildren: options?.loadChildren } }); return { table, globalFilter: { filter, setFilter }, handleKeyDown }; };