Merge branch 'fix/input-auto-resize-new' into 'master'

fix(factors): add Input AutoResize to pick from inputs in text.tsx in ds-factors, STOR-948 See merge request Frontend/synerise-design!2392
Synerise · Oct 10, 2022 · e8c45f4 · e8c45f4
2 parents a43391b + d7c5de1
commit e8c45f4
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 14 deletions.
diff --git a/packages/components/factors/src/FactorValue/Text/Text.tsx b/packages/components/factors/src/FactorValue/Text/Text.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Icon, { FullScreenM } from '@synerise/ds-icon';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 import Autocomplete from '@synerise/ds-autocomplete';
-import { Input } from '@synerise/ds-input';
+import { AutoResizeInput, Input } from '@synerise/ds-input';
 import { useState } from 'react';
 import { debounce } from 'lodash';
 
@@ -85,10 +85,9 @@ const TextInput: React.FC<InputProps> = ({
       []
     );
   }, [localValue, autocompleteText]);
-
-  return (
-    <S.TextWrapper>
-      {factorType === 'text' && textType === 'autocomplete' ? (
+  const renderInput = (typesOfInput: typeof textType, factorsType: typeof factorType): React.ReactNode => {
+    if (typesOfInput === 'autocomplete' && factorsType === 'text') {
+      return (
         <Autocomplete
           placeholder={texts.valuePlaceholder}
           value={localValue as string}
@@ -104,7 +103,10 @@ const TextInput: React.FC<InputProps> = ({
             </Autocomplete.Option>
           ))}
         </Autocomplete>
-      ) : (
+      );
+    }
+    if (typesOfInput === 'default' && factorsType === 'text') {
+      return (
         <S.InputWrapper>
           <Input
             {...inputProps}
@@ -117,7 +119,27 @@ const TextInput: React.FC<InputProps> = ({
             error={localError || error}
           />
         </S.InputWrapper>
-      )}
+      );
+    }
+    if (typesOfInput === 'autoresize' && factorsType === 'text') {
+      return (
+        <AutoResizeInput
+          {...inputProps}
+          handleInputRef={setInputRef}
+          placeholder={texts.valuePlaceholder}
+          value={localValue as string}
+          onChange={handleChange}
+          onBlur={onDeactivate}
+          error={localError || error}
+        />
+      );
+    }
+    return null;
+  };
+
+  return (
+    <S.TextWrapper>
+      {renderInput(textType, factorType)}
       <TextModal
         visible={openExpanseEditor}
         onCancel={(): void => setOpenExpanseEditor(false)}

diff --git a/packages/components/factors/src/Factors.types.ts b/packages/components/factors/src/Factors.types.ts
@@ -102,7 +102,7 @@ export type FactorsProps = {
   onDeactivate?: () => void;
   onChangeValue: (value: FactorValueType) => void;
   value: FactorValueType;
-  textType?: 'autocomplete' | 'expansible' | 'default' | string;
+  textType?: 'autocomplete' | 'expansible' | 'default' | 'autoresize' | string;
   autoResize?: boolean | { minWidth: string; maxWidth: string };
   autocompleteText?: {
     options: string[];

diff --git a/packages/portal/stories/components/Condition/index.stories.tsx b/packages/portal/stories/components/Condition/index.stories.tsx
@@ -279,7 +279,7 @@ const stories = {
             removeTooltip: 'Remove',
             moveTooltip: 'Move',
           }}
-          inputProps={{autoResize: boolean('Set autoResize', true) ? {maxWidth: `${number('Set autoResize max width', 450)}px`, minWidth: `${number('Set autoResize min width', 144)}px`} : undefined }}
+          inputProps={{autoResize: boolean('Set width of autoResize', true) ? {maxWidth: `${number('Set autoResize max width', 450)}px`, minWidth: `${number('Set autoResize min width', 144)}px`} : undefined }}
           getPopupContainerOverride={(): HTMLElement => document.body}
           autoClearCondition={boolean('Enable autoclear condition elements', true)}
           addCondition={boolean('Enable add condition', true) && addStepCondition}
@@ -345,7 +345,7 @@ const stories = {
                   availableFactorTypes: condition.operator?.value?.availableFactors || null,
                   selectedFactorType: condition.factor.selectedFactorType,
                   defaultFactorType: 'text',
-                  textType: select('Select type of text input', ['autocomplete', 'expansible', 'default'], 'default'),
+                  textType: select('Select type of text input', ['autocomplete','autoresize', 'expansible', 'default'], 'default'),
                   autocompleteText: {
                     options: ['First name', 'Last name', 'City', 'Age', 'Points'],
                   },

diff --git a/packages/portal/stories/components/Factors/index.stories.tsx b/packages/portal/stories/components/Factors/index.stories.tsx
@@ -24,10 +24,10 @@ const stories = {
       <Factors
         selectedFactorType={store.state.selectedFactorType}
         setSelectedFactorType={setSelectedFactor}
-        inputProps={{autoResize: boolean('Set autoResize', true) ? {maxWidth: `${number('Set autoResize max width', 450)}px`, minWidth: `${number('Set autoResize min width', 144)}px`} : undefined }}
+        inputProps={{autoResize: boolean('Set width of autoResize', true) ? {maxWidth: `${number('Set autoResize max width', 450)}px`, minWidth: `${number('Set autoResize min width', 144)}px`} : undefined }}
         value={store.state.value}
         onChangeValue={changeHandler}
-        textType={select('Select type of text input', ['autocomplete', 'expansible', 'default'], 'default')}
+        textType={select('Select type of text input', ['autocomplete','autoresize', 'expansible', 'default'], 'default')}
         defaultFactorType="text"
         autocompleteText={{
           options: ['First name', 'Last name', 'City', 'Age', 'Points'],

diff --git a/packages/portal/stories/components/StepCard/data/Condition.tsx b/packages/portal/stories/components/StepCard/data/Condition.tsx
@@ -283,7 +283,7 @@ export const ConditionExample: React.FC<ConditionExampleProps> = ({ steps, onCha
       minConditionsLength={1}
       maxConditionsLength={10}
       autoClearCondition
-      inputProps={{autoResize: boolean('Set autoResize', true) ? {maxWidth: `${number('Set autoResize max width', 450)}px`, minWidth: `${number('Set autoResize min width', 144)}px`} : undefined }}
+      inputProps={{autoResize: boolean('Set width of autoResize', true) ? {maxWidth: `${number('Set autoResize max width', 450)}px`, minWidth: `${number('Set autoResize min width', 144)}px`} : undefined }}
       addCondition={addStepCondition}
       removeCondition={removeStepCondition}
       onUpdateStepName={boolean('Show step name', true) ? updateStepName : undefined}
@@ -343,7 +343,7 @@ export const ConditionExample: React.FC<ConditionExampleProps> = ({ steps, onCha
             defaultFactorType: 'text',
             // setSelectedFactorType: factorType => setStepConditionFactorType(step.id, condition.id, factorType),
             // onChangeValue: value => setStepConditionFactorValue(step.id, condition.id, value),
-            textType: select('Select type of text input', ['autocomplete', 'expansible', 'default'], 'default'),
+            textType: select('Select type of text input', ['autocomplete','autoresize','expansible', 'default'], 'default'),
             autocompleteText: {
               options: ['First name', 'Last name', 'City', 'Age', 'Points'],
             },