@true-engineering/true-react-common-ui-kit 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Select/Select.stories.tsx

@@ -27,21 +27,19 @@ const genLetters = (qnt = 1): string =>
     .replace(/[^a-z]+/g, '')
     .substr(0, qnt);
 
-const convertObjectToString = (v?: ObjectValue): string | undefined =>
-  v !== undefined ? `${v.name}` : undefined;
+const convertObjectToString = (v: ObjectValue): string => v.name;
 
-const convertObjectToId = (v?: ObjectValue): string | undefined =>
-  v !== undefined ? `${v.name}${v.age}` : undefined;
+const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
 
-const convertObjectToReactNode = (v?: ObjectValue): ReactNode | undefined =>
-  v !== undefined ? (
-    <span>
-      <i>{v.name}</i>, {v.age}
-    </span>
-  ) : undefined;
+const convertObjectToReactNode = (v: ObjectValue): ReactNode => (
+  <span>
+    <i>{v.name}</i>, {v.age}
+  </span>
+);
+
+const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
 
-const convertStringToReactNode = (v?: string): ReactNode | undefined =>
-  v !== undefined ? <i>{v}</i> : undefined;
+const isOptionDisabled = (option: string) => option.startsWith('Опция');
 
 const stringOptions = [
   'Опция 1',
@@ -76,6 +74,7 @@ interface ISelectWithCustomProps<T> extends ISelectProps<T> {
   shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
+  shouldUseCustomIsDisabledFunction?: boolean;
   canBeFlipped?: boolean;
   scrollParent?: 'document' | 'auto';
 }
@@ -87,6 +86,7 @@ function SelectWithCustomProps<T>({
   shouldUsePopper,
   shouldRenderInBody,
   shouldHideOnScroll,
+  shouldUseCustomIsDisabledFunction,
   canBeFlipped,
   scrollParent,
   ...rest
@@ -165,6 +165,9 @@ function SelectWithCustomProps<T>({
       optionsMode={optionsMode}
       onType={async () => setDynamicOptions(await getOptions())}
       onOpen={handleOpen}
+      isOptionDisabled={
+        shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined
+      }
       dropdownOptions={{
         shouldUsePopper,
         shouldRenderInBody,
@@ -225,6 +228,7 @@ Default.args = {
   shouldUsePopper: false,
   shouldRenderInBody: false,
   shouldHideOnScroll: false,
+  shouldUseCustomIsDisabledFunction: false,
   canBeFlipped: false,
   scrollParent: 'document',
 };

package/src/components/Select/Select.tsx

@@ -1,5 +1,8 @@
-import React, {
+import {
   ReactNode,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
   useCallback,
   useEffect,
   useMemo,
@@ -11,8 +14,7 @@ import clsx from 'clsx';
 import { merge } from 'lodash';
 import { debounce } from 'ts-debounce';
 import { Portal } from 'react-overlays';
-
-import { SelectList, isOptionDisabled } from './SelectList';
+import { SelectList } from './SelectList';
 import { IInputProps, Input } from '../Input';
 import { IIconType, Icon } from '../Icon';
 import {
@@ -27,8 +29,8 @@ import {
   defaultConvertFunction,
   defaultCompareFunction,
   getActiveValueIndex,
+  defaultIsOptionDisabled,
 } from './helpers';
-
 import { SelectStyles, styles } from './Select.styles';
 
 export interface ISelectProps<Value>
@@ -36,23 +38,21 @@ export interface ISelectProps<Value>
   tweakStyles?: SelectStyles;
   defaultOptionLabel?: string;
   noMatchesLabel?: string;
-  loadingLabel?: React.ReactNode;
+  loadingLabel?: 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 | undefined;
   shouldScrollToList?: boolean;
+  isOptionDisabled?(option: Value): boolean;
   onChange(value: Value | undefined): void; // подумать как возвращать индекс
+  onType?(value: string): Promise<void>;
+  optionsFilter?(options: Value[], query: string): Value[];
+  onOpen?(): void;
   compareValuesOnChange?(v1: Value | undefined, v2: Value | undefined): boolean;
-  // возможно делать какую-то индексацию опций
-
   // Для избежания проблем юзайте useCallback на эти функции
   // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
   convertValueToString?(value: Value): string | undefined;
@@ -63,19 +63,9 @@ export interface ISelectProps<Value>
 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,
@@ -85,6 +75,17 @@ export function Select<Value>({
   minSymbolsCountToOpenList = 0,
   dropdownIcon = 'chevron-down',
   shouldScrollToList = true,
+  onChange,
+  onFocus,
+  onBlur,
+  onType,
+  onOpen,
+  isOptionDisabled = defaultIsOptionDisabled,
+  compareValuesOnChange = defaultCompareFunction,
+  convertValueToString = defaultConvertFunction,
+  convertValueToId,
+  convertValueToReactNode,
+  optionsFilter,
   ...inputProps
 }: ISelectProps<Value>): JSX.Element {
   const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
@@ -144,7 +145,7 @@ export function Select<Value>({
     setIsListOpen(true);
   };
 
-  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
     if (onFocus !== undefined) {
       onFocus(event);
     }
@@ -155,7 +156,7 @@ export function Select<Value>({
     handleListOpen();
   };
 
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (onBlur !== undefined) {
       onBlur(event);
     }
@@ -222,7 +223,7 @@ export function Select<Value>({
     setSearchValue(v);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+  const handleKeyDown = (event: KeyboardEvent) => {
     if (!isListOpen) {
       return;
     }
@@ -387,7 +388,7 @@ export function Select<Value>({
           {...inputProps}
         />
         <div
-          onMouseDown={(event: React.MouseEvent) => {
+          onMouseDown={(event: MouseEvent) => {
             event.preventDefault();
           }}
           onClick={onArrowClick}
@@ -415,10 +416,6 @@ export function Select<Value>({
               {isOpen && (
                 <SelectList
                   options={filteredOptions}
-                  convertValueToString={convertValueToString}
-                  convertValueToReactNode={convertValueToReactNode}
-                  convertValueToId={convertValueToId}
-                  onOptionClick={handleOptionClick}
                   defaultOptionLabel={
                     hasDefaultOption && shouldShowDefaultOption
                       ? defaultOptionLabel
@@ -437,6 +434,11 @@ export function Select<Value>({
                     !shouldUsePopper &&
                     !shouldHideOnScroll
                   }
+                  isOptionDisabled={isOptionDisabled}
+                  convertValueToString={convertValueToString}
+                  convertValueToReactNode={convertValueToReactNode}
+                  convertValueToId={convertValueToId}
+                  onOptionClick={handleOptionClick}
                 />
               )}
             </div>

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

@@ -1,10 +1,9 @@
-import React, { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import { useTheme } from '../../../hooks';
 import { ICommonProps } from '../../../types';
 import { isNotEmpty } from '../../../helpers';
-
 import { SelectListStyles, styles } from './SelectList.styles';
 
 export interface ISelectListProps<Value> extends ICommonProps {
@@ -14,41 +13,35 @@ export interface ISelectListProps<Value> extends ICommonProps {
   activeValue?: Value;
   noMatchesLabel?: string;
   isLoading?: boolean;
-  loadingLabel?: React.ReactNode;
+  loadingLabel?: ReactNode;
   defaultOptionLabel?: string;
-  onOptionClick: (index: number) => void;
   testId?: string;
   shouldScrollToList?: boolean;
-  convertValueToString: (value: Value) => string | undefined;
-  convertValueToReactNode?: (value: Value) => ReactNode;
-  convertValueToId?: (value: Value) => string | undefined;
-}
-
-export function isOptionDisabled<Value>(option: Value): boolean {
-  return (
-    typeof option === 'object' &&
-    option !== null &&
-    ((option as { isDisabled?: boolean })?.isDisabled ?? false)
-  );
+  onOptionClick(index: number): void;
+  isOptionDisabled(value: Value): boolean;
+  convertValueToString(value: Value): string | undefined;
+  convertValueToReactNode?(value: Value): ReactNode;
+  convertValueToId?(value: Value): string | undefined;
 }
 
 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,
+  isOptionDisabled,
+  onOptionClick,
+  convertValueToString,
+  convertValueToReactNode,
+  convertValueToId = convertValueToString,
 }: ISelectListProps<Value>): JSX.Element {
   const { classes } = useTheme('SelectList', styles, tweakStyles);
   const activeValueId = isNotEmpty(activeValue)

package/src/components/Select/helpers.ts

@@ -1,5 +1,10 @@
 import { isNotEmpty } from '../../helpers';
 
+export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
+  typeof option === 'object' &&
+  option !== null &&
+  ((option as { isDisabled?: boolean })?.isDisabled ?? false);
+
 export const defaultConvertFunction = (v: unknown) =>
   v === undefined ? undefined : String(v);