@inceptionbg/iui 2.0.7 → 2.0.10

package/src/components/Table/Table.tsx

@@ -1,261 +1,60 @@
 import clsx from 'clsx';
-import { FC, Fragment, useEffect, useState } from 'react';
-import {
-  ITable,
-  ITableColumn,
-  ITableDataItem,
-  ITableSelectedActions,
-} from '../../types/ITable';
+import { type FC, Fragment, useState } from 'react';
+import { ITable } 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 { useLocalTableKeyboard } from './hooks/localHooks/useLocalTableKeyboard';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '../../assets/icons/solid/faPlus';
+import { HeaderTable } from './components/header/TableHeader';
+import { TableFooter } from './components/footer/TableFooter';
+import { TableProvider, useTableContext } from './contexts/TableContext';
+import { TableSelect } from './components/select/TableSelect';
+import { TableSort } from './components/sort/TableSort';
+import { TableFilters } from './components/filters/TableFilters';
+import { TableEditRow } from './components/edit/TableEditRow';
 
-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]);
+export const TableContent: FC = () => {
+  const {
+    columns,
+    // setColumns,
+    // withColumnsSearch,
+    data,
+    sumRows,
+    isLoading,
 
-  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,
-    ]
-  );
+    // filterData,
+    selectedRowUuid,
+    // printData,
+    // customPrintData,
+    // templates,
+    // additionsalOptions,
+    footer,
+    className,
+    rowHeight = 'm',
+    maxHeight,
+    editable,
+  } = useTableContext();
 
-  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 [extendedRow, setExtendedRow] = useState('');
 
