@true-engineering/true-react-common-ui-kit 1.0.2 → 1.1.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.1.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Select/Select.tsx

@@ -22,14 +22,15 @@ import {
   useDropdown,
 } from '../../hooks';
 import { IDropdownWithPopperOptions } from '../../types';
-
-import { SelectStyles, styles } from './Select.styles';
+import { isNotEmpty } from '../../helpers';
 import {
   defaultConvertFunction,
   defaultCompareFunction,
   getActiveValueIndex,
 } from './helpers';
 
+import { SelectStyles, styles } from './Select.styles';
+
 export interface ISelectProps<Value>
   extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
   tweakStyles?: SelectStyles;
@@ -46,19 +47,17 @@ export interface ISelectProps<Value>
 
   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;
+  onChange(value: Value | undefined): 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>({
@@ -85,6 +84,7 @@ export function Select<Value>({
   dropdownOptions,
   minSymbolsCountToOpenList = 0,
   dropdownIcon = 'chevron-down',
+  shouldScrollToList = true,
   ...inputProps
 }: ISelectProps<Value>): JSX.Element {
   const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
@@ -104,6 +104,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;
@@ -369,7 +373,7 @@ export function Select<Value>({
         ref={inputWrapper}
       >
         <Input
-          value={searchValue !== '' ? searchValue : convertValueToString(value)}
+          value={searchValue !== '' ? searchValue : stringValue}
           onChange={handleInputChange}
           isActive={isListOpen}
           isReadonly={optionsMode === 'normal'}
@@ -428,7 +432,11 @@ export function Select<Value>({
                   tweakStyles={tweakStyles?.tweakSelectList as Styles}
                   testId={testId !== undefined ? `${testId}-list` : undefined}
                   // скролл не работает с включеным поппером
-                  shouldScrollToList={!shouldUsePopper && !shouldHideOnScroll}
+                  shouldScrollToList={
+                    shouldScrollToList &&
+                    !shouldUsePopper &&
+                    !shouldHideOnScroll
+                  }
                 />
               )}
             </div>

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

@@ -1,9 +1,9 @@
 import React, { ReactNode, useMemo } from 'react';
-import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 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';
 
@@ -19,9 +19,9 @@ export interface ISelectListProps<Value> extends ICommonProps {
   onOptionClick: (index: number) => void;
   testId?: string;
   shouldScrollToList?: boolean;
-  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 isOptionDisabled<Value>(option: Value): boolean {
@@ -51,7 +51,9 @@ export function SelectList<Value>({
   shouldScrollToList = true,
 }: 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,16 @@
+import { isNotEmpty } from '../../helpers';
+
 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;

package/src/components/SmartInput/SmartInput.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, forwardRef} from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { Input, IInputProps } from '../Input';
 import {
   CharactersMap,
@@ -38,140 +38,143 @@ export const SMART_INPUT_REGEX_MAP = {
   benefitCert: /^[a-zA-Z0-9/]*$/i,
 };
 
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(({
-  onChange,
-  isUpperCase,
-  smartType = 'default',
-  regExp,
-  value = '',
-  maxLength,
-  ...rest
-}, ref) => {
-  const [currentValue, setCurrentValue] = useState<string>(
-    getUpperCaseIfNeeded(value),
-  );
-  const [caretPosition, setCaretPosition] = useState<number | null>(null);
-  const [input, setInput] = useState<HTMLInputElement | null>(null);
-  const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-  useEffect(() => {
-    if (
-      input &&
-      input.type !== 'email' &&
-      input.selectionStart !== caretPosition
-    ) {
-      input.selectionStart = caretPosition;
-      input.selectionEnd = caretPosition;
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
+  (
+    {
+      onChange,
+      isUpperCase,
+      smartType = 'default',
+      regExp,
+      value = '',
+      maxLength,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [currentValue, setCurrentValue] = useState<string>(
+      getUpperCaseIfNeeded(value),
+    );
+    const [caretPosition, setCaretPosition] = useState<number | null>(null);
+    const [input, setInput] = useState<HTMLInputElement | null>(null);
+    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+    useEffect(() => {
+      if (
+        input &&
+        input.type !== 'email' &&
+        input.selectionStart !== caretPosition
+      ) {
+        input.selectionStart = caretPosition;
+        input.selectionEnd = caretPosition;
+      }
+    }, [caretPosition]);
+
+    useEffect(() => {
+      setCurrentValue(getUpperCaseIfNeeded(value));
+    }, [value]);
+
+    function getUpperCaseIfNeeded(str: string) {
+      return isUpperCase ? str.toUpperCase() : str;
     }
-  }, [caretPosition]);
 
-  useEffect(() => {
-    setCurrentValue(getUpperCaseIfNeeded(value));
-  }, [value]);
+    const handleChange = (
+      str: string,
+      event?: React.FormEvent<HTMLInputElement>,
+    ) => {
+      const mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(
+                smartType,
+                smartType !== 'email'
+                  ? CharactersMap
+                  : { ...CharactersMap, '"': '@' },
+                symbol,
+              ),
+        )
+        .filter((symbol) => regex.test(symbol))
+        .join('');
+      const domElement = event?.currentTarget;
+
+      if (domElement) {
+        if (!input) {
+          setInput(domElement);
+        }
+
+        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
+        onChange(getUpperCaseIfNeeded(mappedValue));
+
+        if (mappedValue !== currentValue) {
+          setCaretPosition(domElement.selectionStart);
+        } else {
+          setCaretPosition(
+            domElement.selectionStart ? domElement.selectionStart - 1 : null,
+          );
+        }
+      }
+    };
 
-  function getUpperCaseIfNeeded(str: string) {
-    return isUpperCase ? str.toUpperCase() : str;
-  }
+    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+      const domElement = event.currentTarget;
 
-  const handleChange = (
-    str: string,
-    event?: React.FormEvent<HTMLInputElement>,
-  ) => {
-    const mappedValue = str
-      .split('')
-      .map((symbol) =>
-        regex.test(symbol)
-          ? symbol
-          : transformCaseSensitive(
-              smartType,
-              smartType !== 'email'
-                ? CharactersMap
-                : { ...CharactersMap, '"': '@' },
-              symbol,
-            ),
-      )
-      .filter((symbol) => regex.test(symbol))
-      .join('');
-    const domElement = event?.currentTarget;
-
-    if (domElement) {
       if (!input) {
         setInput(domElement);
       }
 
-      setCurrentValue(getUpperCaseIfNeeded(mappedValue));
-      onChange(getUpperCaseIfNeeded(mappedValue));
-
-      if (mappedValue !== currentValue) {
-        setCaretPosition(domElement.selectionStart);
-      } else {
-        setCaretPosition(
-          domElement.selectionStart ? domElement.selectionStart - 1 : null,
-        );
+      event.preventDefault();
+      const selectionStart = domElement.selectionStart ?? 0;
+      const selectionEnd = domElement.selectionEnd ?? 0;
+
+      let mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(smartType, TransliterationMap, symbol),
+        )
+        .filter((letter) => regex.test(letter))
+        .join('');
+
+      const newValueLength =
+        mappedValue.length +
+        currentValue.length -
+        (selectionEnd - selectionStart);
+
+      if (
+        maxLength !== undefined &&
+        maxLength >= 0 &&
+        newValueLength > maxLength
+      ) {
+        const validMappedValueLength =
+          mappedValue.length - (newValueLength - maxLength);
+
+        mappedValue = mappedValue.substring(0, validMappedValueLength);
       }
-    }
-  };
-
-  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
-    const str = event.clipboardData.getData('text/plain').split('').join('');
-    const domElement = event.currentTarget;
-
-    if (!input) {
-      setInput(domElement);
-    }
 
-    event.preventDefault();
-    const selectionStart = domElement.selectionStart ?? 0;
-    const selectionEnd = domElement.selectionEnd ?? 0;
-
-    let mappedValue = str
-      .split('')
-      .map((symbol) =>
-        regex.test(symbol)
-          ? symbol
-          : transformCaseSensitive(smartType, TransliterationMap, symbol),
-      )
-      .filter((letter) => regex.test(letter))
-      .join('');
-
-    const newValueLength =
-      mappedValue.length +
-      currentValue.length -
-      (selectionEnd - selectionStart);
-
-    if (
-      maxLength !== undefined &&
-      maxLength >= 0 &&
-      newValueLength > maxLength
-    ) {
-      const validMappedValueLength =
-        mappedValue.length - (newValueLength - maxLength);
-
-      mappedValue = mappedValue.substring(0, validMappedValueLength);
-    }
-
-    const newValue = getUpperCaseIfNeeded(
-      `${currentValue?.substring(
-        0,
-        selectionStart,
-      )}${mappedValue}${currentValue?.substring(
-        selectionEnd,
-      )}`,
+      const newValue = getUpperCaseIfNeeded(
+        `${currentValue?.substring(
+          0,
+          selectionStart,
+        )}${mappedValue}${currentValue?.substring(selectionEnd)}`,
+      );
+
+      setCaretPosition(selectionStart + mappedValue.length);
+      setCurrentValue(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        maxLength={maxLength}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        value={currentValue}
+      />
     );
-
-    setCaretPosition(selectionStart + mappedValue.length);
-    setCurrentValue(newValue);
-    onChange(newValue);
-  };
-
-  return (
-    <Input
-      {...rest}
-      ref={ref}
-      maxLength={maxLength}
-      onChange={handleChange}
-      onPaste={handlePaste}
-      value={currentValue}
-    />
-  );
-});
+  },
+);