@true-engineering/true-react-common-ui-kit 1.9.0 → 1.11.0

package/src/components/Select/Select.tsx

@@ -26,20 +26,31 @@ import {
   useTweakStyles,
 } from '../../hooks';
 import { IDropdownWithPopperOptions } from '../../types';
-import { getTestId, hasExactParent, isNotEmpty } from '../../helpers';
+import {
+  createFilter,
+  getTestId,
+  hasExactParent,
+  isNotEmpty,
+  isStringNotEmpty,
+} from '../../helpers';
 import {
   defaultConvertFunction,
   defaultCompareFunction,
-  getActiveValueIndex,
   defaultIsOptionDisabled,
+  getDefaultConvertToIdFunction,
+  isMultiSelectValue,
 } from './helpers';
 import { SelectStyles, styles } from './Select.styles';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
+import { IMultipleSelectValue } from './types';
+import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from './constants';
+import { renderIcon } from '../../helpers/snippets';
 
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
   tweakStyles?: SelectStyles;
   defaultOptionLabel?: string;
+  allOptionsLabel?: string;
   noMatchesLabel?: string;
   loadingLabel?: ReactNode;
   optionsMode?: 'search' | 'dynamic' | 'normal';
@@ -50,17 +61,18 @@ export interface ISelectProps<Value>
   options: Value[];
   value: Value | undefined;
   shouldScrollToList?: boolean;
+  isMultiSelect?: boolean;
   searchInput?: { shouldRenderInList: true } & Pick<
     ISearchInputProps,
     'placeholder'
   >;
   isOptionDisabled?(option: Value): boolean;
-  onChange(value: Value | undefined): void; // подумать как возвращать индекс
+  onChange(value?: Value): void; // подумать как возвращать индекс
   onBlur?(event: Event | SyntheticEvent): void;
   onType?(value: string): Promise<void>;
   optionsFilter?(options: Value[], query: string): Value[];
   onOpen?(): void;
-  compareValuesOnChange?(v1: Value | undefined, v2: Value | undefined): boolean;
+  compareValuesOnChange?(v1?: Value, v2?: Value): boolean;
   // Для избежания проблем юзайте useCallback на эти функции
   // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
   convertValueToString?(value: Value): string | undefined;
@@ -68,45 +80,64 @@ export interface ISelectProps<Value>
   convertValueToId?(value: Value): string | undefined;
 }
 
