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

package/dist/types.d.ts

@@ -1,89 +1,35 @@
 import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import {
-  ICommonIcon,
-  IComplexIcon,
-  IPreloaderSvgType,
-  ISvgIcon,
-} from './components';
+import { ICommonIcon, IComplexIcon, IPreloaderSvgType, ISvgIcon } from './components';
 export interface IDataAttributes {
-  [key: string]: unknown;
+    [key: string]: unknown;
 }
 export interface ICommonProps {
-  data?: IDataAttributes;
+    data?: IDataAttributes;
 }
 export interface IDropdownWithPopperOptions {
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  scrollParent?: 'auto' | 'document' | Element;
-  shouldHideOnScroll?: boolean;
-  canBeFlipped?: boolean;
-  modifiers?: Array<Partial<Modifier<any, any>>>;
-  placement?: Placement;
-  flipOptions?: Record<string, any>;
+    shouldUsePopper?: boolean;
+    shouldRenderInBody?: boolean;
+    scrollParent?: 'auto' | 'document' | Element;
+    shouldHideOnScroll?: boolean;
+    canBeFlipped?: boolean;
+    modifiers?: Array<Partial<Modifier<any, any>>>;
+    placement?: Placement;
+    flipOptions?: Record<string, any>;
 }
-export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<
-  Styles<keyof StyleSheet, Props>
->;
-export declare type ComponentName =
-  | 'AccountInfo'
-  | 'AddButton'
-  | 'Button'
-  | 'CloseButton'
-  | 'Checkbox'
-  | 'CssBaseline'
-  | 'Colors'
-  | 'DateInput'
-  | 'DatePicker'
-  | 'DatePickerInput'
-  | 'DatePickerHeader'
-  | 'Description'
-  | 'DotsPreloader'
-  | 'SvgPreloader'
-  | 'FiltersPane'
-  | 'FilterInterval'
-  | 'FilterSelect'
-  | 'FilterWithDates'
-  | 'FilterWithPeriod'
-  | 'FilterWrapper'
-  | 'FiltersPaneSearch'
-  | 'Flag'
-  | 'FlexibleTable'
-  | 'Icon'
-  | 'IncrementInput'
-  | 'Input'
-  | 'List'
-  | 'Modal'
-  | 'MoreMenu'
-  | 'MultiSelect'
-  | 'MultiSelectInput'
-  | 'MultiSelectList'
-  | 'Notification'
-  | 'PhoneInput'
-  | 'PhoneInputCountryList'
-  | 'RadioButton'
-  | 'SearchInput'
-  | 'Select'
-  | 'SelectList'
-  | 'ScrollIntoViewIfNeeded'
-  | 'Switch'
-  | 'TextArea'
-  | 'TextWithInfo'
-  | 'TextWithTooltip'
-  | 'ThemedPreloader'
-  | 'Tooltip'
-  | 'Toaster';
+export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
+export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerInput' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
 export declare type UiKitAnimations = Record<string, any>;
 export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
 export interface UiKitTheme {
-  name: string;
-  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
-  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-  complexIcons?: Partial<Record<IComplexIcon, string>>;
-  preloaders?: Partial<Record<IPreloaderSvgType, string>>;
-  animations?: UiKitAnimations;
-  colors?: Record<string, string>;
-  dimensions?: Record<string, number>;
-  boxShadows?: Record<string, string>;
-  helpers?: UiKitHelpers;
+    name: string;
+    components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+    icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+    complexIcons?: Partial<Record<IComplexIcon, string>>;
+    preloaders?: Partial<Record<IPreloaderSvgType, string>>;
+    animations?: UiKitAnimations;
+    colors?: Record<string, string>;
+    dimensions?: Record<string, number>;
+    boxShadows?: Record<string, string>;
+    helpers?: UiKitHelpers;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "1.0.2",
+  "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 {
@@ -22,61 +24,48 @@ import {
   useDropdown,
 } from '../../hooks';
 import { IDropdownWithPopperOptions } from '../../types';
-
-import { SelectStyles, styles } from './Select.styles';
+import { isNotEmpty } from '../../helpers';
 import {
   defaultConvertFunction,
   defaultCompareFunction,
   getActiveValueIndex,
+  defaultIsOptionDisabled,
 } from './helpers';
+import { SelectStyles, styles } from './Select.styles';
 
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
   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;
-  onChange: (value?: Value) => void; // подумать как возвращать индекс
-  compareValuesOnChange?: (
-    v1: Value | undefined,
-    v2: Value | undefined,
-  ) => boolean;
-  // возможно делать какую-то индексацию опций
-
+  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;
-  convertValueToReactNode?: (value?: Value) => ReactNode | undefined;
-  convertValueToId?: (value?: Value) => string | undefined;
+  convertValueToString?(value: Value): string | undefined;
+  convertValueToReactNode?(value: Value): ReactNode;
+  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,
@@ -85,6 +74,18 @@ export function Select<Value>({
   dropdownOptions,
   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);
@@ -104,6 +105,10 @@ export function Select<Value>({
   const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
 
+  const stringValue = isNotEmpty(value)
+    ? convertValueToString(value)
+    : undefined;
+
   const filteredOptions = useMemo(() => {
     if (optionsMode !== 'search') {
       return options;
@@ -140,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);
     }
@@ -151,7 +156,7 @@ export function Select<Value>({
     handleListOpen();
   };
 
-  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     if (onBlur !== undefined) {
       onBlur(event);
     }
@@ -218,7 +223,7 @@ export function Select<Value>({
     setSearchValue(v);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+  const handleKeyDown = (event: KeyboardEvent) => {
     if (!isListOpen) {
       return;
     }
@@ -369,7 +374,7 @@ export function Select<Value>({
         ref={inputWrapper}
       >
         <Input
-          value={searchValue !== '' ? searchValue : convertValueToString(value)}
+          value={searchValue !== '' ? searchValue : stringValue}
           onChange={handleInputChange}
           isActive={isListOpen}
           isReadonly={optionsMode === 'normal'}
@@ -383,7 +388,7 @@ export function Select<Value>({
           {...inputProps}
         />
         <div
-          onMouseDown={(event: React.MouseEvent) => {
+          onMouseDown={(event: MouseEvent) => {
             event.preventDefault();
           }}
           onClick={onArrowClick}
@@ -411,10 +416,6 @@ export function Select<Value>({
               {isOpen && (
                 <SelectList
                   options={filteredOptions}
-                  convertValueToString={convertValueToString}
-                  convertValueToReactNode={convertValueToReactNode}
-                  convertValueToId={convertValueToId}
-                  onOptionClick={handleOptionClick}
                   defaultOptionLabel={
                     hasDefaultOption && shouldShowDefaultOption
                       ? defaultOptionLabel
@@ -428,7 +429,16 @@ export function Select<Value>({
                   tweakStyles={tweakStyles?.tweakSelectList as Styles}
                   testId={testId !== undefined ? `${testId}-list` : undefined}
                   // скролл не работает с включеным поппером
-                  shouldScrollToList={!shouldUsePopper && !shouldHideOnScroll}
+                  shouldScrollToList={
+                    shouldScrollToList &&
+                    !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 { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
+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,44 +13,40 @@ 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 | 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)
-  );
+  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 = convertValueToId(activeValue);
+  const activeValueId = isNotEmpty(activeValue)
+    ? convertValueToId(activeValue)
+    : undefined;
 
   const convertedToStringOptions = useMemo(
     () => options.map(convertValueToString),

package/src/components/Select/helpers.ts

@@ -1,13 +1,21 @@
+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);
 
-export const defaultCompareFunction = <Value>(
-  v1: Value | undefined,
-  v2: Value | undefined,
-) => v1 === v2;
+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 => options.findIndex((o) => convertFunc(o) === convertFunc(value));
+  convertFunc: (v: Value) => string | undefined,
+): number =>
+  isNotEmpty(value)
+    ? options.findIndex((o) => convertFunc(o) === convertFunc(value))
+    : -1;