@true-engineering/true-react-common-ui-kit 2.3.2 → 2.4.0

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

@@ -1,235 +1,235 @@
-import { ReactNode, useEffect, useState } from 'react';
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Select, ISelectProps } from './Select';
-
-interface ObjectValue {
-  name: string;
-  age: number;
-  isDisabled?: boolean;
-}
-
-const inlineStyles = [undefined, 'left', 'right', 'middle'];
-const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
-
-const genLetters = (qnt = 1): string =>
-  Math.random()
-    .toString(36)
-    .replace(/[^a-z]+/g, '')
-    .substr(0, qnt);
-
-const convertObjectToString = (v: ObjectValue): string => v.name;
-
-const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
-
-const convertObjectToReactNode = (v: ObjectValue, isDisabled: boolean): ReactNode => (
-  <span style={{ color: isDisabled ? 'red' : undefined }}>
-    <i>{v.name}</i>, {v.age}
-  </span>
-);
-
-const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
-
-const isOptionDisabled = (option: string) => option.startsWith('Опция');
-const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
-
-const stringOptions = [
-  'Опция 1',
-  'Опция 11',
-  'Еще одна опция',
-  'Еще выбор',
-  'Очень длинная опция вот такой текст',
-  '1',
-  '2',
-  '3',
-  '4',
-];
-
-const objectOptions: ObjectValue[] = [
-  { name: 'Ivan', age: 34 },
-  { name: 'Ivan', age: 42 },
-  { name: 'Konstantin', age: 11 },
-  { name: 'Mikhail', age: 24 },
-  { name: 'Maria', age: 45, isDisabled: true },
-  { name: 'Elena', age: 14 },
-  { name: 'Artem', age: 23 },
-];
-
-// Максимум не включается, минимум включается
-const getRandomInt = (min: number, max: number) =>
-  Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
-
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
-  valuesType: 'strings' | 'objects';
-  shouldUseReactNodes?: boolean;
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  shouldHideOnScroll?: boolean;
-  shouldUseCustomIsDisabledFunction?: boolean;
-  shouldRenderSearchInputInList?: boolean;
-  canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
-}
-
-function SelectWithCustomProps<T>({
-  valuesType,
-  optionsMode,
-  shouldUseReactNodes,
-  shouldUsePopper,
-  shouldRenderInBody,
-  shouldHideOnScroll,
-  shouldUseCustomIsDisabledFunction,
-  shouldRenderSearchInputInList,
-  canBeFlipped,
-  scrollParent,
-  noMatchesLabel,
-  ...rest
-}: ISelectWithCustomProps<T>) {
-  const [stringValue, setStringValue] = useState<string>();
-  const stringHandler = (newValue?: string) => {
-    console.log('change');
-    setStringValue(newValue);
-  };
-
-  const [objectValue, setObjectValue] = useState<ObjectValue>();
-  const objectHandler = (newValue?: ObjectValue) => {
-    console.log('change');
-    setObjectValue(newValue);
-  };
-
-  const selectValuesType = valuesType;
-  const shouldRenderAsReactNodes = shouldUseReactNodes;
-
-  const getOptions = async (): Promise<Array<string | ObjectValue>> =>
-    new Promise((resolve) =>
-      setTimeout(() => {
-        resolve(
-          [...Array(10)].map((_) => {
-            if (selectValuesType === 'strings') {
-              return genLetters(getRandomInt(3, 10));
-            }
-            return {
-              name: genLetters(getRandomInt(3, 10)),
-              age: getRandomInt(10, 70),
-            } as ObjectValue;
-          }),
-        );
-      }, 1000),
-    );
-
-  const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
-
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
-  const handleBlur = () => {
-    console.log('blur');
-  };
-
-  useEffect(() => {
-    const api = async () => {
-      setDynamicOptions(await getOptions());
-    };
-
-    api();
-  }, [selectValuesType]);
-
-  const props =
-    selectValuesType === 'strings'
-      ? {
-          onChange: stringHandler,
-          value: stringValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
-          convertValueToReactNode: shouldRenderAsReactNodes ? convertStringToReactNode : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined,
-        }
-      : {
-          onChange: objectHandler,
-          value: objectValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
-          convertValueToString: convertObjectToString,
-          convertValueToId: convertObjectToId,
-          convertValueToReactNode: shouldRenderAsReactNodes ? convertObjectToReactNode : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isObjectOptionDisabled : undefined,
-        };
-
-  return (
-    <Select
-      {...rest}
-      {...(props as unknown as ISelectProps<any>)}
-      {...(shouldRenderSearchInputInList && {
-        searchInput: { shouldRenderInList: true },
-      })}
-      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
-      optionsMode={optionsMode}
-      onType={async () => setDynamicOptions(await getOptions())}
-      onOpen={handleOpen}
-      onBlur={handleBlur}
-      dropdownOptions={{
-        shouldUsePopper,
-        shouldRenderInBody,
-        shouldHideOnScroll,
-        canBeFlipped,
-        scrollParent,
-      }}
-    />
-  );
-}
-
-export default {
-  title: 'Select',
-  component: SelectWithCustomProps,
-  argTypes: {
-    debounceTime: {
-      control: { type: 'range', min: 0, max: 1000, step: 100 },
-    },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    inlineStyle: { control: 'select', options: inlineStyles },
-    optionsMode: {
-      control: 'inline-radio',
-      options: ['normal', 'search', 'dynamic'],
-    },
-    valuesType: {
-      control: 'inline-radio',
-      options: ['strings', 'objects'],
-    },
-  },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Dropdown',
-  defaultOptionLabel: 'Default Option',
-  noMatchesLabel: 'No matches',
-  border: undefined,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-  isLoading: false,
-  debounceTime: 400,
-  // custom options
-  shouldUseReactNodes: false,
-  valuesType: 'strings',
-  optionsMode: 'normal',
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldRenderSearchInputInList: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-};
+import { ReactNode, useEffect, useState } from 'react';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Select, ISelectProps } from './Select';
+
+interface ObjectValue {
+  name: string;
+  age: number;
+  isDisabled?: boolean;
+}
+
+const inlineStyles = [undefined, 'left', 'right', 'middle'];
+const borders: Array<ISelectProps<any>['border']> = [undefined, 'left', 'top', 'right', 'bottom'];
+const errorPositions: Array<ISelectProps<any>['errorPosition']> = ['bottom', 'top'];
+
+const genLetters = (qnt = 1): string =>
+  Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, '')
+    .substr(0, qnt);
+
+const convertObjectToString = (v: ObjectValue): string => v.name;
+
+const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
+
+const convertObjectToReactNode = (v: ObjectValue, isDisabled: boolean): ReactNode => (
+  <span style={{ color: isDisabled ? 'red' : undefined }}>
+    <i>{v.name}</i>, {v.age}
+  </span>
+);
+
+const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
+
+const isOptionDisabled = (option: string) => option.startsWith('Опция');
+const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
+
+const stringOptions = [
+  'Опция 1',
+  'Опция 11',
+  'Еще одна опция',
+  'Еще выбор',
+  'Очень длинная опция вот такой текст',
+  '1',
+  '2',
+  '3',
+  '4',
+];
+
+const objectOptions: ObjectValue[] = [
+  { name: 'Ivan', age: 34 },
+  { name: 'Ivan', age: 42 },
+  { name: 'Konstantin', age: 11 },
+  { name: 'Mikhail', age: 24 },
+  { name: 'Maria', age: 45, isDisabled: true },
+  { name: 'Elena', age: 14 },
+  { name: 'Artem', age: 23 },
+];
+
+// Максимум не включается, минимум включается
+const getRandomInt = (min: number, max: number) =>
+  Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
+
+interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+  valuesType: 'strings' | 'objects';
+  shouldUseReactNodes?: boolean;
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  shouldUseCustomIsDisabledFunction?: boolean;
+  shouldRenderSearchInputInList?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+function SelectWithCustomProps<T>({
+  valuesType,
+  optionsMode,
+  shouldUseReactNodes,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  shouldUseCustomIsDisabledFunction,
+  shouldRenderSearchInputInList,
+  canBeFlipped,
+  scrollParent,
+  noMatchesLabel,
+  ...rest
+}: ISelectWithCustomProps<T>) {
+  const [stringValue, setStringValue] = useState<string>();
+  const stringHandler = (newValue?: string) => {
+    console.log('change');
+    setStringValue(newValue);
+  };
+
+  const [objectValue, setObjectValue] = useState<ObjectValue>();
+  const objectHandler = (newValue?: ObjectValue) => {
+    console.log('change');
+    setObjectValue(newValue);
+  };
+
+  const selectValuesType = valuesType;
+  const shouldRenderAsReactNodes = shouldUseReactNodes;
+
+  const getOptions = async (): Promise<Array<string | ObjectValue>> =>
+    new Promise((resolve) =>
+      setTimeout(() => {
+        resolve(
+          [...Array(10)].map((_) => {
+            if (selectValuesType === 'strings') {
+              return genLetters(getRandomInt(3, 10));
+            }
+            return {
+              name: genLetters(getRandomInt(3, 10)),
+              age: getRandomInt(10, 70),
+            } as ObjectValue;
+          }),
+        );
+      }, 1000),
+    );
+
+  const [dynamicOptions, setDynamicOptions] = useState<Array<string | ObjectValue>>([]);
+
+  const handleOpen = () => {
+    console.log('isOpen');
+  };
+
+  const handleBlur = () => {
+    console.log('blur');
+  };
+
+  useEffect(() => {
+    const api = async () => {
+      setDynamicOptions(await getOptions());
+    };
+
+    api();
+  }, [selectValuesType]);
+
+  const props =
+    selectValuesType === 'strings'
+      ? {
+          onChange: stringHandler,
+          value: stringValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
+          convertValueToReactNode: shouldRenderAsReactNodes ? convertStringToReactNode : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined,
+        }
+      : {
+          onChange: objectHandler,
+          value: objectValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
+          convertValueToString: convertObjectToString,
+          convertValueToId: convertObjectToId,
+          convertValueToReactNode: shouldRenderAsReactNodes ? convertObjectToReactNode : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction ? isObjectOptionDisabled : undefined,
+        };
+
+  return (
+    <Select
+      {...rest}
+      {...(props as unknown as ISelectProps<any>)}
+      {...(shouldRenderSearchInputInList && {
+        searchInput: { shouldRenderInList: true },
+      })}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      optionsMode={optionsMode}
+      onType={async () => setDynamicOptions(await getOptions())}
+      onOpen={handleOpen}
+      onBlur={handleBlur}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    debounceTime: {
+      control: { type: 'range', min: 0, max: 1000, step: 100 },
+    },
+    errorPosition: { control: 'inline-radio', options: errorPositions },
+    border: { control: 'inline-radio', options: borders },
+    inlineStyle: { control: 'select', options: inlineStyles },
+    optionsMode: {
+      control: 'inline-radio',
+      options: ['normal', 'search', 'dynamic'],
+    },
+    valuesType: {
+      control: 'inline-radio',
+      options: ['strings', 'objects'],
+    },
+  },
+} as ComponentMeta<typeof SelectWithCustomProps>;
+
+const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
+  <SelectWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Dropdown',
+  defaultOptionLabel: 'Default Option',
+  noMatchesLabel: 'No matches',
+  border: undefined,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isDisabled: false,
+  isRequired: false,
+  isClearable: false,
+  isLoading: false,
+  debounceTime: 400,
+  // custom options
+  shouldUseReactNodes: false,
+  valuesType: 'strings',
+  optionsMode: 'normal',
+  shouldUsePopper: false,
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+  shouldUseCustomIsDisabledFunction: false,
+  shouldRenderSearchInputInList: false,
+  shouldScrollToList: true,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};

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

