@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Table/hooks/localHooks/useLocalTableColumns.tsx

@@ -1,70 +1,70 @@
-import type { ITableColumn } from '../../../../types/ITable';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Checkbox } from '../../../Inputs/Checkbox';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const useLocalTableColumns = () => {
-  const { t } = useTranslation();
-
-  const {
-    columnData: { columns },
-    selectActions,
-    data,
-    rowSelect,
-    dataActions: { hasItemActions } = {},
-  } = useTableContext();
-
-  const visibleColumns = useMemo(() => {
-    const hasSelect = rowSelect && selectActions.length > 0;
-    const filteredColumns = columns.filter(column => !column.hidden);
-
-    let newCols: ITableColumn[] = [];
-
-    // Select Column
-    if (hasSelect) {
-      const selectableData = data.filter(e => !e.disableSelect);
-      const selectedSome =
-        !!rowSelect?.selectedRows.size &&
-        selectableData.some(e => !rowSelect.selectedRows.has(e.uuid));
-      const selectedAll = !!rowSelect?.selectedRows.size && !selectedSome;
-
-      const selectColumn: ITableColumn = {
-        id: 'select',
-        label: (
-          <Checkbox
-            value={selectedSome ? 'middle' : selectedAll}
-            setValue={() => {
-              selectedAll
-                ? rowSelect.setSelectedRows(new Set<string>())
-                : rowSelect?.setSelectedRows(oldValue => {
-                    let newSet = new Set(oldValue);
-                    selectableData.forEach(e => newSet.add(e.uuid!));
-                    return newSet;
-                  });
-            }}
-          />
-        ),
-        align: 'center',
-        className: 'select-col',
-      };
-
-      newCols.push(selectColumn);
-    }
-
-    newCols = newCols.concat(filteredColumns);
-    // Actions Column
-    if (hasItemActions) {
-      newCols.push({
-        id: 'actions',
-        label: t('Actions'),
-        align: 'center',
-        className: 'actions-col',
-      });
-    }
-
-    return newCols;
-  }, [columns, selectActions.length, data, rowSelect, hasItemActions, t]);
-
-  return { visibleColumns };
-};
+import type { ITableColumn } from '../../../../types/ITable';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox } from '../../../Inputs/Checkbox';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const useLocalTableColumns = () => {
+  const { t } = useTranslation();
+
+  const {
+    columnData: { columns },
+    selectActions,
+    data,
+    rowSelect,
+    dataActions: { hasItemActions } = {},
+  } = useTableContext();
+
+  const visibleColumns = useMemo(() => {
+    const hasSelect = rowSelect && selectActions.length > 0;
+    const filteredColumns = columns.filter(column => !column.hidden);
+
+    let newCols: ITableColumn[] = [];
+
+    // Select Column
+    if (hasSelect) {
+      const selectableData = data.filter(e => !e.disableSelect);
+      const selectedSome =
+        !!rowSelect?.selectedRows.size &&
+        selectableData.some(e => !rowSelect.selectedRows.has(e.uuid));
+      const selectedAll = !!rowSelect?.selectedRows.size && !selectedSome;
+
+      const selectColumn: ITableColumn = {
+        id: 'select',
+        label: (
+          <Checkbox
+            value={selectedSome ? 'middle' : selectedAll}
+            setValue={() => {
+              selectedAll
+                ? rowSelect.setSelectedRows(new Set<string>())
+                : rowSelect?.setSelectedRows(oldValue => {
+                    let newSet = new Set(oldValue);
+                    selectableData.forEach(e => newSet.add(e.uuid!));
+                    return newSet;
+                  });
+            }}
+          />
+        ),
+        align: 'center',
+        className: 'select-col',
+      };
+
+      newCols.push(selectColumn);
+    }
+
+    newCols = newCols.concat(filteredColumns);
+    // Actions Column
+    if (hasItemActions) {
+      newCols.push({
+        id: 'actions',
+        label: t('Actions'),
+        align: 'center',
+        className: 'actions-col',
+      });
+    }
+
+    return newCols;
+  }, [columns, selectActions.length, data, rowSelect, hasItemActions, t]);
+
+  return { visibleColumns };
+};

