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

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 && (

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

@@ -0,0 +1,14 @@
+import { CheckboxStyles } from '../../Checkbox';
+import { CELL_PADDING } from '../SelectList/SelectList.styles';
+
+export const checkboxStyles: CheckboxStyles = {
+  root: {
+    padding: CELL_PADDING,
+    width: '100%',
+  },
+
+  input: {
+    // иначе будет фокуситься и энтер будет вызывать изменение нескольких опций
+    display: 'none',
+  },
+};

package/src/components/Select/SelectListItem/SelectListItem.tsx

@@ -0,0 +1,73 @@
+import { ReactNode, MouseEvent, FC } from 'react';
+import clsx from 'clsx';
+import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
+import { addDataAttributes, isNotEmpty } from '../../../helpers';
+import { checkboxStyles } from './SelectListItem.styles';
+import { Checkbox } from '../../Checkbox';
+import { Classes } from 'jss';
+
+export interface ISelectListItemProps {
+  index: number;
+  isSemiChecked?: boolean;
+  isDisabled?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  children: ReactNode;
+  classes: Classes<
+    'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'
+  >;
+  onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
+  onToggleCheckbox?(index: number, isSelected: boolean): void;
+}
+
+export const SelectListItem: FC<ISelectListItemProps> = ({
+  classes,
+  index,
+  isSemiChecked,
+  isDisabled,
+  isActive,
+  children,
+  isFocused,
+  onOptionSelect,
+  onToggleCheckbox,
+}) => {
+  const isMultiSelect = isNotEmpty(onToggleCheckbox);
+
+  return (
+    <ScrollIntoViewIfNeeded
+      active={isFocused}
+      options={{ block: 'nearest' }}
+      className={clsx(classes.cell, {
+        [classes.cellWithCheckbox]: isMultiSelect,
+        [classes.focused]: isFocused,
+        [classes.active]: isActive && !isMultiSelect,
+        [classes.disabled]: isDisabled,
+      })}
+      {...addDataAttributes({
+        disabled: isDisabled,
+        active: isActive,
+        focused: isFocused,
+      })}
+      onClick={
+        !isDisabled && !isMultiSelect
+          ? (event) => onOptionSelect(index, event)
+          : undefined
+      }
+    >
+      {isMultiSelect ? (
+        <Checkbox
+          value={index}
+          isChecked={isActive || isSemiChecked}
+          isSemiChecked={isSemiChecked}
+          isDisabled={isDisabled}
+          tweakStyles={checkboxStyles}
+          onSelect={(v) => onToggleCheckbox(index, v.isSelected)}
+        >
+          {children}
+        </Checkbox>
+      ) : (
+        children
+      )}
+    </ScrollIntoViewIfNeeded>
+  );
+};

package/src/components/Select/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_OPTION_INDEX = -2;
+export const ALL_OPTION_INDEX = -1;

package/src/components/Select/helpers.ts

@@ -1,4 +1,6 @@
 import { isNotEmpty } from '../../helpers';
+import type { IMultipleSelectProps, ISelectProps } from './Select';
+import { IMultipleSelectValue } from './types';
 
 export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
   typeof option === 'object' &&
@@ -11,11 +13,17 @@ export const defaultConvertFunction = (v: unknown) =>
 export const defaultCompareFunction = <Value>(v1: Value, v2: Value) =>
   v1 === v2;
 
-export const getActiveValueIndex = <Value>(
-  options: Value[],
-  value: Value | undefined,
-  convertFunc: (v: Value) => string | undefined,
-): number =>
-  isNotEmpty(value)
-    ? options.findIndex((o) => convertFunc(o) === convertFunc(value))
-    : -1;
+export const getDefaultConvertToIdFunction =
+  <Value>(
+    convertValueToString: (value: Value) => string | undefined,
+  ): ((value: Value) => string | undefined) =>
+  (value) =>
+    isNotEmpty((value as { id: unknown })?.id)
+      ? String((value as { id: unknown }).id)
+      : convertValueToString(value);
+
+export const isMultiSelectValue = <Value>(
+  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
+  _value: Value | IMultipleSelectValue<Value> | undefined,
+): _value is IMultipleSelectValue<Value> | undefined =>
+  props.isMultiSelect === true;

package/src/components/Select/index.ts

@@ -1,3 +1,4 @@
 export * from './Select';
+export type { IMultipleSelectValue } from './types';
 export type { SelectStyles } from './Select.styles';
 export type { SelectListStyles } from './SelectList/SelectList.styles';

package/src/components/Select/types.ts

@@ -0,0 +1 @@
+export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;

package/src/helpers/utils.ts

@@ -28,8 +28,10 @@ export const hasExactParent = (element: Element, parent: Element): boolean => {
   return hasExactParent(parentNode, parent);
 };
 
-export const getParentNode = (element: Element | ShadowRoot): Element =>
-  element.nodeName === 'HTML'
+export const getParentNode = (
+  element: Element | ShadowRoot | Document,
+): Element =>
+  element.nodeName === 'HTML' || element === document
     ? (element as Element)
     : (element.parentNode as Element) ?? (element as ShadowRoot).host;
 
@@ -167,6 +169,13 @@ export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
     ? val.trim() !== ''
     : val !== null && val !== undefined;
 
+/**
+ * Проверяет, что передана непустая строка
+ */
+export const isStringNotEmpty = <T extends string>(
+  value: T | undefined | null,
+): value is T => (value ?? '').trim() !== '';
+
 export const trimStringToMaxLength = (val: string, maxLength: number) =>
   val.length > maxLength ? val.slice(0, maxLength) : val;
 
@@ -217,3 +226,25 @@ export const addClickHandler = (
     : {
         tabIndex: -1,
       };
+
+/**
+ * Позволяет создать текстовый фильтр для набора items
+ * @param getter - функция возвращающая набор строковых значений из каждого item,
+ * по которым должен осуществляться поиск
+ */
+export const createFilter =
+  <T>(
+    getter: (item: T) => Array<string | undefined>,
+  ): ((items: T[], query: string) => T[]) =>
+  (items, query) =>
+    items.filter((item) => {
+      const possibleValues = getter(item).reduce(
+        (acc, cur) => [
+          ...acc,
+          ...(isStringNotEmpty(cur) ? [cur?.toLowerCase()] : []),
+        ],
+        [] as string[],
+      );
+      const queryString = query.toLowerCase().trim();
+      return possibleValues.some((v) => v?.includes(queryString));
+    });

package/src/hooks/use-theme.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
 import { createUseStyles, Styles } from 'react-jss';
-import { merge } from 'lodash';
+import merge from 'lodash-es/merge';
 
 import { ComponentName, UiKitTheme } from '../types';
 import { commonTheme } from '../theme';

package/src/hooks/use-tweak-styles.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { merge } from 'lodash';
+import merge from 'lodash-es/merge';
 import { Styles } from 'react-jss';
 
 export const useTweakStyles = <StyleSheet>(