-export function Select<Value>({
-  options,
-  value,
-  defaultOptionLabel,
-  debounceTime = 400,
-  optionsMode = 'normal',
-  noMatchesLabel,
-  loadingLabel,
-  tweakStyles,
-  testId,
-  isReadonly,
-  isDisabled,
-  dropdownOptions,
-  minSymbolsCountToOpenList = 0,
-  dropdownIcon = 'chevron-down',
-  shouldScrollToList = true,
-  searchInput,
-  onChange,
-  onFocus,
-  onBlur,
-  onType,
-  onOpen,
-  isOptionDisabled = defaultIsOptionDisabled,
-  compareValuesOnChange = defaultCompareFunction,
-  convertValueToString = defaultConvertFunction,
-  convertValueToId,
-  convertValueToReactNode,
-  optionsFilter,
-  ...inputProps
-}: ISelectProps<Value>): JSX.Element {
+export interface IMultipleSelectProps<Value>
+  extends Omit<
+    ISelectProps<Value>,
+    'value' | 'onChange' | 'compareValuesOnChange'
+  > {
+  isMultiSelect: true;
+  value: IMultipleSelectValue<Value> | undefined;
+  onChange(value?: IMultipleSelectValue<Value>): void;
+  compareValuesOnChange?(
+    v1?: IMultipleSelectValue<Value>,
+    v2?: IMultipleSelectValue<Value>,
+  ): boolean;
+}
+
+export function Select<Value>(
+  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
+): JSX.Element {
+  const {
+    options,
+    value,
+    defaultOptionLabel,
+    allOptionsLabel,
+    debounceTime = 400,
+    optionsMode = 'normal',
+    noMatchesLabel,
+    loadingLabel,
+    tweakStyles,
+    testId,
+    isReadonly,
+    isDisabled,
+    dropdownOptions,
+    minSymbolsCountToOpenList = 0,
+    dropdownIcon = 'chevron-down',
+    shouldScrollToList = true,
+    searchInput,
+    iconType,
+    onChange,
+    onFocus,
+    onBlur,
+    onType,
+    onOpen,
+    isOptionDisabled = defaultIsOptionDisabled,
+    compareValuesOnChange = defaultCompareFunction,
+    convertValueToString = defaultConvertFunction,
+    convertValueToId,
+    convertValueToReactNode,
+    optionsFilter,
+    ...inputProps
+  } = props;
   const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
   const isMounted = useIsMounted();
   const [isListOpen, setIsListOpen] = useState(false);
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
-  const hasDefaultOption = defaultOptionLabel !== undefined;
+  const hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
 
-  const [focusedListCellIndex, setFocusedListCellIndex] = useState(-1);
+  const [focusedListCellIndex, setFocusedListCellIndex] =
+    useState(DEFAULT_OPTION_INDEX);
   const [searchValue, setSearchValue] = useState('');
-
   // если мы ввели что то в строку поиска - то этот булеан будет отключаться
   // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
   const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
@@ -117,36 +148,73 @@ export function Select<Value>({
 
   const shouldRenderSearchInputInList =
     searchInput?.shouldRenderInList === true;
-
   const hasSearchInputInList =
     optionsMode !== 'normal' && shouldRenderSearchInputInList;
 
-  const stringValue = isNotEmpty(value)
-    ? convertValueToString(value)
-    : undefined;
+  const isMultiSelect = isMultiSelectValue(props, value);
+  const strValue = isMultiSelect ? value?.[0] : value;
+  const shouldShowAllOption =
+    isMultiSelect && isNotEmpty(allOptionsLabel) && searchValue === '';
 
   const filteredOptions = useMemo(() => {
     if (optionsMode !== 'search') {
       return options;
     }
-    if (isNotEmpty(optionsFilter)) {
-      return optionsFilter(options, searchValue);
-    }
-    const lowerCaseValue = searchValue?.toLowerCase();
-    return options.filter((option) => {
-      const convertedOption = convertValueToString(option);
-      return (
-        convertedOption !== undefined &&
-        convertedOption.toLowerCase().includes(lowerCaseValue)
-      );
-    });
-  }, [optionsMode, optionsFilter, options, convertValueToString, searchValue]);
 
-  useEffect(() => {
-    setFocusedListCellIndex(
-      getActiveValueIndex(filteredOptions, value, convertValueToString),
+    const filter =
+      optionsFilter ??
+      createFilter<Value>((option) => [convertValueToString(option) ?? '']);
+
+    return filter(options, searchValue);
+  }, [optionsFilter, options, convertValueToString, searchValue, optionsMode]);
+
+  const availableOptions = useMemo(
+    () => options.filter((o) => !isOptionDisabled(o)),
+    [options, isOptionDisabled],
+  );
+
+  const areAllOptionsSelected =
+    isMultiSelect && value?.length === availableOptions.length;
+  const shouldShowMultiSelectCounter =
+    isMultiSelect &&
+    isNotEmpty(value) &&
+    value.length > 1 &&
+    !areAllOptionsSelected;
+
+  const optionsIndexesForNavigation = useMemo(() => {
+    const result: number[] = [];
+    if (shouldShowDefaultOption && hasDefaultOption) {
+      result.push(DEFAULT_OPTION_INDEX);
+    }
+    if (shouldShowAllOption) {
+      result.push(ALL_OPTION_INDEX);
+    }
+    return result.concat(
+      filteredOptions.reduce((acc, cur, i) => {
+        if (!isOptionDisabled(cur)) {
+          acc.push(i);
+        }
+        return acc;
+      }, [] as number[]),
     );
-  }, [filteredOptions, value, convertValueToString]);
+  }, [filteredOptions]);
+
+  const stringValue = isNotEmpty(strValue)
+    ? convertValueToString(strValue)
+    : undefined;
+  // Для мультиселекта пытаемся показать "Все опции" если выбраны все опции
+  const showedStringValue =
+    areAllOptionsSelected && isNotEmpty(allOptionsLabel)
+      ? allOptionsLabel
+      : stringValue;
+
+  const convertToId = useCallback(
+    (v: Value) =>
+      (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(
+        v,
+      ),
+    [convertValueToId, convertValueToString],
+  );
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
@@ -200,25 +268,57 @@ export function Select<Value>({
   };
 
   const handleOnChange = useCallback(
-    (newValue: Value | undefined) => {
-      const areValuesEqual = compareValuesOnChange(value, newValue);
-      if (areValuesEqual) {
-        return;
+    (newValue: Value | IMultipleSelectValue<Value> | undefined) => {
+      // Тут беда с типами, сорри
+      if (!compareValuesOnChange(value as never, newValue as never)) {
+        onChange(newValue as (Value & IMultipleSelectValue<Value>) | undefined);
       }
-      onChange(newValue);
     },
     [value, compareValuesOnChange, onChange],
   );
 
   const handleOptionSelect = useCallback(
     (index: number, event: MouseEvent<HTMLElement> | KeyboardEvent) => {
-      handleOnChange(index === -1 ? undefined : filteredOptions[index]);
+      handleOnChange(
+        index === DEFAULT_OPTION_INDEX ? undefined : filteredOptions[index],
+      );
       handleListClose(event);
       input.current?.blur();
     },
     [handleOnChange, handleListClose, filteredOptions],
   );
 
+  // MultiSelect
+  const handleToggleOptionCheckbox = useCallback(
+    (index: number, isSelected: boolean) => {
+      if (!isMultiSelect) {
+        return;
+      }
+
+      // Если выбрана не дефолтная опция, которая сетит андеф
+      if (
+        index === DEFAULT_OPTION_INDEX ||
+        (index === ALL_OPTION_INDEX && !isSelected)
+      ) {
+        handleOnChange(undefined);
+        return;
+      }
+      if (index === ALL_OPTION_INDEX && isSelected) {
+        handleOnChange(availableOptions as IMultipleSelectValue<Value>);
+        return;
+      }
+      const option = filteredOptions[index];
+      handleOnChange(
+        isSelected
+          ? // Добавляем
+            ([...(value ?? []), option] as IMultipleSelectValue<Value>)
+          : // Убираем
+            value?.filter((o) => convertToId(o) !== convertToId(option)),
+      );
+    },
+    [handleOnChange, filteredOptions, isMultiSelect, value],
+  );
+
   const handleOnType = useCallback(
     async (v: string) => {
       if (onType === undefined) {
@@ -265,71 +365,65 @@ export function Select<Value>({
     }
 
     event.stopPropagation();
+    const curIndexInNavigation = optionsIndexesForNavigation.findIndex(
+      (index) => index === focusedListCellIndex,
+    );
 
     switch (event.code) {
       case 'Enter':
       case 'NumpadEnter': {
-        let indexToClick = focusedListCellIndex;
+        let indexToSelect = focusedListCellIndex;
 
-        // если осталось одна опция в списке,
+        // если осталась одна опция в списке,
         // то выбираем ее нажатием на enter
-        if (indexToClick === -1 && filteredOptions.length === 1) {
-          indexToClick = 0;
+        if (
+          indexToSelect === DEFAULT_OPTION_INDEX &&
+          filteredOptions.length === 1
+        ) {
+          indexToSelect = 0;
         }
 
-        handleOptionSelect(indexToClick, event);
+        if (isMultiSelect) {
+          let isThisValueAlreadySelected: boolean;
+          if (indexToSelect === ALL_OPTION_INDEX) {
+            isThisValueAlreadySelected = areAllOptionsSelected;
+          } else {
+            // подумать над концептом реального фокуса на опциях, а не вот эти вот focusedCell
+            const valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
+            isThisValueAlreadySelected =
+              value?.some((opt) => convertToId(opt) === valueIdToSelect) ??
+              false;
+          }
+          handleToggleOptionCheckbox(
+            indexToSelect,
+            !isThisValueAlreadySelected,
+          );
+        } else {
+          handleOptionSelect(indexToSelect, event);
+        }
         break;
       }
 
       case 'ArrowDown': {
         // чтобы убрать перемещение курсора в инпуте
         event.preventDefault();
-        let newIndex: number = focusedListCellIndex ?? -1;
-        // ищем первый незадизейбленный вариант, либо дефолтную опцию
-        for (let i = newIndex; i < newIndex + filteredOptions.length; i++) {
-          const targetIndex = (i + 1) % filteredOptions.length;
-          if (
-            shouldShowDefaultOption &&
-            hasDefaultOption &&
-            newIndex > -1 &&
-            targetIndex === 0
-          ) {
-            newIndex = -1;
-            break;
-          }
-          if (!isOptionDisabled(filteredOptions[targetIndex])) {
-            newIndex = targetIndex;
-            break;
-          }
-        }
-        setFocusedListCellIndex(newIndex);
+        const targetIndexInNavigation =
+          (curIndexInNavigation + 1) % optionsIndexesForNavigation.length;
+        setFocusedListCellIndex(
+          optionsIndexesForNavigation[targetIndexInNavigation],
+        );
         break;
       }
 
       case 'ArrowUp': {
         // чтобы убрать перемещение курсора в инпуте
         event.preventDefault();
-        const newIndex: number =
-          (focusedListCellIndex ?? -1) === -1 ? 0 : focusedListCellIndex;
-        // ищем первый незадизейбленный вариант, либо дефолтную опцию
-        for (let i = newIndex; i > newIndex - filteredOptions.length; i--) {
-          const targetIndex = (i > 0 ? i : filteredOptions.length + i) - 1;
-          if (
-            shouldShowDefaultOption &&
-            hasDefaultOption &&
-            focusedListCellIndex !== -1 &&
-            targetIndex === filteredOptions.length - 1
-          ) {
-            // не выносить сет наружу (приведет к багу)
-            setFocusedListCellIndex(-1);
-            break;
-          }
-          if (!isOptionDisabled(filteredOptions[targetIndex])) {
-            // не выносить сет наружу (приведет к багу)
-            setFocusedListCellIndex(targetIndex);
-            break;
-          }
-        }
+        const targetIndexInNavigation =
+          (curIndexInNavigation - 1 + optionsIndexesForNavigation.length) %
+          optionsIndexesForNavigation.length;
+        setFocusedListCellIndex(
+          optionsIndexesForNavigation[targetIndexInNavigation],
+        );
         break;
       }
     }
@@ -374,6 +468,7 @@ export function Select<Value>({
         {},
         componentStyles.tweakInput,
         { ...(hasReadonlyInput && { input: { cursor: 'pointer' } }) },
+        { ...(isMultiSelect && { inputIcon: { width: 'auto' } }) },
         tweakStyles?.tweakInput,
       ) as Styles,
     [tweakStyles?.tweakInput, hasReadonlyInput],
@@ -405,10 +500,17 @@ export function Select<Value>({
   });
 
   useEffect(() => {
-    if (isOpen && onOpen !== undefined) {
-      onOpen();
+    const val = isMultiSelect ? value?.[0] : value;
+    setFocusedListCellIndex(
+      optionsIndexesForNavigation.find(
+        (index) => filteredOptions[index] === val,
+      ) ?? optionsIndexesForNavigation[0],
+    );
+
+    if (isOpen) {
+      onOpen?.();
     }
-  }, [isOpen, onOpen]);
+  }, [isOpen]);
 
   const listEl = (
     <div
@@ -429,6 +531,8 @@ export function Select<Value>({
               ? defaultOptionLabel
               : undefined
           }
+          allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
+          areAllOptionsSelected={areAllOptionsSelected}
           customListHeader={
             hasSearchInputInList ? (
               <SearchInput
@@ -454,13 +558,28 @@ export function Select<Value>({
           isOptionDisabled={isOptionDisabled}
           convertValueToString={convertValueToString}
           convertValueToReactNode={convertValueToReactNode}
-          convertValueToId={convertValueToId}
-          onOptionClick={handleOptionSelect}
+          convertValueToId={convertToId}
+          onOptionSelect={handleOptionSelect}
+          onToggleCheckbox={
+            isMultiSelect ? handleToggleOptionCheckbox : undefined
+          }
         />
       )}
     </div>
   );
 
+  const multiSelectCounterWithIcon =
+    shouldShowMultiSelectCounter || isNotEmpty(iconType) ? (
+      <>
+        {shouldShowMultiSelectCounter && (
+          <div className={classes.counter}>(+{value.length - 1})</div>
+        )}
+        {isNotEmpty(iconType) && (
+          <div className={classes.icon}>{renderIcon(iconType)}</div>
+        )}
+      </>
+    ) : undefined;
+
   return (
     <div className={classes.root} onKeyDown={handleKeyDown}>
       <div
@@ -472,7 +591,7 @@ export function Select<Value>({
           value={
             searchValue !== '' && !shouldRenderSearchInputInList
               ? searchValue
-              : stringValue
+              : showedStringValue
           }
           onChange={handleInputChange}
           isActive={isListOpen}
@@ -484,6 +603,7 @@ export function Select<Value>({
           isLoading={areOptionsLoading}
           tweakStyles={tweakInputStyles}
           testId={testId}
+          iconType={isMultiSelect ? multiSelectCounterWithIcon : iconType}
           {...inputProps}
         />
         <div

package/src/components/Select/SelectList/SelectList.styles.ts

@@ -2,8 +2,8 @@ import { colors, dimensions, helpers } from '../../../theme';
 import { ComponentStyles } from '../../../types';
 
 export const ROW_HEIGHT = 40;
-const CONTAINER_PADDING = 10;
-const CELL_PADDING = [10, 20];
+export const CONTAINER_PADDING = 10;
+export const CELL_PADDING = [10, 20];
 
 export const styles = {
   root: {
@@ -45,6 +45,10 @@ export const styles = {
     fontSize: 14,
   },
 
+  cellWithCheckbox: {
+    padding: 0,
+  },
+
   noMatchesLabel: {
     pointerEvents: 'none',
   },