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

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

Usage

$3

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

`scss
@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.

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

$3

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

return // possible type options: text, number, date and password
`

$3

#### SUI-Password

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

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

return
`

#### 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.

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

return
`

$3

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:

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

`js

`

$3

> What are addons?

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

#### Addon usage

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

return
`

$3

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

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

const logo = 'my_logo.svg'
const leftIcon = () =>


`

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

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

$3

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

`js

`

$3

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

`js

`

$3

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

`jsx
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 (



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}
/>
type="sui-password"
value={password.value}
onChange={({ev, value}) => this.onChange({value, field: 'password', ev})}
/>
Login

)
}
}


``