@true-engineering/true-react-common-ui-kit 1.9.0 → 1.10.0

package/package.json

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

package/src/components/Input/Input.styles.ts

@@ -299,6 +299,8 @@ export const styles = {
 
   loading: {},
 
+  withUnits: {},
+
   tweakPreloader: {},
 };
 

package/src/components/Input/Input.tsx

@@ -175,12 +175,15 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const hasLabel = isNotEmpty(label);
     const hasPlaceholder =
       (!hasLabel || (hasFocus && !isReadonly)) && isNotEmpty(placeholder);
+    const shouldShowUnits =
+      (hasValue || (isFocused && !hasPlaceholder)) && hasUnits;
 
     const props: InputHTMLAttributes<HTMLInputElement> = {
       className: clsx(classes.input, {
         [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
         [classes.withIcons]: hasControls,
         [classes.withControls]: hasControls,
+        [classes.withUnits]: shouldShowUnits,
         [classes.floatingLabelWithoutPadding]:
           hasFloatingLabel && hasLabel && border === 'bottom',
       }),
@@ -257,7 +260,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
             </span>
           )}
 
-          {(hasValue || (isFocused && !hasPlaceholder)) && hasUnits && (
+          {shouldShowUnits && (
             <div
               className={clsx(classes.unitsWrapper, {
                 [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,

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

@@ -0,0 +1,262 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { Select, ISelectProps } from './Select';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { isNotEmpty } from '../../helpers';
+
+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 },
+      })}
+      isMultiSelect
+      noMatchesLabel={isNotEmpty(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 MultiSelect = Template.bind({});
+
+MultiSelect.args = {
+  label: 'Dropdown',
+  noMatchesLabel: 'No matches',
+  border: undefined,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  defaultOptionLabel: '',
+  allOptionsLabel: 'Все опции',
+  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

@@ -57,6 +57,19 @@ export const styles = {
       paddingRight: 32,
     },
 
+    withUnits: {
+      paddingRight: 8,
+    },
+
+    unitsWrapper: {
+      position: 'unset',
+      padding: [0, 32, 0, 0],
+    },
+
+    fakeValue: {
+      display: 'none',
+    },
+
     disabled: {
       '& $input': {
         cursor: 'default',