@inceptionbg/iui 2.0.23 → 2.0.24

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

@@ -1,125 +1,126 @@
-import { useMemo, useState, type FC } from 'react';
-import { useTableContext } from '../../contexts/TableContext';
-import { useTranslation } from 'react-i18next';
-import { IconButton } from '../../../Button/IconButton';
-import { NotificationBadge } from '../../../Badge/NotificationBadge';
-import {
-  getActiveFilterNumber,
-  getVisibleColumnsIds,
-} from '../../../../utils/tableUtils';
-import { faFilter } from '../../../../assets/icons/light/faFilter';
-import { ITableFilterItem } from '../../../../types/ITable';
-import { Pullover } from '../../../Pullover/Pullover';
-import { FilterItem } from './FilterItem';
-import {
-  deleteEmptyPropsIncludingArray,
-  deleteProps,
-} from '../../../../utils/objectUtils';
-import { faFilterCircleXmark } from '../../../../assets/icons/regular/faFilterCircleXmark';
-import { usePopupControl } from '../../../../hooks/usePopupControl';
-
-export const TableFilters: FC = () => {
-  const { t } = useTranslation();
-  const {
-    columnData: { columns },
-    filterData,
-  } = useTableContext();
-  const { control, onClose, onOpen } = usePopupControl();
-  const columnIds = getVisibleColumnsIds(columns);
-
-  const [filterSearch, setFilterSearch] = useState('');
-
-  const {
-    filters,
-    additionalFilters,
-    excludeFromSearch,
-    search = {},
-    searchData = {},
-    setSearchData,
-    defaultSearch = {},
-    onSearch,
-    activeFilterNo,
-    customFilterIdList,
-  } = filterData ?? {};
-
-  const visibleFilters = useMemo(
-    () =>
-      filters
-        ? (customFilterIdList ?? columnIds).reduce(
-            (arr: ITableFilterItem[], col) =>
-              !!filters[col] ? arr.concat(filters[col]) : arr,
-            []
-          )
-        : [],
-    [columnIds, customFilterIdList, filters]
-  );
-
-  const filteredFilters = useMemo(
-    () =>
-      visibleFilters.filter(e =>
-        e?.label.toLowerCase().includes(filterSearch.toLowerCase())
-      ),
-    [visibleFilters, filterSearch]
-  );
-
-  return filterData ? (
-    <>
-      <NotificationBadge number={activeFilterNo ?? getActiveFilterNumber(search)}>
-        <IconButton
-          tooltip={t('Filter')}
-          icon={faFilter}
-          active={control.isOpen}
-          onClick={onOpen}
-          size="s"
-          variant="outlined"
-        />
-      </NotificationBadge>
-
-      <Pullover
-        control={control}
-        header={{
-          title: t('Filter'),
-          onSearch: visibleFilters.length > 2 ? setFilterSearch : undefined,
-        }}
-        onFormSubmit={() => {
-          const data = deleteEmptyPropsIncludingArray(searchData);
-          onSearch?.(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
-          onClose();
-        }}
-        footer={{
-          confirmButton: {
-            label: t('ApplyFilters'),
-            type: 'submit',
-          },
-          additionalButton: {
-            label: t('ResetFilter'),
-            icon: faFilterCircleXmark,
-            onClick: () => {
-              setSearchData?.(defaultSearch);
-              onSearch?.(defaultSearch);
-              onClose();
-            },
-            disabled: defaultSearch
-              ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
-              : Object.keys(searchData).length === 0,
-          },
-        }}
-        contentClassName="iui-filters-list"
-        onCloseCallback={() => setFilterSearch('')}
-        size="w600"
-      >
-        {filteredFilters?.map(item => (
-          <FilterItem key={item.label} item={item} />
-        ))}
-        {additionalFilters && <div className="pb-1">{additionalFilters}</div>}
-
-        {/* {filteredFilters?.map(item => (
-          <FilterItem key={item.label + 1} item={item} />
-        ))}
-        {filteredFilters?.map(item => (
-          <FilterItem key={item.label + 2} item={item} />
-        ))} */}
-      </Pullover>
-    </>
-  ) : null;
-};
+import type { FC } from 'react';
+import type { ITableFilterItem } from '../../../../types/ITable';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { faFilter } from '../../../../assets/icons/light/faFilter';
+import { faFilterCircleXmark } from '../../../../assets/icons/regular/faFilterCircleXmark';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import {
+  deleteEmptyPropsIncludingArray,
+  deleteProps,
+} from '../../../../utils/objectUtils';
+import {
+  getActiveFilterNumber,
+  getVisibleColumnsIds,
+} from '../../../../utils/tableUtils';
+import { NotificationBadge } from '../../../Badge/NotificationBadge';
+import { IconButton } from '../../../Button/IconButton';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { FilterItem } from './FilterItem';
+
+export const TableFilters: FC = () => {
+  const { t } = useTranslation();
+  const {
+    columnData: { columns },
+    filterData,
+  } = useTableContext();
+  const { control, onClose, onOpen } = usePopupControl();
+  const columnIds = getVisibleColumnsIds(columns);
+
+  const [filterSearch, setFilterSearch] = useState('');
+
+  const {
+    filters,
+    additionalFilters,
+    excludeFromSearch,
+    search = {},
+    searchData = {},
+    setSearchData,
+    defaultSearch = {},
+    onSearch,
+    activeFilterNo,
+    customFilterIdList,
+  } = filterData ?? {};
+
+  const visibleFilters = useMemo(
+    () =>
+      filters
+        ? (customFilterIdList ?? columnIds).reduce(
+            (arr: ITableFilterItem[], col) =>
+              !!filters[col] ? arr.concat(filters[col]) : arr,
+            []
+          )
+        : [],
+    [columnIds, customFilterIdList, filters]
+  );
+
+  const filteredFilters = useMemo(
+    () =>
+      visibleFilters.filter(e =>
+        e?.label.toLowerCase().includes(filterSearch.toLowerCase())
+      ),
+    [visibleFilters, filterSearch]
+  );
+
+  return filterData ? (
+    <>
+      <NotificationBadge number={activeFilterNo ?? getActiveFilterNumber(search)}>
+        <IconButton
+          tooltip={t('Filter')}
+          icon={faFilter}
+          active={control.isOpen}
+          onClick={onOpen}
+          size="s"
+          variant="outlined"
+        />
+      </NotificationBadge>
+
+      <Pullover
+        control={control}
+        header={{
+          title: t('Filter'),
+          onSearch: visibleFilters.length > 2 ? setFilterSearch : undefined,
+        }}
+        onFormSubmit={() => {
+          const data = deleteEmptyPropsIncludingArray(searchData);
+          onSearch?.(excludeFromSearch ? deleteProps(data, excludeFromSearch) : data);
+          onClose();
+        }}
+        footer={{
+          confirmButton: {
+            label: t('ApplyFilters'),
+            type: 'submit',
+          },
+          additionalButton: {
+            label: t('ResetFilter'),
+            icon: faFilterCircleXmark,
+            onClick: () => {
+              setSearchData?.(defaultSearch);
+              onSearch?.(defaultSearch);
+              onClose();
+            },
+            disabled: defaultSearch
+              ? JSON.stringify(searchData) === JSON.stringify(defaultSearch)
+              : Object.keys(searchData).length === 0,
+          },
+        }}
+        contentClassName="iui-filters-list"
+        onCloseCallback={() => setFilterSearch('')}
+        size="w600"
+      >
+        {filteredFilters?.map(item => (
+          <FilterItem key={item.label} item={item} />
+        ))}
+        {additionalFilters && <div className="pb-1">{additionalFilters}</div>}
+
+        {/* {filteredFilters?.map(item => (
+          <FilterItem key={item.label + 1} item={item} />
+        ))}
+        {filteredFilters?.map(item => (
+          <FilterItem key={item.label + 2} item={item} />
+        ))} */}
+      </Pullover>
+    </>
+  ) : null;
+};

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

@@ -1,124 +1,126 @@
-import { FC, MouseEventHandler, useEffect, useState } from 'react';
-import { faAngleLeft } from '../../../../assets/icons/solid/faAngleLeft';
-import { faAngleRight } from '../../../../assets/icons/solid/faAngleRight';
-import { faRotateRight } from '../../../../assets/icons/solid/faRotateRight';
-import { IconButton } from '../../../Button/IconButton';
-import { useTranslation } from 'react-i18next';
-import { IPaginationControl, tableStandardLimit } from '../../../../types/ITable';
-import { Select } from '../../../Inputs/Selects/Select';
-import { ISelectData } from '../../../../types/ISelect';
-import { TextInput } from '../../../Inputs/TextInput';
-import { formatCurrencyNoDecimals } from '../../../../utils/numberUtils';
-
-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 { FC } from 'react';
-import clsx from 'clsx';
-import { TableHeaderRow } from './TableHeaderRow';
-import { ITableColumn } from '../../../../types/ITable';
-
-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>
+  );
+};