@inceptionbg/iui 2.0.7 → 2.0.10

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

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { ITable, ITableColumn } from '../../../../types/ITable';
+import { useTranslation } from 'react-i18next';
+import { Checkbox } from '../../../Inputs/Checkbox';
+
+interface Props {
+  initialColumns: ITableColumn[];
+  hasSelect: boolean;
+  data: ITable['data'];
+  rowSelect: ITable['rowSelect'];
+  hasItemActions?: boolean;
+}
+
+export const useLocalTableColumns = ({
+  initialColumns,
+  hasSelect,
+  data,
+  rowSelect,
+  hasItemActions,
+}: Props) => {
+  const [columns, setColumns] = useState<ITableColumn[]>([]);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const activeColumns = initialColumns.filter(e => !e.hidden && !e.unavailable);
+
+    let newCols: ITableColumn[] = [];
+
+    // Select Column
+    if (hasSelect && rowSelect) {
+      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(activeColumns);
+    hasItemActions &&
+      newCols.push({
+        id: 'actions',
+        label: t('Actions'),
+        align: 'center',
+        className: 'actions-col',
+      });
+
+    setColumns(newCols);
+  }, [initialColumns, hasSelect, data, rowSelect, hasItemActions, t]);
+
+  return { columns, setColumns };
+};

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

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { IPaginationControl, ITable, ITableDataItem } from '../../../../types/ITable';
+import { Checkbox } from '../../../Inputs/Checkbox';
+import { TableItemActions } from '../../components/items/TableItemActions';
+
+interface Props {
+  initialData: ITableDataItem[];
+  controledPagination: boolean;
+  localPagination: IPaginationControl;
+  dataActions?: ITable['dataActions'];
+  rowSelect: ITable['rowSelect'];
+}
+
+export const useLocalTableData = ({
+  initialData,
+  controledPagination,
+  localPagination,
+  dataActions,
+  rowSelect,
+}: Props) => {
+  const [data, setData] = useState<ITableDataItem[]>(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?.filter(e => e.hasAccess) ?? [];
+    const withActions = Boolean(
+      dataActions?.edit?.hasAccess ||
+        dataActions?.delete?.hasAccess ||
+        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,
+    dataActions,
+  ]);
+
+  return { data };
+};

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

@@ -0,0 +1,173 @@
+import { useEffect, useState } from 'react';
+import { ITableDataItem } from '../../../../types/ITable';
+import { IKeyboardAction } from '../../../../types/IKeyboard';
+import { scrollToRow } from '../../../../utils/tableUtils';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const useLocalTableKeyboard = () => {
+  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
+
+  const { keyboard, data, editable, 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?.item ?? null);
+            },
+          },
+          {
+            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: isEditing || !keyboard?.actions.delete?.enabled || !focusedRow,
+            onAction: () =>
+              keyboard?.actions.delete?.onAction ??
+              keyboard?.actions.delete?.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,
+            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,
+    focusedRow,
+    footer,
+    rowSelect,
+  ]);
+  return {
+    focusedRow,
+    // handleKeyDown,
+  };
+};

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

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+interface Props {
+  defaultLimit?: number;
+}
+
+export const useLocalTablePagination = ({ defaultLimit }: Props) => {
+  const [limit, setLimit] = useState(defaultLimit ?? 5);
+  const [offset, setOffset] = useState(0);
+
+  return { limit, offset, setLimit, setOffset };
+};

