B&C Form Fields

npm i -S @brandandcelebrities/form

Test

You can test components by navigating to folder and running npm start

Components

• Input
• Select
• SelectTags
• Checkboxes
• RadioButtons
• Button
• Loader
• Tag
• Switch
• RangePicker
• SwitchRangePicker
• Pager
• InputGmap

Jump to Release Notes Jump to TODO

Input

Installation

import { Input } from '@brandandcelebrities/form';
// or
import Input from '@brandandcelebrities/form/dist/js/Input';

// And include once CSS File
import '@brandandcelebrities/form/dist/css/input.css'; 	// Only Input styles
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

Props & Types

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | id | String | | Field DOM Id | value | String | required | Field value | onChange | Function | | Triggered when someone is typing and changing the field. See onChange function explanations below | onFocus | Function | null | Triggered when field is focused | onBlur | Function | null | Triggered when field lost focus | label | String | "" | Field label. Will focus field when label is clicked | type | String | "text" | Field type | disabled | Boolean | false | Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | placeholder | String | "" | Input placeholder | useIcons | Boolean | true | Will display a success or an error icon if the field is required | lines | Number | 1 | Number of lines, should be >= 1. If lines is > 1, input will be converted to textarea | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be displayed if field is required and empty |error|Boolean|false|Set to true if you want to flag and display field as error |errorText|String|""|Text to display if error is set to true |maxChars|Number|-1|Set max number of chars. Set to -1 if you want unlimited chars |maxCharsText|String|{0}/{1}|Display counter text with {0} the current count of chars, {1} the max chars enabled, and {2} the remaining characters |iconLeft|ReactElement|null|Display left icon in field |autoFocus|Boolean|false|Set to true if input should be focused when rendered |onKeyPress|Function|null|Triggered when a keyboard key is typed, sending {key, keyCode, id} as parameter |onEnterPress|Function|null|Triggered when the ENTER key is typed

onChange function

onChange = ({id, value, type, event}) => {
	console.log(`Field ${id} has been updated to ${value}. Field type is ${type}. Native event: ${event}`)
}

example

import Input from '@brandandcelebrities/form/dist/js/Input';
import '@brandandcelebrities/form/dist/css/input.css';

class App extends Component {
	state = { value: '' }
	render() {
		return (
			<Input
				id="test-input"
				label="Input label"
				placeholder="placeholder"
				value={this.state.value}
				onChange={({value}) => this.setState({value})}
				required
			/>
		)
	}
}

Select

Installation

import { Select } from '@brandandcelebrities/form';
// or
import Select from '@brandandcelebrities/form/dist/js/Select';

// And include once CSS File. Select requires input.css
import '@brandandcelebrities/form/dist/css/input.css';
import '@brandandcelebrities/form/dist/css/select.css'; 	
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | id | String | | Field DOM Id | dataset | Array<Object> |required | See dataset and value explanations below | value | String or Number | required | See dataset and value explanations below | onChange | Function | | Triggered when someone selects an item. See onChange function explanations below | pinned|Array<String or Number>|[]|List of dataset values that should be pinned to the top of the option list |useNative|Boolean|false|Set to true if you want to use the native OS Select box (usefull for mobile and touche devices) |maxListItems|Number|-1|Specify the max number of options that should be displayed at one time in the options list. Use it for large collection. -1 to unlimited number. |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. Will focus field when label is clicked |defaultOptionLabel|String|""|Default selected option text when useNative is true or input placeholder when useNative is false | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be displayed if field is required and empty |sort|Boolean|true|Sort alphabetically options by labels |onFocus|Function|null|Function triggered when field gain focus |onBlur|Function|null|Function triggered when field loose focus |hasSearch|Boolean|true|Set to false to disable the search |error|Boolean|false|Force display of error

dataset and value

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed | disabled | Boolean | false | Set to true to disable option | icon | React Element | null | Display an icon before label in option list. Only when useNative is false

value is the current selected value in dataset, Component will throw an error if the specified value is not present in dataset