@@ -1,96 +1,96 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    width: '100%',
-    position: 'relative',
-    boxSizing: 'border-box',
-  },
-
-  inputWrapper: {
-    width: '100%',
-    cursor: 'text',
-    position: 'relative',
-  },
-
-  listWrapper: {
-    left: -1,
-    zIndex: 3,
-    width: 'fit-content',
-    minWidth: 'calc(100% + 1px)',
-  },
-
-  withoutPopper: {
-    position: 'absolute',
-    top: 'calc(100% + 6px)',
-  },
-
-  listWrapperInBody: {
-    minWidth: 'auto',
-    width: 'auto',
-    maxWidth: 'min-content',
-  },
-
-  arrow: {
-    position: 'absolute',
-    right: 12,
-    top: 14,
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    zIndex: 1,
-    transition: 'transform 0.1s ease',
-  },
-
-  activeArrow: {
-    transform: 'rotate(180deg)',
-  },
-
-  disabled: {
-    '& $arrow': {
-      cursor: 'default',
-    },
-  },
-
-  counter: {
-    '&:not(:last-child)': {
-      paddingRight: 8,
-    },
-  },
-
-  icon: {
-    width: 16,
-    height: 16,
-  },
-
-  tweakInput: {
-    input: {
-      paddingRight: 32,
-    },
-
-    disabled: {
-      '& $input': {
-        cursor: 'default',
-      },
-    },
-
-    controls: {
-      paddingRight: 32,
-    },
-  },
-
-  tweakSelectList: {},
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        height: 48,
-        borderRadius: 0,
-        border: 'none',
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-};
-
-export type SelectStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  inputWrapper: {
+    width: '100%',
+    cursor: 'text',
+    position: 'relative',
+  },
+
+  listWrapper: {
+    left: -1,
+    zIndex: 3,
+    width: 'fit-content',
+    minWidth: 'calc(100% + 1px)',
+  },
+
+  withoutPopper: {
+    position: 'absolute',
+    top: 'calc(100% + 6px)',
+  },
+
+  listWrapperInBody: {
+    minWidth: 'auto',
+    width: 'auto',
+    maxWidth: 'min-content',
+  },
+
+  arrow: {
+    position: 'absolute',
+    right: 12,
+    top: 14,
+    width: 20,
+    height: 20,
+    cursor: 'pointer',
+    zIndex: 1,
+    transition: 'transform 0.1s ease',
+  },
+
+  activeArrow: {
+    transform: 'rotate(180deg)',
+  },
+
+  disabled: {
+    '& $arrow': {
+      cursor: 'default',
+    },
+  },
+
+  counter: {
+    '&:not(:last-child)': {
+      paddingRight: 8,
+    },
+  },
+
+  icon: {
+    width: 16,
+    height: 16,
+  },
+
+  tweakInput: {
+    input: {
+      paddingRight: 32,
+    },
+
+    disabled: {
+      '& $input': {
+        cursor: 'default',
+      },
+    },
+
+    controls: {
+      paddingRight: 32,
+    },
+  },
+
+  tweakSelectList: {},
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        height: 48,
+        borderRadius: 0,
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+};
+
+export type SelectStyles = ComponentStyles<typeof styles>;