-  const EditableRow = editable?.EditableRow;
+  const { t } = useTranslation();
+  const { focusedRow } = useLocalTableKeyboard();
+  const noTotalRows = footer?.totalRows === undefined;
 
   return (
     <Loader isLoading={!!isLoading}>
       <div
+        // onKeyDown={handleKeyDown}
         className={clsx('iui-table', className, {
           'pb-3': data.length === 0,
         })}
+        // tabIndex={-1}
       >
-        <div className="flex column gap-2">
-          {(!!filterData ||
+        <div className="iui-table-header-actions">
+          {/* {(!!filterData ||
             !!sortData ||
             !!setColumns ||
             !!printData ||
@@ -274,45 +73,10 @@ export const Table: FC<ITable> = ({
               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>
-          )}
+          )} */}
+          <TableSelect />
+          <TableFilters />
+          <TableSort />
         </div>
         <div className="table-container" style={{ maxHeight }}>
           <ConditionalWrapper
@@ -322,12 +86,10 @@ export const Table: FC<ITable> = ({
                 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);
+                  editable?.onSubmit(editable.editData, () => {
+                    editable.setEditData(editable.defaultDataValue ?? {});
+                    if (!editable.keepEditOnSubmit && editable.selectedItem) {
+                      editable.setSelectedItem(null);
                     }
                   });
                 }}
@@ -337,15 +99,8 @@ export const Table: FC<ITable> = ({
             )}
           >
             <table className="full-width">
-              <HeaderTable
-                columns={cols}
-                headerWrap={headerWrap}
-                customHeader={customHeader}
-                sticky={!!maxHeight}
-              />
-              <tbody
-                className={clsx({ 'no-last-border': hideFooter && !showLastBorder })}
-              >
+              <HeaderTable />
+              <tbody>
                 {data.length ? (
                   <>
                     {data.map(row => {
@@ -356,18 +111,8 @@ export const Table: FC<ITable> = ({
                       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}
-                            />
+                          {!!editable && row.uuid === editable.selectedItem?.uuid ? (
+                            <TableEditRow />
                           ) : (
                             ////// REGULAR ROW //////
                             <tr
@@ -380,14 +125,14 @@ export const Table: FC<ITable> = ({
                                 loading: row.extendable?.isLoading,
                               })}
                               onClick={e => {
-                                row.onRowClick && row.onRowClick(e);
+                                row.onRowClick?.(e);
                                 row.extendable &&
                                   setExtendedRow(
                                     extendedRow === row.uuid ? '' : row.uuid
                                   );
                               }}
                             >
-                              {cols.map(column => {
+                              {columns.map(column => {
                                 const cell = row.cells[column.id];
                                 return (
                                   <Tooltip
@@ -401,8 +146,8 @@ export const Table: FC<ITable> = ({
                                         column.id === 'select'
                                           ? t('Selected') + ':'
                                           : column.label
-                                          ? column.label + ': '
-                                          : '/'
+                                            ? column.label + ': '
+                                            : '/'
                                       }
                                       align={cell?.align || column.align}
                                       onClick={
@@ -414,12 +159,12 @@ export const Table: FC<ITable> = ({
                                           : undefined
                                       }
                                       className={clsx(
+                                        column.className,
                                         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,
@@ -437,7 +182,7 @@ export const Table: FC<ITable> = ({
                           {/* ////// EXTENDABLE ROW ////// */}
                           {isExtended && (
                             <tr>
-                              <td colSpan={cols.length} className={rowHeight}>
+                              <td colSpan={columns.length} className={rowHeight}>
                                 {row.extendable!.element}
                               </td>
                             </tr>
@@ -448,27 +193,22 @@ export const Table: FC<ITable> = ({
                   </>
                 ) : (
                   <tr>
-                    <td className="no-border" colSpan={cols.length}>
-                      {t('NoResults')}
-                    </td>
+                    <td colSpan={columns.length}>{t('NoResults')}</td>
                   </tr>
                 )}
               </tbody>
-              <tfoot
-              // className="sticky-footer"
-              >
-                {!!EditableRow &&
+              <tfoot>
+                {!!editable &&
                   !editable.selectedItem &&
                   !editable.addDisabled &&
-                  // TO DO -> Remove keyboard condition to enable this for every table
-                  (keyboard?.enabled && !isAdding ? (
+                  (!editable.isAdding ? (
                     ////// NEW ITEM ROW //////
                     <tr
                       data-id="add"
-                      className={`clickable${
-                        focusedRow?.uuid === 'add' ? ' focused' : ''
-                      }`}
-                      onClick={() => setIsAdding(true)}
+                      className={clsx('clickable', {
+                        focused: focusedRow?.uuid === 'add',
+                      })}
+                      onClick={() => editable.setIsAdding(true)}
                     >
                       <td className={`text-center ${rowHeight}`} colSpan={columns.length}>
                         <div className="flex center gap-2">
@@ -478,23 +218,13 @@ export const Table: FC<ITable> = ({
                       </td>
                     </tr>
                   ) : (
-                    <EditableRow
-                      columns={cols}
-                      data={editableData}
-                      setData={setEditableData}
-                      defaultDataValue={editable.defaultDataValue}
-                      clearItem={() => {
-                        editable.setSelectedItem?.(null);
-                        isAdding && setIsAdding(false);
-                      }}
-                      inputFocusRef={editable.inputFocusRef}
-                    />
+                    <TableEditRow />
                   ))}
                 {!!sumRows &&
                   !!data.length &&
                   sumRows.map(row => (
                     <tr key={row.uuid}>
-                      {cols.map(({ id: columnId }) => (
+                      {columns.map(({ id: columnId }) => (
                         <td
                           key={columnId}
                           align={row.cells[columnId]?.align || 'right'}
@@ -510,14 +240,14 @@ export const Table: FC<ITable> = ({
             </table>
           </ConditionalWrapper>
         </div>
-        {!hideFooter &&
-          (!!data.length ||
-            (noTotalRows && (serverSidePagination?.offset || offset) > 0)) && (
+        {footer &&
+          (!!data.length || (noTotalRows && footer!.paginationControl!.offset > 0)) && (
             <TableFooter
-              customLimit={customPagination?.customLimit}
-              pagination={pagination}
-              footerAction={footerAction}
+              pagination={footer.paginationControl}
+              totalRows={footer.totalRows}
               noTotalRows={noTotalRows}
+              customLimit={footer.customPagination?.customLimit}
+              footerAction={footer.footerAction}
               dataLength={data.length}
             />
           )}
@@ -525,3 +255,9 @@ export const Table: FC<ITable> = ({
     </Loader>
   );
 };
+
+export const Table: FC<ITable> = props => (
+  <TableProvider {...props}>
+    <TableContent />
+  </TableProvider>
+);

package/src/components/Table/components/edit/TableEditRow.tsx

@@ -0,0 +1,69 @@
+import { FC, useEffect, useRef } from 'react';
+import { ITableDataItem } from '../../../../types/ITable';
+import { IconButton } from '../../../Button/IconButton';
+import { faCheck, faXmark } from '../../../../assets/icons';
+import { useTableContext } from '../../contexts/TableContext';
+import { useGetFocusableElements } from '../../../../hooks/useGetFocusableElements';
+
+export const TableEditRow: FC = () => {
+  const { columns, editable } = useTableContext();
+
+  const elementRef = useRef(null);
+
+  const focusableElements = useGetFocusableElements({
+    elementRef,
+    isOpen: true,
+  });
+
+  useEffect(() => {
+    focusableElements[0]?.focus();
+  }, [focusableElements]);
+
+  useEffect(() => {
+    editable!.setEditData(editable!.selectedItem ?? editable!.defaultDataValue ?? {});
+    // eslint-disable-next-line
+  }, [editable?.setEditData, editable?.selectedItem, editable?.defaultDataValue]);
+
+  let rowCells = {
+    ...editable?.cells,
+    actions: {
+      value: (
+        <div className="flex center gap-1">
+          <IconButton icon={faCheck} size="s" type="submit" />
+          <IconButton
+            icon={faXmark}
+            size="s"
+            onClick={() => {
+              editable?.setEditData(editable?.defaultDataValue || {});
+              if (editable?.isAdding) {
+                editable.setIsAdding(false);
+              } else {
+                editable?.setSelectedItem(null);
+              }
+            }}
+          />
+        </div>
+      ),
+    },
+  };
+
+  const rowData: ITableDataItem = { uuid: editable?.selectedItem?.uuid, cells: rowCells };
+
+  return (
+    <tr ref={elementRef} data-id={rowData.uuid} className="edit-row">
+      {columns.map(
+        column =>
+          !column.hidden && (
+            <td
+              key={column.id}
+              align={column.align}
+              colSpan={rowData.cells[column.id]?.span}
+              className={rowData.cells[column.id]?.className}
+            >
+              {rowData.cells[column.id]?.value ?? ''}
+            </td>
+          )
+      )}
+    </tr>
+  );
+};

package/src/components/Table/components/filters/FilterItem.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { ITableFilterItem } from '../../../../types/ITable';
+
+interface Props {
+  item: ITableFilterItem;
+}
+export const FilterItem: FC<Props> = ({ item }) => (
+  <div className="table-filter-item">
+    {/* Added zero-width non-breaking space symbol (&#8288;)
+          because of losing focus from input field when first letter of the label is pressed. */}
+    {/* <p className="filter-item-label">&#8288;{item.label}</p> */}
+    <p className="filter-item-label">{item.label}</p>
+    {item.field}
+  </div>
+);