onChange function

onChange function will pass an Object as argument, containing the dataset object which has been clicked, with field ID and type

onChange = ({id, value, label, type}) => {
	console.log(`Select ${id} has changed to ${label} (${value}). Field type is ${type}`)
}

example

import Select from '@brandandcelebrities/form/dist/js/Select';
import '@brandandcelebrities/form/dist/css/input.css';
import '@brandandcelebrities/form/dist/css/select.css';

class App extends Component {
	state = { value: '' }
	render() {
		return (
			<Select
				id="test-select"
				label="Select label"
				value={this.state.value}
				dataset={Array(100).fill(null).map((v, i) => (
					{
						value: i,
						label:`LABEL ${i}`,
					}
				))}
				onChange={({value}) => this.setState({value})}
				defaultOptionLabel="Please choose a value"
				pinned={[47, 64, 99]}
			/>
		)
	}
}

SelectTags

Installation

import { SelectTags } from '@brandandcelebrities/form';
// or
import SelectTags from '@brandandcelebrities/form/dist/js/SelectTags';

// And include once CSS File. SelectTags requires input.css and select.css
import '@brandandcelebrities/form/dist/css/input.css';
import '@brandandcelebrities/form/dist/css/select.css';
import '@brandandcelebrities/form/dist/css/select-tags.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

SelectTags inherits from all Select props, plus the following

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| |selected|Array<String or Number>|required|List of dataset values that are selected and so, displayed as tags |maxTags|Number|-1|Max number of tags which can be selected. Select will be automatically disabled if selected.length >= maxTags. Use -1 to allow unlimited number of tags

onChange function

onChange function will pass an Object as argument, containing 4 keys: item containing the clicked dataset object, selected, the new Array of selected values, id is the field dom Id, and type is the field type (select-tags)

onChange = ({item, selected, id, type}) => {
	console.log(`Field ${id} (${type}): Object clicked is`, item, "=> the new selected items are: ", selected);
}

example

import SelectTags from '@brandandcelebrities/form/dist/js/SelectTags';
import '@brandandcelebrities/form/dist/css/input.css';
import '@brandandcelebrities/form/dist/css/select.css';
import '@brandandcelebrities/form/dist/css/select-tags.css';

class App extends Component {
	state = { selected: [] }
	render() {
		return (
			<SelectTags
				id="test-select-tags"
				label="Select tags label"
				dataset={Array(100).fill(null).map((v, i) => ({value:i, label:`TAGS ${i}`}))}
				onChange={({selected}) => this.setState({selected})}
				defaultOptionLabel="Please choose a value"
				pinned={[24, 59, 72]}
				maxTags={8}
				selected={this.state.selected}
			/>
		)
	}
}

Checkboxes

Installation

import { Checkboxes } from '@brandandcelebrities/form';
// or
import Checkboxes from '@brandandcelebrities/form/dist/js/Checkboxes';

// And include once CSS File
import '@brandandcelebrities/form/dist/css/checkboxes.css'; 	// Only Checkboxes styles
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | id | String | | Field DOM Id | dataset | Array<Object> |required | See dataset explanations below |selected|Array<String or Number>|required|List of dataset values that are selected and so, checked | onChange | Function | | Triggered when someone clicks a checkbox. See onChange function explanations below |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be displayed if field is required and empty |sort|Boolean|true|Sort alphabetically options by labels |error|Boolean|false|Force display of error

dataset

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed

onChange function

onChange function will pass an Object as argument, containing 4 keys: item containing the clicked dataset object, selected, the new Array of selected values, id is the field dom Id, and type is the field type (checkboxes)

onChange = ({item, selected, id, type}) => {
	console.log(`Field ${id} (${type}): Object clicked is`, item, "=> the new selected items are: ", selected);
}

example

import Checkboxes from '@brandandcelebrities/form/dist/js/Checkboxes';
import '@brandandcelebrities/form/dist/css/checkboxes.css';

