@inceptionbg/iui 2.0.34 → 2.0.36

package/src/components/Table/hooks/useTableEdit.tsx

@@ -1,140 +0,0 @@
-import type { ITableDataItem, ITableEdit } from '../../../types/ITable';
-import { useState } from 'react';
-import { deleteProps, hasValue } from '../../../utils/objectUtils';
-import { DateInput } from '../../Inputs/DateInput/DateInput';
-import { NumberInput } from '../../Inputs/NumberInput';
-import { Select } from '../../Inputs/Selects/Select';
-import { TextInput } from '../../Inputs/TextInput';
-
-interface BaseItemProps<T> {
-  id: keyof T;
-  placeholder?: string;
-  required?: boolean;
-  additionalClearIds?: (keyof T)[];
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-}
-interface SelectProps<T> extends BaseItemProps<T> {
-  options: readonly (string | boolean)[] | (string | boolean)[];
-  minWidth?: number;
-  formatOption: (value: string | boolean) => {
-    value: string | boolean;
-    label: string;
-  };
-}
-
-export const useTableEdit = <T extends Record<string, any>>() => {
-  const [selectedItem, setSelectedItem] = useState<ITableDataItem<T> | null>(null);
-  const [editData, setEditData] = useState<Partial<T>>({});
-
-  // Text
-  const textEditCell = ({
-    placeholder,
-    required,
-    id,
-    additionalClearIds = [],
-    inputProps,
-  }: BaseItemProps<T>) => ({
-    value: (
-      <TextInput
-        placeholder={placeholder}
-        required={required}
-        value={editData[id]}
-        setValue={e =>
-          setEditData(e ? { ...editData, [id]: e } : deleteProps(editData as T, [id]))
-        }
-        inputProps={inputProps}
-        onClear={() => deleteProps(editData as T, [id, ...additionalClearIds])}
-      />
-    ),
-  });
-
-  // Number
-  const numberEditCell = ({
-    placeholder,
-    required,
-    id,
-    additionalClearIds = [],
-    inputProps,
-  }: BaseItemProps<T>) => ({
-    value: (
-      <NumberInput
-        placeholder={placeholder}
-        required={required}
-        value={editData[id]}
-        setValue={e =>
-          setEditData(e ? { ...editData, [id]: e } : deleteProps(editData as T, [id]))
-        }
-        inputProps={inputProps}
-        onClear={() => deleteProps(editData as T, [id, ...additionalClearIds])}
-      />
-    ),
-  });
-
-  // Date
-  const dateEditCell = ({
-    id,
-    required,
-    additionalClearIds,
-  }: Omit<BaseItemProps<T>, 'placeholder' | 'inputProps'>) => ({
-    value: (
-      <DateInput
-        required={required}
-        date={editData[id]}
-        setDate={e => setEditData({ ...editData, [id]: e })}
-        onClear={
-          additionalClearIds
-            ? () => setEditData(deleteProps(editData as T, additionalClearIds))
-            : undefined
-        }
-      />
-    ),
-  });
-
-  // Select
-  const selectEditCell = ({
-    id,
-    placeholder,
-    required,
-    options,
-    formatOption,
-    additionalClearIds = [],
-    minWidth = 110,
-  }: SelectProps<T>) => ({
-    value: (
-      <Select
-        required={required}
-        placeholder={placeholder}
-        value={hasValue(editData[id]) ? formatOption(editData[id]!) : null}
-        options={options.map(formatOption)}
-        minWidth={minWidth}
-        onChange={e => {
-          e
-            ? setEditData({
-                ...editData,
-                [id]: e.value,
-              })
-            : setEditData(deleteProps(editData as T, [id, ...additionalClearIds]));
-        }}
-        isClearable
-      />
-    ),
-  });
-
-  const returnEditable: Pick<
-    ITableEdit<T>,
-    'selectedItem' | 'setSelectedItem' | 'editData' | 'setEditData'
-  > = {
-    selectedItem,
-    setSelectedItem,
-    editData,
-    setEditData,
-  };
-
-  return {
-    editable: returnEditable,
-    textEditCell,
-    numberEditCell,
-    dateEditCell,
-    selectEditCell,
-  };
-};

