@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Table/Table.tsx

@@ -1,258 +1,259 @@
-import clsx from 'clsx';
-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 { useTranslation } from 'react-i18next';
-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';
-import { TablePrint } from './components/print/TablePrint';
-import { TableTemplates } from './components/templates/TableTemplates';
-import { TableColumnsEdit } from './components/columns/TableColumnsEdit';
-import { useLocalTableColumns } from './hooks/localHooks/useLocalTableColumns';
-
-export const TableContent: FC = () => {
-  const {
-    columnData,
-    customHeader,
-    headerWrap,
-    data,
-    sumRows,
-    isLoading,
-    selectedRowUuid,
-    // customPrintData,
-    // additionsalOptions,
-    footer,
-    rowHeight = 'm',
-    maxHeight,
-    editable,
-    ...props
-  } = useTableContext();
-
-  const [extendedRow, setExtendedRow] = useState('');
-
-  const { t } = useTranslation();
-  const { visibleColumns } = useLocalTableColumns();
-  const { focusedRow } = useLocalTableKeyboard();
-
-  const noTotalRows = footer?.totalRows === undefined;
-
-  return (
-    <Loader isLoading={!!isLoading}>
-      <div
-        id={props.id}
-        // onKeyDown={handleKeyDown}
-        className={clsx('iui-table', props.className, {
-          'pb-3': data.length === 0,
-        })}
-        // tabIndex={-1}
-      >
-        <div className="iui-table-header-actions">
-          {props.selectActions.length > 0 && <TableSelect />}
-          {props.filterData && <TableFilters />}
-          {!!columnData.setColumns && <TableColumnsEdit />}
-          {props.sortData && <TableSort />}
-          {props.templateData && <TableTemplates />}
-          {props.printData && <TablePrint />}
-        </div>
-        <div className="table-container" style={{ maxHeight }}>
-          <ConditionalWrapper
-            condition={!!editable}
-            wrapper={children => (
-              <form
-                onSubmit={e => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  editable?.onSubmit(editable.editData, () => {
-                    editable.setEditData(editable.defaultDataValue ?? {});
-                    if (!editable.keepEditOnSubmit && editable.selectedItem) {
-                      editable.setSelectedItem(null);
-                    }
-                  });
-                }}
-              >
-                {children}
-              </form>
-            )}
-          >
-            <table className="full-width">
-              <HeaderTable
-                columns={visibleColumns}
-                customHeader={customHeader}
-                headerWrap={headerWrap}
-                maxHeight={maxHeight}
-              />
-              <tbody>
-                {data.length ? (
-                  <>
-                    {data.map(row => {
-                      const isExtended =
-                        row.extendable &&
-                        !row.extendable.isLoading &&
-                        extendedRow === row.uuid;
-                      return (
-                        <Fragment key={row.uuid}>
-                          {/* ////// EDITABLE ROW ////// */}
-                          {!!editable && row.uuid === editable.selectedItem?.uuid ? (
-                            <TableEditRow columns={visibleColumns} />
-                          ) : (
-                            ////// 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?.(e);
-                                row.extendable &&
-                                  setExtendedRow(
-                                    extendedRow === row.uuid ? '' : row.uuid
-                                  );
-                              }}
-                            >
-                              {visibleColumns.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.className,
-                                        column.color,
-                                        cell?.className,
-                                        rowHeight,
-                                        {
-                                          'sticky-column': column.sticky,
-                                          link: cell?.link,
-                                          'clickable-cell': cell?.onClick,
-                                          'word-break': column.break,
-                                        }
-                                      )}
-                                      colSpan={cell?.span}
-                                    >
-                                      {cell?.value}
-                                    </td>
-                                  </Tooltip>
-                                );
-                              })}
-                            </tr>
-                          )}
-                          {/* ////// EXTENDABLE ROW ////// */}
-                          {isExtended && (
-                            <tr>
-                              <td colSpan={visibleColumns.length} className={rowHeight}>
-                                {row.extendable!.element}
-                              </td>
-                            </tr>
-                          )}
-                        </Fragment>
-                      );
-                    })}
-                  </>
-                ) : (
-                  <tr>
-                    <td colSpan={visibleColumns.length}>{t('NoResults')}</td>
-                  </tr>
-                )}
-              </tbody>
-              <tfoot>
-                {!!editable &&
-                  !editable.selectedItem &&
-                  !editable.addDisabled &&
-                  (!editable.isAdding ? (
-                    ////// NEW ITEM ROW //////
-                    <tr
-                      data-id="add"
-                      className={clsx('clickable', {
-                        focused: focusedRow?.uuid === 'add',
-                      })}
-                      onClick={() => editable.setIsAdding(true)}
-                    >
-                      <td
-                        className={`text-center ${rowHeight}`}
-                        colSpan={visibleColumns.length}
-                      >
-                        <div className="flex center gap-2">
-                          <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
-                          <p>{editable.addLabel || t('AddItem')}</p>
-                        </div>
-                      </td>
-                    </tr>
-                  ) : (
-                    <TableEditRow columns={visibleColumns} />
-                  ))}
-                {!!sumRows &&
-                  !!data.length &&
-                  sumRows.map(row => (
-                    <tr key={row.uuid}>
-                      {visibleColumns.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>
-        {footer &&
-          (!!data.length || (noTotalRows && footer!.paginationControl!.offset > 0)) && (
-            <TableFooter
-              pagination={footer.paginationControl}
-              totalRows={footer.totalRows}
-              noTotalRows={noTotalRows}
-              customLimit={footer.customPagination?.customLimit}
-              refetch={footer.refetch}
-              dataLength={data.length}
-            />
-          )}
-      </div>
-    </Loader>
-  );
-};
-
-export const Table = <T,>(props: ITable<T>) => (
-  <TableProvider<T> {...props}>
-    <TableContent />
-    {props.itemDeleteData?.DeleteDialog}
-  </TableProvider>
-);
+import type { FC } from 'react';
+import type { ITable } from '../../types/ITable';
+import { Fragment, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { faPlus } from '../../assets/icons/solid/faPlus';
+import { Loader } from '../Loader/Loader';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { ConditionalWrapper } from '../Wrappers/ConditionalWrapper';
+import { TableColumnsEdit } from './components/columns/TableColumnsEdit';
+import { TableEditRow } from './components/edit/TableEditRow';
+import { TableFilters } from './components/filters/TableFilters';
+import { TableFooter } from './components/footer/TableFooter';
+import { HeaderTable } from './components/header/TableHeader';
+import { TablePrint } from './components/print/TablePrint';
+import { TableSelect } from './components/select/TableSelect';
+import { TableSort } from './components/sort/TableSort';
+import { TableTemplates } from './components/templates/TableTemplates';
+import { TableProvider, useTableContext } from './contexts/TableContext';
+import { useLocalTableColumns } from './hooks/localHooks/useLocalTableColumns';
+import { useLocalTableKeyboard } from './hooks/localHooks/useLocalTableKeyboard';
+
+export const TableContent: FC = () => {
+  const {
+    columnData,
+    customHeader,
+    headerWrap,
+    data,
+    sumRows,
+    isLoading,
+    selectedRowUuid,
+    // customPrintData,
+    // additionsalOptions,
+    footer,
+    rowHeight = 'm',
+    maxHeight,
+    editable,
+    ...props
+  } = useTableContext();
+
+  const [extendedRow, setExtendedRow] = useState('');
+
+  const { t } = useTranslation();
+  const { visibleColumns } = useLocalTableColumns();
+  const { focusedRow } = useLocalTableKeyboard();
+
+  const noTotalRows = footer?.totalRows === undefined;
+
+  return (
+    <Loader isLoading={!!isLoading}>
+      <div
+        id={props.id}
+        // onKeyDown={handleKeyDown}
+        className={clsx('iui-table', props.className, {
+          'pb-3': data.length === 0,
+        })}
+        // tabIndex={-1}
+      >
+        <div className="iui-table-header-actions">
+          {props.selectActions.length > 0 && <TableSelect />}
+          {props.filterData && <TableFilters />}
+          {!!columnData.setColumns && <TableColumnsEdit />}
+          {props.sortData && <TableSort />}
+          {props.templateData && <TableTemplates />}
+          {props.printData && <TablePrint />}
+        </div>
+        <div className="table-container" style={{ maxHeight }}>
+          <ConditionalWrapper
+            condition={!!editable}
+            wrapper={children => (
+              <form
+                onSubmit={e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  editable?.onSubmit(editable.editData, () => {
+                    editable.setEditData(editable.defaultDataValue ?? {});
+                    if (!editable.keepEditOnSubmit && editable.selectedItem) {
+                      editable.setSelectedItem(null);
+                    }
+                  });
+                }}
+              >
+                {children}
+              </form>
+            )}
+          >
+            <table className="full-width">
+              <HeaderTable
+                columns={visibleColumns}
+                customHeader={customHeader}
+                headerWrap={headerWrap}
+                maxHeight={maxHeight}
+              />
+              <tbody>
+                {data.length ? (
+                  <>
+                    {data.map(row => {
+                      const isExtended =
+                        row.extendable &&
+                        !row.extendable.isLoading &&
+                        extendedRow === row.uuid;
+                      return (
+                        <Fragment key={row.uuid}>
+                          {/* ////// EDITABLE ROW ////// */}
+                          {!!editable && row.uuid === editable.selectedItem?.uuid ? (
+                            <TableEditRow columns={visibleColumns} />
+                          ) : (
+                            ////// 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?.(e);
+                                row.extendable &&
+                                  setExtendedRow(
+                                    extendedRow === row.uuid ? '' : row.uuid
+                                  );
+                              }}
+                            >
+                              {visibleColumns.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.className,
+                                        column.color,
+                                        cell?.className,
+                                        rowHeight,
+                                        {
+                                          'sticky-column': column.sticky,
+                                          link: cell?.link,
+                                          'clickable-cell': cell?.onClick,
+                                          'word-break': column.break,
+                                        }
+                                      )}
+                                      colSpan={cell?.span}
+                                    >
+                                      {cell?.value}
+                                    </td>
+                                  </Tooltip>
+                                );
+                              })}
+                            </tr>
+                          )}
+                          {/* ////// EXTENDABLE ROW ////// */}
+                          {isExtended && (
+                            <tr>
+                              <td colSpan={visibleColumns.length} className={rowHeight}>
+                                {row.extendable!.element}
+                              </td>
+                            </tr>
+                          )}
+                        </Fragment>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <tr>
+                    <td colSpan={visibleColumns.length}>{t('NoResults')}</td>
+                  </tr>
+                )}
+              </tbody>
+              <tfoot>
+                {!!editable &&
+                  !editable.selectedItem &&
+                  !editable.addDisabled &&
+                  (!editable.isAdding ? (
+                    ////// NEW ITEM ROW //////
+                    <tr
+                      data-id="add"
+                      className={clsx('clickable', {
+                        focused: focusedRow?.uuid === 'add',
+                      })}
+                      onClick={() => editable.setIsAdding(true)}
+                    >
+                      <td
+                        className={`text-center ${rowHeight}`}
+                        colSpan={visibleColumns.length}
+                      >
+                        <div className="flex center gap-2">
+                          <FontAwesomeIcon icon={faPlus} className="c-primary icon24" />
+                          <p>{editable.addLabel || t('AddItem')}</p>
+                        </div>
+                      </td>
+                    </tr>
+                  ) : (
+                    <TableEditRow columns={visibleColumns} />
+                  ))}
+                {!!sumRows &&
+                  !!data.length &&
+                  sumRows.map(row => (
+                    <tr key={row.uuid}>
+                      {visibleColumns.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>
+        {footer &&
+          (!!data.length || (noTotalRows && footer!.paginationControl!.offset > 0)) && (
+            <TableFooter
+              pagination={footer.paginationControl}
+              totalRows={footer.totalRows}
+              noTotalRows={noTotalRows}
+              customLimit={footer.customPagination?.customLimit}
+              refetch={footer.refetch}
+              dataLength={data.length}
+            />
+          )}
+      </div>
+    </Loader>
+  );
+};
+
+export const Table = <T,>(props: ITable<T>) => (
+  <TableProvider<T> {...props}>
+    <TableContent />
+    {props.itemDeleteData?.DeleteDialog}
+  </TableProvider>
+);