@inceptionbg/iui 2.0.17 → 2.0.20

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;
-  }
-}