package/src/components/Table/hooks/useTableEdit.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { ITableEdit } from '../../../types/ITable';
+import { deleteProps, hasValue } from '../../../utils/objectUtils';
+import { Select } from '../../Inputs/Selects/Select';
+import { TextInput } from '../../Inputs/TextInput';
+import { DateInput } from '../../Inputs/DateInput/DateInput';
+
+interface BaseItemProps<T> {
+  id: keyof T;
+  placeholder?: string;
+  required?: boolean;
+  additionalClearIds?: (keyof T)[];
+}
+interface SelectProps<T> extends BaseItemProps<T> {
+  options: readonly (string | boolean)[] | (string | boolean)[];
+  formatOption: (value: string | boolean) => {
+    value: string | boolean;
+    label: string;
+  };
+}
+
+export const useTableEdit = <T extends Record<string, any>>() => {
+  const [selectedItem, setSelectedItem] = useState<T | null>(null);
+  const [editData, setEditData] = useState<Partial<T>>({});
+
+  // Text
+  const textEditCell = ({
+    placeholder,
+    required,
+    id,
+    additionalClearIds = [],
+  }: BaseItemProps<T>) => ({
+    value: (
+      <TextInput
+        placeholder={placeholder}
+        required={required}
+        value={editData[id]}
+        setValue={e =>
+          setEditData(e ? { ...editData, [id]: e } : deleteProps(editData as T, [id]))
+        }
+        onClear={() => deleteProps(editData as T, [id, ...additionalClearIds])}
+      />
+    ),
+  });
+
+  // Date
+  const dateEditCell = ({
+    id,
+    required,
+    additionalClearIds,
+  }: Omit<BaseItemProps<T>, 'placeholder'>) => ({
+    value: (
+      <DateInput
+        required={required}
+        date={editData[id]}
+        setDate={e => setEditData({ ...editData, [id]: e })}
+        onClear={
+          additionalClearIds
+            ? () => setEditData(deleteProps(editData as T, additionalClearIds))
+            : undefined
+        }
+      />
+    ),
+  });
+
+  // Select
+  const selectEditCell = ({
+    id,
+    placeholder,
+    required,
+    options,
+    formatOption,
+    additionalClearIds = [],
+  }: SelectProps<T>) => ({
+    value: (
+      <Select
+        required={required}
+        placeholder={placeholder}
+        value={hasValue(editData[id]) ? formatOption(editData[id]!) : null}
+        options={options.map(formatOption)}
+        minWidth={150}
+        onChange={e => {
+          e
+            ? setEditData({
+                ...editData,
+                [id]: e.value,
+              })
+            : setEditData(deleteProps(editData as T, [id, ...additionalClearIds]));
+        }}
+        isClearable
+      />
+    ),
+  });
+
+  const returnEditable: Pick<
+    ITableEdit<T>,
+    'selectedItem' | 'setSelectedItem' | 'editData' | 'setEditData'
+  > = {
+    selectedItem,
+    setSelectedItem,
+    editData,
+    setEditData,
+  };
+
+  return {
+    editable: returnEditable,
+    textEditCell,
+    dateEditCell,
+    selectEditCell,
+  };
+};

package/src/components/Table/hooks/useTableFilterFields.tsx

