@redneckz/wildless-cms-uni-blocks 0.14.909 → 0.14.910

package/src/ui-kit/Select/Select.tsx

@@ -4,14 +4,13 @@ import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type IconVersion } from '../../model/IconVersion';
-import { type PlaceholderProps } from '../../model/PlaceholderProps';
 import { debounce } from '../../utils/debounce';
+import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
-import { Icon } from '../Icon/Icon';
-import { Input } from '../Input/Input';
 import { renderLabel } from '../Input/renderLabel';
-import { formatOption } from './formatOption';
 import { type Option } from './Option';
+import { renderSearchInput } from './renderSearchInput';
+import { renderSelectContainer } from './renderSelectContainer';
 import { useSelectPopup } from './useSelectPopup';
 
 export interface SelectProps extends DefaultControlType, ControlProps<Option> {
@@ -21,13 +20,14 @@ export interface SelectProps extends DefaultControlType, ControlProps<Option> {
   isSearch?: boolean;
   isManualInput?: boolean;
   iconVersion?: IconVersion;
+  inputProps?: InputTypeProps;
+  disableFilterOptions?: boolean;
   onSearchQuery?: (value: string) => void;
 }
 
-type renderOptionTextProps = PlaceholderProps & {
-  isManualInput?: boolean;
-  query?: string;
-  value?: Option;
+export type InputTypeProps = {
+  isInteger?: boolean;
+  maxLength?: number;
 };
 
 export const Select = JSX<SelectProps>(
@@ -36,133 +36,74 @@ export const Select = JSX<SelectProps>(
     label,
     options = [],
     value,
-    valid = true,
-    isBorder = true,
-    placeholder = '',
     isSearch = false,
     isManualInput = false,
     disabled = false,
     iconVersion = 'black',
     onChange,
-    onSearchQuery,
+    onSearchQuery = noop,
+    inputProps,
+    disableFilterOptions = false,
+    ...rest
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
     const [query, setQuery] = useState('');
-    const isDisabled = getDisabled(disabled, options.length, isManualInput);
-    const isIconHidden = getIconHidden(isManualInput, options);
-    const hasOpen = isOpen && !isDisabled;
+
+    const isDisabled = disabled || (!isManualInput && options.length === 0);
 
     const debouncedOnSearchQuery = useMemo(
-      () => onSearchQuery && getDebouncedSearchQuery(onSearchQuery),
+      () => debounce((searchValue: string) => onSearchQuery(searchValue), 300),
       [onSearchQuery],
     );
 
     const handleOpen = useCallback(() => {
-      if (isDisabled) {
-        return;
-      }
-
-      open();
+      isDisabled ? noop() : open();
     }, [isDisabled]);
 
-    const handleChangeQuery = (newQuery: string) => {
-      setQuery(newQuery);
-      isManualInput && setOption(newQuery, onChange);
-      debouncedOnSearchQuery && debouncedOnSearchQuery(newQuery);
-    };
-
     const handleClose = useCallback(() => {
       !isManualInput && setQuery('');
       close();
-    }, []);
-
+    }, [isManualInput]);
+
+    const handleChangeQuery = useCallback(
+      (newQuery: string) => {
+        setQuery(newQuery);
+        isManualInput && onChange?.({ key: newQuery, text: newQuery, innDaData: {} });
+        debouncedOnSearchQuery?.(newQuery);
+      },
+      [isManualInput, onChange, debouncedOnSearchQuery],
+    );
+    const selectState = { query, value, options, isOpen, iconVersion };
     const inputRef = useSelectPopup({
-      isOpen,
-      options,
-      value,
-      query,
       onChange,
       onClose: handleClose,
-      iconVersion,
+      disableFilterOptions,
       onChangeQuery: setQuery,
+      ...selectState,
     });
 
     return (
       <div className={style('space-y-xs', className)}>
         {renderLabel(label)}
-        <div className={style('relative', hasOpen ? 'z-20' : 'z-10')} ref={inputRef}>
-          <div
-            className={style(
-              'h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden',
-              getStyle(isBorder, valid, isDisabled),
-            )}
-            onClick={hasOpen ? handleClose : handleOpen}
-          >
-            <p className="line-clamp-2 text-ellipsis">
-              {useRenderOptionText({ isManualInput, query, value, placeholder })}
-            </p>
-            {isIconHidden ? '' : renderIcon(hasOpen, iconVersion)}
-          </div>
-          {isSearch && hasOpen ? renderSearchInput(query, isDisabled, handleChangeQuery) : null}
+        <div className={style('relative', isOpen ? 'z-20' : 'z-10')} ref={inputRef}>
+          {renderSelectContainer({
+            isDisabled,
+            onClose: handleClose,
+            onOpen: handleOpen,
+            isManualInput,
+            ...selectState,
+            ...rest,
+          })}
+          {isSearch && isOpen
+            ? renderSearchInput({
+                query,
+                isDisabled,
+                inputProps,
+                onChangeQuery: handleChangeQuery,
+              })
+            : null}
         </div>
       </div>
     );
   },
 );