class App extends Component {
	state = { selected: [] }
	render() {
		return (
			<Checkboxes
				id="test-checkboxes"
				label="Checkboxes"
				dataset={Array(5).fill(null).map((v, i) => ({value:i, label:`CHECKBOX ${i}`}))}
				onChange={({selected}) => this.setState({selected})}
				selected={this.state.selected}
			/>
		)
	}
}

RadioButtons

Installation

import { RadioButtons } from '@brandandcelebrities/form';
// or
import RadioButtons from '@brandandcelebrities/form/dist/js/RadioButtons';

// And include once CSS File
import '@brandandcelebrities/form/dist/css/radio-buttons.css'; 	// Only RadioButtons styles
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | id | String | | Field DOM Id | dataset | Array<Object> |required | See dataset and value explanations below | value | String or Number | required | See dataset and value explanations below | onChange | Function | | Triggered when someone clicks a radiobutton. See onChange function explanations below |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be displayed if field is required and empty |sort|Boolean|true|Sort alphabetically options by labels |error|Boolean|false|Force display of error

dataset

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed

value is the current selected value in dataset, Component will throw an error if the specified value is not present in dataset

onChange function

onChange function will pass an Object as argument, containing the dataset object which has been clicked, with field DOM ID and type (radiobuttons)

onChange = ({id, value, label, type}) => {
	console.log(`RadioButtons ${id} has changed to ${label} (${value}). Field type is ${type}`)
}

example

import RadioButtons from '@brandandcelebrities/form/dist/js/RadioButtons';
import '@brandandcelebrities/form/dist/css/radio-buttons.css';

class App extends Component {
	state = { value: '' }
	render() {
		return (
			<RadioButtons
				id="test-radiobuttons"
				label="RadioButtons"
				dataset={Array(5).fill(null).map((v, i) => ({value:i, label:`RADIO ${i}`}))}
				onChange={({value}) => this.setState({value})}
				value={this.state.value}
			/>
		)
	}
}

Birthdate

Installation

import { Birthdate } from '@brandandcelebrities/form';
// or
import Birthdate from '@brandandcelebrities/form/dist/js/Birthdate';

// And include once CSS File. Birthdate requires input.css and select.css
import '@brandandcelebrities/form/dist/css/input.css';
import '@brandandcelebrities/form/dist/css/select.css';
import '@brandandcelebrities/form/dist/css/birthdate.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | id | String | | Field DOM Id | value | String | required | Field formatted as YYYY or YYYY-MM or YYYY-MM-DD | onChange | Function | | Triggered when someone is typing and changing a value. See onChange function explanations below |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be |monthLabels|Array<String>|['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']|Labels for months |dayLabel|String|Day|Placeholder for Day Select |monthLabel|String|Month|Placeholder for Month Select |yearLabel|String|Year|Placeholder for Year Select

onChange function

onChange function will pass an Object as argument, containing the new formated value, with field ID and type. value is formatted as YYYY-MM-DD or YYYY-MM or YYYY

onChange = ({id, value, type}) => {
	console.log(`Birthdate ${id} has changed to ${value}. Field type is ${type}`)
}

example

import Birthdate from '@brandandcelebrities/form/dist/js/Birthdate';
import '@brandandcelebrities/form/dist/css/input.css';
import '@brandandcelebrities/form/dist/css/select.css';
import '@brandandcelebrities/form/dist/css/birthdate.css';

class App extends Component {
	state = { value: '' }
	render() {
		return (
			<Birthdate
				id="test-birthdate"
				label="Birthdate"
				value={this.state.value}
				onChange={({value}) => this.setState({value})}
			/>
		)
	}
}

Button

Installation

import { Button } from '@brandandcelebrities/form';
// or
import Button from '@brandandcelebrities/form/dist/js/Button';

