@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Table/contexts/TableContext.tsx

@@ -1,123 +1,116 @@
-import {
-  Dispatch,
-  ReactNode,
-  SetStateAction,
-  createContext,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  IPaginationControl,
-  ITable,
-  ITableColumnsData,
-  ITableDataActions,
-  ITableEdit,
-  ITableSelectedAction,
-} from '../../../types/ITable';
-import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
-import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
-import { useTranslation } from 'react-i18next';
-
-interface ITableContext<T = unknown> extends ITable<T> {
-  columnData: ITableColumnsData;
-  selectActions: ITableSelectedAction[];
-  dataActions?: ITableDataActions<T> & {
-    hasItemActions: boolean;
-    isEditable: boolean;
-    isDeletable: boolean;
-  };
-  editable?: ITableEdit<T> & {
-    isAdding: boolean;
-    setIsAdding: Dispatch<SetStateAction<boolean>>;
-  };
-  footer?: ITable['footer'] & {
-    paginationControl: IPaginationControl;
-    noTotalRows: boolean;
-  };
-}
-
-const TableContext = createContext<ITableContext<any>>({
-  columnData: { columns: [], defaultColumns: [] },
-  data: [],
-  selectActions: [],
-});
-
-export const TableProvider = <T,>({
-  columnData,
-  data: initialData,
-  dataActions,
-  editable,
-  footer,
-  children,
-  rowSelect,
-  ...rest
-}: ITable<T> & { children: ReactNode }) => {
-  const { t } = useTranslation();
-  const [isAdding, setIsAdding] = useState(false);
-
-  const selectActions = useMemo(() => {
-    const actions = (rowSelect?.actions ?? []).filter(e => !e.hidden);
-    if (rest.itemDeleteData?.hasAccess) {
-      actions.push({
-        label: t('Delete'),
-        onClick: e => rest.itemDeleteData!.setItemToDeleteUuids([...e]),
-      });
-    }
-    return actions;
-  }, [rowSelect?.actions, rest.itemDeleteData, t]);
-
-  const updatedDataActions = useMemo(() => {
-    const isEditable = Boolean(dataActions?.hasEditAccess);
-    const isDeletable = Boolean(rest.itemDeleteData?.hasAccess);
-
-    const hasCustomActions = initialData.some(({ item }) => {
-      const actions = dataActions?.actions?.(item).filter(e => e.hasAccess) ?? [];
-      return actions.length > 0;
-    });
-
-    return {
-      hasEditAccess: isEditable,
-      actions: dataActions?.actions,
-      hasItemActions: isEditable || isDeletable || hasCustomActions,
-      isEditable,
-      isDeletable,
-    };
-  }, [dataActions, initialData, rest.itemDeleteData?.hasAccess]);
-
-  const localPagination = useLocalTablePagination({
-    defaultLimit: footer?.customPagination?.defaultLimit,
-  });
-  const data = useLocalTableData<T>({
-    initialData,
-    localPagination,
-    controledPagination: !!footer?.paginationControl,
-    dataActions: updatedDataActions,
-    isDeletable: updatedDataActions.isDeletable,
-    rowSelect,
-  });
-
-  const tableContextValue: ITableContext<T> = {
-    ...rest,
-    data,
-    dataActions: updatedDataActions,
-    columnData,
-    selectActions,
-    rowSelect,
-  };
-
-  if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };
-  if (footer)
-    tableContextValue.footer = {
-      ...footer,
-      paginationControl: footer?.paginationControl ?? localPagination,
-      totalRows: footer?.totalRows ?? initialData?.length ?? 0,
-      noTotalRows: footer?.totalRows === undefined,
-    };
-
-  return (
-    <TableContext.Provider value={tableContextValue}>{children}</TableContext.Provider>
-  );
-};
-
-export const useTableContext = () => useContext(TableContext);
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type {
+  IPaginationControl,
+  ITable,
+  ITableColumnsData,
+  ITableDataActions,
+  ITableEdit,
+  ITableSelectedAction,
+} from '../../../types/ITable';
+import { createContext, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocalTableData } from '../hooks/localHooks/useLocalTableData';
+import { useLocalTablePagination } from '../hooks/localHooks/useLocalTablePagination';
+
+interface ITableContext<T = unknown> extends ITable<T> {
+  columnData: ITableColumnsData;
+  selectActions: ITableSelectedAction[];
+  dataActions?: ITableDataActions<T> & {
+    hasItemActions: boolean;
+    isEditable: boolean;
+    isDeletable: boolean;
+  };
+  editable?: ITableEdit<T> & {
+    isAdding: boolean;
+    setIsAdding: Dispatch<SetStateAction<boolean>>;
+  };
+  footer?: ITable['footer'] & {
+    paginationControl: IPaginationControl;
+    noTotalRows: boolean;
+  };
+}
+
+const TableContext = createContext<ITableContext<any>>({
+  columnData: { columns: [], defaultColumns: [] },
+  data: [],
+  selectActions: [],
+});
+
+export const TableProvider = <T,>({
+  columnData,
+  data: initialData,
+  dataActions,
+  editable,
+  footer,
+  children,
+  rowSelect,
+  ...rest
+}: ITable<T> & { children: ReactNode }) => {
+  const { t } = useTranslation();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const selectActions = useMemo(() => {
+    const actions = (rowSelect?.actions ?? []).filter(e => !e.hidden);
+    if (rest.itemDeleteData?.hasAccess) {
+      actions.push({
+        label: t('Delete'),
+        onClick: e => rest.itemDeleteData!.setItemToDeleteUuids([...e]),
+      });
+    }
+    return actions;
+  }, [rowSelect?.actions, rest.itemDeleteData, t]);
+
+  const updatedDataActions = useMemo(() => {
+    const isEditable = Boolean(dataActions?.hasEditAccess);
+    const isDeletable = Boolean(rest.itemDeleteData?.hasAccess);
+
+    const hasCustomActions = initialData.some(({ item }) => {
+      const actions = dataActions?.actions?.(item).filter(e => e.hasAccess) ?? [];
+      return actions.length > 0;
+    });
+
+    return {
+      hasEditAccess: isEditable,
+      actions: dataActions?.actions,
+      hasItemActions: isEditable || isDeletable || hasCustomActions,
+      isEditable,
+      isDeletable,
+    };
+  }, [dataActions, initialData, rest.itemDeleteData?.hasAccess]);
+
+  const localPagination = useLocalTablePagination({
+    defaultLimit: footer?.customPagination?.defaultLimit,
+  });
+  const data = useLocalTableData<T>({
+    initialData,
+    localPagination,
+    controledPagination: !!footer?.paginationControl,
+    dataActions: updatedDataActions,
+    isDeletable: updatedDataActions.isDeletable,
+    rowSelect,
+  });
+
+  const tableContextValue: ITableContext<T> = {
+    ...rest,
+    data,
+    dataActions: updatedDataActions,
+    columnData,
+    selectActions,
+    rowSelect,
+  };
+
+  if (editable) tableContextValue.editable = { ...editable, isAdding, setIsAdding };
+  if (footer)
+    tableContextValue.footer = {
+      ...footer,
+      paginationControl: footer?.paginationControl ?? localPagination,
+      totalRows: footer?.totalRows ?? initialData?.length ?? 0,
+      noTotalRows: footer?.totalRows === undefined,
+    };
+
+  return (
+    <TableContext.Provider value={tableContextValue}>{children}</TableContext.Provider>
+  );
+};
+
+export const useTableContext = () => useContext(TableContext);

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

@@ -1,70 +1,70 @@
-import { useMemo } from 'react';
-import { ITableColumn } from '../../../../types/ITable';
-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 { useEffect, useState } from 'react';
-import {
-  IPaginationControl,
-  ITable,
-  ITableDataActions,
-  ITableDataItem,
-} from '../../../../types/ITable';
-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;
+};