feat(Input): clear button

8base · Dec 28, 2018 · 8fc589a · 8fc589a
1 parent 9233991
commit 8fc589a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
@@ -3,7 +3,9 @@
 import React, { PureComponent } from 'react';
 import fp from 'lodash/fp';
 import InputMask from 'react-input-mask';
-import { InputWrapperTag, InputTag, InputIndicatorTag, InputRightIconTag, InputLeftIconTag } from './Input.theme';
+
+import { Icon } from '../Icon';
+import { InputWrapperTag, InputTag, InputIndicatorTag, InputRightIconTag, InputLeftIconTag, InputClearButtonTag } from './Input.theme';
 
 type InputCommonProps = {
   /** field placeholder */
@@ -30,6 +32,8 @@ type InputCommonProps = {
   kind?: 'bordered' | 'underline',
   /** readonly */
   readOnly?: boolean,
+  /** clearable */
+  clearable?: boolean,
 };
 
 type InputProps = {
@@ -79,6 +83,14 @@ class Input extends PureComponent<InputProps> {
     }
   }
 
+  onClear = () => {
+    const { onChange } = this.props;
+
+    if (typeof onChange === 'function') {
+      onChange('');
+    }
+  };
+
   render() {
     const {
       align,
@@ -101,6 +113,7 @@ class Input extends PureComponent<InputProps> {
       kind,
       disabled,
       readOnly,
+      clearable,
       ...rest
     } = this.props;
     const hasLeftIcon = !!leftIcon;
@@ -152,6 +165,11 @@ class Input extends PureComponent<InputProps> {
         <If condition={ hasRightIcon }>
           <InputRightIconTag tagName="div">{ rightIcon }</InputRightIconTag>
         </If>
+        <If condition={ !!clearable && !!value }>
+          <InputClearButtonTag onClick={ this.onClear } tagName="div">
+            <Icon name="Delete" size="sm" />
+          </InputClearButtonTag>
+        </If>
       </InputWrapperTag>
     );
   }

diff --git a/src/components/Input/Input.stories.js b/src/components/Input/Input.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('Components/Input', module, (story, { Input }) => {
+  asStory('Components/Input', module, (story, { Input, StateContainer }) => {
     story
       .add('without value', () => (
         <Input name="input" onChange={ () => null } />
@@ -35,6 +35,11 @@ export default (asStory) => {
       ))
       .add('with center align', () => (
         <Input name="input" align="center" />
+      ))
+      .add('with clear button', () => (
+        <StateContainer value="Text">
+          <Input name="input" clearable />
+        </StateContainer>
       ));
   });
 };
diff --git a/src/components/Input/Input.theme.js b/src/components/Input/Input.theme.js
@@ -80,6 +80,17 @@ const InputRightIconTag = createStyledTag(`${name}RightIcon`, {
   right: '8px',
 });
 
+const InputClearButtonTag = createStyledTag(`${name}ClearButton`, (props) => ({
+  position: 'absolute',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  right: '8px',
+  color: getThemeColors(props).LIGHT_GRAY1,
+  cursor: 'pointer',
+}));
+
 const getInputStyles = props => ({
   width: props.width ? `${props.width}rem` : '100%',
   outline: 'none',
@@ -118,5 +129,6 @@ export {
   InputIndicatorTag,
   InputRightIconTag,
   InputLeftIconTag,
+  InputClearButtonTag,
   theme,
 };