// And include once CSS File. Input requires loader.css if you use `loading` prop
import '@brandandcelebrities/form/dist/css/button.css';
import '@brandandcelebrities/form/dist/css/loader.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | id | String | | Field DOM Id | onClick | Function | | Triggered when someone clicks the button. Will pass an object containing key id as params to callback function |disabled| Boolean | false|Set to true to disable button | loading | Boolean | false |Set to true to display a loader inside button (will automatically disable button) | complete | Boolean | false |Set to true to display a check mark inside button | label | String | "" | Field label. | type | String | button | Field type (button, submit,...). | className | String | "" | CSS classes to add to container div |dense|Boolean|false|Display dense button |to|String|""|Use link instead of button. Note that button cannot be disabled, loading or complete, and has no type when using to prop |target|String|"_blank"|html5 target when using has link with to

example

import Birthdate from '@brandandcelebrities/form/dist/js/Button';
import '@brandandcelebrities/form/dist/css/button.css';
import '@brandandcelebrities/form/dist/css/loader.css';

class App extends Component {
	state = { loading: false }
	render() {
		return (
			<Button
				id="test-button"
				label="Click me!"
				onClick={() => this.setState({loading: true})}
				loading={loading}
			/>
		)
	}
}

Loader

Installation

import { Loader } from '@brandandcelebrities/form';
// or
import Loader from '@brandandcelebrities/form/dist/js/Loader';

// And include once CSS File.
import '@brandandcelebrities/form/dist/css/loader.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | className | String | "" | CSS classes to add to container div

example

import Loader from '@brandandcelebrities/form/dist/js/Loader';
import '@brandandcelebrities/form/dist/css/loader.css';

class App extends Component {
	render() {
		return (
			<Loader />
		)
	}
}

Tag

Installation

import { Tag, TagsContainer } from '@brandandcelebrities/form';
// or
import Tag, { TagsContainer } from '@brandandcelebrities/form/dist/js/Tag';

// And include once CSS File.
import '@brandandcelebrities/form/dist/css/tag.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String | "" | Tag value dispatched when clicked | label | String | "" | Tag label |disabled| Boolean | false|Set to true to disable label (click and delete) | icon | ReactElement | null |Display an icon an left of label | onClick | Function | null |Dispatched when label is clicked, with value as parameter | onClickDelete | Function | null | Add a close Icon when set, and dispatch this function with value as parameter | className | String | "" | CSS classes to add to container div | variant | String | null | Variant theme for tag (can be : round-blue)

example

import Tag, { TagsContainer } from '@brandandcelebrities/form/dist/js/Tag';
import '@brandandcelebrities/form/dist/css/tag.css';

class App extends Component {
	render() {
		return (
			<TagsContainer>
				<Tag label="Tag 1" />
				<Tag label="Tag 2" />
				<Tag label="Tag 3" />
				<Tag label="Tag 4" />
			</TagsContainer>
		)
	}
}

Switch

Installation

import { Switch } from '@brandandcelebrities/form';
// or
import Switch from '@brandandcelebrities/form/dist/js/Switch';

// And include once CSS File.
import '@brandandcelebrities/form/dist/css/switch.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | active | Boolean | true | Switch is active (selected / checked) | color | String | #4460A0 | Color when switch is active (selected / checked) |inactiveColor| String | #D2D2D2| Color when switch is inactive (not selected / unchecked) | onChange | Function | | Function triggered when switch is clicked | disabled | Boolean | false | Set to true to disable switch | maxPages | Number | null | Set a maximum number of pages. null or -1 to disable

example

import Pager from '@brandandcelebrities/form/dist/js/Switch';
import '@brandandcelebrities/form/dist/css/switch.css';

class App extends Component {
	state = { active: true };
	render() {
		return (
			<Switch
				active={this.state.active}
				onChange={active => this.setState({active}))}
			/>
		)
	}
}

RangePicker

@TODO documentation

SwitchRangePicker

@TODO documentation

Pager

Installation

import { Pager } from '@brandandcelebrities/form';
// or
import Pager from '@brandandcelebrities/form/dist/js/Pager';