package/src/components/Table/hooks/localHooks/useLocalTableData.tsx

@@ -1,84 +1,84 @@
-import type {
-  IPaginationControl,
-  ITable,
-  ITableDataActions,
-  ITableDataItem,
-} from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { Checkbox } from '../../../Inputs/Checkbox';
-import { TableItemActions } from '../../components/items/TableItemActions';
-
-interface Props<T> {
-  initialData: ITableDataItem<T>[];
-  controledPagination: boolean;
-  localPagination: IPaginationControl;
-  dataActions?: ITableDataActions<T>;
-  isDeletable: boolean;
-  rowSelect: ITable['rowSelect'];
-}
-
-export const useLocalTableData = <T,>({
-  initialData,
-  controledPagination,
-  localPagination,
-  dataActions,
-  isDeletable,
-  rowSelect,
-}: Props<T>) => {
-  const [data, setData] = useState<ITableDataItem<T>[]>(initialData);
-
-  useEffect(() => {
-    const newData =
-      controledPagination || localPagination.limit <= 0
-        ? initialData
-        : initialData.slice(
-            localPagination.offset * localPagination.limit,
-            localPagination.offset * localPagination.limit + localPagination.limit
-          );
-
-    const additionalDataActions = dataActions?.actions?.() ?? [];
-    const withActions = Boolean(
-      dataActions?.hasEditAccess || isDeletable || additionalDataActions.length
-    );
-
-    const withAdditionalColumns = Boolean(rowSelect || withActions);
-    const finalData = !withAdditionalColumns
-      ? newData
-      : newData.map(e => {
-          if (rowSelect) {
-            e.cells.select = {
-              value: (
-                <Checkbox
-                  value={rowSelect.selectedRows.has(e.uuid!)}
-                  setValue={checked => {
-                    rowSelect.setSelectedRows(oldSet => {
-                      const newSet = new Set(oldSet);
-                      checked ? newSet.add(e.uuid!) : newSet.delete(e.uuid!);
-                      return newSet;
-                    });
-                  }}
-                  disabled={e.disableSelect}
-                />
-              ),
-              unclickable: true,
-            };
-          }
-          if (dataActions) {
-            e.cells.actions = { value: <TableItemActions tableDataItem={e} /> };
-          }
-          return e;
-        });
-
-    setData(finalData);
-  }, [
-    controledPagination,
-    initialData,
-    localPagination.limit,
-    localPagination.offset,
-    rowSelect,
-    isDeletable,
-    dataActions,
-  ]);
-
-  return data;
-};
+import type {
+  IPaginationControl,
+  ITable,
+  ITableDataActions,
+  ITableDataItem,
+} from '../../../../types/ITable';
+import { useEffect, useState } from 'react';
+import { Checkbox } from '../../../Inputs/Checkbox';
+import { TableItemActions } from '../../components/items/TableItemActions';
+
+interface Props<T> {
+  initialData: ITableDataItem<T>[];
+  controledPagination: boolean;
+  localPagination: IPaginationControl;
+  dataActions?: ITableDataActions<T>;
+  isDeletable: boolean;
+  rowSelect: ITable['rowSelect'];
+}
+
+export const useLocalTableData = <T,>({
+  initialData,
+  controledPagination,
+  localPagination,
+  dataActions,
+  isDeletable,
+  rowSelect,
+}: Props<T>) => {
+  const [data, setData] = useState<ITableDataItem<T>[]>(initialData);
+
+  useEffect(() => {
+    const newData =
+      controledPagination || localPagination.limit <= 0
+        ? initialData
+        : initialData.slice(
+            localPagination.offset * localPagination.limit,
+            localPagination.offset * localPagination.limit + localPagination.limit
+          );
+
+    const additionalDataActions = dataActions?.actions?.() ?? [];
+    const withActions = Boolean(
+      dataActions?.hasEditAccess || isDeletable || additionalDataActions.length
+    );
+
+    const withAdditionalColumns = Boolean(rowSelect || withActions);
+    const finalData = !withAdditionalColumns
+      ? newData
+      : newData.map(e => {
+          if (rowSelect) {
+            e.cells.select = {
+              value: (
+                <Checkbox
+                  value={rowSelect.selectedRows.has(e.uuid!)}
+                  setValue={checked => {
+                    rowSelect.setSelectedRows(oldSet => {
+                      const newSet = new Set(oldSet);
+                      checked ? newSet.add(e.uuid!) : newSet.delete(e.uuid!);
+                      return newSet;
+                    });
+                  }}
+                  disabled={e.disableSelect}
+                />
+              ),
+              unclickable: true,
+            };
+          }
+          if (dataActions) {
+            e.cells.actions = { value: <TableItemActions tableDataItem={e} /> };
+          }
+          return e;
+        });
+
+    setData(finalData);
+  }, [
+    controledPagination,
+    initialData,
+    localPagination.limit,
+    localPagination.offset,
+    rowSelect,
+    isDeletable,
+    dataActions,
+  ]);
+
+  return data;
+};

