@s-ui/react-atom-input
Version:
> 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.
228 lines (167 loc) • 6.55 kB
Markdown
# 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.
[](https://sui-components.vercel.app/workbench/atom/input/)
[](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,input)
[](https://www.npmjs.com/package/@s-ui/react-atom-input)
[](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Ainput)
[](https://github.com/SUI-Components/sui-components/blob/main/components/atom/input/LICENSE.md)
## Installation
```sh
ƛ npm install -ui/react-atom-input --save
```
## Usage
### Add styles
To use the component's own styles, create a .scss file and import them inside.
```scss
'~-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
'custom-settings';
'~-ui/react-atom-input/lib/index';
```
### You can use native types like this
```js
import AtomInput from '-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.
```js
import AtomInput from '-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.
```js
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:
```scss
$h-atom-input--m: 40px;
$h-atom-input--s: 32px;
$h-atom-input--xs: 24px;
```
```js
<AtomInput size={inputSizes.SMALL} name="first" placeholder="Small input" />
```
### Addons
> [What are addons?](https://paper.dropbox.com/doc/SUI-Input-03mHJFkOCjviSZevsaTwm#:uid=125362683844628624581838&h2=Icons-and-addons-inside-the-in)
Addons are passed as prop, use **leftAddon** or **rightAddon** in order to set the position inside the Input
#### Addon usage
```js
import AtomInput from '-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
```js
import AtomInput from '-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**
```js
<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
```js
<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
```js
<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.
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Input from '-ui/react-atom-input'
import Button from '-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>
)
}
}
```