// And include once CSS File.
import '@brandandcelebrities/form/dist/css/pager.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | currentPage | Number | required | The current page | onChange | Function | **required | Function triggered when changing page |totalItems| Number | null| Total number of items. Required to displayn pager | itemsPerPage | Number | 10 | Number of items per page | disabled | Boolean | false | Set to true to disable pager

example

import Pager from '@brandandcelebrities/form/dist/js/Pager';
import '@brandandcelebrities/form/dist/css/pager.css';

class App extends Component {
	render() {
		return (
			<Pager
				currentPage={5}
				onChange={page => window.alert(`You clicked page ${page}`)}
				totalItems={150}
				itemsPerPage={10}
			/>
		)
	}
}

InputGmap

Installation

import { InputGmap } from '@brandandcelebrities/form';
// or
import InputGmap from '@brandandcelebrities/form/dist/js/InputGmap';

// And include once CSS File.
import '@brandandcelebrities/form/dist/css/input-gmap.css';
// or
import '@brandandcelebrities/form/dist/css/form.css'; // All fields styles

id: PropTypes.string, label: StringOrReact, placeholder: PropTypes.string, GmapApiKey: PropTypes.string.isRequired

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | id | String | null | Input ID | label | String | "" | Input label |placeholder| String | ""| Input placeholder | GmapApiKey | String | required | Google Map API Key | disabled | Boolean | false | Disable input field | onChange | Function | null | Triggered when an object changes. See below | value | Object | required | An object containing required infos. See below

value

value is an object containing required fields:

| Key | Type | Description | | ------------- |:-------------:|:------------| | placeSearched | String | The place searched | infoLocation | Array | Raw google map api return | mapped | Object | mapped infoLocation to match back-end requirements

onChange function

onChange function will pass an Object as argument, containing 3 keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | placeSearched | String | required | The place searched in gmap input

onChange = ({placeSearched, infoLocation, mapped}) => {
	console.log(`Searched: ${placeSearched}.`, "Raw GMap datas", infoLocation, "Mapped datas", mapped)
}

example

import InputGmap from '@brandandcelebrities/form/dist/js/InputGmap';
import '@brandandcelebrities/form/dist/css/input-gmap.css';

class App extends Component {
	state = { gmap : {placeSearched: '' }};
	render() {
		return (
			<InputGmap
				label="GMap"
				value={this.state.gmap}
				GmapApiKey="sdfskJHGKSJDHQDKSFJGHSDGKJjksdhf"
				onChange={({mapped}) => mapped ? console.log(mapped) : null}
			/>
		)
	}
}

Release Notes

• [2018-08-23] 1.9.6
  • Fix InputGmap style
• [2018-08-23] 1.9.5
  • Update @material-ui/core
• [2018-08-21] 1.9.4
  • Updates in component InputGmap
    • Hotfixes
    • Adding new key in onChange: mapped to propagate mapped value
• [2018-08-02] 1.9.0
  • New SearchBar component
• [2018-07-30] 1.8.3
  • Hotfixes for component Select
    • Arrow Up will not crash anymore
    • Arrows not work again when using a select without search
• [2018-07-24] 1.8.2
  • Hotfix for component Input on TAB keyPress
  • Select & SelectTags can now use a key react in their dataset to display enhanced rendering
• [2018-07-20] 1.8.0
  • Performance improvements on event listeners on all components
• [2018-07-12] 1.7.8
  • Tag updates:
    • New prop variant to add theme, if set, value can be round-blue
  • Improvements in JS code for all components (css classes & event triggers)
  • All id and onChange props are no longer marked as required
• [2018-06-18] 1.7.7
  • Select updates:
    • Items can now be disabled
• [2018-06-12] 1.7.6
  • Button updates
    • new prop dense to be displayed as dense
    • new props to and target to replace button by a a link
• [2018-06-11] 1.7.5
  • Select with prop hasSearch={false} is now rendered as button instead of input
  • CSS updates for RadioButtons and Checkboxes
• [2018-06-06] 1.7.43
  • Update on all components, all labels are now a StringOrReact PropType