package/src/components/Table/hooks/localHooks/useLocalTableKeyboard.ts

@@ -1,176 +1,176 @@
-import type { IKeyboardAction } from '../../../../types/IKeyboard';
-import type { ITableDataItem } from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { scrollToRow } from '../../../../utils/tableUtils';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const useLocalTableKeyboard = () => {
-  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
-
-  const { keyboard, data, editable, itemDeleteData, dataActions, rowSelect, footer } =
-    useTableContext();
-
-  useEffect(() => {
-    if (keyboard?.enabled) {
-      const isEditing = !!editable?.selectedItem;
-      const isAdding = !!editable?.isAdding;
-      const isEditDisabled = !editable || keyboard?.actions?.editDisabled;
-      const isAddDisabled = !!editable?.addDisabled;
-      const isMoveDisabled = !!keyboard?.actions?.moveDisabled;
-      const isBulkAction =
-        dataActions?.hasItemActions &&
-        rowSelect?.selectedRows &&
-        rowSelect.selectedRows.size > 0;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        const rowIndex = focusedRow
-          ? data.findIndex(row => row.uuid === focusedRow.uuid)
-          : -1;
-
-        const allActions: IKeyboardAction[] = [
-          {
-            code: 'ArrowDown',
-            disabled: isEditing || isAdding || isMoveDisabled,
-            onAction: () => {
-              const nextRow = rowIndex + 1;
-              if (nextRow < data.length) {
-                // rowIndex will be -1 if no row is selected so the next row will be 0
-                setFocusedRow(data[nextRow]);
-                scrollToRow(data[nextRow].uuid);
-              }
-            },
-          },
-          {
-            code: 'ArrowUp',
-            disabled: isEditing || isAdding || isMoveDisabled,
-            onAction: () => {
-              if (rowIndex !== 0) {
-                const prevRow = rowIndex > 0 ? rowIndex - 1 : data.length - 1;
-                setFocusedRow(data[prevRow]);
-                scrollToRow(data[prevRow].uuid);
-              }
-            },
-          },
-          {
-            code: 'KeyE',
-            ctrl: true,
-            disabled: isEditing || isEditDisabled || !focusedRow,
-            onAction: () => {
-              editable?.setSelectedItem(focusedRow);
-            },
-          },
-          {
-            code: 'Enter',
-            disabled: isEditing || isAdding || !focusedRow?.onRowClick,
-            onAction: focusedRow?.onRowClick!,
-          },
-          {
-            code: 'Escape',
-            disabled: !focusedRow && !isAdding && !isEditing,
-            onAction: () =>
-              isAdding
-                ? editable?.setIsAdding(false)
-                : editable?.selectedItem
-                  ? editable?.setSelectedItem?.(null)
-                  : setFocusedRow(null),
-          },
-          {
-            code: 'Insert',
-            disabled: isAddDisabled || isAdding || isEditing,
-            onAction: () => {
-              editable?.setIsAdding(true);
-              setFocusedRow(null);
-            },
-          },
-          {
-            code: 'Delete',
-            disabled: !dataActions?.isDeletable || isEditing || !focusedRow,
-            onAction: () =>
-              itemDeleteData?.setItemToDeleteUuids(
-                isBulkAction ? Array.from(rowSelect.selectedRows) : [focusedRow!.uuid]
-              ),
-          },
-          {
-            code: 'ArrowLeft',
-            ctrl: true,
-            disabled: isEditing || isAdding,
-            onAction: () =>
-              footer!.paginationControl!.offset > 0 &&
-              footer!.paginationControl!.setOffset(footer!.paginationControl!.offset - 1),
-          },
-          {
-            code: 'ArrowRight',
-            ctrl: true,
-            disabled: isEditing || isAdding,
-            onAction: () => {
-              if (
-                footer?.noTotalRows
-                  ? footer!.paginationControl!.limit <= footer!.totalRows!
-                  : footer!.paginationControl!.offset + 1 <
-                    Math.ceil(footer!.totalRows! / footer!.paginationControl!.limit)
-              ) {
-                footer!.paginationControl!.setOffset(
-                  footer!.paginationControl!.offset + 1
-                );
-              }
-            },
-          },
-          {
-            code: 'Space',
-            disabled:
-              !dataActions?.hasItemActions || !focusedRow?.uuid || isEditing || isAdding,
-            onAction: () => {
-              const rowUuid = focusedRow?.uuid!;
-              const isRowSelected = rowSelect?.selectedRows.has(rowUuid);
-              rowSelect?.setSelectedRows(oldSet => {
-                const newSet = new Set(oldSet);
-                newSet[isRowSelected ? 'delete' : 'add'](rowUuid);
-                return newSet;
-              });
-            },
-          },
-        ];
-
-        allActions.forEach(action => {
-          if (
-            !action.disabled &&
-            action.code === event.code &&
-            !!action.ctrl === (event.ctrlKey || event.metaKey)
-          ) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (
-              action.onBulkAction &&
-              dataActions?.hasItemActions &&
-              rowSelect?.selectedRows &&
-              rowSelect.selectedRows.size > 0
-            ) {
-              action.onBulkAction(Array.from(rowSelect.selectedRows));
-            } else {
-              action.onAction();
-            }
-          }
-        });
-      };
-
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [
-    data,
-    editable,
-    keyboard,
-    dataActions?.hasItemActions,
-    dataActions?.isDeletable,
-    itemDeleteData,
-    focusedRow,
-    footer,
-    rowSelect,
-  ]);
-  return {
-    focusedRow,
-    // handleKeyDown,
-  };
-};
+import type { IKeyboardAction } from '../../../../types/IKeyboard';
+import type { ITableDataItem } from '../../../../types/ITable';
+import { useEffect, useState } from 'react';
+import { scrollToRow } from '../../../../utils/tableUtils';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const useLocalTableKeyboard = () => {
+  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
+
+  const { keyboard, data, editable, itemDeleteData, dataActions, rowSelect, footer } =
+    useTableContext();
+
+  useEffect(() => {
+    if (keyboard?.enabled) {
+      const isEditing = !!editable?.selectedItem;
+      const isAdding = !!editable?.isAdding;
+      const isEditDisabled = !editable || keyboard?.actions?.editDisabled;
+      const isAddDisabled = !!editable?.addDisabled;
+      const isMoveDisabled = !!keyboard?.actions?.moveDisabled;
+      const isBulkAction =
+        dataActions?.hasItemActions &&
+        rowSelect?.selectedRows &&
+        rowSelect.selectedRows.size > 0;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        const rowIndex = focusedRow
+          ? data.findIndex(row => row.uuid === focusedRow.uuid)
+          : -1;
+
+        const allActions: IKeyboardAction[] = [
+          {
+            code: 'ArrowDown',
+            disabled: isEditing || isAdding || isMoveDisabled,
+            onAction: () => {
+              const nextRow = rowIndex + 1;
+              if (nextRow < data.length) {
+                // rowIndex will be -1 if no row is selected so the next row will be 0
+                setFocusedRow(data[nextRow]);
+                scrollToRow(data[nextRow].uuid);
+              }
+            },
+          },
+          {
+            code: 'ArrowUp',
+            disabled: isEditing || isAdding || isMoveDisabled,
+            onAction: () => {
+              if (rowIndex !== 0) {
+                const prevRow = rowIndex > 0 ? rowIndex - 1 : data.length - 1;
+                setFocusedRow(data[prevRow]);
+                scrollToRow(data[prevRow].uuid);
+              }
+            },
+          },
+          {
+            code: 'KeyE',
+            ctrl: true,
+            disabled: isEditing || isEditDisabled || !focusedRow,
+            onAction: () => {
+              editable?.setSelectedItem(focusedRow);
+            },
+          },
+          {
+            code: 'Enter',
+            disabled: isEditing || isAdding || !focusedRow?.onRowClick,
+            onAction: focusedRow?.onRowClick!,
+          },
+          {
+            code: 'Escape',
+            disabled: !focusedRow && !isAdding && !isEditing,
+            onAction: () =>
+              isAdding
+                ? editable?.setIsAdding(false)
+                : editable?.selectedItem
+                  ? editable?.setSelectedItem?.(null)
+                  : setFocusedRow(null),
+          },
+          {
+            code: 'Insert',
+            disabled: isAddDisabled || isAdding || isEditing,
+            onAction: () => {
+              editable?.setIsAdding(true);
+              setFocusedRow(null);
+            },
+          },
+          {
+            code: 'Delete',
+            disabled: !dataActions?.isDeletable || isEditing || !focusedRow,
+            onAction: () =>
+              itemDeleteData?.setItemToDeleteUuids(
+                isBulkAction ? Array.from(rowSelect.selectedRows) : [focusedRow!.uuid]
+              ),
+          },
+          {
+            code: 'ArrowLeft',
+            ctrl: true,
+            disabled: isEditing || isAdding,
+            onAction: () =>
+              footer!.paginationControl!.offset > 0 &&
+              footer!.paginationControl!.setOffset(footer!.paginationControl!.offset - 1),
+          },
+          {
+            code: 'ArrowRight',
+            ctrl: true,
+            disabled: isEditing || isAdding,
+            onAction: () => {
+              if (
+                footer?.noTotalRows
+                  ? footer!.paginationControl!.limit <= footer!.totalRows!
+                  : footer!.paginationControl!.offset + 1 <
+                    Math.ceil(footer!.totalRows! / footer!.paginationControl!.limit)
+              ) {
+                footer!.paginationControl!.setOffset(
+                  footer!.paginationControl!.offset + 1
+                );
+              }
+            },
+          },
+          {
+            code: 'Space',
+            disabled:
+              !dataActions?.hasItemActions || !focusedRow?.uuid || isEditing || isAdding,
+            onAction: () => {
+              const rowUuid = focusedRow?.uuid!;
+              const isRowSelected = rowSelect?.selectedRows.has(rowUuid);
+              rowSelect?.setSelectedRows(oldSet => {
+                const newSet = new Set(oldSet);
+                newSet[isRowSelected ? 'delete' : 'add'](rowUuid);
+                return newSet;
+              });
+            },
+          },
+        ];
+
+        allActions.forEach(action => {
+          if (
+            !action.disabled &&
+            action.code === event.code &&
+            !!action.ctrl === (event.ctrlKey || event.metaKey)
+          ) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (
+              action.onBulkAction &&
+              dataActions?.hasItemActions &&
+              rowSelect?.selectedRows &&
+              rowSelect.selectedRows.size > 0
+            ) {
+              action.onBulkAction(Array.from(rowSelect.selectedRows));
+            } else {
+              action.onAction();
+            }
+          }
+        });
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [
+    data,
+    editable,
+    keyboard,
+    dataActions?.hasItemActions,
+    dataActions?.isDeletable,
+    itemDeleteData,
+    focusedRow,
+    footer,
+    rowSelect,
+  ]);
+  return {
+    focusedRow,
+    // handleKeyDown,
+  };
+};