@inceptionbg/iui 2.0.25 → 2.0.27

package/src/components/Table/components/footer/TableFooter.tsx

@@ -1,126 +1,126 @@
-import type { FC, MouseEventHandler } from 'react';
-import type { ISelectData } from '../../../../types/ISelect';
-import type { IPaginationControl } from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faAngleLeft } from '../../../../assets/icons/solid/faAngleLeft';
-import { faAngleRight } from '../../../../assets/icons/solid/faAngleRight';
-import { faRotateRight } from '../../../../assets/icons/solid/faRotateRight';
-import { tableStandardLimit } from '../../../../types/ITable';
-import { formatCurrencyNoDecimals } from '../../../../utils/numberUtils';
-import { IconButton } from '../../../Button/IconButton';
-import { Select } from '../../../Inputs/Selects/Select';
-import { TextInput } from '../../../Inputs/TextInput';
-
-interface Props {
-  pagination: IPaginationControl;
-  noTotalRows?: boolean;
-  dataLength: number;
-  refetch?: MouseEventHandler<HTMLButtonElement>;
-  totalRows?: number;
-  customLimit?: number[];
-}
-
-export const TableFooter: FC<Props> = ({
-  pagination: { limit, offset, setLimit, setOffset },
-  totalRows = 0,
-  noTotalRows,
-  dataLength,
-  refetch,
-  customLimit,
-}) => {
-  const [tempOffset, setTempOffset] = useState(offset + 1);
-
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    setTempOffset(offset + 1);
-  }, [offset]);
-
-  const handleChangeLimit = (value: ISelectData) => {
-    const newLimit = Math.floor(+value.value);
-    setLimit(newLimit);
-    setOffset(0);
-  };
-
-  const maxOffset = Math.ceil(totalRows / limit);
-
-  return (
-    <div className={`table-footer ${refetch ? 'justify-between' : 'justify-right'}`}>
-      {!!refetch && (
-        <IconButton
-          icon={faRotateRight}
-          onClick={refetch}
-          tooltip={t('RefreshData')}
-          variant="outlined"
-          size="s"
-        />
-      )}
-      <div className="pagination">
-        <div className="flex align-center gap-2">
-          <p>{t('rowsPerPage')}</p>
-          <Select
-            value={{ label: `${limit}`, value: limit }}
-            size="s"
-            minWidth={20}
-            onChange={handleChangeLimit}
-            options={(customLimit || tableStandardLimit).map(e => ({
-              label: `${e}`,
-              value: e ?? t('allResults'),
-            }))}
-            isClearable={false}
-          />
-          {!noTotalRows && (
-            <p>
-              {limit
-                ? `${offset * limit + 1}-${
-                    offset * limit + limit <= totalRows
-                      ? offset * limit + limit
-                      : totalRows
-                  } ${t('of')} ${formatCurrencyNoDecimals(totalRows)}`
-                : `${t('allResults')} ${t('of')} ${formatCurrencyNoDecimals(totalRows)} `}
-            </p>
-          )}
-        </div>
-        {!noTotalRows && <p>|</p>}
-        <div className="flex gap-1 align-center">
-          <p>{t('page')}:</p>
-          <IconButton
-            disabled={offset < 1}
-            icon={faAngleLeft}
-            onClick={() => setOffset(offset - 1)}
-            className="p-1"
-            size="s"
-          />
-          <TextInput
-            className="offset-input"
-            value={`${tempOffset}`}
-            setValue={e => !isNaN(+e) && setTempOffset(+e)}
-            isClearable={false}
-            inputProps={{
-              onFocus: e => e.target.select(),
-              onBlur: () => setTempOffset(offset + 1),
-              onKeyUp: e => {
-                if (e.key === 'Enter') {
-                  const value = tempOffset;
-                  if (typeof value === 'number' && value >= 0 && value <= maxOffset) {
-                    setOffset(value - 1);
-                  } else {
-                    setTempOffset(offset + 1);
-                  }
-                }
-              },
-            }}
-          />
-          <IconButton
-            disabled={noTotalRows ? limit > dataLength : offset + 1 >= maxOffset}
-            icon={faAngleRight}
-            onClick={() => setOffset(offset + 1)}
-            size="s"
-          />
-          {!noTotalRows && <p>{`${t('of')} ${formatCurrencyNoDecimals(maxOffset)}`}</p>}
-        </div>
-      </div>
-    </div>
-  );
-};
+import type { FC, MouseEventHandler } from 'react';
+import type { ISelectData } from '../../../../types/ISelect';
+import type { IPaginationControl } from '../../../../types/ITable';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faAngleLeft } from '../../../../assets/icons/solid/faAngleLeft';
+import { faAngleRight } from '../../../../assets/icons/solid/faAngleRight';
+import { faRotateRight } from '../../../../assets/icons/solid/faRotateRight';
+import { tableStandardLimit } from '../../../../types/ITable';
+import { formatCurrencyNoDecimals } from '../../../../utils/numberUtils';
+import { IconButton } from '../../../Button/IconButton';
+import { Select } from '../../../Inputs/Selects/Select';
+import { TextInput } from '../../../Inputs/TextInput';
+
+interface Props {
+  pagination: IPaginationControl;
+  noTotalRows?: boolean;
+  dataLength: number;
+  refetch?: MouseEventHandler<HTMLButtonElement>;
+  totalRows?: number;
+  customLimit?: number[];
+}
+
+export const TableFooter: FC<Props> = ({
+  pagination: { limit, offset, setLimit, setOffset },
+  totalRows = 0,
+  noTotalRows,
+  dataLength,
+  refetch,
+  customLimit,
+}) => {
+  const [tempOffset, setTempOffset] = useState(offset + 1);
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setTempOffset(offset + 1);
+  }, [offset]);
+
+  const handleChangeLimit = (value: ISelectData) => {
+    const newLimit = Math.floor(+value.value);
+    setLimit(newLimit);
+    setOffset(0);
+  };
+
+  const maxOffset = Math.ceil(totalRows / limit);
+
+  return (
+    <div className={`table-footer ${refetch ? 'justify-between' : 'justify-right'}`}>
+      {!!refetch && (
+        <IconButton
+          icon={faRotateRight}
+          onClick={refetch}
+          tooltip={t('RefreshData')}
+          variant="outlined"
+          size="s"
+        />
+      )}
+      <div className="pagination">
+        <div className="flex align-center gap-2">
+          <p>{t('rowsPerPage')}</p>
+          <Select
+            value={{ label: `${limit}`, value: limit }}
+            size="s"
+            minWidth={20}
+            onChange={handleChangeLimit}
+            options={(customLimit || tableStandardLimit).map(e => ({
+              label: `${e}`,
+              value: e ?? t('allResults'),
+            }))}
+            isClearable={false}
+          />
+          {!noTotalRows && (
+            <p>
+              {limit
+                ? `${offset * limit + 1}-${
+                    offset * limit + limit <= totalRows
+                      ? offset * limit + limit
+                      : totalRows
+                  } ${t('of')} ${formatCurrencyNoDecimals(totalRows)}`
+                : `${t('allResults')} ${t('of')} ${formatCurrencyNoDecimals(totalRows)} `}
+            </p>
+          )}
+        </div>
+        {!noTotalRows && <p>|</p>}
+        <div className="flex gap-1 align-center">
+          <p>{t('page')}:</p>
+          <IconButton
+            disabled={offset < 1}
+            icon={faAngleLeft}
+            onClick={() => setOffset(offset - 1)}
+            className="p-1"
+            size="s"
+          />
+          <TextInput
+            className="offset-input"
+            value={`${tempOffset}`}
+            setValue={e => !isNaN(+e) && setTempOffset(+e)}
+            isClearable={false}
+            inputProps={{
+              onFocus: e => e.target.select(),
+              onBlur: () => setTempOffset(offset + 1),
+              onKeyUp: e => {
+                if (e.key === 'Enter') {
+                  const value = tempOffset;
+                  if (typeof value === 'number' && value >= 0 && value <= maxOffset) {
+                    setOffset(value - 1);
+                  } else {
+                    setTempOffset(offset + 1);
+                  }
+                }
+              },
+            }}
+          />
+          <IconButton
+            disabled={noTotalRows ? limit > dataLength : offset + 1 >= maxOffset}
+            icon={faAngleRight}
+            onClick={() => setOffset(offset + 1)}
+            size="s"
+          />
+          {!noTotalRows && <p>{`${t('of')} ${formatCurrencyNoDecimals(maxOffset)}`}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Table/components/header/TableHeader.tsx

@@ -1,40 +1,40 @@
-import type { FC } from 'react';
-import type { ITableColumn } from '../../../../types/ITable';
-import clsx from 'clsx';
-import { TableHeaderRow } from './TableHeaderRow';
-
-type Props = {
-  columns: ITableColumn[];
-  customHeader?: ITableColumn[][];
-  headerWrap?: boolean;
-  maxHeight?: number | string;
-  print?: boolean;
-};
-
-export const HeaderTable: FC<Props> = ({
-  columns,
-  customHeader,
-  headerWrap,
-  maxHeight,
-  print,
-}) => {
-  const isSticky = !print && !!maxHeight;
-
-  return (
-    <thead
-      className={clsx({
-        'no-wrap': !headerWrap,
-        'sticky-header': isSticky,
-      })}
-    >
-      {customHeader ? (
-        customHeader.map((row, i) => (
-          // No array manipulation will be performed, so using key 'i' is fine.
-          <TableHeaderRow key={i} row={row} print={print} />
-        ))
-      ) : (
-        <TableHeaderRow row={columns} print={print} />
-      )}
-    </thead>
-  );
-};
+import type { FC } from 'react';
+import type { ITableColumn } from '../../../../types/ITable';
+import clsx from 'clsx';
+import { TableHeaderRow } from './TableHeaderRow';
+
+type Props = {
+  columns: ITableColumn[];
+  customHeader?: ITableColumn[][];
+  headerWrap?: boolean;
+  maxHeight?: number | string;
+  print?: boolean;
+};
+
+export const HeaderTable: FC<Props> = ({
+  columns,
+  customHeader,
+  headerWrap,
+  maxHeight,
+  print,
+}) => {
+  const isSticky = !print && !!maxHeight;
+
+  return (
+    <thead
+      className={clsx({
+        'no-wrap': !headerWrap,
+        'sticky-header': isSticky,
+      })}
+    >
+      {customHeader ? (
+        customHeader.map((row, i) => (
+          // No array manipulation will be performed, so using key 'i' is fine.
+          <TableHeaderRow key={i} row={row} print={print} />
+        ))
+      ) : (
+        <TableHeaderRow row={columns} print={print} />
+      )}
+    </thead>
+  );
+};

package/src/components/Table/components/header/TableHeaderRow.tsx

@@ -1,57 +1,57 @@
-import type { FC } from 'react';
-import type { ITableColumn } from '../../../../types/ITable';
-import clsx from 'clsx';
-
-interface Props {
-  row: ITableColumn[];
-  print?: boolean;
-}
-
-export const TableHeaderRow: FC<Props> = ({ row, print }) => {
-  // const { sortData } = useTableContext();
-  // const { sort, setSort, sortOptions } = sortData ?? {};
-  // const activeSortOption = sortOptions?.find(e => sort?.startsWith(e.value));
-
-  return (
-    <tr>
-      {row.map(col => (
-        <th
-          key={col.id}
-          colSpan={col.colSpan}
-          rowSpan={col.rowSpan}
-          className={
-            print
-              ? undefined
-              : clsx(col.color, col.className, {
-                  'sticky-column': col.sticky,
-                  'not-first-cell': col.notFirstCell,
-                })
-          }
-          // onClick={() => {
-          //   const sortValue = sortOptions?.find(e => col.label === e.label)?.value;
-          //   sortValue &&
-          //     setSort?.(sort === sortValue + desc ? sortValue + asc : sortValue + desc);
-          // }}
-          style={
-            print
-              ? undefined
-              : col.minWidth
-                ? { minWidth: col.minWidth }
-                : col.width
-                  ? { width: col.width }
-                  : undefined
-          }
-          // hidden={col.hidden}
-        >
-          <div className="flex align-center">
-            {typeof col.label === 'string' ? (
-              <p className={`full-width text-${col.align || 'left'}`}>{col.label}</p>
-            ) : (
-              <div className={`full-width text-${col.align || 'left'}`}>{col.label}</div>
-            )}
-          </div>
-        </th>
-      ))}
-    </tr>
-  );
-};
+import type { FC } from 'react';
+import type { ITableColumn } from '../../../../types/ITable';
+import clsx from 'clsx';
+
+interface Props {
+  row: ITableColumn[];
+  print?: boolean;
+}
+
+export const TableHeaderRow: FC<Props> = ({ row, print }) => {
+  // const { sortData } = useTableContext();
+  // const { sort, setSort, sortOptions } = sortData ?? {};
+  // const activeSortOption = sortOptions?.find(e => sort?.startsWith(e.value));
+
+  return (
+    <tr>
+      {row.map(col => (
+        <th
+          key={col.id}
+          colSpan={col.colSpan}
+          rowSpan={col.rowSpan}
+          className={
+            print
+              ? undefined
+              : clsx(col.color, col.className, {
+                  'sticky-column': col.sticky,
+                  'not-first-cell': col.notFirstCell,
+                })
+          }
+          // onClick={() => {
+          //   const sortValue = sortOptions?.find(e => col.label === e.label)?.value;
+          //   sortValue &&
+          //     setSort?.(sort === sortValue + desc ? sortValue + asc : sortValue + desc);
+          // }}
+          style={
+            print
+              ? undefined
+              : col.minWidth
+                ? { minWidth: col.minWidth }
+                : col.width
+                  ? { width: col.width }
+                  : undefined
+          }
+          // hidden={col.hidden}
+        >
+          <div className="flex align-center">
+            {typeof col.label === 'string' ? (
+              <p className={`full-width text-${col.align || 'left'}`}>{col.label}</p>
+            ) : (
+              <div className={`full-width text-${col.align || 'left'}`}>{col.label}</div>
+            )}
+          </div>
+        </th>
+      ))}
+    </tr>
+  );
+};

package/src/components/Table/components/items/TableItemActions.tsx

@@ -1,78 +1,78 @@
-import type { ITableDataItem } from '../../../../types/ITable';
-import { type FC } from 'react';
-import { faEllipsisVertical, faPen, faTrashCan } from '../../../../assets/icons';
-import { useIsMenuOpen } from '../../../../hooks/useIsMenuOpen';
-import { IconButton } from '../../../Button/IconButton';
-import { Menu } from '../../../Menu/Menu';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const TableItemActions: FC<{ tableDataItem: ITableDataItem<any> }> = ({
-  tableDataItem,
-}) => {
-  const { isOpen, onClose, onOpen } = useIsMenuOpen();
-
-  const { dataActions, itemDeleteData, editable } = useTableContext();
-
-  if (!dataActions?.hasItemActions) {
-    return null;
-  }
-
-  const filteredActions =
-    dataActions.actions?.(tableDataItem.item).filter(e => e.hasAccess) ?? [];
-
-  return (
-    <div className="table-item-actions">
-      {dataActions.isEditable && (
-        <IconButton
-          icon={faPen}
-          onClick={e => {
-            e.stopPropagation();
-            editable?.setSelectedItem(tableDataItem);
-          }}
-          size="s"
-        />
-      )}
-      {dataActions.isDeletable && (
-        <IconButton
-          icon={faTrashCan}
-          onClick={e => {
-            e.stopPropagation();
-            itemDeleteData?.setItemToDeleteUuids([tableDataItem.uuid]);
-          }}
-          size="s"
-          color="danger"
-        />
-      )}
-      {!!filteredActions?.length && (
-        <Menu
-          isOpen={isOpen}
-          onClose={onClose}
-          placement="bottom-right"
-          renderButton={ref => (
-            <IconButton
-              ref={ref}
-              icon={faEllipsisVertical}
-              active={isOpen}
-              onClick={e => {
-                e.stopPropagation();
-                onOpen();
-              }}
-              size="s"
-            />
-          )}
-          items={
-            filteredActions?.map(action => ({
-              label: action.label,
-              hidden: !action.hasAccess,
-              disabled: action.disabled,
-              onClick: () => {
-                action.onClick();
-                onClose();
-              },
-            })) ?? []
-          }
-        />
-      )}
-    </div>
-  );
-};
+import type { ITableDataItem } from '../../../../types/ITable';
+import { type FC } from 'react';
+import { faEllipsisVertical, faPen, faTrashCan } from '../../../../assets/icons';
+import { useIsMenuOpen } from '../../../../hooks/useIsMenuOpen';
+import { IconButton } from '../../../Button/IconButton';
+import { Menu } from '../../../Menu/Menu';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const TableItemActions: FC<{ tableDataItem: ITableDataItem<any> }> = ({
+  tableDataItem,
+}) => {
+  const { isOpen, onClose, onOpen } = useIsMenuOpen();
+
+  const { dataActions, itemDeleteData, editable } = useTableContext();
+
+  if (!dataActions?.hasItemActions) {
+    return null;
+  }
+
+  const filteredActions =
+    dataActions.actions?.(tableDataItem.item).filter(e => e.hasAccess) ?? [];
+
+  return (
+    <div className="table-item-actions">
+      {dataActions.isEditable && (
+        <IconButton
+          icon={faPen}
+          onClick={e => {
+            e.stopPropagation();
+            editable?.setSelectedItem(tableDataItem);
+          }}
+          size="s"
+        />
+      )}
+      {dataActions.isDeletable && (
+        <IconButton
+          icon={faTrashCan}
+          onClick={e => {
+            e.stopPropagation();
+            itemDeleteData?.setItemToDeleteUuids([tableDataItem.uuid]);
+          }}
+          size="s"
+          color="danger"
+        />
+      )}
+      {!!filteredActions?.length && (
+        <Menu
+          isOpen={isOpen}
+          onClose={onClose}
+          placement="bottom-right"
+          renderButton={ref => (
+            <IconButton
+              ref={ref}
+              icon={faEllipsisVertical}
+              active={isOpen}
+              onClick={e => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              size="s"
+            />
+          )}
+          items={
+            filteredActions?.map(action => ({
+              label: action.label,
+              hidden: !action.hasAccess,
+              disabled: action.disabled,
+              onClick: () => {
+                action.onClick();
+                onClose();
+              },
+            })) ?? []
+          }
+        />
+      )}
+    </div>
+  );
+};