@inceptionbg/iui 2.0.34 → 2.0.36

package/src/components/Table/Table.tsx

@@ -1,258 +0,0 @@
-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 && !footer.hidden && (
-          <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 +0,0 @@
-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>
-  );
-};

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

@@ -1,114 +0,0 @@
-import type { DropResult } from '@hello-pangea/dnd';
-import type { FC } from 'react';
-import type { ITableColumn } from '../../../../types/ITable';
-import { useEffect, useState } from 'react';
-import { faLineColumns } from '@inceptionbg/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { DragDropContext } from '@hello-pangea/dnd';
-import { useTranslation } from 'react-i18next';
-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 +0,0 @@
-import type { FC } from 'react';
-import type { ITableColumn, ITableDataItem } from '../../../../types/ITable';
-import { useEffect, useRef } from 'react';
-import { faCheck, faXmark } from '@inceptionbg/icons';
-import clsx from 'clsx';
-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 +0,0 @@
-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 +0,0 @@
-import type { FC } from 'react';
-import type { ITableFilterItem } from '../../../../types/ITable';
-import { useMemo, useState } from 'react';
-import { faFilter } from '@inceptionbg/icons';
-import { useTranslation } from 'react-i18next';
-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;
-};