-
-const useRenderOptionText = (data: renderOptionTextProps) =>
-  useMemo(() => {
-    if (data.isManualInput && data.query) {
-      return data.query;
-    }
-
-    return formatOption(data.value) || data.placeholder;
-  }, [data.isManualInput, data.query, data.value, data.placeholder]);
-
-const renderSearchInput = (
-  query: string,
-  isDisabled: boolean,
-  onChangeQuery: (value: string) => void,
-) => (
-  <div className={style('absolute top-0 w-full z-20')}>
-    <Input
-      type="text"
-      value={query}
-      autoFocus
-      disabled={isDisabled}
-      onChange={(value) => onChangeQuery(value)}
-    />
-  </div>
-);
-
-const renderIcon = (isOpen: boolean, iconVersion?: IconVersion) => (
-  <Icon
-    className={style('absolute right-0 flex self-center', { 'rotate-180': !isOpen })}
-    iconVersion={iconVersion}
-    name="ArrowUpIcon"
-    width="16"
-    height="16"
-  />
-);
-
-const getStyle = (isBorder: boolean, valid: boolean, disabled: boolean) =>
-  style(
-    isBorder ? 'border rounded-md ' : '',
-    isBorder && !disabled ? 'hover:border-primary-hover' : '',
-    disabled ? 'bg-main-divider' : 'cursor-pointer ',
-    valid ? 'border-gray' : 'border-error',
-  );
-
-// TODO Нужен рефактор и декомпозиция компонента getDisabled, setOption, getIconHidden
-const getDisabled = (disabled: boolean, length: number, isManualInput: boolean) =>
-  disabled || (!isManualInput && length === 0);
-
-const setOption = (query: string, onChange?: (data: Option) => void) => {
-  onChange && query.trim() !== '' && onChange({ key: query, text: query, innDaData: {} });
-};
-
-const getIconHidden = (isManualInput: boolean, options: Option[]) =>
-  isManualInput && !options.length;
-
-const getDebouncedSearchQuery = (onSearchQuery: (value: string) => void) =>
-  debounce((searchValue: string) => onSearchQuery(searchValue), 300);

package/src/ui-kit/Select/SelectPopup.tsx

