@s-ui/react-atom-input

AtomInput

Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.

Installation

ƛ npm install @s-ui/react-atom-input --save

Usage

Add styles

To use the component's own styles, create a .scss file and import them inside.

@import '~@s-ui/react-atom-input/lib/index';

If you want to customize your components, create your own theme and add it to your component just before.

@import 'custom-settings';
@import '~@s-ui/react-atom-input/lib/index';

You can use native types like this

import AtomInput from '@s-ui/react-atom-input'

return <AtomInput type='number' /> // possible type options: text, number, date and password

Non native Inputs

SUI-Password

In order to use SUI defined Password Input pass the prop type='sui-password' to the Input component.

import AtomInput from '@s-ui/react-atom-input'

return <AtomInput type='sui-password' />

Mask

Wraps the https://unmanner.github.io/imaskjs/ lib, used if the input must follow a regex or a specific format/pattern . Using type='mask' activates this input, which will be expecting the mask prop type to be passed by.

const bankAccountMask = { // checkout all options here https://unmanner.github.io/imaskjs/guide.html
  mask: 'ES00 0000 0000 00 0000000000'
}

 return <AtomInput type='mask' mask={bankAccountMask} placeholder='ES00 0000 0000 00 0000000000' />

Sizes

There are defined 3 sizes (MEDIUM, SMALL and XSMALL) available at the exported object inputSizes and that can be set through the prop size

Related size Sass vars are:

$h-atom-input--m: 40px;
$h-atom-input--s: 32px;
$h-atom-input--xs: 24px;

<AtomInput
  size={inputSizes.SMALL}
  name="first"
  placeholder="Small input"
/>

Addons

What are addons?

Addons are passed as prop, use leftAddon or rightAddon in order to set the position inside the Input

Addon usage

import AtomInput from '@s-ui/react-atom-input'

return <AtomInput leftAddon='http://' rightAddon='@schibsted.com' />

Icons

Icons are passed as prop, use leftIcon or rightIcon in order to set the position inside the Input

import AtomInput from '@s-ui/react-atom-input'

const logo = 'my_logo.svg'
const leftIcon = () => <img src={logo} />

<AtomInput leftIcon={leftIcon} />

You can also pass a handler for each Icon using the props onClickLeftIcon or onClickRightIcon

<AtomInput
  name="second"
  placeholder="Medium Input"
  leftIcon={LeftIcon}
  rightIcon={IconLocation}
  onClickRightIcon={ e => alert("clicked right icon")}
/>

Error states

There are 3 error states:

• error state = true, will show a red border around the input field
• error state = false, will show a green border around the input field
• error state = null, will show the by default border around the input field

<AtomInput 
  name="second" 
  placeholder="Success input" 
  errorState={false} 
/>

Input states

There are 3 error states:

• input state = 'error', will show a red border around the input field
• input state = 'success', will show a green border around the input field
• input state = 'alert', will show a orange border around the input field
• input state = null, will show the by default border around the input field

<AtomInput 
  name="second" 
  placeholder="Success input" 
  state="alert"
/>

Form Usage

Each field returns its value on every onChange event so you can save it inside your form state.

import React from 'react'
import ReactDOM from 'react-dom'
import Input from '@s-ui/react-atom-input'
import Button from '@s-ui/react-atom-button'

class SimpleLoginForm extends React.Component {
  constructor() {
    super()
    this.state = {
      email: {
        value: '',
        errorState: null
      },
      password: {
        value: '',
        errorState: null
      }
    }

    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
    this.onBlur = this.onBlur.bind(this)
  }

  isEmail(value) {
    return /(.+)@(.+){2,}\.(.+){2,}/.test(value)
  }

  onChange({value, field}) {
    this.setState(
      Object.assign({}, this.state, {
        [field]: {
          value,
          errorState: null
        }
      })
    )
  }

  onBlur({value, field}) {
    let errorState = !this.isEmail(value)
    this.setState({
      [field]: {errorState, value}
    })
  }

  onSubmit(ev) {
    ev.preventDefault()
    ev.stopPropagation()

    window.alert(JSON.stringify(this.state))
  }

  render() {
    const {email, password} = this.state
    return (
      <form>
        <Input
          type="text"
          value={email.value}
          onChange={({ev, value}) => this.onChange({value, field: 'email', ev})}
          onBlur={ev =>
            this.onBlur({value: ev.target.value, field: 'email'})
          }
          errorState={this.state.email.errorState}
        />
        <Input
          type="sui-password"
          value={password.value}
          onChange={({ev, value}) =>
            this.onChange({value, field: 'password', ev})
          }
        />
        <Button onClick={this.onSubmit}>Login</Button>
      </form>
    )
  }
}