@inceptionbg/iui 2.0.35 → 2.0.36

package/idea/Table/Table.tsx

@@ -1,528 +0,0 @@
-import clsx from 'clsx';
-import type { FC} from 'react';
-import { Fragment, useEffect, useState } from 'react';
-import type {
-  ITable,
-  ITableColumn,
-  ITableDataItem,
-  ITableSelectedActions,
-} from '../../types/ITable';
-import { Loader } from '../Loader/Loader';
-import { Tooltip } from '../Tooltip/Tooltip';
-import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
-import { TableFooter } from './Components/TableFooter';
-import { HeaderTable } from './Components/Header/TableHeader';
-import { TableOptions } from './Components/TableOptions';
-import { useTranslation } from 'react-i18next';
-import { Checkbox } from '../Inputs/Checkbox';
-import { Menu } from '../Menu/Menu';
-import { faEllipsisVertical } from '../../assets/icons/solid/faEllipsisVertical';
-import { MenuItem } from '../Menu/MenuItem';
-import { Button } from '../Button/Button';
-import { useTableKeyboard } from './hooks/useTableKeyboard';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus } from '../../assets/icons/solid/faPlus';
-
-export const Table: FC<ITable> = ({
-  columns,
-  setColumns,
-  withColumnsSearch,
-  customHeader,
-  data: tableData,
-  sumRows,
-  isLoading,
-  headerWrap,
-  serverSidePagination,
-  customPagination,
-  selectedRowUuid,
-  footerAction,
-  hideFooter,
-  noTotalRows,
-  showLastBorder,
-  className,
-  filterData,
-  sortData,
-  printData,
-  customPrintData,
-  templates,
-  additionsalOptions,
-  rowSelect,
-  rowHeight = 'm',
-  maxHeight,
-  editable,
-  keyboard,
-}) => {
-  const [limit, setLimit] = useState(customPagination?.defaultLimit ?? 5);
-  const [offset, setOffset] = useState(0);
-  const [cols, setCols] = useState<ITableColumn[]>([]);
-  const [data, setData] = useState<ITableDataItem[]>([]);
-  const [extendedRow, setExtendedRow] = useState('');
-  const [editableData, setEditableData] = useState<object>({});
-  const [isAdding, setIsAdding] = useState(false);
-  const [selectedActionOpen, setSelectedActionOpen] = useState(false);
-  const [activeSelectOptions, setActiveSelectOptions] = useState<ITableSelectedActions[]>(
-    []
-  );
-
-  const { t } = useTranslation();
-
-  const pagination = {
-    limit: serverSidePagination?.limit ?? limit,
-    offset: serverSidePagination?.offset ?? offset,
-    setLimit: serverSidePagination?.setLimit ?? setLimit,
-    setOffset: serverSidePagination?.setOffset ?? setOffset,
-    totalRows: serverSidePagination?.totalRows ?? tableData.length,
-  };
-
-  const focusedRow = useTableKeyboard({
-    enabled: !!keyboard?.enabled,
-    rows: data,
-    selected: {
-      enabled: !!rowSelect && activeSelectOptions.length > 0,
-      rows: rowSelect?.selectedRows ?? new Set<string>(),
-      resetSelected: () => rowSelect?.setSelectedRows(new Set<string>()),
-    },
-    actions: {
-      moveDisabled: !!keyboard?.actions?.moveDisabled || isAdding,
-      ...keyboard?.actions,
-      add: {
-        isAdding,
-        setIsAdding,
-        enabled: !!editable?.EditableRow && !editable.addDisabled,
-      },
-      edit: {
-        item: editable?.selectedItem,
-        setItem: editable?.setSelectedItem!,
-        enabled:
-          !!editable && !!editable!.setSelectedItem && !keyboard?.actions.editDisabled,
-      },
-      additional: additionalProps => [
-        ...(keyboard?.actions?.additional?.(additionalProps) || []),
-        {
-          key: 'PageUp',
-          isActive: !additionalProps.isEditing,
-          onAction: () =>
-            pagination.offset > 0 && pagination.setOffset(pagination.offset - 1),
-        },
-        {
-          key: 'PageDown',
-          isActive: !additionalProps.isEditing,
-          onAction: () => {
-            if (
-              noTotalRows
-                ? pagination.limit <= pagination.totalRows
-                : pagination.offset + 1 <
-                  Math.ceil(pagination.totalRows / pagination.limit)
-            ) {
-              pagination.setOffset(pagination.offset + 1);
-            }
-          },
-        },
-        {
-          key: ' ',
-          isActive: activeSelectOptions.length > 0 && !!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;
-            });
-          },
-        },
-      ],
-    },
-  });
-
-  // Set Active Select Options
-  useEffect(() => {
-    rowSelect?.actions.length &&
-      setActiveSelectOptions(rowSelect.actions.filter(e => !e.hidden) || []);
-  }, [rowSelect?.actions]);
-
-  useEffect(
-    () => {
-      // Active Column
-      const activeColumns = columns.filter(e => !e.hidden && !e.unavailable);
-
-      // Select Column
-      let selectCol;
-      if (rowSelect && activeSelectOptions.length > 0) {
-        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;
-        selectCol = {
-          id: 'select',
-          label: (
-            <Checkbox
-              value={selectedSome ? 'middle' : selectedAll}
-              // label={`${selected.size}`}
-              setValue={() => {
-                selectedAll
-                  ? rowSelect.setSelectedRows(new Set<string>())
-                  : rowSelect.setSelectedRows(oldValue => {
-                      let newSet = new Set(oldValue);
-                      selectableData.forEach(e => newSet.add(e.uuid!));
-                      return newSet;
-                    });
-              }}
-            />
-          ),
-          width: '50px',
-        };
-      }
-
-      let newCols: ITableColumn[] = [];
-
-      selectCol && newCols.push(selectCol);
-      newCols = newCols.concat(activeColumns);
-
-      setCols(newCols);
-    },
-    // eslint-disable-next-line
-    [
-      columns,
-      editable,
-      rowSelect?.selectedRows,
-      activeSelectOptions,
-      serverSidePagination,
-    ]
-  );
-
-  useEffect(() => {
-    // const data = editable
-    //   ? tableData.map((e) => ({
-    //       ...e,
-    //       cells: {
-    //         ...e.cells,
-    //         actions: {
-    //           value: (
-    //             <ItemActionsMenu
-    //               item={e}
-    //               setSelectedItem={editable!.setSelectedItem}
-    //             />
-    //           ),
-    //         },
-    //       },
-    //     }))
-    //   : tableData;
-    const data =
-      serverSidePagination || limit <= 0
-        ? tableData
-        : tableData.slice(offset * limit, offset * limit + limit);
-
-    rowSelect &&
-      activeSelectOptions.length > 0 &&
-      data.map(
-        e =>
-          (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,
-          })
-      );
-    setData(data);
-  }, [
-    tableData,
-    limit,
-    offset,
-    rowSelect?.selectedRows,
-    activeSelectOptions,
-    serverSidePagination,
-    rowSelect,
-  ]);
-
-  const EditableRow = editable?.EditableRow;
-
-  return (
-    <Loader isLoading={!!isLoading}>
-      <div
-        className={clsx('iui-table', className, {
-          'pb-3': data.length === 0,
-        })}
-      >
-        <div className="flex column gap-2">
-          {(!!filterData ||
-            !!sortData ||
-            !!setColumns ||
-            !!printData ||
-            !!customPrintData) && (
-            <TableOptions
-              columns={cols}
-              columnsData={
-                setColumns
-                  ? { columns, setColumns, withSearch: withColumnsSearch }
-                  : undefined
-              }
-              filterData={filterData}
-              sortData={sortData}
-              printData={printData}
-              customPrintData={customPrintData}
-              templates={templates}
-              additionsalOptions={additionsalOptions}
-            />
-          )}
-          {/* ////// SELECT ////// */}
-          {!!rowSelect && activeSelectOptions.length > 0 && (
-            <div className="flex gap-2 align-center pl-3">
-              <p className="fs-12">{`${t('Selected')}: ${
-                rowSelect.selectedRows.size
-              }`}</p>
-              <Menu
-                isOpen={selectedActionOpen}
-                onClose={() => setSelectedActionOpen(false)}
-                placement="bottom-left"
-                renderButton={ref => (
-                  <Button
-                    ref={ref}
-                    label={t('Actions')}
-                    icon={faEllipsisVertical}
-                    active={selectedActionOpen}
-                    disabled={!rowSelect.selectedRows.size}
-                    onClick={() => setSelectedActionOpen(!selectedActionOpen)}
-                    size="s"
-                  />
-                )}
-              >
-                {activeSelectOptions.map(action => (
-                  <MenuItem
-                    key={action.label}
-                    label={action.label}
-                    disabled={action.disabled}
-                    onClick={() => {
-                      action.onClick!(rowSelect.selectedRows);
-                      setSelectedActionOpen(false);
-                      action.clearSelected &&
-                        rowSelect.setSelectedRows(new Set<string>());
-                    }}
-                  />
-                ))}
-              </Menu>
-            </div>
-          )}
-        </div>
-        <div className="table-container" style={{ maxHeight }}>
-          <ConditionalWrapper
-            condition={!!editable}
-            wrapper={children => (
-              <form
-                onSubmit={e => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  editable!.onSubmit(editableData, () => {
-                    !editable?.keepEditOnSubmit &&
-                      editable!.inputFocusRef?.current?.focus();
-                    if (!editable?.selectedItem || !editable?.keepEditOnSubmit) {
-                      setEditableData(editable!.defaultDataValue ?? {});
-                      editable?.setSelectedItem && editable.setSelectedItem(null);
-                    }
-                  });
-                }}
-              >
-                {children}
-              </form>
-            )}
-          >
-            <table className="full-width">
-              <HeaderTable
-                columns={cols}
-                headerWrap={headerWrap}
-                customHeader={customHeader}
-                sticky={!!maxHeight}
-              />
-              <tbody
-                className={clsx({ 'no-last-border': hideFooter && !showLastBorder })}
-              >
-                {data.length ? (
-                  <>
-                    {data.map(row => {
-                      const isExtended =
-                        row.extendable &&
-                        !row.extendable.isLoading &&
-                        extendedRow === row.uuid;
-                      return (
-                        <Fragment key={row.uuid}>
-                          {/* ////// EDITABLE ROW ////// */}
-                          {!!EditableRow &&
-                          row.uuid === editable?.selectedItem?.uuid &&
-                          editable.setSelectedItem ? (
-                            <EditableRow
-                              columns={cols}
-                              data={editableData}
-                              setData={setEditableData}
-                              item={editable.selectedItem}
-                              clearItem={() => editable.setSelectedItem!(null)}
-                              defaultDataValue={editable.defaultDataValue}
-                              inputFocusRef={editable.inputFocusRef}
-                            />
-                          ) : (
-                            ////// REGULAR ROW //////
-                            <tr
-                              data-id={row.uuid}
-                              className={clsx(row.className, {
-                                selected:
-                                  !!selectedRowUuid && selectedRowUuid === row.uuid,
-                                clickable: !!row.onRowClick || !!row.extendable,
-                                focused: !!focusedRow && focusedRow.uuid === row.uuid,
-                                loading: row.extendable?.isLoading,
-                              })}
-                              onClick={e => {
-                                row.onRowClick && row.onRowClick(e);
-                                row.extendable &&
-                                  setExtendedRow(
-                                    extendedRow === row.uuid ? '' : row.uuid
-                                  );
-                              }}
-                            >
-                              {cols.map(column => {
-                                const cell = row.cells[column.id];
-                                return (
-                                  <Tooltip
-                                    key={column.id}
-                                    label={cell?.tooltip!}
-                                    position="top"
-                                    disabled={!cell?.tooltip}
-                                  >
-                                    <td
-                                      data-th={
-                                        column.id === 'select'
-                                          ? t('Selected') + ':'
-                                          : column.label
-                                          ? column.label + ': '
-                                          : '/'
-                                      }
-                                      align={cell?.align || column.align}
-                                      onClick={
-                                        cell?.onClick || cell?.unclickable
-                                          ? e => {
-                                              e.stopPropagation();
-                                              cell?.onClick && cell?.onClick!(e);
-                                            }
-                                          : undefined
-                                      }
-                                      className={clsx(
-                                        column.color,
-                                        cell?.className,
-                                        rowHeight,
-                                        {
-                                          link: cell?.link,
-                                          'p-0': !cell?.value && cell?.value !== 0,
-                                          'clickable-column': cell?.onClick,
-                                          'word-break': column.break,
-                                          'no-border': isExtended,
-                                        }
-                                      )}
-                                      colSpan={cell?.span}
-                                    >
-                                      {cell?.value}
-                                    </td>
-                                  </Tooltip>
-                                );
-                              })}
-                            </tr>
-                          )}
-                          {/* ////// EXTENDABLE ROW ////// */}
-                          {isExtended && (
-                            <tr>
-                              <td colSpan={cols.length} className={rowHeight}>
-                                {row.extendable!.element}
-                              </td>
-                            </tr>
-                          )}
-                        </Fragment>
-                      );
-                    })}
-                  </>
-                ) : (
-                  <tr>
-                    <td className="no-border" colSpan={cols.length}>
-                      {t('NoResults')}
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-              <tfoot
-              // className="sticky-footer"
-              >
-                {!!EditableRow &&
-                  !editable.selectedItem &&
-                  !editable.addDisabled &&
-                  // TO DO -> Remove keyboard condition to enable this for every table
-                  (keyboard?.enabled && !isAdding ? (
-                    ////// NEW ITEM ROW //////
-                    <tr
-                      data-id="add"
-                      className={`clickable${
-                        focusedRow?.uuid === 'add' ? ' focused' : ''
-                      }`}
-                      onClick={() => setIsAdding(true)}
-                    >
-                      <td className={`text-center ${rowHeight}`} colSpan={columns.length}>
-                        <div className="flex center gap-2">
-                          <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
-                          <p>{editable.addLabel || t('AddItem')}</p>
-                        </div>
-                      </td>
-                    </tr>
-                  ) : (
-                    <EditableRow
-                      columns={cols}
-                      data={editableData}
-                      setData={setEditableData}
-                      defaultDataValue={editable.defaultDataValue}
-                      clearItem={() => {
-                        editable.setSelectedItem?.(null);
-                        isAdding && setIsAdding(false);
-                      }}
-                      inputFocusRef={editable.inputFocusRef}
-                    />
-                  ))}
-                {!!sumRows &&
-                  !!data.length &&
-                  sumRows.map(row => (
-                    <tr key={row.uuid}>
-                      {cols.map(({ id: columnId }) => (
-                        <td
-                          key={columnId}
-                          align={row.cells[columnId]?.align || 'right'}
-                          colSpan={row.cells[columnId]?.span}
-                          className={rowHeight}
-                        >
-                          <strong>{row.cells[columnId]?.value}</strong>
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-              </tfoot>
-            </table>
-          </ConditionalWrapper>
-        </div>
-        {!hideFooter &&
-          (!!data.length ||
-            (noTotalRows && (serverSidePagination?.offset || offset) > 0)) && (
-            <TableFooter
-              customLimit={customPagination?.customLimit}
-              pagination={pagination}
-              footerAction={footerAction}
-              noTotalRows={noTotalRows}
-              dataLength={data.length}
-            />
-          )}
-      </div>
-    </Loader>
-  );
-};

package/idea/Table/hooks/useDefaultTemplate.ts

@@ -1,20 +0,0 @@
-// import { useEffect, useState } from 'react';
-// import { getDefaultReportTemplate } from '../Components/Templates/repo/TemplateRepo';
-// import { IReportTemplate } from '../../../types/ITable';
-
-export const useDefaultTemplate = (identifier?: string) => {
-  //   const [template, setTemplate] = useState<IReportTemplate | null>(null);
-  //   const [isLoading, setIsLoading] = useState(true);
-  //   useEffect(() => {
-  //     if (identifier) {
-  //       getDefaultReportTemplate(identifier)
-  //         .then(setTemplate)
-  //         .catch(() => {})
-  //         .finally(() => setIsLoading(false));
-  //     }
-  //   }, [identifier]);
-  //   return {
-  //     defaultTemplate: template,
-  //     isLoadingDefaultTemplate: !!identifier && isLoading,
-  //   };
-};

package/idea/Table/hooks/useTableKeyboard.ts

@@ -1,137 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { ITableDataItem } from '../../../types/ITable';
-import type { IKeyboardAction, ITableKeyboardActionsProp } from '../../../types/IKeyboard';
-import { useDialogObserver } from '../../Dialog/hooks/useDialogObserver';
-import { scrollToRow } from '../../../utils/tableUtils';
-
-export const useTableKeyboard = ({
-  enabled,
-  rows,
-  selected,
-  actions,
-}: {
-  enabled: boolean;
-  rows: ITableDataItem[];
-  selected: {
-    enabled: boolean;
-    rows: Set<string>;
-    resetSelected: () => void;
-  };
-  actions: ITableKeyboardActionsProp;
-}) => {
-  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
-  const isDialogOpen = useDialogObserver();
-
-  useEffect(() => {
-    if (enabled && !isDialogOpen) {
-      const isEditing = !!actions.edit?.item;
-      const isAdding = !!actions.add?.isAdding;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        const isControlKeyPressed = event.ctrlKey || event.metaKey;
-        const rowIndex = focusedRow
-          ? rows.findIndex(row => row.uuid === focusedRow.uuid)
-          : -1;
-
-        const allActions: IKeyboardAction[] = [
-          {
-            key: 'ArrowDown',
-            disabled: isEditing || actions.moveDisabled,
-            onAction: () => {
-              // Leave action enabled to prevent default scroll movement
-              const nextRow = rowIndex + 1;
-              if (nextRow < rows.length) {
-                // rowIndex will be -1 if no row is selected so the next row will be 0
-                setFocusedRow(rows[nextRow]);
-                scrollToRow(rows[nextRow].uuid);
-              }
-            },
-          },
-          {
-            key: 'ArrowUp',
-            disabled: isEditing || actions.moveDisabled,
-            onAction: () => {
-              if (rowIndex !== 0) {
-                const prevRow = rowIndex > 0 ? rowIndex - 1 : rows.length - 1;
-                setFocusedRow(rows[prevRow]);
-                scrollToRow(rows[prevRow].uuid);
-              }
-            },
-          },
-          {
-            key: 'e',
-            normalizedKey: true,
-            ctrl: true,
-            disabled: !actions.edit?.enabled || !focusedRow,
-            onAction: () => !isEditing && actions.edit?.setItem(focusedRow?.item ?? null),
-          },
-          {
-            key: 'Enter',
-            disabled: isEditing || isAdding || !focusedRow?.onRowClick,
-            onAction: focusedRow?.onRowClick!,
-          },
-          {
-            key: 'Escape',
-            disabled: !focusedRow && !isAdding,
-            onAction: () =>
-              isAdding
-                ? actions.add?.setIsAdding(false)
-                : actions.edit?.item
-                ? actions.edit?.setItem(null)
-                : setFocusedRow(null),
-          },
-          ...['Insert', '+'].map(
-            key =>
-              ({
-                key,
-                disabled: !actions.add?.enabled || isAdding || isEditing,
-                onAction: () => {
-                  actions.add?.setIsAdding(true);
-                  setFocusedRow(null);
-                },
-              } as IKeyboardAction)
-          ),
-          {
-            key: 'Delete',
-            disabled: isEditing || !actions.delete?.enabled || !focusedRow,
-            onAction: () =>
-              actions.delete?.onAction ??
-              actions.delete?.setItemToDeleteUuids(
-                selected.enabled && selected.rows && selected.rows.size > 0
-                  ? Array.from(selected.rows)
-                  : [focusedRow!.uuid]
-              ),
-          },
-          ...(actions?.additional?.({
-            focusedRow,
-            isEditing,
-            isAdding,
-          }) || []),
-        ];
-
-        allActions.forEach(item => {
-          if (
-            !item.disabled &&
-            item.key === (item.normalizedKey ? event.key.toLowerCase() : event.key) &&
-            !!item.ctrl === isControlKeyPressed
-          ) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (item.onBulkAction && selected?.enabled && selected.rows.size > 0) {
-              item.onBulkAction(Array.from(selected.rows));
-            } else {
-              item.onAction();
-            }
-          }
-        });
-      };
-
-      window.addEventListener('keydown', handleKeyDown);
-      return () => {
-        window.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [enabled, rows, focusedRow, actions, isDialogOpen, selected.enabled, selected.rows]);
-
-  return focusedRow;
-};

package/idea/Table/hooks/useTableSelect.ts

@@ -1,11 +0,0 @@
-import { useState } from 'react';
-
-export const useTableSelect = () => {
-  const [selectedRows, setSelectedRows] = useState(new Set<string>());
-
-  return {
-    selectedRows,
-    setSelectedRows,
-    resetSelectedRows: () => setSelectedRows(new Set<string>()),
-  };
-};