@@ -14,17 +14,27 @@ export interface SelectPopupProps extends ControlProps<Option> {
   popupRef?: { current: HTMLDivElement | null };
   query?: string;
   onChangeQuery?: (value: string) => void;
+  disableFilterOptions?: boolean;
 }
 
 export const SelectPopup = JSX<SelectPopupProps>(
-  ({ popupRef, options, value, query, onChange, iconVersion, onChangeQuery }) =>
+  ({
+    popupRef,
+    options,
+    value,
+    query,
+    iconVersion,
+    disableFilterOptions,
+    onChange,
+    onChangeQuery,
+  }) =>
     options?.length ? (
       <div
         className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
         role="list"
         ref={popupRef}
       >
-        {filterOptions(options, query).map((option) => (
+        {filterOptions(options, query, disableFilterOptions).map((option) => (
           <div
             key={option.key}
             className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"

package/src/ui-kit/Select/filterOptions.ts

@@ -1,7 +1,11 @@
 import { type Option } from './Option';
 
-export const filterOptions = (options: Option[], query: string | undefined): Option[] => {
-  if (!options?.length || !query?.trim()) {
+export const filterOptions = (
+  options: Option[],
+  query: string | undefined,
+  disableFilterOptions?: boolean,
+): Option[] => {
+  if (!options?.length || !query?.trim() || disableFilterOptions) {
     return options;
   }
 

package/src/ui-kit/Select/renderIcon.tsx

@@ -0,0 +1,13 @@
+import type { IconVersion } from '../../model/IconVersion';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+
+export const renderIcon = (isOpen: boolean, iconVersion?: IconVersion) => (
+  <Icon
+    className={style('absolute right-0 flex self-center', { 'rotate-180': !isOpen })}
+    iconVersion={iconVersion}
+    name="ArrowUpIcon"
+    width="16"
+    height="16"
+  />
+);

package/src/ui-kit/Select/renderOptionText.tsx

@@ -0,0 +1,22 @@
+import { type PlaceholderProps } from '../../model/PlaceholderProps';
+import { formatOption } from './formatOption';
+import { type Option } from './Option';
+
+type RenderOptionTextProps = PlaceholderProps & {
+  isManualInput?: boolean;
+  query?: string;
+  value?: Option;
+};
+
+export const renderOptionText = ({
+  isManualInput,
+  query,
+  value,
+  placeholder,
+}: RenderOptionTextProps) => {
+  if (isManualInput && query) {
+    return query;
+  }
+
+  return formatOption(value) || placeholder;
+};

package/src/ui-kit/Select/renderSearchInput.tsx

@@ -0,0 +1,28 @@
+import { InputControl } from '../Input/InputControl';
+import { type InputTypeProps } from './Select';
+
+type RenderSearchInputProps = {
+  query: string;
+  isDisabled: boolean;
+  onChangeQuery: (value: string) => void;
+  inputProps?: InputTypeProps;
+};
+
+export const renderSearchInput = ({
+  query,
+  isDisabled,
+  onChangeQuery,
+  inputProps,
+}: RenderSearchInputProps) => (
+  <div className="absolute top-0 w-full z-20">
+    <InputControl
+      type="text"
+      value={query}
+      autoFocus
+      disabled={isDisabled}
+      onChange={(value) => onChangeQuery(value)}
+      maxLength={inputProps?.maxLength}
+      isInteger={inputProps?.isInteger ?? false}
+    />
+  </div>
+);

package/src/ui-kit/Select/renderSelectContainer.tsx

@@ -0,0 +1,60 @@
+import type { ControlProps } from '../../model/ControlProps';
+import { type IconVersion } from '../../model/IconVersion';
+import { type OnCloseProps } from '../../model/OnCloseProps';
+import { style } from '../../utils/style';
+import { type Option } from './Option';
+import { renderIcon } from './renderIcon';
+import { renderOptionText } from './renderOptionText';
+import { type SelectProps } from './Select';
+
+interface SelectContainerProps extends OnCloseProps, SelectProps, ControlProps<Option> {
+  isOpen?: boolean;
+  isDisabled?: boolean;
+  iconVersion?: IconVersion;
+  query?: string;
+  isIconHidden?: boolean;
+  onOpen?: () => void;
+}
+
+export const renderSelectContainer = ({
+  isBorder = true,
+  valid = true,
+  isDisabled = false,
+  isOpen = false,
+  onOpen,
+  onClose,
+  isManualInput = false,
+  query = '',
+  value,
+  placeholder = '',
+  iconVersion = 'black',
+  options = [],
+}: SelectContainerProps) => {
+  const isIconHidden = getIconHidden(isManualInput, options, query);
+
+  return (
+    <div
+      className={style(
+        { 'border rounded-md': isBorder },
+        { 'hover:border-primary-hover': isBorder && !isDisabled },
+        isDisabled ? 'bg-main-divider' : 'cursor-pointer ',
+        valid ? 'border-gray' : 'border-error',
+        'h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden',
+      )}
+      onClick={isOpen ? onClose : onOpen}
+    >
+      <p className="line-clamp-2 text-ellipsis">
+        {renderOptionText({ isManualInput, query, value, placeholder })}
+      </p>
+      {isIconHidden ? '' : renderIcon(isOpen, iconVersion)}
+    </div>
+  );
+};
+
+const getIconHidden = (isManualInput: boolean, options: Option[], query?: string) => {
+  if (isManualInput && query?.length) {
+    return true;
+  }
+
+  return isManualInput && !options.length;
+};

package/src/ui-kit/Select/useSelectPopup.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import type { OnCloseProps } from '../../model/OnCloseProps';
+import { noop } from '../../utils/noop';
 import { usePopupManager } from '../PopupManager/usePopupManager';
 import { type Option } from './Option';
 import { SelectPopup, type SelectPopupProps } from './SelectPopup';
@@ -8,6 +9,7 @@ import { SelectPopup, type SelectPopupProps } from './SelectPopup';
 interface SelectPopupOptions extends SelectPopupProps, OnCloseProps {
   isOpen?: boolean;
   onChangeQuery?: (value: string) => void;
+  disableFilterOptions?: boolean;
 }
 
 export function useSelectPopup({
@@ -15,23 +17,24 @@ export function useSelectPopup({
   options,
   value,
   query,
-  onChange,
-  onClose,
+  onChange = noop,
+  onClose = noop,
   iconVersion,
-  onChangeQuery,
+  disableFilterOptions = false,
+  onChangeQuery = noop,
 }: SelectPopupOptions) {
   const popup = usePopupManager();
 
   const close = useCallback(() => {
     popup.close();
-    onClose && onClose();
+    onClose();
   }, [onClose]);
 
   const handleChange = useCallback(
     (option: Option) => {
       close();
-      onChange && onChange(option);
-      onChangeQuery && onChangeQuery('');
+      onChange(option);
+      onChangeQuery('');
     },
     [close, onChange],
   );
@@ -54,8 +57,9 @@ export function useSelectPopup({
           options={options}
           value={value}
           query={query}
-          onChange={handleChange}
           iconVersion={iconVersion}
+          disableFilterOptions={disableFilterOptions}
+          onChange={handleChange}
           onChangeQuery={onChangeQuery}
         />
       ),