@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/Select/Select.tsx

@@ -0,0 +1,440 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Styles } from 'jss';
+import clsx from 'clsx';
+import { merge } from 'lodash';
+import { debounce } from 'ts-debounce';
+import { Portal } from 'react-overlays';
+
+import { SelectList, isOptionDisabled } from './SelectList';
+import { IInputProps, Input } from '../Input';
+import { IIconType, Icon } from '../Icon';
+import {
+  useIsMounted,
+  useTheme,
+  useOnClickOutsideWithRef,
+  useDropdown,
+} from '../../hooks';
+import { IDropdownWithPopperOptions } from '../../types';
+
+import { SelectStyles, styles } from './Select.styles';
+import {
+  defaultConvertFunction,
+  defaultCompareFunction,
+  getActiveValueIndex,
+} from './helpers';
+
+export interface ISelectProps<Value>
+  extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
+  tweakStyles?: SelectStyles;
+  defaultOptionLabel?: string;
+  noMatchesLabel?: string;
+  loadingLabel?: React.ReactNode;
+  optionsMode?: 'search' | 'dynamic' | 'normal';
+  onType?: (value: string) => Promise<void>;
+  debounceTime?: number;
+  minSymbolsCountToOpenList?: number;
+  dropdownOptions?: IDropdownWithPopperOptions;
+  dropdownIcon?: IIconType;
+  onOpen?: () => void;
+
+  optionsFilter?: (options: Value[], query: string) => Value[];
+  options: Value[];
+  value?: Value;
+  onChange: (value?: Value) => void; // подумать как возвращать индекс
+  compareValuesOnChange?: (
+    v1: Value | undefined,
+    v2: Value | undefined,
+  ) => boolean;
+  // возможно делать какую-то индексацию опций
+
+  // Для избежания проблем юзайте useCallback на эти функции
+  // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
+  convertValueToString?: (value?: Value) => string | undefined;
+  convertValueToReactNode?: (value?: Value) => ReactNode | undefined;
+  convertValueToId?: (value?: Value) => string | undefined;
+}
+
+export function Select<Value>({
+  options,
+  value,
+  onChange,
+  compareValuesOnChange = defaultCompareFunction,
+  convertValueToString = defaultConvertFunction,
+  convertValueToId,
+  convertValueToReactNode,
+  defaultOptionLabel,
+  onFocus,
+  onBlur,
+  onType,
+  onOpen,
+  debounceTime = 400,
+  optionsMode = 'normal',
+  optionsFilter,
+  noMatchesLabel,
+  loadingLabel,
+  tweakStyles,
+  testId,
+  isDisabled,
+  dropdownOptions,
+  minSymbolsCountToOpenList = 0,
+  dropdownIcon = 'chevron-down',
+  ...inputProps
+}: ISelectProps<Value>): JSX.Element {
+  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 [focusedListCellIndex, setFocusedListCellIndex] = useState(-1);
+  const [searchValue, setSearchValue] = useState('');
+
+  // если мы ввели что то в строку поиска - то этот булеан будет отключаться
+  // вынесен отдельно, из-за проблем с дебаунсом при динамич. опциях
+  const [shouldShowDefaultOption, setShouldShowDefaultOption] = useState(true);
+
+  const inputWrapper = useRef<HTMLDivElement>(null);
+  const list = useRef<HTMLDivElement>(null);
+  const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
+
+  const filteredOptions = useMemo(() => {
+    if (optionsMode !== 'search') {
+      return options;
+    }
+    if (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),
+    );
+  }, [filteredOptions, value, convertValueToString]);
+
+  const handleListClose = () => {
+    setIsListOpen(false);
+    setSearchValue('');
+    setShouldShowDefaultOption(true);
+  };
+
+  const handleListOpen = async () => {
+    if (isListOpen) {
+      return;
+    }
+    setIsListOpen(true);
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    if (onFocus !== undefined) {
+      onFocus(event);
+    }
+    handleListOpen();
+  };
+
+  const handleOnClick = () => {
+    handleListOpen();
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    if (onBlur !== undefined) {
+      onBlur(event);
+    }
+    handleListClose();
+  };
+
+  const handleOnChange = useCallback(
+    (newValue: Value | undefined) => {
+      const areValuesEqual = compareValuesOnChange(value, newValue);
+      if (areValuesEqual) {
+        return;
+      }
+      onChange(newValue);
+    },
+    [value, onChange],
+  );
+
+  const handleOptionClick = useCallback(
+    (index: number) => {
+      handleOnChange(index === -1 ? undefined : filteredOptions[index]);
+      handleListClose();
+      input.current?.blur();
+    },
+    [handleOnChange, filteredOptions],
+  );
+
+  const handleOnType = useCallback(
+    async (v: string) => {
+      if (onType === undefined) {
+        return;
+      }
+      if (isMounted()) {
+        setAreOptionsLoading(true);
+      }
+      await onType(v);
+      if (isMounted()) {
+        setAreOptionsLoading(false);
+      }
+      if (optionsMode === 'dynamic') {
+        setShouldShowDefaultOption(v === '');
+      }
+    },
+    [onType, optionsMode],
+  );
+
+  const debounceHandleOnType = useCallback(
+    debounce(handleOnType, debounceTime),
+    [handleOnType, debounceTime],
+  );
+
+  const handleInputChange = (v: string) => {
+    if (onType !== undefined) {
+      debounceHandleOnType(v);
+    }
+
+    if (optionsMode !== 'dynamic') {
+      setShouldShowDefaultOption(v === '');
+    }
+
+    if (v === '') {
+      handleOnChange(undefined);
+    }
+
+    setSearchValue(v);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (!isListOpen) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    switch (event.code) {
+      case 'Enter':
+      case 'NumpadEnter': {
+        let indexToClick = focusedListCellIndex;
+
+        // если осталось одна опция в списке,
+        // то выбираем ее нажатием на enter
+        if (indexToClick === -1 && filteredOptions.length === 1) {
+          indexToClick = 0;
+        }
+
+        handleOptionClick(indexToClick);
+        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);
+        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;
+          }
+        }
+        break;
+      }
+    }
+  };
+
+  const onArrowClick = () => {
+    if (isListOpen) {
+      input.current?.blur();
+    } else {
+      input.current?.focus();
+    }
+  };
+
+  useOnClickOutsideWithRef(
+    list,
+    () => {
+      handleListClose();
+    },
+    inputWrapper,
+  );
+
+  const isOpen =
+    isListOpen &&
+    (inputProps.isLoading ||
+      filteredOptions.length > 0 ||
+      (defaultOptionLabel !== undefined && searchValue === '') ||
+      noMatchesLabel !== undefined) &&
+    searchValue.trim().length >= minSymbolsCountToOpenList;
+
+  const { isReadonly = true } = inputProps;
+  const shouldUsePointerCursor = optionsMode === 'normal' && isReadonly;
+
+  const tweakInputStyles = useMemo(
+    () =>
+      merge(
+        {},
+        componentStyles.tweakInput,
+        {
+          ...(shouldUsePointerCursor
+            ? { input: { cursor: 'pointer' } }
+            : undefined),
+        },
+        tweakStyles?.tweakInput,
+      ) as Styles,
+    [tweakStyles?.tweakInput, shouldUsePointerCursor],
+  );
+
+  // Эти значения ставятся в false по дефолту также в useDropdown
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+  } = dropdownOptions ?? {};
+
+  const popperData = useDropdown({
+    isOpen,
+    onDropdownClose: handleListClose,
+    referenceElement: inputWrapper.current,
+    dropdownElement: list.current,
+    options: dropdownOptions,
+    dependenciesForPositionUpdating: [
+      inputProps.isLoading,
+      filteredOptions.length,
+    ],
+  });
+
+  useEffect(() => {
+    if (isOpen && onOpen !== undefined) {
+      onOpen();
+    }
+  }, [isOpen, onOpen]);
+
+  return (
+    <div className={classes.root} onKeyDown={handleKeyDown}>
+      <div
+        className={clsx(classes.inputWrapper, isDisabled && classes.disabled)}
+        onClick={isDisabled ? undefined : handleOnClick}
+        ref={inputWrapper}
+      >
+        <Input
+          value={searchValue !== '' ? searchValue : convertValueToString(value)}
+          onChange={handleInputChange}
+          isActive={isListOpen}
+          isReadonly={optionsMode === 'normal'}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          isDisabled={isDisabled}
+          ref={input}
+          isLoading={areOptionsLoading}
+          tweakStyles={tweakInputStyles}
+          testId={testId}
+          {...inputProps}
+        />
+        <div
+          onMouseDown={(event: React.MouseEvent) => {
+            event.preventDefault();
+          }}
+          onClick={onArrowClick}
+          className={clsx(classes.arrow, isListOpen && classes.activeArrow)}
+        >
+          <Icon type={dropdownIcon} />
+        </div>
+      </div>
+      <Portal
+        container={shouldRenderInBody ? document.body : inputWrapper.current}
+      >
+        <>
+          {(shouldUsePopper || isOpen) && (
+            <div
+              className={clsx(classes.listWrapper, {
+                [classes.withoutPopper]: !shouldUsePopper,
+                [classes.listWrapperInBody]: shouldRenderInBody,
+              })}
+              ref={list}
+              // чтобы предотвратить onBlur на инпуте
+              onMouseDown={(event) => event.preventDefault()}
+              style={popperData?.styles.popper as Styles}
+              {...popperData?.attributes.popper}
+            >
+              {isOpen && (
+                <SelectList
+                  options={filteredOptions}
+                  convertValueToString={convertValueToString}
+                  convertValueToReactNode={convertValueToReactNode}
+                  convertValueToId={convertValueToId}
+                  onOptionClick={handleOptionClick}
+                  defaultOptionLabel={
+                    hasDefaultOption && shouldShowDefaultOption
+                      ? defaultOptionLabel
+                      : undefined
+                  }
+                  noMatchesLabel={noMatchesLabel}
+                  focusedIndex={focusedListCellIndex}
+                  activeValue={value}
+                  isLoading={inputProps.isLoading}
+                  loadingLabel={loadingLabel}
+                  tweakStyles={tweakStyles?.tweakSelectList as Styles}
+                  testId={testId !== undefined ? `${testId}-list` : undefined}
+                  // скролл не работает с включеным поппером
+                  shouldScrollToList={!shouldUsePopper && !shouldHideOnScroll}
+                />
+              )}
+            </div>
+          )}
+        </>
+      </Portal>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+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 styles = {
+  root: {
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
+    boxSizing: 'border-box',
+    padding: [CONTAINER_PADDING, 0],
+    fontSize: 16,
+  },
+
+  list: {
+    height: '100%',
+    maxHeight: ROW_HEIGHT * 6,
+    cursor: 'pointer',
+    backgroundColor: colors.CLASSIC_WHITE,
+
+    ...helpers.withScrollBar,
+  },
+
+  cell: {
+    display: 'flex',
+    cursor: 'pointer',
+    minHeight: ROW_HEIGHT,
+    width: 'auto',
+    padding: CELL_PADDING,
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 14,
+  },
+
+  noMatchesLabel: {
+    pointerEvents: 'none',
+  },
+
+  focused: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  loading: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  defaultCell: {},
+};
+
+export type SelectListStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,135 @@
+import React, { ReactNode, useMemo } from 'react';
+import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
+import clsx from 'clsx';
+
+import { useTheme } from '../../../hooks';
+import { ICommonProps } from '../../../types';
+
+import { SelectListStyles, styles } from './SelectList.styles';
+
+export interface ISelectListProps<Value> extends ICommonProps {
+  tweakStyles?: SelectListStyles;
+  options: Value[];
+  focusedIndex?: number;
+  activeValue?: Value;
+  noMatchesLabel?: string;
+  isLoading?: boolean;
+  loadingLabel?: React.ReactNode;
+  defaultOptionLabel?: string;
+  onOptionClick: (index: number) => void;
+  testId?: string;
+  shouldScrollToList?: boolean;
+  convertValueToString: (value?: Value) => string | undefined;
+  convertValueToReactNode?: (value?: Value) => ReactNode | undefined;
+  convertValueToId?: (value?: Value) => string | undefined;
+}
+
+export function isOptionDisabled<Value>(option: Value): boolean {
+  return (
+    typeof option === 'object' &&
+    option !== null &&
+    ((option as { isDisabled?: boolean })?.isDisabled ?? false)
+  );
+}
+
+const DEFAULT_OPTION_INDEX = -1;
+
+export function SelectList<Value>({
+  options,
+  onOptionClick,
+  focusedIndex,
+  activeValue,
+  defaultOptionLabel,
+  noMatchesLabel = 'Совпадений не найдено',
+  isLoading,
+  loadingLabel = 'Загрузка...',
+  convertValueToString,
+  convertValueToReactNode,
+  convertValueToId = convertValueToString,
+  tweakStyles,
+  testId,
+  shouldScrollToList = true,
+}: ISelectListProps<Value>): JSX.Element {
+  const { classes } = useTheme('SelectList', styles, tweakStyles);
+  const activeValueId = convertValueToId(activeValue);
+
+  const convertedToStringOptions = useMemo(
+    () => options.map(convertValueToString),
+    [options, convertValueToString],
+  );
+
+  const isActiveOption = (item: Value): boolean =>
+    convertValueToId(item) === activeValueId;
+
+  const convertedToReactNodesOptions = useMemo(
+    () =>
+      convertValueToReactNode !== undefined
+        ? options.map(convertValueToReactNode)
+        : [],
+    [options, convertValueToReactNode],
+  );
+
+  const listOptions =
+    convertValueToReactNode !== undefined
+      ? convertedToReactNodesOptions
+      : convertedToStringOptions;
+
+  return (
+    <ScrollIntoViewIfNeeded
+      active={shouldScrollToList}
+      className={classes.root}
+    >
+      <div className={classes.list} data-testid={testId}>
+        {isLoading ? (
+          <div className={clsx(classes.cell, classes.loading)}>
+            {loadingLabel}
+          </div>
+        ) : (
+          <>
+            {defaultOptionLabel !== undefined && (
+              <ScrollIntoViewIfNeeded
+                active={focusedIndex === DEFAULT_OPTION_INDEX}
+                options={{ block: 'nearest' }}
+                className={clsx(
+                  classes.cell,
+                  classes.defaultCell,
+                  focusedIndex === DEFAULT_OPTION_INDEX && classes.focused,
+                )}
+                onClick={() => onOptionClick(DEFAULT_OPTION_INDEX)}
+              >
+                {defaultOptionLabel}
+              </ScrollIntoViewIfNeeded>
+            )}
+            {listOptions.map((opt, index) => {
+              const optionValue = options[index];
+              const isActive = isActiveOption(optionValue);
+              // проверяем, что опция задизейблена
+              const isDisabled = isOptionDisabled(optionValue);
+
+              return (
+                <ScrollIntoViewIfNeeded
+                  active={index === focusedIndex}
+                  options={{ block: 'nearest' }}
+                  key={index}
+                  className={clsx(classes.cell, {
+                    [classes.focused]: index === focusedIndex,
+                    [classes.active]: isActive,
+                    [classes.disabled]: isDisabled,
+                  })}
+                  onClick={!isDisabled ? () => onOptionClick(index) : undefined}
+                >
+                  {opt}
+                </ScrollIntoViewIfNeeded>
+              );
+            })}
+            {listOptions.length === 0 && (
+              <div className={clsx(classes.cell, classes.noMatchesLabel)}>
+                {noMatchesLabel}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </ScrollIntoViewIfNeeded>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './SelectList';

package/src/components/Select/helpers.ts

@@ -0,0 +1,13 @@
+export const defaultConvertFunction = (v: unknown) =>
+  v === undefined ? undefined : String(v);
+
+export const defaultCompareFunction = <Value>(
+  v1: Value | undefined,
+  v2: Value | undefined,
+) => v1 === v2;
+
+export const getActiveValueIndex = <Value>(
+  options: Value[],
+  value: Value | undefined,
+  convertFunc: (v?: Value) => string | undefined,
+): number => options.findIndex((o) => convertFunc(o) === convertFunc(value));

package/src/components/Select/index.ts

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