@inceptionbg/iui 2.0.23 → 2.0.25

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

@@ -1,140 +1,140 @@
-import { useState } from 'react';
-import { ITableDataItem, ITableEdit } from '../../../types/ITable';
-import { deleteProps, hasValue } from '../../../utils/objectUtils';
-import { Select } from '../../Inputs/Selects/Select';
-import { TextInput } from '../../Inputs/TextInput';
-import { DateInput } from '../../Inputs/DateInput/DateInput';
-import { NumberInput } from '../../Inputs/NumberInput';
-
-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,
-  };
-};
+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 +1,150 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Select } from '../../Inputs/Selects/Select';
-import { deleteProps } from '../../../utils/objectUtils';
-import { TextInput } from '../../Inputs/TextInput';
-import { DateInput } from '../../Inputs/DateInput/DateInput';
-
-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,
-  };
-};
+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 +1,19 @@
-import { useMemo, useState } from 'react';
-import { IPagination, IPaginationControl } from '../../../types/ITable';
-
-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 };
-};
+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 };
+};