@@ -0,0 +1,150 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Select } from '../../Inputs/Selects/Select';
+import { deleteProps } from '../../../utils/objectUtils';
+import { TextInput } from '../../Inputs/TextInput';
+import { DateInput } from '../../Inputs/DateInput/DateInput';
+
+interface Props<T> {
+  searchData: T;
+  setSearchData: Dispatch<SetStateAction<Partial<T>>>;
+}
+
+interface BaseItemField<T> {
+  id: keyof T;
+  additionalClearIds?: (keyof T)[];
+}
+interface BaseItemProps<T> extends BaseItemField<T> {
+  label: string;
+}
+interface DateFilterProps<T> {
+  label: string;
+  from: BaseItemField<T>;
+  to: BaseItemField<T>;
+}
+interface SelectProps<T> extends BaseItemProps<T> {
+  options: readonly string[] | string[];
+  formatOption: (value: string) => {
+    value: string;
+    label: string;
+  };
+}
+interface BooleanSelectProps<T> extends BaseItemProps<T> {
+  labelTrue?: string;
+  labelFalse?: string;
+}
+
+export const useTableFilterFields = <T extends Record<string, any>>({
+  searchData,
+  setSearchData,
+}: Props<T>) => {
+  const { t } = useTranslation();
+
+  // Text
+  const textFilter = ({ label, id, additionalClearIds = [] }: BaseItemProps<T>) => ({
+    label,
+    field: (
+      <TextInput
+        placeholder={t('AddInput') + '...'}
+        value={searchData[id]}
+        setValue={e => setSearchData({ ...searchData, [id]: e })}
+        onClear={() =>
+          setSearchData(deleteProps(searchData, [id, ...additionalClearIds]))
+        }
+      />
+    ),
+  });
+
+  // Date From - To
+  const dateFilter = ({ label, from, to }: DateFilterProps<T>) => ({
+    label,
+    field: (
+      <div className="flex center full-width gap-2">
+        <DateInput
+          date={searchData[from.id]}
+          setDate={e => setSearchData({ ...searchData, [from.id]: e })}
+          onClear={() =>
+            setSearchData(
+              deleteProps(searchData, [from.id, ...(from.additionalClearIds ?? [])])
+            )
+          }
+        />
+        <p>{t('to')}</p>
+        <DateInput
+          date={searchData[to.id]}
+          setDate={e => setSearchData({ ...searchData, [to.id]: e })}
+          onClear={() =>
+            setSearchData(
+              deleteProps(searchData, [to.id, ...(to.additionalClearIds ?? [])])
+            )
+          }
+          calendarPlacement="bottom-right"
+        />
+      </div>
+    ),
+  });
+
+  // Select
+  const selectFilter = ({ label, id, options, formatOption }: SelectProps<T>) => ({
+    label,
+    field: (
+      <Select
+        placeholder={t('Choose')}
+        isClearable
+        value={searchData[id] ? formatOption(searchData[id]) : null}
+        options={options.map(formatOption)}
+        onChange={data => {
+          data
+            ? setSearchData({
+                ...searchData,
+                [id]: data.value,
+              })
+            : setSearchData(deleteProps(searchData, [id]));
+        }}
+      />
+    ),
+  });
+
+  // Select Boolean
+  const booleanSelectFilter = ({
+    label,
+    id,
+    labelFalse,
+    labelTrue,
+  }: BooleanSelectProps<T>) => ({
+    label,
+    field: (
+      <Select
+        placeholder={t('Choose')}
+        isClearable
+        value={
+          searchData[id] !== undefined
+            ? {
+                value: searchData[id],
+                label: searchData[id] ? (labelTrue ?? t('Yes')) : (labelFalse ?? t('No')),
+              }
+            : null
+        }
+        options={[true, false].map(e => ({
+          value: e,
+          label: e ? (labelTrue ?? t('Yes')) : (labelFalse ?? t('No')),
+        }))}
+        onChange={data => {
+          data
+            ? setSearchData({
+                ...searchData,
+                [id]: data.value,
+              })
+            : setSearchData(deleteProps(searchData, [id]));
+        }}
+      />
+    ),
+  });
+
+  return {
+    textFilter,
+    dateFilter,
+    selectFilter,
+    booleanSelectFilter,
+  };
+};

package/src/components/Table/hooks/useTablePagination.ts

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import { IPagination, IPaginationControl } from '../../../types/ITable';
+
+export const useTablePagination = (defaultLimit: number = 5) => {
+  const [limit, setLimit] = useState(defaultLimit);
+  const [offset, setOffset] = useState(0);
+
+  const pagination: IPagination = { limit, offset };
+  const paginationControl: IPaginationControl = {
+    ...pagination,
+    setLimit,
+    setOffset,
+  };
+
+  return { pagination, paginationControl };
+};

package/src/components/Table/hooks/useTableSearch.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+
+export interface ITableSearchProps<T> {
+  setOffset: Dispatch<SetStateAction<number>>;
+  resetSelectedRows?: () => void;
+  defaultSearch?: T;
+}
+
+export const useTableSearch = <T>({
+  setOffset,
+  resetSelectedRows,
+  defaultSearch = {} as T,
+}: ITableSearchProps<T>) => {
+  const [search, setSearch] = useState<T>(defaultSearch);
+  const [searchData, setSearchData] = useState<T>(defaultSearch);
+
+  const onSearch = (filters: T) => {
+    setOffset(0);
+    resetSelectedRows?.();
+    setSearch(filters);
+  };
+
+  return {
+    search,
+    searchData,
+    setSearchData,
+    onSearch,
+  };
+};

package/src/components/Table/hooks/useTableSort.ts

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import { ITableSort } from '../../../types/ITable';
+
+export const useTableSort = (sortOptions: ITableSort[]) => {
+  const [sort, setSort] = useState('');
+
+  return { sort, setSort, sortOptions };
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -11,7 +11,7 @@ import {
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
-import { rootDir } from '../../utils/RootDir';
+import { rootDir } from '../../utils/rootDir';
 
 export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom';