@inceptionbg/iui 2.0.25 → 2.0.27

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

@@ -1,114 +1,114 @@
-import type { DropResult } from '@hello-pangea/dnd';
-import type { FC } from 'react';
-import type { ITableColumn } from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { DragDropContext } from '@hello-pangea/dnd';
-import { useTranslation } from 'react-i18next';
-import { faLineColumns } from '../../../../assets/icons/light/faLineColumns';
-import { faArrowRightArrowLeft } from '../../../../assets/icons/regular/faArrowRightArrowLeft';
-import { usePopupControl } from '../../../../hooks/usePopupControl';
-import { IconButton } from '../../../Button/IconButton';
-import { SearchInput } from '../../../Inputs/SearchInput';
-import { Pullover } from '../../../Pullover/Pullover';
-import { useTableContext } from '../../contexts/TableContext';
-import { ColumnsList } from './ColumnsList';
-
-export const TableColumnsEdit: FC = () => {
-  const [hidden, setHidden] = useState<ITableColumn[]>([]);
-  const [visible, setVisible] = useState<ITableColumn[]>([]);
-  const [searchHidden, setSearchHidden] = useState('');
-  const [searchVisible, setSearchVisible] = useState('');
-
-  const { t } = useTranslation();
-  const {
-    columnData: { columns, setColumns },
-  } = useTableContext();
-  const { control, onClose, onOpen } = usePopupControl();
-
-  useEffect(() => {
-    if (control.isOpen) {
-      let hiddenCols: ITableColumn[] = [];
-      let visibleCols: ITableColumn[] = [];
-      columns.forEach(col =>
-        !!col.hidden ? hiddenCols.push(col) : visibleCols.push(col)
-      );
-      setHidden(hiddenCols);
-      setVisible(visibleCols);
-    }
-  }, [control.isOpen, columns]);
-
-  const onDragEnd = ({ source, destination }: DropResult) => {
-    if (!destination) return;
-    const hiddenCols = [...hidden];
-    const visibleCols = [...visible];
-    const destinationIsHidden = destination.droppableId === 'hidden';
-
-    const sourceList = source.droppableId === 'hidden' ? hiddenCols : visibleCols;
-    const destinationList = destinationIsHidden ? hiddenCols : visibleCols;
-
-    const [removed] = sourceList.splice(source.index, 1);
-    destinationList.splice(destination.index, 0, removed);
-    if (source.droppableId !== destination.droppableId) {
-      destinationList[destination.index].hidden = destinationIsHidden;
-      setHidden(hiddenCols);
-      setVisible(visibleCols);
-    } else {
-      destinationIsHidden ? setHidden(hiddenCols) : setVisible(visibleCols);
-    }
-  };
-
-  const onSubmit = () => {
-    if (setColumns) {
-      const newColumns = [...visible, ...hidden];
-      setColumns(newColumns);
-      onClose();
-    }
-  };
-
-  return (
-    <>
-      <IconButton
-        tooltip={t('Columns')}
-        icon={faLineColumns}
-        active={control.isOpen}
-        onClick={onOpen}
-        size="s"
-        variant="outlined"
-      />
-
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Pullover
-          control={control}
-          header={{ title: t('Columns') }}
-          className="column-pullover"
-          footer={{
-            confirmButton: {
-              label: t('Confirm'),
-              onClick: onSubmit,
-            },
-          }}
-        >
-          <div className="dual-list-container">
-            <p className="pb-3">{t('DragDropListsInfo')}</p>
-            <div className="dual-list-content">
-              <p className="bold ml-2">{t('HiddenColumns')}:</p>
-              <div />
-              <p className="bold ml-2">{t('SelectedColumns')}:</p>
-
-              <SearchInput onSearch={setSearchHidden} />
-              <div />
-              <SearchInput onSearch={setSearchVisible} />
-
-              <ColumnsList id="hidden" items={hidden} search={searchHidden} />
-              <div className="exchange-icon">
-                <FontAwesomeIcon icon={faArrowRightArrowLeft} />
-              </div>
-              <ColumnsList id="visible" items={visible} search={searchVisible} />
-            </div>
-          </div>
-        </Pullover>
-      </DragDropContext>
-    </>
-  );
-};
+import type { DropResult } from '@hello-pangea/dnd';
+import type { FC } from 'react';
+import type { ITableColumn } from '../../../../types/ITable';
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DragDropContext } from '@hello-pangea/dnd';
+import { useTranslation } from 'react-i18next';
+import { faLineColumns } from '../../../../assets/icons/light/faLineColumns';
+import { faArrowRightArrowLeft } from '../../../../assets/icons/regular/faArrowRightArrowLeft';
+import { usePopupControl } from '../../../../hooks/usePopupControl';
+import { IconButton } from '../../../Button/IconButton';
+import { SearchInput } from '../../../Inputs/SearchInput';
+import { Pullover } from '../../../Pullover/Pullover';
+import { useTableContext } from '../../contexts/TableContext';
+import { ColumnsList } from './ColumnsList';
+
+export const TableColumnsEdit: FC = () => {
+  const [hidden, setHidden] = useState<ITableColumn[]>([]);
+  const [visible, setVisible] = useState<ITableColumn[]>([]);
+  const [searchHidden, setSearchHidden] = useState('');
+  const [searchVisible, setSearchVisible] = useState('');
+
+  const { t } = useTranslation();
+  const {
+    columnData: { columns, setColumns },
+  } = useTableContext();
+  const { control, onClose, onOpen } = usePopupControl();
+
+  useEffect(() => {
+    if (control.isOpen) {
+      let hiddenCols: ITableColumn[] = [];
+      let visibleCols: ITableColumn[] = [];
+      columns.forEach(col =>
+        !!col.hidden ? hiddenCols.push(col) : visibleCols.push(col)
+      );
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    }
+  }, [control.isOpen, columns]);
+
+  const onDragEnd = ({ source, destination }: DropResult) => {
+    if (!destination) return;
+    const hiddenCols = [...hidden];
+    const visibleCols = [...visible];
+    const destinationIsHidden = destination.droppableId === 'hidden';
+
+    const sourceList = source.droppableId === 'hidden' ? hiddenCols : visibleCols;
+    const destinationList = destinationIsHidden ? hiddenCols : visibleCols;
+
+    const [removed] = sourceList.splice(source.index, 1);
+    destinationList.splice(destination.index, 0, removed);
+    if (source.droppableId !== destination.droppableId) {
+      destinationList[destination.index].hidden = destinationIsHidden;
+      setHidden(hiddenCols);
+      setVisible(visibleCols);
+    } else {
+      destinationIsHidden ? setHidden(hiddenCols) : setVisible(visibleCols);
+    }
+  };
+
+  const onSubmit = () => {
+    if (setColumns) {
+      const newColumns = [...visible, ...hidden];
+      setColumns(newColumns);
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <IconButton
+        tooltip={t('Columns')}
+        icon={faLineColumns}
+        active={control.isOpen}
+        onClick={onOpen}
+        size="s"
+        variant="outlined"
+      />
+
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Pullover
+          control={control}
+          header={{ title: t('Columns') }}
+          className="column-pullover"
+          footer={{
+            confirmButton: {
+              label: t('Confirm'),
+              onClick: onSubmit,
+            },
+          }}
+        >
+          <div className="dual-list-container">
+            <p className="pb-3">{t('DragDropListsInfo')}</p>
+            <div className="dual-list-content">
+              <p className="bold ml-2">{t('HiddenColumns')}:</p>
+              <div />
+              <p className="bold ml-2">{t('SelectedColumns')}:</p>
+
+              <SearchInput onSearch={setSearchHidden} />
+              <div />
+              <SearchInput onSearch={setSearchVisible} />
+
+              <ColumnsList id="hidden" items={hidden} search={searchHidden} />
+              <div className="exchange-icon">
+                <FontAwesomeIcon icon={faArrowRightArrowLeft} />
+              </div>
+              <ColumnsList id="visible" items={visible} search={searchVisible} />
+            </div>
+          </div>
+        </Pullover>
+      </DragDropContext>
+    </>
+  );
+};

package/src/components/Table/components/edit/TableEditRow.tsx

@@ -1,78 +1,78 @@
-import type { FC } from 'react';
-import type { ITableColumn, ITableDataItem } from '../../../../types/ITable';
-import { useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import { faCheck, faXmark } from '../../../../assets/icons';
-import { useGetFocusableElements } from '../../../../hooks/useGetFocusableElements';
-import { IconButton } from '../../../Button/IconButton';
-import { useTableContext } from '../../contexts/TableContext';
-
-export const TableEditRow: FC<{ columns: ITableColumn[] }> = ({ columns }) => {
-  const { editable } = useTableContext();
-
-  const elementRef = useRef(null);
-
-  const focusableElements = useGetFocusableElements({
-    elementRef,
-    isOpen: true,
-  });
-
-  useEffect(() => {
-    focusableElements[0]?.focus();
-  }, [focusableElements]);
-
-  useEffect(() => {
-    editable!.setEditData(
-      editable!.selectedItem?.item ?? editable!.defaultDataValue ?? {}
-    );
-    // eslint-disable-next-line
-  }, [editable?.setEditData, editable?.selectedItem, editable?.defaultDataValue]);
-
-  let rowCells = {
-    ...editable?.cells,
-    actions: {
-      value: (
-        <div className="flex center gap-1">
-          <IconButton icon={faCheck} size="s" type="submit" />
-          <IconButton
-            icon={faXmark}
-            size="s"
-            onClick={() => {
-              editable?.setEditData(editable?.defaultDataValue || {});
-              if (editable?.isAdding) {
-                editable.setIsAdding(false);
-              } else {
-                editable?.setSelectedItem(null);
-              }
-            }}
-          />
-        </div>
-      ),
-    },
-  };
-
-  const rowData: ITableDataItem = {
-    uuid: editable?.selectedItem?.uuid as string,
-    cells: rowCells,
-  };
-
-  return (
-    <tr ref={elementRef} data-id={rowData.uuid} className="edit-row">
-      {columns.map(column => {
-        const item = rowData.cells[column.id];
-        return (
-          <td
-            key={column.id}
-            align={column.align}
-            colSpan={item?.span}
-            className={clsx(item?.className, {
-              editable: typeof item?.value === 'object',
-            })}
-          >
-            {item?.value ?? ''}
-          </td>
-        );
-      })}
-    </tr>
-  );
-};
+import type { FC } from 'react';
+import type { ITableColumn, ITableDataItem } from '../../../../types/ITable';
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { faCheck, faXmark } from '../../../../assets/icons';
+import { useGetFocusableElements } from '../../../../hooks/useGetFocusableElements';
+import { IconButton } from '../../../Button/IconButton';
+import { useTableContext } from '../../contexts/TableContext';
+
+export const TableEditRow: FC<{ columns: ITableColumn[] }> = ({ columns }) => {
+  const { editable } = useTableContext();
+
+  const elementRef = useRef(null);
+
+  const focusableElements = useGetFocusableElements({
+    elementRef,
+    isOpen: true,
+  });
+
+  useEffect(() => {
+    focusableElements[0]?.focus();
+  }, [focusableElements]);
+
+  useEffect(() => {
+    editable!.setEditData(
+      editable!.selectedItem?.item ?? editable!.defaultDataValue ?? {}
+    );
+    // eslint-disable-next-line
+  }, [editable?.setEditData, editable?.selectedItem, editable?.defaultDataValue]);
+
+  let rowCells = {
+    ...editable?.cells,
+    actions: {
+      value: (
+        <div className="flex center gap-1">
+          <IconButton icon={faCheck} size="s" type="submit" />
+          <IconButton
+            icon={faXmark}
+            size="s"
+            onClick={() => {
+              editable?.setEditData(editable?.defaultDataValue || {});
+              if (editable?.isAdding) {
+                editable.setIsAdding(false);
+              } else {
+                editable?.setSelectedItem(null);
+              }
+            }}
+          />
+        </div>
+      ),
+    },
+  };
+
+  const rowData: ITableDataItem = {
+    uuid: editable?.selectedItem?.uuid as string,
+    cells: rowCells,
+  };
+
+  return (
+    <tr ref={elementRef} data-id={rowData.uuid} className="edit-row">
+      {columns.map(column => {
+        const item = rowData.cells[column.id];
+        return (
+          <td
+            key={column.id}
+            align={column.align}
+            colSpan={item?.span}
+            className={clsx(item?.className, {
+              editable: typeof item?.value === 'object',
+            })}
+          >
+            {item?.value ?? ''}
+          </td>
+        );
+      })}
+    </tr>
+  );
+};

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

@@ -1,15 +1,15 @@
-import type { FC } from 'react';
-import type { ITableFilterItem } from '../../../../types/ITable';
-
-interface Props {
-  item: ITableFilterItem;
-}
-export const FilterItem: FC<Props> = ({ item }) => (
-  <div className="table-filter-item">
-    {/* Added zero-width non-breaking space symbol (&#8288;)
-          because of losing focus from input field when first letter of the label is pressed. */}
-    {/* <p className="filter-item-label">&#8288;{item.label}</p> */}
-    <p className="filter-item-label">{item.label}</p>
-    {item.field}
-  </div>
-);
+import type { FC } from 'react';
+import type { ITableFilterItem } from '../../../../types/ITable';
+
+interface Props {
+  item: ITableFilterItem;
+}
+export const FilterItem: FC<Props> = ({ item }) => (
+  <div className="table-filter-item">
+    {/* Added zero-width non-breaking space symbol (&#8288;)
+          because of losing focus from input field when first letter of the label is pressed. */}
+    {/* <p className="filter-item-label">&#8288;{item.label}</p> */}
+    <p className="filter-item-label">{item.label}</p>
+    {item.field}
+  </div>
+);

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

@@ -1,126 +1,126 @@
-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;
-};
+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;
+};