Creates consts for code legibility purposes

vtex-sites · Jul 11, 2022 · 45f6500 · 45f6500
1 parent b77f20e
commit 45f6500
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/src/components/ui/InputText/InputText.stories.tsx b/src/components/ui/InputText/InputText.stories.tsx
@@ -15,6 +15,9 @@ const story = {
     id: {
       type: { name: 'string', required: true },
     },
+    actionable: {
+      type: { name: 'boolean' },
+    },
   },
 }
 
@@ -57,27 +60,23 @@ export const Disabled = Template.bind({})
 Default.args = {
   id: 'default-input-text',
   label: 'Email',
-  disabled: false,
 }
 
 HasError.args = {
   id: 'error-input-text',
   label: 'Email',
   value: 'invalid@mail',
   error: 'Please, add a valid email',
-  disabled: false,
 }
 
 Actionable.args = {
   id: 'actionable-input-text',
   label: 'Postal Code',
-  disabled: false,
 }
 
 Disabled.args = {
   id: 'disabled-input-text',
   label: 'Email',
-  error: 'Please, add a valid email',
   disabled: true,
 }
 

diff --git a/src/components/ui/InputText/InputText.tsx b/src/components/ui/InputText/InputText.tsx
@@ -74,6 +74,9 @@ const InputText = ({
   value,
   ...otherProps
 }: InputTextProps) => {
+  const shouldDisplayError = !disabled && error && error !== ''
+  const shouldDisplayButton = actionable && !disabled && value !== ''
+
   return (
     <div
       data-fs-input-text
@@ -91,16 +94,14 @@ const InputText = ({
       />
       <UILabel htmlFor={id}>{label}</UILabel>
 
-      {actionable &&
-        !disabled &&
-        value !== '' &&
+      {shouldDisplayButton &&
         (error ? (
           <ButtonIcon
             data-fs-button-size="small"
             aria-label="Clear Field"
             icon={<Icon name="XCircle" width={20} height={20} />}
             onClick={() => {
-              onClear()
+              onClear?.()
               inputRef?.current?.focus()
             }}
           />
@@ -109,9 +110,7 @@ const InputText = ({
             {buttonActionText}
           </Button>
         ))}
-      {!disabled && error && error !== '' && (
-        <span data-fs-input-text-message>{error}</span>
-      )}
+      {shouldDisplayError && <span data-fs-input-text-message>{error}</span>}
     </div>
   )
 }