feat(input): add rendersuffix prop (#211)

* fix(password): add rendersuffix * fix(password): remove unnecessary spread
blockchain · Jan 5, 2019 · e8f04f7 · e8f04f7
1 parent 1359415
commit e8f04f7
Show file tree

Hide file tree

Showing 7 changed files with 633 additions and 710 deletions.
diff --git a/src/Atoms/Inputs/Input.js b/src/Atoms/Inputs/Input.js
@@ -1,6 +1,6 @@
 // @flow strict
-import React from 'react'
 import PropTypes from 'prop-types'
+import * as React from 'react'
 import styled, { type ReactComponentFunctional } from 'styled-components'
 
 import injectE2E, { type E2ePropType } from '../../Tools/injectE2E'
@@ -30,6 +30,7 @@ export type PropsType = {
   +input?: {},
   +label?: string,
   +name?: string,
+  +renderSuffix?: (disabled?: boolean) => React.Node,
   +type: HtmlInputType,
   +value?: string,
   +width?: string,
@@ -41,6 +42,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: ${prop<PropsType>('width')};
+  position: relative;
 `
 
 const InputWrapper: ReactComponentFunctional<WrapperPropsType> = styled.input.attrs(
@@ -113,7 +115,13 @@ export const InputLabel: ReactComponentFunctional<LabelPropsType> = styled.label
     props.disabled === true ? 'cursor: not-allowed' : ''};
 `
 
-const Input = ({ className, input, type, ...rest }: PropsType) => {
+const Input = ({
+  className,
+  input,
+  type,
+  renderSuffix,
+  ...rest
+}: PropsType) => {
   const hasLabel = rest.label != null
   const hasError = rest.error != null
 
@@ -134,13 +142,15 @@ const Input = ({ className, input, type, ...rest }: PropsType) => {
           }${rest.error || ''}`}
         </InputLabel>
         <InputWrapper {...input} {...rest} type={type} />
+        {renderSuffix && renderSuffix(rest.disabled)}
       </Container>
     )
   }
 
   return (
     <Container className={className} width={rest.width}>
       <InputWrapper {...input} {...rest} type={type} />
+      {renderSuffix && renderSuffix(rest.disabled)}
     </Container>
   )
 }
@@ -153,6 +163,7 @@ Input.propTypes = {
   input: PropTypes.object,
   label: PropTypes.string,
   name: PropTypes.string,
+  renderSuffix: PropTypes.func,
   type: PropTypes.oneOf([
     'checkbox',
     'date',

diff --git a/src/Atoms/Inputs/Input.stories.js b/src/Atoms/Inputs/Input.stories.js
@@ -6,7 +6,7 @@ import Input from './Input'
 
 storiesOf('Atoms/Inputs/Input', module)
   .add('default', () => <Input />)
-  .add('with type', () => <Input type="password" />)
+  .add('with type', () => <Input type="number" />)
   .add('with label', () => <Input label="Input 1" />)
   .add('with error', () => (
     <>

diff --git a/src/Atoms/Inputs/Password.js b/src/Atoms/Inputs/Password.js
@@ -1,14 +1,9 @@
 // @flow strict
 import React from 'react'
-import styled from 'styled-components'
+import styled, { type ReactComponentFunctional } from 'styled-components'
 
-import { fontSize, prop, theme } from '../../Tools/interpolation'
-import Input, { type PropsType } from './Input'
-
-const Wrapper = styled.div`
-  position: relative;
-  width: ${prop<PropsType>('width')};
-`
+import { fontSize, theme } from '../../Tools/interpolation'
+import Input, { type PropsType, type HtmlInputType } from './Input'
 
 const Switch = styled.span`
   position: absolute;
@@ -17,21 +12,21 @@ const Switch = styled.span`
   cursor: pointer;
   font-family: ${theme('fontPrimary')};
   font-size: ${fontSize('xs')};
-  font-weight: 500;
+  font-weight: 600;
   user-select: none;
 
   &:hover {
     text-decoration: underline;
   }
 `
 
-const PasswordInput = styled(Input)`
+const PasswordInput: ReactComponentFunctional<PropsType> = styled(Input)`
   input {
-    padding-right: 2.8rem;
+    padding-right: 3.5rem;
   }
 `
 
-type StateType = {| type: string |}
+type StateType = {| type: HtmlInputType |}
 
 class Password extends React.Component<PropsType, StateType> {
   static defaultProps = { ...Input.defaultProps, type: 'password' }
@@ -43,26 +38,33 @@ class Password extends React.Component<PropsType, StateType> {
   }
 
   handleSwitchClick = () => {
-    if (this.state.type === 'password') {
-      this.setState({ type: 'text' })
-    } else {
-      this.setState({ type: 'password' })
+    this.state.type === 'password'
+      ? this.setState({ type: 'text' })
+      : this.setState({ type: 'password' })
+  }
+
+  renderToggle = (disabled?: boolean) => {
+    if (disabled === true) {
+      return null
     }
+
+    return (
+      <Switch onClick={this.handleSwitchClick}>
+        {this.state.type === 'password' ? 'Show' : 'Hide'}
+      </Switch>
+    )
   }
 
   render() {
     const { type } = this.state
-    const { disabled, width } = this.props
+    const { renderSuffix } = this.props
 
     return (
-      <Wrapper width={width}>
-        <PasswordInput {...this.props} type={type} />
-        {disabled !== true && (
-          <Switch onClick={this.handleSwitchClick}>
-            {type === 'password' ? 'Show' : 'Hide'}
-          </Switch>
-        )}
-      </Wrapper>
+      <PasswordInput
+        {...this.props}
+        renderSuffix={renderSuffix || this.renderToggle}
+        type={type}
+      />
     )
   }
 }

diff --git a/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap b/src/Atoms/Inputs/__snapshots__/Input.spec.js.snap
@@ -10,6 +10,7 @@ exports[`Input should render correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .c1 {
@@ -110,6 +111,7 @@ exports[`Input should render correctly with disabled 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .c1 {
@@ -210,6 +212,7 @@ exports[`Input should render correctly with error="error" 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .c2 {
@@ -330,6 +333,7 @@ exports[`Input should render correctly with label="label" 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .c2 {
@@ -451,6 +455,7 @@ exports[`Input should render correctly with label="label" and disabled 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .c2 {
@@ -573,6 +578,7 @@ exports[`Input should render correctly with label="label" and error="error" 1`]
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .c2 {
@@ -696,6 +702,7 @@ exports[`Input should render correctly with type 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
+  position: relative;
 }
 
 .c1 {
@@ -1047,6 +1054,7 @@ exports[`Input should render correctly with width 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 200px;
+  position: relative;
 }
 
 .c1 {