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

package/src/components/Select/Select.tsx

@@ -26,20 +26,30 @@ 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';
 
 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 +60,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 +79,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,
+    units,
+    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 +147,62 @@ 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 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 =
+    isMultiSelect &&
+    value?.length === filteredOptions.length &&
+    isNotEmpty(allOptionsLabel)
+      ? allOptionsLabel
+      : stringValue;
+
+  const convertToId = useCallback(
+    (v: Value) =>
+      (convertValueToId ?? getDefaultConvertToIdFunction(convertValueToString))(
+        v,
+      ),
+    [convertValueToId, convertValueToString],
+  );
 
   const handleListClose = useCallback(
     (event: Event | SyntheticEvent) => {
@@ -200,25 +256,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(options 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 +353,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 = value?.length === options.length;
+          } 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;
       }
     }
@@ -405,10 +487,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 +518,7 @@ export function Select<Value>({
               ? defaultOptionLabel
               : undefined
           }
+          allOptionsLabel={shouldShowAllOption ? allOptionsLabel : undefined}
           customListHeader={
             hasSearchInputInList ? (
               <SearchInput
@@ -454,8 +544,11 @@ export function Select<Value>({
           isOptionDisabled={isOptionDisabled}
           convertValueToString={convertValueToString}
           convertValueToReactNode={convertValueToReactNode}
-          convertValueToId={convertValueToId}
-          onOptionClick={handleOptionSelect}
+          convertValueToId={convertToId}
+          onOptionSelect={handleOptionSelect}
+          onToggleCheckbox={
+            isMultiSelect ? handleToggleOptionCheckbox : undefined
+          }
         />
       )}
     </div>
@@ -472,7 +565,7 @@ export function Select<Value>({
           value={
             searchValue !== '' && !shouldRenderSearchInputInList
               ? searchValue
-              : stringValue
+              : showedStringValue
           }
           onChange={handleInputChange}
           isActive={isListOpen}
@@ -484,6 +577,14 @@ export function Select<Value>({
           isLoading={areOptionsLoading}
           tweakStyles={tweakInputStyles}
           testId={testId}
+          units={
+            isMultiSelect &&
+            isNotEmpty(value) &&
+            value.length > 1 &&
+            value.length !== options.length
+              ? `(+${value.length - 1})`
+              : units
+          }
           {...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',
   },

package/src/components/Select/SelectList/SelectList.tsx

@@ -3,30 +3,33 @@ import clsx from 'clsx';
 import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import { useTheme } from '../../../hooks';
 import { ICommonProps } from '../../../types';
-import { addDataAttributes, isNotEmpty } from '../../../helpers';
+import { isNotEmpty } from '../../../helpers';
 import { SelectListStyles, styles } from './SelectList.styles';
+import { IMultipleSelectValue } from '../types';
+import { SelectListItem } from '../SelectListItem/SelectListItem';
+import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../constants';
 
 export interface ISelectListProps<Value> extends ICommonProps {
   tweakStyles?: SelectListStyles;
   options: Value[];
   focusedIndex?: number;
-  activeValue?: Value;
+  activeValue?: Value | Value[];
   noMatchesLabel?: string;
   isLoading?: boolean;
   loadingLabel?: ReactNode;
   defaultOptionLabel?: string;
   testId?: string;
+  allOptionsLabel?: string;
   shouldScrollToList?: boolean;
   customListHeader?: ReactNode;
-  onOptionClick(index: number, event: MouseEvent<HTMLElement>): void;
+  onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
+  onToggleCheckbox?(index: number, isSelected: boolean): void;
   isOptionDisabled(value: Value): boolean;
   convertValueToString(value: Value): string | undefined;
   convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
-  convertValueToId?(value: Value): string | undefined;
+  convertValueToId(value: Value): string | undefined;
 }
 
-const DEFAULT_OPTION_INDEX = -1;
-
 export function SelectList<Value>({
   options,
   focusedIndex,
@@ -40,20 +43,25 @@ export function SelectList<Value>({
   shouldScrollToList = true,
   customListHeader,
   isOptionDisabled,
-  onOptionClick,
+  allOptionsLabel,
+  onOptionSelect,
+  onToggleCheckbox,
   convertValueToString,
-  convertValueToReactNode,
-  convertValueToId = convertValueToString,
+  convertValueToReactNode = convertValueToString,
+  convertValueToId,
 }: ISelectListProps<Value>): JSX.Element {
   const { classes } = useTheme('SelectList', styles, tweakStyles);
-  const activeValueId = isNotEmpty(activeValue)
-    ? convertValueToId(activeValue)
-    : undefined;
-
-  const isActiveOption = (item: Value): boolean =>
-    convertValueToId(item) === activeValueId;
+  const isMultiSelect = isNotEmpty(onToggleCheckbox);
+  const multiSelectValue = activeValue as
+    | IMultipleSelectValue<Value>
+    | undefined;
+  const selectedOptionsCount = multiSelectValue?.length ?? 0;
 
-  const convertFunction = convertValueToReactNode ?? convertValueToString;
+  // MultiSelect
+  const activeOptionsIdMap = useMemo(
+    () => (isMultiSelect ? multiSelectValue?.map(convertValueToId) ?? [] : []),
+    [isMultiSelect, multiSelectValue, convertValueToId],
+  );
 
   const optionsDisableMap = useMemo(
     () => options.map((o) => isOptionDisabled(o)),
@@ -61,13 +69,22 @@ export function SelectList<Value>({
   );
 
   const listOptions = useMemo(
-    () => options.map((opt, i) => convertFunction(opt, optionsDisableMap[i])),
-    [options, convertFunction, optionsDisableMap],
+    () =>
+      options.map((opt, i) =>
+        convertValueToReactNode(opt, optionsDisableMap[i]),
+      ),
+    [options, convertValueToReactNode, optionsDisableMap],
   );
 
+  const isActiveOption = (item: Value): boolean =>
+    isMultiSelect
+      ? activeOptionsIdMap.includes(convertValueToId(item))
+      : isNotEmpty(activeValue) &&
+        convertValueToId(activeValue as Value) === convertValueToId(item);
+
   return (
     <ScrollIntoViewIfNeeded
-      active={shouldScrollToList}
+      active={shouldScrollToList && !isMultiSelect}
       className={clsx(classes.root, {
         [classes.withListHeader]: isNotEmpty(customListHeader),
       })}
@@ -82,7 +99,7 @@ export function SelectList<Value>({
           </div>
         ) : (
           <>
-            {defaultOptionLabel !== undefined && (
+            {isNotEmpty(defaultOptionLabel) && (
               <ScrollIntoViewIfNeeded
                 active={focusedIndex === DEFAULT_OPTION_INDEX}
                 options={{ block: 'nearest' }}
@@ -91,39 +108,47 @@ export function SelectList<Value>({
                   classes.defaultCell,
                   focusedIndex === DEFAULT_OPTION_INDEX && classes.focused,
                 )}
-                onClick={(event) => onOptionClick(DEFAULT_OPTION_INDEX, event)}
+                onClick={(event) => onOptionSelect(DEFAULT_OPTION_INDEX, event)}
               >
                 {defaultOptionLabel}
               </ScrollIntoViewIfNeeded>
             )}
+            {isNotEmpty(allOptionsLabel) && (
+              <SelectListItem
+                classes={classes}
+                index={ALL_OPTION_INDEX}
+                isSemiChecked={
+                  selectedOptionsCount > 0 &&
+                  selectedOptionsCount < options.length
+                }
+                isActive={selectedOptionsCount === options.length}
+                isFocused={focusedIndex === ALL_OPTION_INDEX}
+                onOptionSelect={onOptionSelect}
+                onToggleCheckbox={onToggleCheckbox}
+              >
+                {allOptionsLabel}
+              </SelectListItem>
+            )}
             {listOptions.map((opt, i) => {
               const optionValue = options[i];
-              const isFocused = i === focusedIndex;
+              const isFocused = focusedIndex === i;
               const isActive = isActiveOption(optionValue);
               // проверяем, что опция задизейблена
               const isDisabled = optionsDisableMap[i];
 
               return (
-                <ScrollIntoViewIfNeeded
-                  active={isFocused}
-                  options={{ block: 'nearest' }}
+                <SelectListItem
                   key={i}
-                  className={clsx(classes.cell, {
-                    [classes.focused]: isFocused,
-                    [classes.active]: isActive,
-                    [classes.disabled]: isDisabled,
-                  })}
-                  {...addDataAttributes({
-                    disabled: isDisabled,
-                    active: isActive,
-                    focused: isFocused,
-                  })}
-                  onClick={
-                    !isDisabled ? (event) => onOptionClick(i, event) : undefined
-                  }
+                  classes={classes}
+                  index={i}
+                  isDisabled={isDisabled}
+                  isActive={isActive}
+                  isFocused={isFocused}
+                  onOptionSelect={onOptionSelect}
+                  onToggleCheckbox={onToggleCheckbox}
                 >
                   {opt}
-                </ScrollIntoViewIfNeeded>
+                </SelectListItem>
               );
             })}
             {listOptions.length === 0 && (