• [2018-06-06] 1.7.4
  • New components:
    • ToggleButton A button with state active or not
    • ToggleButtons A collection of ToggleButton
  • Components Updates:
    • Select can now use TAB to select value if search is tipped, or move to next field
    • Checboxes add cursor:pointer on checkbox & label
• [2018-05-31] 1.7.3
  • Pager
    • Adding prop maxPages
• [2018-05-25] 1.7.2
  • Input, Select, RadioButtons and Checkboxes have labels displayed in red when error
  • Select, RadioButtons and Checkboxes now have a error param to display label in red
• [2018-05-15] 1.7.0
  • New components:
    • InputGmap display an input which will call GmapApi to retrive address
    • Switch a Switcher (radiobox)
    • RangePicker a range picker with logarithmic or linear scale
    • SwitchRangePicker a combination of a Switch and a Range Picker
    • Pager a pagination system
  • Improvements:
    • Input
      • Can set an inline style
      • Native Event is propagated on onChange Function
    • Select
      • Can now use arrows up / down to navigate in list item
      • Display list items when focusing even if a value is set
• [2018-04-20] 1.6.9
  • Input updates:
    • new prop type
• [2018-04-16] 1.6.8
  • Select updates:
    • Add hasSearch to disable the search
• [2018-02-13] 1.6.7
  • Input updates:
    • Auto add padding-right when useIcons and icon is displayed Button updates:
    • CSS update when disabled / loading
    • Change test App to display proper loading button Tag updates:
    • Tag can now be properly clickable and not removable
• [2018-02-05] 1.6.4
  • Input updates:
    • You can now use autoFocus props
    • New method onKeyPress dispatched when a key is pressed
    • New method onEnterPress dispatched when ENTER key is pressed
• [2018-02-05] 1.6.1
  • Input updates:
    • You can now use iconLeft to display a left icon in field
• [2018-01-29] 1.6.0
  • New components Tag and TagsContainer
  • Component updates:
    • Loader can now use className prop
• [2018-01-16] 1.5.0
  • New components Button and Loader
• [2018-01-15] 1.4.3
  • CSS updates
  • SelectTags can now use useNative to render native Select
• [2018-01-11] 1.4.0
  • New compoment Birthdate
  • Label CSS update
  • CSS inclusion changes, remove component bundle css and include atomic css
  • Example updates
  • Select updates:
    • When pressing ENTER in search field, will auto select the item with matching label or the item if only one matches the search.
    • ESC now closes the list
• [2018-01-11] 1.3.0
  • New components Checkboxes & RadioButtons
  • Select & SelectTags updates:
    • label in dataset can now be a string or a React Element
    • Item with value === 0 can now be selected
    • Rename props maxListItem to maxListItems
  • Adding TODO section
• [2018-01-10] 1.2.0
  • Input updates:
    • maxChars and maxCharsText can now be used.
  • Readme update
• [2018-01-10] 1.1.2
  • SelectTags updates:
    • onChange function will now return 2 more keys: id and type like the others components
  • Readme update
• [2018-01-10] 1.1.0
  • New component SelectTags
  • CSS updates on Input (:hover :focus) and Select (:disabled)
  • Update documentation on Select
  • hotfixes/Updates on Select:
    • Outside click when item height < 320px now triggers normally
    • Close Option list when focusing out search field (using tabs navigation)
    • Adding props onFocus and onBlur
  • hotfixes/Updates on Input:
    • className props is now working and do not break component
• [2018-01-09] 1.0.0
  • Components Input & Select

TODO

• Documentations:
  • RangePicker
  • SwitchRangePicker
  • InputGMap
  • ToggleButton
  • ToggleButtons
  • SearchBar
• Inputs
  • Auto-add padding-right when useIcons
  • Auto-suggest from a defined list
  • Auto-suggest from a remote list
• Select
  • Check viewport to display list-item in top instead of bottom
  • Add sentence {0} more items when using maxListItems
  • Make alias of selected to value in onChange function so we can always use the key value in state update