package/src/components/Table/hooks/useTableFilterFields.tsx

@@ -1,150 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useTranslation } from 'react-i18next';
-import { deleteProps } from '../../../utils/objectUtils';
-import { DateInput } from '../../Inputs/DateInput/DateInput';
-import { Select } from '../../Inputs/Selects/Select';
-import { TextInput } from '../../Inputs/TextInput';
-
-interface Props<T> {
-  searchData: T;
-  setSearchData: Dispatch<SetStateAction<Partial<T>>>;
-}
-
-interface BaseItemField<T> {
-  id: keyof T;
-  additionalClearIds?: (keyof T)[];
-}
-interface BaseItemProps<T> extends BaseItemField<T> {
-  label: string;
-}
-interface DateFilterProps<T> {
-  label: string;
-  from: BaseItemField<T>;
-  to: BaseItemField<T>;
-}
-interface SelectProps<T> extends BaseItemProps<T> {
-  options: readonly string[] | string[];
-  formatOption: (value: string) => {
-    value: string;
-    label: string;
-  };
-}
-interface BooleanSelectProps<T> extends BaseItemProps<T> {
-  labelTrue?: string;
-  labelFalse?: string;
-}
-
-export const useTableFilterFields = <T extends Record<string, any>>({
-  searchData,
-  setSearchData,
-}: Props<T>) => {
-  const { t } = useTranslation();
-
-  // Text
-  const textFilter = ({ label, id, additionalClearIds = [] }: BaseItemProps<T>) => ({
-    label,
-    field: (
-      <TextInput
-        placeholder={t('AddInput') + '...'}
-        value={searchData[id]}
-        setValue={e => setSearchData({ ...searchData, [id]: e })}
-        onClear={() =>
-          setSearchData(deleteProps(searchData, [id, ...additionalClearIds]))
-        }
-      />
-    ),
-  });
-
-  // Date From - To
-  const dateFilter = ({ label, from, to }: DateFilterProps<T>) => ({
-    label,
-    field: (
-      <div className="flex center full-width gap-2">
-        <DateInput
-          date={searchData[from.id]}
-          setDate={e => setSearchData({ ...searchData, [from.id]: e })}
-          onClear={() =>
-            setSearchData(
-              deleteProps(searchData, [from.id, ...(from.additionalClearIds ?? [])])
-            )
-          }
-        />
-        <p>{t('to')}</p>
-        <DateInput
-          date={searchData[to.id]}
-          setDate={e => setSearchData({ ...searchData, [to.id]: e })}
-          onClear={() =>
-            setSearchData(
-              deleteProps(searchData, [to.id, ...(to.additionalClearIds ?? [])])
-            )
-          }
-          calendarPlacement="bottom-right"
-        />
-      </div>
-    ),
-  });
-
-  // Select
-  const selectFilter = ({ label, id, options, formatOption }: SelectProps<T>) => ({
-    label,
-    field: (
-      <Select
-        placeholder={t('Choose')}
-        isClearable
-        value={searchData[id] ? formatOption(searchData[id]) : null}
-        options={options.map(formatOption)}
-        onChange={data => {
-          data
-            ? setSearchData({
-                ...searchData,
-                [id]: data.value,
-              })
-            : setSearchData(deleteProps(searchData, [id]));
-        }}
-      />
-    ),
-  });
-
-  // Select Boolean
-  const booleanSelectFilter = ({
-    label,
-    id,
-    labelFalse,
-    labelTrue,
-  }: BooleanSelectProps<T>) => ({
-    label,
-    field: (
-      <Select
-        placeholder={t('Choose')}
-        isClearable
-        value={
-          searchData[id] !== undefined
-            ? {
-                value: searchData[id],
-                label: searchData[id] ? (labelTrue ?? t('Yes')) : (labelFalse ?? t('No')),
-              }
-            : null
-        }
-        options={[true, false].map(e => ({
-          value: e,
-          label: e ? (labelTrue ?? t('Yes')) : (labelFalse ?? t('No')),
-        }))}
-        onChange={data => {
-          data
-            ? setSearchData({
-                ...searchData,
-                [id]: data.value,
-              })
-            : setSearchData(deleteProps(searchData, [id]));
-        }}
-      />
-    ),
-  });
-
-  return {
-    textFilter,
-    dateFilter,
-    selectFilter,
-    booleanSelectFilter,
-  };
-};

