@inceptionbg/iui 2.0.23 → 2.0.25

package/src/utils/tableUtils.ts

@@ -1,130 +1,130 @@
-import { IAnyObject } from '../types/IBasic';
-import {
-  IReportTemplate,
-  IReportTemplateFilterValue,
-  ITableColumn,
-  ITableColumnsData,
-} from '../types/ITable';
-
-// FILTERS
-export const getActiveFilterNumber = (obj: IAnyObject) => Object.keys(obj).length;
-
-// COLUMNS
-export const getVisibleColumnsIds = (tableCols: ITableColumn[], isPrint?: boolean) =>
-  tableCols.reduce(
-    (arr: string[], col) =>
-      col.hidden ||
-      col.unavailable ||
-      (isPrint && ['select', 'icons', 'actions'].includes(col.id))
-        ? arr
-        : arr.concat(col.id),
-    []
-  );
-
-export const getVisibleColumnsFromList = (
-  tableCols: ITableColumn[],
-  visibleColumns: string[]
-) =>
-  tableCols
-    .map(e =>
-      visibleColumns.includes(e.id) ? { ...e, hidden: false } : { ...e, hidden: true }
-    )
-    .sort((e, f) =>
-      visibleColumns.indexOf(e.id) < visibleColumns.indexOf(f.id) ? -1 : 1
-    );
-
-export const getPrintColumns = (tableCols: ITableColumn[]) =>
-  tableCols.reduce(
-    (arr: string[], col) => (col.hidden || col.unavailable ? arr : arr.concat(col.id)),
-    []
-  );
-
-// TEMPLATES
-export const convertSearchToReportTemplateFilter = (search: IAnyObject) =>
-  Object.entries(search)
-    .map(e =>
-      typeof e[1] === 'object'
-        ? Array.isArray(e[1])
-          ? { filter: e[0], type: 'ARRAY', value: JSON.stringify(e[1]) }
-          : {
-              filter: e[0],
-              type: 'OBJECT',
-              value: e[1].value,
-              name: e[1].label as string,
-              // value: e[1].uuid,
-              // name: (e[1].label ?? e[1].name) as string,
-            }
-        : {
-            filter: e[0],
-            type: typeof e[1] === 'boolean' ? 'BOOLEAN' : 'STRING',
-            value: e[1],
-          }
-    )
-    .filter(
-      e => ![null, undefined, ''].includes(e.value)
-    ) as IReportTemplateFilterValue[];
-
-export const convertReportTemplateFilterToSearch = (
-  filterValues: IReportTemplateFilterValue[]
-) => {
-  let search: any = {};
-  filterValues?.forEach(template => {
-    search[template.filter] =
-      template.type === 'OBJECT'
-        ? {
-            value: template.value,
-            label: template.name,
-          }
-        : template.type === 'ARRAY'
-          ? JSON.parse(template.value)
-          : template.type === 'BOOLEAN'
-            ? template.value === 'true'
-            : template.value;
-  });
-  return search;
-};
-
-export const setTemplateData = ({
-  template,
-  columnData,
-  setFilters,
-  setSort,
-}: {
-  template: IReportTemplate;
-  columnData?: ITableColumnsData;
-  setFilters?: (filters: IAnyObject) => void;
-  setSort?: (sort: string) => void;
-}) => {
-  const newFilters =
-    template.filterValues && convertReportTemplateFilterToSearch(template.filterValues);
-  newFilters && setFilters?.(newFilters);
-  columnData &&
-    columnData.setColumns?.(
-      getVisibleColumnsFromList(columnData.defaultColumns, template.columns)
-    );
-  template.sorts && setSort && setSort(template.sorts[0]);
-};
-
-export const scrollToRow = (uuid: string) => {
-  const rowElement = document.querySelector(`[data-id="${uuid}"]`) as HTMLTableRowElement;
-
-  if (!rowElement) {
-    return;
-  }
-
-  // rowElement.scrollIntoView({
-  //   behavior: 'smooth',
-  //   block: 'nearest',
-  // });
-
-  const tableContainer = rowElement?.closest('.table-container') as HTMLElement;
-  const tableHeadHeight =
-    tableContainer.querySelector('thead')?.getBoundingClientRect().height || 0;
-  const rowTop = rowElement.offsetTop;
-  const scrollTopTarget = Math.max(0, rowTop - tableHeadHeight);
-
-  tableContainer.scrollTo({
-    top: scrollTopTarget,
-    behavior: 'smooth',
-  });
-};
+import type { IAnyObject } from '../types/IBasic';
+import type {
+  IReportTemplate,
+  IReportTemplateFilterValue,
+  ITableColumn,
+  ITableColumnsData,
+} from '../types/ITable';
+
+// FILTERS
+export const getActiveFilterNumber = (obj: IAnyObject) => Object.keys(obj).length;
+
+// COLUMNS
+export const getVisibleColumnsIds = (tableCols: ITableColumn[], isPrint?: boolean) =>
+  tableCols.reduce(
+    (arr: string[], col) =>
+      col.hidden ||
+      col.unavailable ||
+      (isPrint && ['select', 'icons', 'actions'].includes(col.id))
+        ? arr
+        : arr.concat(col.id),
+    []
+  );
+
+export const getVisibleColumnsFromList = (
+  tableCols: ITableColumn[],
+  visibleColumns: string[]
+) =>
+  tableCols
+    .map(e =>
+      visibleColumns.includes(e.id) ? { ...e, hidden: false } : { ...e, hidden: true }
+    )
+    .sort((e, f) =>
+      visibleColumns.indexOf(e.id) < visibleColumns.indexOf(f.id) ? -1 : 1
+    );
+
+export const getPrintColumns = (tableCols: ITableColumn[]) =>
+  tableCols.reduce(
+    (arr: string[], col) => (col.hidden || col.unavailable ? arr : arr.concat(col.id)),
+    []
+  );
+
+// TEMPLATES
+export const convertSearchToReportTemplateFilter = (search: IAnyObject) =>
+  Object.entries(search)
+    .map(e =>
+      typeof e[1] === 'object'
+        ? Array.isArray(e[1])
+          ? { filter: e[0], type: 'ARRAY', value: JSON.stringify(e[1]) }
+          : {
+              filter: e[0],
+              type: 'OBJECT',
+              value: e[1].value,
+              name: e[1].label as string,
+              // value: e[1].uuid,
+              // name: (e[1].label ?? e[1].name) as string,
+            }
+        : {
+            filter: e[0],
+            type: typeof e[1] === 'boolean' ? 'BOOLEAN' : 'STRING',
+            value: e[1],
+          }
+    )
+    .filter(
+      e => ![null, undefined, ''].includes(e.value)
+    ) as IReportTemplateFilterValue[];
+
+export const convertReportTemplateFilterToSearch = (
+  filterValues: IReportTemplateFilterValue[]
+) => {
+  let search: any = {};
+  filterValues?.forEach(template => {
+    search[template.filter] =
+      template.type === 'OBJECT'
+        ? {
+            value: template.value,
+            label: template.name,
+          }
+        : template.type === 'ARRAY'
+          ? JSON.parse(template.value)
+          : template.type === 'BOOLEAN'
+            ? template.value === 'true'
+            : template.value;
+  });
+  return search;
+};
+
+export const setTemplateData = ({
+  template,
+  columnData,
+  setFilters,
+  setSort,
+}: {
+  template: IReportTemplate;
+  columnData?: ITableColumnsData;
+  setFilters?: (filters: IAnyObject) => void;
+  setSort?: (sort: string) => void;
+}) => {
+  const newFilters =
+    template.filterValues && convertReportTemplateFilterToSearch(template.filterValues);
+  newFilters && setFilters?.(newFilters);
+  columnData &&
+    columnData.setColumns?.(
+      getVisibleColumnsFromList(columnData.defaultColumns, template.columns)
+    );
+  template.sorts && setSort && setSort(template.sorts[0]);
+};
+
+export const scrollToRow = (uuid: string) => {
+  const rowElement = document.querySelector(`[data-id="${uuid}"]`) as HTMLTableRowElement;
+
+  if (!rowElement) {
+    return;
+  }
+
+  // rowElement.scrollIntoView({
+  //   behavior: 'smooth',
+  //   block: 'nearest',
+  // });
+
+  const tableContainer = rowElement?.closest('.table-container') as HTMLElement;
+  const tableHeadHeight =
+    tableContainer.querySelector('thead')?.getBoundingClientRect().height || 0;
+  const rowTop = rowElement.offsetTop;
+  const scrollTopTarget = Math.max(0, rowTop - tableHeadHeight);
+
+  tableContainer.scrollTo({
+    top: scrollTopTarget,
+    behavior: 'smooth',
+  });
+};

