@inceptionbg/iui 2.0.24 → 2.0.26

package/src/components/Table/Table.tsx

@@ -1,259 +1,259 @@
-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>
-);
+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>
+);

package/src/components/Table/components/columns/ColumnsList.tsx

@@ -1,60 +1,60 @@
-import type { FC } from 'react';
-import type { ITableColumn } from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Draggable, Droppable } from '@hello-pangea/dnd';
-import { faGripDotsVertical } from '../../../../assets/icons/solid/faGripDotsVertical';
-
-interface Props {
-  id: 'hidden' | 'visible';
-  items: ITableColumn[];
-  search: string;
-}
-
-export const ColumnsList: FC<Props> = ({ id, items, search }) => {
-  const [filteredItems, setFilteredItems] = useState<ITableColumn[]>([]);
-
-  useEffect(() => {
-    if (search.length) {
-      setFilteredItems(
-        items.filter(e =>
-          (typeof e.label === 'string' ? e.label : (e.labelForFilter ?? ''))
-            .toLocaleLowerCase()
-            .includes(search.toLocaleLowerCase())
-        )
-      );
-    }
-  }, [search, items]);
-
-  const list = search.length ? filteredItems : items;
-
-  return (
-    <Droppable droppableId={id}>
-      {({ droppableProps, innerRef, placeholder }) => (
-        <div {...droppableProps} ref={innerRef} className="list-box">
-          {list.map(c => (
-            <Draggable key={c.id} draggableId={c.id} index={items.indexOf(c)}>
-              {({ innerRef, draggableProps, dragHandleProps }, snapshot) => (
-                <div
-                  className={`item ${snapshot.isDragging ? 'dragging' : ''}`}
-                  ref={innerRef}
-                  {...draggableProps}
-                  {...dragHandleProps}
-                  style={{
-                    ...draggableProps.style,
-                    top: 'unset',
-                    left: 'unset',
-                  }}
-                >
-                  {c.label}
-                  <FontAwesomeIcon icon={faGripDotsVertical} />
-                </div>
-              )}
-            </Draggable>
-          ))}
-          {placeholder}
-        </div>
-      )}
-    </Droppable>
-  );
-};
+import type { FC } from 'react';
+import type { ITableColumn } from '../../../../types/ITable';
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Draggable, Droppable } from '@hello-pangea/dnd';
+import { faGripDotsVertical } from '../../../../assets/icons/solid/faGripDotsVertical';
+
+interface Props {
+  id: 'hidden' | 'visible';
+  items: ITableColumn[];
+  search: string;
+}
+
+export const ColumnsList: FC<Props> = ({ id, items, search }) => {
+  const [filteredItems, setFilteredItems] = useState<ITableColumn[]>([]);
+
+  useEffect(() => {
+    if (search.length) {
+      setFilteredItems(
+        items.filter(e =>
+          (typeof e.label === 'string' ? e.label : (e.labelForFilter ?? ''))
+            .toLocaleLowerCase()
+            .includes(search.toLocaleLowerCase())
+        )
+      );
+    }
+  }, [search, items]);
+
+  const list = search.length ? filteredItems : items;
+
+  return (
+    <Droppable droppableId={id}>
+      {({ droppableProps, innerRef, placeholder }) => (
+        <div {...droppableProps} ref={innerRef} className="list-box">
+          {list.map(c => (
+            <Draggable key={c.id} draggableId={c.id} index={items.indexOf(c)}>
+              {({ innerRef, draggableProps, dragHandleProps }, snapshot) => (
+                <div
+                  className={`item ${snapshot.isDragging ? 'dragging' : ''}`}
+                  ref={innerRef}
+                  {...draggableProps}
+                  {...dragHandleProps}
+                  style={{
+                    ...draggableProps.style,
+                    top: 'unset',
+                    left: 'unset',
+                  }}
+                >
+                  {c.label}
+                  <FontAwesomeIcon icon={faGripDotsVertical} />
+                </div>
+              )}
+            </Draggable>
+          ))}
+          {placeholder}
+        </div>
+      )}
+    </Droppable>
+  );
+};