package/src/components/Table/hooks/useTablePagination.ts

@@ -1,19 +0,0 @@
-import type { IPagination, IPaginationControl } from '../../../types/ITable';
-import { useMemo, useState } from 'react';
-
-export const useTablePagination = (defaultLimit: number = 5) => {
-  const [limit, setLimit] = useState(defaultLimit);
-  const [offset, setOffset] = useState(0);
-
-  const pagination: IPagination = useMemo(() => ({ limit, offset }), [limit, offset]);
-  const paginationControl: IPaginationControl = useMemo(
-    () => ({
-      ...pagination,
-      setLimit,
-      setOffset,
-    }),
-    [pagination]
-  );
-
-  return { pagination, paginationControl };
-};

package/src/components/Table/hooks/useTablePrint.ts

@@ -1,83 +0,0 @@
-import type { IGetPrintData, IPrintData, ITableDataItem } from '../../../types/ITable';
-import { useEffect, useMemo, useState } from 'react';
-import { usePopupControl } from '../../../hooks/usePopupControl';
-
-type Props<T> = {
-  getPrintData: IGetPrintData<T>;
-  createTableData?: (data: T[]) => ITableDataItem<T>[];
-  totalRows?: number;
-};
-
-const limit = 1000;
-const defaultData = { items: [], totalRows: 0 };
-
-export const useTablePrint = <T>({
-  getPrintData,
-  createTableData,
-  totalRows: initialTotalRows = 0,
-}: Props<T>) => {
-  const printPopupControl = usePopupControl();
-
-  const [data, setData] = useState<{ items: T[]; totalRows: number }>(defaultData);
-  const [offset, setOffset] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (printPopupControl.control.isOpen) {
-      setIsLoading(true);
-      setOffset(0);
-    }
-    return () => {
-      setIsLoading(false);
-      setData(defaultData);
-      setOffset(0);
-    };
-  }, [printPopupControl.control.isOpen]);
-
-  useEffect(() => {
-    if (printPopupControl.control.isOpen) {
-      getPrintData({
-        pagination: { limit, offset },
-        noTotalRows: !!initialTotalRows || offset > 0,
-      })
-        .then(({ items, totalRows: newTotalRows }) => {
-          setData(prevState => {
-            const newData = offset === 0 ? items : prevState.items.concat(items);
-            const totalRows =
-              newTotalRows || initialTotalRows || prevState.totalRows || 0;
-
-            if (items?.length === limit) {
-              setOffset(offset => offset + 1);
-            } else {
-              setIsLoading(false);
-            }
-
-            return { items: newData, totalRows };
-          });
-        })
-        .catch(() => setIsLoading(false));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [printPopupControl.control.isOpen, initialTotalRows, offset]);
-
-  const loaded = data.items?.length;
-  const progress = data.totalRows ? (loaded / data.totalRows) * 100 : 0;
-
-  const tableData = useMemo(
-    () => (!isLoading ? (createTableData?.(data.items) ?? []) : []),
-    [isLoading, data.items, createTableData]
-  );
-
-  const printData: Pick<
-    IPrintData<T>,
-    'tableData' | 'printPopupControl' | 'isLoading' | 'progress' | 'items'
-  > = {
-    tableData,
-    printPopupControl,
-    isLoading,
-    progress,
-    items: data.items ?? [],
-  };
-
-  return printData;
-};

package/src/components/Table/hooks/useTableSearch.ts

@@ -1,31 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useState } from 'react';
-import { deletePropsThatEndsWith } from '../../../utils/objectUtils';
-
-export interface ITableSearchProps<T> {
-  setOffset: Dispatch<SetStateAction<number>>;
-  resetSelectedRows?: () => void;
-  defaultSearch?: T;
-}
-
-export const useTableSearch = <T>({
-  setOffset,
-  resetSelectedRows,
-  defaultSearch = {} as T,
-}: ITableSearchProps<T>) => {
-  const [search, setSearch] = useState<T>(defaultSearch);
-  const [searchData, setSearchData] = useState<T>(defaultSearch);
-
-  const onSearch = (filters: T) => {
-    setOffset(0);
-    resetSelectedRows?.();
-    setSearch(<T>deletePropsThatEndsWith(filters, 'Obj'));
-  };
-
-  return {
-    search,
-    searchData,
-    setSearchData,
-    onSearch,
-  };
-};