package/src/utils/toasts.ts

@@ -1,6 +1,6 @@
-import { toast } from 'react-toastify';
-
-export const toastSuccess = (message: string) => toast.success(message);
-export const toastError = (message: string) => toast.error(message, { autoClose: false });
-// export const toastInfo = (message: string) => toast.info(message);
-// export const toastWarn = (message: string) => toast.warn(message);
+import { toast } from 'react-toastify';
+
+export const toastSuccess = (message: string) => toast.success(message);
+export const toastError = (message: string) => toast.error(message, { autoClose: false });
+// export const toastInfo = (message: string) => toast.info(message);
+// export const toastWarn = (message: string) => toast.warn(message);

package/src/utils/urlUtils.ts

@@ -1,4 +1,4 @@
-export const parseUrlSearch = (search: string) => {
-  const urlSearchParams = new URLSearchParams(search);
-  return Object.fromEntries(urlSearchParams.entries());
-};
+export const parseUrlSearch = (search: string) => {
+  const urlSearchParams = new URLSearchParams(search);
+  return Object.fromEntries(urlSearchParams.entries());
+};

package/tsconfig.json

@@ -10,6 +10,7 @@
     "moduleResolution": "node",
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
     "declaration": true,
     "declarationDir": "dist/types",
     "paths": {

package/src/components/Dialog/hooks/useDialogKeyboard.ts

@@ -1,42 +0,0 @@
-import { useEffect } from 'react';
-import { IKeyboardAction } from '../../../types/IKeyboard';
-
-export const useDialogKeyboard = ({
-  isOpen,
-  onClose,
-  submit,
-  isDisabled,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  submit: {
-    onEnter: () => void;
-    isDisabled?: boolean;
-  };
-  isDisabled?: boolean;
-}) => {
-  useEffect(() => {
-    if (isOpen && !isDisabled) {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        event.stopPropagation();
-        const actions: IKeyboardAction[] = [
-          { code: 'Enter', onAction: submit.onEnter!, disabled: submit.isDisabled },
-          { code: 'Escape', onAction: onClose },
-        ];
-
-        actions.forEach(item => {
-          if (!item.disabled && item.code === event.key) {
-            event.preventDefault();
-            event.stopPropagation();
-            item.onAction();
-          }
-        });
-      };
-
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [isOpen, submit, onClose, isDisabled]);
-};

package/src/components/Inputs/Select2/Select.tsx

@@ -1,258 +0,0 @@
-import './select.scss';
-
-import { useState, useRef, useEffect, ChangeEvent, FC, UIEvent } from 'react';
-import clsx from 'clsx';
-import { InputWrapper } from '../InputWrapper';
-import { createPortal } from 'react-dom';
-import { rootDir } from '../../../utils/rootDir';
-import { useMenuPosition } from '../../Menu/hooks/useMenuPosition';
-import { IMenuPlacement } from '../../../types/IMenu';
-
-export interface OptionType {
-  label: string;
-  value: any;
-}
-
-// interface LoadOptionsParams {
-//   inputValue: string;
-//   loadedOptions: OptionType[];
-//   page: number;
-// }
-
-interface LoadOptionsResponse {
-  options: OptionType[];
-  hasMore: boolean;
-}
-
-interface CustomSelectProps {
-  label: string;
-  value?: any;
-  setValue: (option: OptionType | null) => void;
-  required?: boolean;
-  disabled?: boolean;
-  isMulti?: boolean;
-  isAsync?: boolean;
-  isCreatable?: boolean;
-  options?: OptionType[];
-  placeholder?: string;
-  loadOptions?: (
-    inputValue: string,
-    loadedOptions: OptionType[],
-    params: { page: number }
-  ) => Promise<LoadOptionsResponse>;
-  onCreateOption?: (inputValue: string) => Promise<OptionType>;
-  isClearable: boolean;
-  onClearInput?: () => void;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  menuPlacement?: IMenuPlacement;
-  className?: string;
-  // minWidth?: number;
-}
-
-export const Select: FC<CustomSelectProps> = ({
-  label,
-  value,
-  setValue,
-  onCreateOption,
-  required,
-  disabled,
-  options = [],
-  loadOptions,
-  placeholder = 'Select...',
-  isMulti,
-  isAsync = false,
-  isCreatable = false,
-  isClearable = true,
-  onClearInput,
-  helperText,
-  errorText,
-  error,
-  menuPlacement = 'bottom-left',
-  className,
-  // minWidth,
-}) => {
-  const [inputValue, setInputValue] = useState<string | null>(null);
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const [filteredOptions, setFilteredOptions] = useState<OptionType[]>([]);
-  const [page, setPage] = useState(0);
-  const [index, setIndex] = useState<number | null>(null);
-  const [hasMore, setHasMore] = useState(true);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const menuStyle = useMenuPosition({
-    isOpen: dropdownVisible,
-    placement: menuPlacement,
-    containerRef,
-    menuRef: dropdownRef,
-    withMinWidth: true,
-  });
-
-  useEffect(() => {
-    if (!isAsync) {
-      const filtered = inputValue
-        ? options.filter(opt =>
-            opt.label.toLowerCase().includes(inputValue.toLowerCase())
-          )
-        : options;
-      setFilteredOptions(filtered);
-    }
-  }, [inputValue, options, isAsync]);
-
-  useEffect(() => {
-    if (isAsync && loadOptions) {
-      loadOptions(inputValue ?? '', filteredOptions, { page }).then(
-        ({ options: newOptions, hasMore }) => {
-          setFilteredOptions(prev => [...prev, ...newOptions]);
-          setHasMore(hasMore);
-        }
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page]);
-
-  const handleOptionClick = (option: OptionType) => {
-    setValue(option);
-    setInputValue(null);
-    setTimeout(() => {
-      setIndex(null);
-      // setDropdownVisible(false);
-    });
-  };
-
-  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
-    setInputValue(
-      e.target.defaultValue === value?.label
-        ? // @ts-ignore
-          (e.nativeEvent?.data ?? '')
-        : inputValue
-    );
-    // setFilteredOptions([]);
-    setPage(0);
-    if (isAsync && loadOptions) {
-      loadOptions(inputValue, [], { page: 0 }).then(({ options, hasMore }) => {
-        setFilteredOptions(options);
-        setHasMore(hasMore);
-      });
-    }
-  };
-
-  const handleScroll = (e: UIEvent<HTMLDivElement>) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-    if (scrollHeight - scrollTop === clientHeight && hasMore) {
-      setPage(prev => prev + 1);
-    }
-  };
-
-  const handleCreate = async () => {
-    if (onCreateOption && inputValue?.trim()) {
-      const newOption = await onCreateOption(inputValue);
-      setFilteredOptions(prev => [newOption, ...prev]);
-      setValue(newOption);
-      setInputValue(null);
-      setDropdownVisible(false);
-    }
-  };
-
-  return (
-    <div
-      className="customSelect"
-      onFocus={() => setDropdownVisible(true)}
-      onBlur={() => {
-        setDropdownVisible(false);
-        setInputValue(null);
-      }}
-    >
-      <InputWrapper
-        label={label}
-        required={required}
-        disabled={disabled}
-        // endText={endText}
-        // endButton={endButton}
-        onClearInput={
-          isClearable && value
-            ? () => {
-                setValue(null);
-                setInputValue('');
-                // setSelectedOption(null);
-              }
-            : undefined
-        }
-        helperText={helperText}
-        errorText={errorText}
-        error={error}
-        inputFieldRef={containerRef}
-        className={className}
-      >
-        <input
-          value={inputValue ?? value?.label ?? ''}
-          onChange={handleInput}
-          required={required}
-          disabled={disabled}
-          // onFocus={e => e.currentTarget.select()}
-          //   autoFocus={autoFocus}
-          placeholder={value?.label || placeholder}
-          onKeyDown={e => {
-            if (e.key === 'ArrowUp') {
-              e.preventDefault();
-              if (index === null || index === 0) {
-                setIndex(filteredOptions.length - 1);
-              } else {
-                setIndex(prev => prev! - 1);
-              }
-            } else if (e.key === 'ArrowDown') {
-              e.preventDefault();
-              if (index === null || index === filteredOptions.length - 1) {
-                setIndex(0);
-              } else {
-                setIndex(prev => prev! + 1);
-                dropdownRef.current?.scrollTo({ top: 20 * ((index ?? 0) + 1) });
-              }
-            } else if (e.key === 'Enter' && index !== null) {
-              e.preventDefault();
-              e.currentTarget.blur();
-              handleOptionClick(filteredOptions[index]);
-            } else if (e.key === 'Escape') {
-              e.preventDefault();
-              e.currentTarget.blur();
-            }
-          }}
-        />
-      </InputWrapper>
-
-      {dropdownVisible
-        ? createPortal(
-            <div
-              ref={dropdownRef}
-              className="select-dropdown"
-              onScroll={handleScroll}
-              style={menuStyle}
-            >
-              {filteredOptions.map((option, i) => (
-                <div
-                  key={i}
-                  className={clsx('option', { hover: index === i })}
-                  onMouseDown={() => handleOptionClick(option)}
-                >
-                  {option.label}
-                </div>
-              ))}
-              {!filteredOptions.length && <div className="option">No options</div>}
-              {isCreatable &&
-                inputValue &&
-                !filteredOptions.some(opt => opt.label === inputValue) && (
-                  <div className="option createOption" onClick={handleCreate}>
-                    {`Create ${inputValue}`}
-                  </div>
-                )}
-            </div>,
-            rootDir
-          )
-        : null}
-    </div>
-  );
-};

package/src/components/Inputs/Select2/select.scss

@@ -1,42 +0,0 @@
-.customSelect {
-  position: relative;
-  width: 300px;
-  font-family: sans-serif;
-
-  .inputWrapper {
-    input {
-      width: 100%;
-      padding: 8px 12px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      font-size: 14px;
-    }
-  }
-}
-
-.select-dropdown {
-  position: absolute;
-  z-index: 1000;
-  // width: 100%;
-  min-width: 200px;
-  max-height: 200px;
-  overflow-y: auto;
-  background: #fff;
-  border: var(--border);
-  border-radius: 8px;
-  // border-radius: 0 0 8px 8px;
-  margin-top: 2px;
-  .option {
-    padding: 8px 12px;
-    cursor: pointer;
-
-    &.hover,
-    &:hover {
-      background-color: #f5f5f5;
-    }
-  }
-  .createOption {
-    font-weight: bold;
-    color: #007bff;
-  }
-}