@inceptionbg/iui 2.0.5 → 2.0.7

package/idea/Table2/Table.tsx

@@ -0,0 +1,657 @@
+import clsx from 'clsx';
+import { FC, Fragment, useEffect, useState } from 'react';
+import {
+  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 '../../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 '../../icons/solid/faPlus';
+
+import './table.scss';
+
+export const Table: FC<ITable> = ({
+  columns,
+  setColumns,
+  withColumnsSearch,
+  customHeader,
+  data: tableData,
+  totals,
+  isLoading,
+  headerWrap,
+  serverSidePagination,
+  customPagination,
+  selectedRowUuid,
+  footerAction,
+  hideFooter,
+  noTotalRows,
+  showLastBorder,
+  className,
+  filterData,
+  sortData,
+  printData,
+  customPrintData,
+  templates,
+  additionsalOptions,
+  selectedOptions,
+  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 [selected, setSelected] = useState(new Set<string>());
+  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,
+    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);
+            }
+          },
+        },
+      ],
+    },
+  });
+
+  // Set Active Select Options
+  useEffect(() => {
+    selectedOptions?.actions.length &&
+      setActiveSelectOptions(selectedOptions.actions.filter(e => !e.hidden) || []);
+  }, [selectedOptions?.actions]);
+
+  // Reset Selected Rows
+  useEffect(() => {
+    if (selectedOptions?.resetSelect) {
+      setSelected(new Set<string>());
+    }
+  }, [selectedOptions?.resetSelect]);
+
+  useEffect(() => {
+    // Active Column
+    const activeColumns = columns.filter(e => !e.hidden && !e.unavailable);
+
+    // Select Column
+    let selectCol;
+    if (activeSelectOptions.length) {
+      const selectableData = data.filter(e => !e.disableSelect);
+      const selectedSome =
+        !!selected.size && selectableData.some(e => !selected.has(e.uuid));
+      const selectedAll = !!selected.size && !selectedSome;
+      selectCol = {
+        id: 'select',
+        label: (
+          <Checkbox
+            value={selectedSome ? 'middle' : selectedAll}
+            // label={`${selected.size}`}
+            setValue={e => {
+              selectedAll
+                ? setSelected(new Set())
+                : setSelected(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);
+  }, [columns, editable, selected, 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);
+
+    activeSelectOptions.length &&
+      data.map(
+        e =>
+          (e.cells.select = {
+            value: (
+              <Checkbox
+                value={selected.has(e.uuid!)}
+                setValue={checked => {
+                  setSelected(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, selected, activeSelectOptions, serverSidePagination]);
+
+  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 ////// */}
+          {!!activeSelectOptions?.length && (
+            <div className="flex gap-2 align-center pl-3">
+              <p className="fs-12">{`${t('Selected')}: ${selected.size}`}</p>
+              <Menu
+                isOpen={selectedActionOpen}
+                onClose={() => setSelectedActionOpen(false)}
+                placementX="left"
+                renderButton={ref => (
+                  <Button
+                    ref={ref}
+                    label={t('Actions')}
+                    icon={faEllipsisVertical}
+                    active={selectedActionOpen}
+                    disabled={!selected.size}
+                    onClick={() => setSelectedActionOpen(!selectedActionOpen)}
+                    size="s"
+                  />
+                )}
+              >
+                {activeSelectOptions?.map(action => (
+                  <MenuItem
+                    key={action.label}
+                    label={action.label}
+                    disabled={action.disabled}
+                    onClick={() => {
+                      action.onClick!(selected);
+                      setSelectedActionOpen(false);
+                      action.clearSelected && setSelected(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={hideFooter && !showLastBorder ? 'no-last-border' : undefined}
+              >
+                {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, {
+                                        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}>{row.extendable!.element}</td>
+                            </tr>
+                          )}
+                        </Fragment>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <tr>
+                    <td className="no-border" colSpan={cols.length}>
+                      {t('NoResults')}
+                    </td>
+                  </tr>
+                )}
+                {!!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" colSpan={cols.length}>
+                        <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
+                      </td>
+                    </tr>
+                  ) : (
+                    <EditableRow
+                      columns={cols}
+                      data={editableData}
+                      setData={setEditableData}
+                      defaultDataValue={editable.defaultDataValue}
+                      clearItem={() => {
+                        editable.setSelectedItem?.(null);
+                        isAdding && setIsAdding(false);
+                      }}
+                      inputFocusRef={editable.inputFocusRef}
+                    />
+                  ))}
+                {!!totals && !!data.length && (
+                  <tr>
+                    {cols.map(({ id: columnId }) => (
+                      <td
+                        key={columnId}
+                        align={totals.cells[columnId]?.align || 'right'}
+                        colSpan={totals.cells[columnId]?.span}
+                      >
+                        <strong>{totals.cells[columnId]?.value}</strong>
+                      </td>
+                    ))}
+                  </tr>
+                )}
+              </tbody>
+            </table> */}
+
+            <div className="grid-table">
+              <HeaderTable
+                columns={cols}
+                headerWrap={headerWrap}
+                customHeader={customHeader}
+                // sticky={!!maxHeight}
+              />
+              <div>
+                <tbody
+                  className={clsx({
+                    'no-last-border': hideFooter && !showLastBorder,
+                  })}
+                  style={{ maxHeight }}
+                >
+                  {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', 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 + ': '
+                                            : '/'
+                                        }
+                                        style={
+                                          column.minWidth
+                                            ? { minWidth: column.minWidth }
+                                            : column.width
+                                            ? { width: column.width }
+                                            : undefined
+                                        }
+                                        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, {
+                                          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}>{row.extendable!.element}</td>
+                              </tr>
+                            )}
+                          </Fragment>
+                        );
+                      })}
+                    </>
+                  ) : (
+                    <tr>
+                      <td className="no-border" colSpan={cols.length}>
+                        {t('NoResults')}
+                      </td>
+                    </tr>
+                  )}
+                  {!!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="justify-center"
+                        // colSpan={cols.length}
+                        style={{
+                          gridColumn: `span ${cols.length}`,
+                        }}
+                      >
+                        <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
+                      </td> */}
+                      </tr>
+                    ) : (
+                      <EditableRow
+                        columns={cols}
+                        data={editableData}
+                        setData={setEditableData}
+                        defaultDataValue={editable.defaultDataValue}
+                        clearItem={() => {
+                          editable.setSelectedItem?.(null);
+                          isAdding && setIsAdding(false);
+                        }}
+                        inputFocusRef={editable.inputFocusRef}
+                      />
+                    ))}
+                  {!!totals && !!data.length && (
+                    <tr>
+                      {cols.map(({ id: columnId, ...column }) => (
+                        <td
+                          key={columnId}
+                          align={totals.cells[columnId]?.align || 'right'}
+                          colSpan={totals.cells[columnId]?.span}
+                          style={{
+                            minWidth: column.minWidth,
+                            width: column.width,
+                            gridColumn: totals.cells[columnId]?.span
+                              ? `span ${totals.cells[columnId].span}`
+                              : undefined,
+                          }}
+                        >
+                          <strong>{totals.cells[columnId]?.value}</strong>
+                        </td>
+                      ))}
+                    </tr>
+                  )}
+                </tbody>
+              </div>
+            </div>
+          </ConditionalWrapper>
+        </div>
+        {!hideFooter &&
+          (!!data.length ||
+            (noTotalRows && (serverSidePagination?.offset || offset) > 0)) && (
+            <TableFooter
+              customLimit={customPagination?.customLimit}
+              pagination={pagination}
+              footerAction={footerAction}
+              noTotalRows={noTotalRows}
+            />
+          )}
+      </div>
+    </Loader>
+  );
+};