package/src/components/Table/hooks/useTableSelect.ts

@@ -1,19 +0,0 @@
-import type { ITableSelectedAction } from '../../../types/ITable';
-import { useMemo, useState } from 'react';
-
-export const useTableSelect = (actions: ITableSelectedAction[] = []) => {
-  const [selectedRows, setSelectedRows] = useState(new Set<string>());
-
-  const rowSelect = useMemo(
-    () => ({
-      selectedRows,
-      setSelectedRows,
-      resetSelectedRows: () => setSelectedRows(new Set<string>()),
-      actions,
-    }),
-    // eslint-disable-next-line
-    [selectedRows]
-  );
-
-  return rowSelect;
-};

package/src/components/Table/hooks/useTableSort.ts

@@ -1,8 +0,0 @@
-import type { ITableSort } from '../../../types/ITable';
-import { useState } from 'react';
-
-export const useTableSort = (sortOptions: ITableSort[]) => {
-  const [sort, setSort] = useState('');
-
-  return { sort, setSort, sortOptions };
-};

package/src/components/Tabs/Tabs.tsx

@@ -1,68 +0,0 @@
-import type { FC } from 'react';
-import type { ITab } from '../../types/ITab';
-import { useMemo, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-
-interface Props {
-  tabs: ITab[];
-  initialValue?: string;
-  control?: {
-    value: string;
-    setValue: (value: string) => void;
-  };
-  onChange?: (value: string) => void;
-  noWrap?: boolean;
-  className?: string;
-  classNameContent?: string;
-}
-
-export const Tabs: FC<Props> = ({
-  tabs,
-  initialValue,
-  control,
-  onChange,
-  noWrap,
-  className,
-  classNameContent,
-}) => {
-  const filteredTabs = useMemo(() => tabs.filter(e => !e.hidden), [tabs]);
-
-  const [selected, setSelected] = useState(initialValue || filteredTabs[0]?.value || '');
-
-  const activeTab = filteredTabs.find(tab => (control?.value ?? selected) === tab.value);
-
-  return filteredTabs.length > 0 ? (
-    <div className={className}>
-      <div className="iui-tabs">
-        {filteredTabs.map(tab => (
-          <div
-            id={tab.value}
-            key={tab.value}
-            className={clsx('iui-tab clickable', {
-              selected: (control?.value ?? selected) === tab.value,
-              disabled: tab.disabled,
-              'no-wrap': noWrap,
-            })}
-            onClick={
-              tab.disabled
-                ? undefined
-                : () => {
-                    !!control ? control.setValue(tab.value) : setSelected(tab.value);
-                    onChange?.(tab.value);
-                  }
-            }
-          >
-            {tab.icon && <FontAwesomeIcon icon={tab.icon} />}
-            {tab.label}
-          </div>
-        ))}
-      </div>
-      {activeTab && (
-        <div key={activeTab.value} className={clsx('iui-tab-content', classNameContent)}>
-          {activeTab.component}
-        </div>
-      )}
-    </div>
-  ) : null;
-};