fix(*): fix issues accodring to PR #36

core-ds · Mar 5, 2020 · 9c57325 · 9c57325
1 parent 86fa366
commit 9c57325
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 62 deletions.
diff --git a/packages/base-input/src/Component.module.css b/packages/base-input/src/Component.module.css
@@ -101,10 +101,6 @@
   align-items: center;
 }
 
-.left-addons {}
-
-.right-addos {}
-
 .s {
   padding: 14px var(--base-input-side-paddings) 13px var(--base-input-side-paddings);
 }

diff --git a/packages/base-input/src/Component.stories.tsx b/packages/base-input/src/Component.stories.tsx
@@ -7,9 +7,11 @@ import {
 } from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
+
 /**
  * Components
  */
+
 import { BaseInput } from './Component';
 
 export default {
@@ -21,6 +23,8 @@ export default {
 export const BaseInputStory = () => {
   const [value, setValue] = useState('value');
 
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => setValue(event.target.value);
+
   return (
     <BaseInput
       type={ select('type', ['text', 'number', 'card', 'email', 'file', 'hidden', 'money', 'password', 'tel', 'text'], 'text') }
@@ -29,7 +33,7 @@ export const BaseInputStory = () => {
       placeholder={ text('placeholder', '') }
       label={ text('label', '') }
       value={ value }
-      onChange={ (e: any) => setValue(e.target.value) }
+      onChange={ handleChange }
     />
   );
 };

diff --git a/packages/base-input/src/Component.tsx b/packages/base-input/src/Component.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
-
 /**
  * Vendor
  */
@@ -45,11 +43,11 @@ export type BaseInputProps = {
     /** Слот для отображения контента снизу */
     children?: React.ReactNode;
     /** Обработчик фокуса инпута */
-    onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Обработчик блюра инпута */
-    onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Обработчик ввода */
-    onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Id компонента для тестов */
     dataTestId?: string;
 };
@@ -79,30 +77,27 @@ export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(({
 }, ref) => {
   const [focused, setFocused] = useState(false);
 
-  const filled = !!value;
-  const hasLabel = !!label;
-
-  function handleInputFocus(e: React.FocusEvent<HTMLInputElement>) {
+  const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     setFocused(true);
 
     if (onFocus) {
       onFocus(e);
     }
-  }
+  };
 
-  function handleInputBlur(e: React.FocusEvent<HTMLInputElement>) {
+  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     setFocused(false);
 
     if (onBlur) {
       onBlur(e);
     }
-  }
+  };
 
-  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (onChange) {
       onChange(e);
     }
-  }
+  };
 
   return (
     <div
@@ -111,22 +106,22 @@ export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(({
         {
           [styles.focused]: focused,
           [styles.disabled]: disabled,
-          [styles.filled]: filled,
-          [styles.hasLabel]: hasLabel
+          [styles.filled]: value,
+          [styles.hasLabel]: label
         },
         className
       ) }
     >
       <div className={ cn(styles.inner, innerClassName) }>
         { leftAddons && (
-          <div className={ cn(styles.addons, styles.leftAddons) }>
+          <div className={ styles.addons }>
             { leftAddons }
           </div>
         ) }
 
-        <div className={ cn(styles.inputWrapper) }>
+        <div className={ styles.inputWrapper }>
           { label && (
-            <div className={ cn(styles.label) }>
+            <div className={ styles.label }>
               { label }
             </div>
           ) }
@@ -147,7 +142,7 @@ export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(({
         </div>
 
         { rightAddons && (
-          <div className={ cn(styles.addons, styles.rightAddons) }>
+          <div className={ styles.addons }>
             { rightAddons }
           </div>
         ) }

diff --git a/packages/input/src/Component.module.css b/packages/input/src/Component.module.css
@@ -11,12 +11,6 @@
   box-sizing: border-box;
 }
 
-.inner {}
-
-.input {}
-
-.icon {}
-
 .left-icon {
   margin-left: var(--gap-s);
 }

diff --git a/packages/input/src/Component.stories.tsx b/packages/input/src/Component.stories.tsx
@@ -7,12 +7,14 @@ import {
 } from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
+
 /**
  * Components
  */
+
 import { Input } from './Component';
 
-// TODO:
+// TODO: move icons
 const icon = (
   <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
     <path fillRule='evenodd' clipRule='evenodd' d='M9 1C4.588 1 1 4.588 1 9C1 13.412 4.588 17 9 17C13.412 17 17 13.412 17 9C17 4.588 13.412 1 9 1ZM9 15.933C7.1619 15.9309 5.3997 15.1998 4.09997 13.9C2.80024 12.6003 2.06912 10.8381 2.067 9C2.06912 7.1619 2.80024 5.3997 4.09997 4.09997C5.3997 2.80024 7.1619 2.06912 9 2.067C10.8381 2.06912 12.6003 2.80024 13.9 4.09997C15.1998 5.3997 15.9309 7.1619 15.933 9C15.9309 10.8381 15.1998 12.6003 13.9 13.9C12.6003 15.1998 10.8381 15.9309 9 15.933Z' fill='#0B1F35' />
@@ -29,6 +31,8 @@ export default {
 export const InputStory = () => {
   const [value, setValue] = useState('value');
 
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => setValue(event.target.value);
+
   return (
     <div>
       <div style={ { marginBottom: '20px' } }>
@@ -41,7 +45,7 @@ export const InputStory = () => {
           hint={ text('hint', '') }
           error={ text('error', '') }
           value={ value }
-          onChange={ (e: any) => setValue(e.target.value) }
+          onChange={ handleChange }
         />
       </div>
 
@@ -51,7 +55,7 @@ export const InputStory = () => {
           placeholder='Enter text'
           label='Search'
           value={ value }
-          onChange={ (e: any) => setValue(e.target.value) }
+          onChange={ handleChange }
           leftIcon={ icon }
         />
       </div>
@@ -63,7 +67,7 @@ export const InputStory = () => {
           label='Search'
           value={ value }
           error='error'
-          onChange={ (e: any) => setValue(e.target.value) }
+          onChange={ handleChange }
           leftIcon={ icon }
         />
       </div>

diff --git a/packages/input/src/Component.tsx b/packages/input/src/Component.tsx
@@ -18,9 +18,9 @@ import { BaseInput, BaseInputProps } from '../../base-input/src';
 
 type InputProps = BaseInputProps & {
     /** Текст подсказки */
-    hint?: 'string';
+    hint?: string;
     /** Текст ошибки */
-    error?: 'string';
+    error?: string;
     /** Иконка слева */
     leftIcon?: React.ReactNode;
     /** Иконка справа */
@@ -31,7 +31,7 @@ type InputProps = BaseInputProps & {
  * Expo
  */
 
-// TODO:
+// TODO: move icons
 const errorIcon = (
   <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
     <path d='M16.8709 14.432L9.80088 2.61199C9.71724 2.47327 9.59918 2.35852 9.45813 2.27886C9.31709 2.19921 9.15786 2.15735 8.99588 2.15735C8.8339 2.15735 8.67467 2.19921 8.53362 2.27886C8.39258 2.35852 8.27452 2.47327 8.19088 2.61199L1.13088 14.432C1.04895 14.5739 1.00552 14.7347 1.00489 14.8985C1.00426 15.0623 1.04647 15.2235 1.12731 15.366C1.20816 15.5085 1.32484 15.6273 1.46579 15.7108C1.60674 15.7943 1.76707 15.8395 1.93088 15.842H16.0609C16.2259 15.8426 16.3881 15.7993 16.5309 15.7165C16.6736 15.6337 16.7918 15.5145 16.8732 15.3709C16.9546 15.2274 16.9964 15.0648 16.9942 14.8998C16.9921 14.7348 16.9461 14.5733 16.8609 14.432H16.8709ZM9.87088 13.242C9.87088 13.4489 9.7887 13.6473 9.64242 13.7935C9.49614 13.9398 9.29775 14.022 9.09088 14.022H8.86088C8.75845 14.022 8.65702 14.0018 8.56239 13.9626C8.46775 13.9234 8.38177 13.866 8.30934 13.7935C8.23691 13.7211 8.17945 13.6351 8.14025 13.5405C8.10105 13.4458 8.08088 13.3444 8.08088 13.242V13.002C8.08088 12.572 8.43088 12.222 8.86088 12.222H9.13088C9.56188 12.222 9.91088 12.572 9.91088 13.002L9.87088 13.242ZM9.64088 11.242H8.31088L8.09088 5.80199H9.91088L9.64088 11.242Z' fill='#EF3124' />
@@ -59,21 +59,33 @@ export const Input: React.FC<InputProps> = ({
   hint,
   error
 }) => {
-  const hasHint = !!hint;
-  const hasError = !!error;
-  const hasSub = hasHint || hasError;
+  const rightAddonsRenderer = () => (
+    <>
+      { error
+        ? <div className={ cn(styles.rightIcon, styles.errorIcon) }>{ errorIcon }</div>
+        : (rightIcon && <div className={ styles.rightIcon }>{ rightIcon }</div>) }
+      { rightAddons }
+    </>
+  );
+
+  const leftAddonsRenderer = () => (
+    <>
+      { (leftIcon && <div className={ styles.leftIcon }>{ leftIcon }</div>) }
+      { leftAddons }
+    </>
+  );
 
   return (
     <BaseInput
       className={ cn(
         styles.component,
         {
-          [styles.hasError]: hasError
+          [styles.hasError]: error
         },
         className
       ) }
-      innerClassName={ cn(styles.inner) }
-      inputClassName={ cn(styles.input) }
+      innerClassName={ styles.inner }
+      inputClassName={ styles.input }
       type={ type }
       required={ required }
       size={ size }
@@ -85,25 +97,12 @@ export const Input: React.FC<InputProps> = ({
       onFocus={ onFocus }
       onBlur={ onBlur }
       dataTestId={ dataTestId }
-      rightAddons={ (
-        <>
-          { hasError
-            ? <div className={ cn(styles.icon, styles.rightIcon, styles.errorIcon) }>{ errorIcon }</div>
-            : (rightIcon && <div className={ cn(styles.icon, styles.rightIcon) }>{ rightIcon }</div>) }
-          { rightAddons }
-        </>
-      ) }
-      leftAddons={ (
-        <>
-          { (leftIcon && <div className={ cn(styles.icon, styles.leftIcon) }>{ leftIcon }</div>) }
-          { leftAddons }
-        </>
-      ) }
+      rightAddons={ rightAddonsRenderer }
+      leftAddons={ leftAddonsRenderer }
     >
-      { hasSub && (
-        <span className={ cn(styles.sub) }>
-          { (hasHint && !hasError) && hint }
-          { hasError && error }
+      { (error || hint) && (
+        <span className={ styles.sub }>
+          { error || hint }
         </span>
       ) }