fix(textinput accepts styledtextarea): textinput accepts styledtextarea

Linting format
Headstorm · Sep 13, 2020 · 9b2d106 · 9b2d106
1 parent c13e01c
commit 9b2d106
Showing 1 changed file with 6 additions and 10 deletions.
diff --git a/packages/hs-react-ui/src/components/TextInput/TextInput.tsx b/packages/hs-react-ui/src/components/TextInput/TextInput.tsx
@@ -117,6 +117,7 @@ export type TextInputProps = InputHTMLAttributes<HTMLInputElement> &
 
     StyledContainer?: string & StyledComponentBase<any, {}>;
     StyledInput?: string & StyledComponentBase<any, {}>;
+    StyledTextArea?: string & StyledComponentBase<any, {}>;
     StyledIconContainer?: string & StyledComponentBase<any, {}>;
     StyledErrorContainer?: string & StyledComponentBase<any, {}>;
     containerProps?: SubcomponentPropsType;
@@ -163,7 +164,8 @@ const TextInput = ({
   showCharacterCount = false,
 
   StyledContainer = Container,
-  StyledInput,
+  StyledInput = TextInputContainer,
+  StyledTextArea = TextAreaInputContainer,
   StyledIconContainer = IconContainer,
   StyledErrorContainer = ErrorContainer,
   containerProps = {},
@@ -177,15 +179,9 @@ const TextInput = ({
     debouncedOnChange,
     debounceInterval,
   ]);
-
-  // Determine the correct input type. Using a single input and the 'as' keyword
-  // to display as a text area disables the ability to set cols/rows
-  let InputComponent: string & StyledComponentBase<any, {}> = TextInputContainer;
-  if (StyledInput) {
-    InputComponent = StyledInput;
-  } else if (isMultiline) {
-    InputComponent = TextAreaInputContainer;
-  }
+  const InputComponent: string & StyledComponentBase<any, {}> = isMultiline
+    ? StyledTextArea
+    : StyledInput;
   const displayValue = nativeHTMLAttributes.value || defaultValue;
 
   return (