the-input
Input of the-components
Installation
$ npm install the-input --save
Usage
Live Demo is hosted on GitHub Page
'use strict' PureComponent { superprops thisstate = values: {} thisonUpdate = thisonUpdate } { console this } { const values = thisstate const onUpdate = this const Text Password Search Number TextArea Radio Checkbox Select Toggle PinCode Slider Range Upload Date Tag } = TheInput return <div> <TheInputStyle/> <TheSpinStyle/> <h3>Text</h3> <Text name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01' options='Banana' 'Orange' 'Apple' /> <Text name='value01' value=values'value01' onUpdate=onUpdate parser= Stringv placeholder='value01 only with uppercase parser' autoCapitalize=false selectWhenFocused autoCorrect="off" options='Banana' 'Orange' 'Apple' /> <Text name='value01' value=values'value01' prefix='Oh!' suffix=', Yes it is!' onUpdate=onUpdate placeholder='value01' options='Banana' 'Orange' 'Apple' /> <h3>Text with hint</h3> <Text name='value01' value=values'value01' onUpdate=onUpdate placeholder='eg: hoge@example.com' pattern=TextEMAIL_PATTERN patternHint='Needs to be email' /> <h3>Select on focus</h3> <Text name='value01' value=values'value01' onUpdate=onUpdate placeholder='Select on focus' selectOnFocus /> <br/> <h3>Search</h3> <Search name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01' /> <br/> <h3>Password</h3> <Password name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01' /> <br/> <h3>Text Area</h3> <TextArea name='value01' value=values'value01' onUpdate=onUpdate onCombineEnter= console onEnter= console placeholder='value01' /> <TextArea name='value01' autoExpand minRows=1 maxRows=8 value=values'value01' onUpdate=onUpdate onCombineEnter= console onEnter= console placeholder='auto expand' /> <TextArea name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01 readonly' readOnly /> <hr/> <h3>Radio</h3> <div> <Radio name='value02' value=values'value02' onUpdate=onUpdate options='Car' 'Ship' 'Plane' /> </div> <div> <Radio name='value02' value=values'value02' onUpdate=onUpdate options='Car' 'Ship' 'Plane' asButton /> </div> <div> <Radio name='value02' value=values'value02' onUpdate=onUpdate options='Car' 'Ship' 'Plane' asToggle /> </div> <hr/> <h3>Checkbox</h3> <div> <Checkbox name='value03' value=values'value03' onUpdate=onUpdate options='Green' 'Pink' 'Brown' /> </div> <div> <Checkbox name='value03' asButton value=values'value03' onUpdate=onUpdate options='Green' 'Pink' 'Brown' /> </div> <hr/> <h3>Select</h3> <div> <Select name='value04' placeholder='Any drink?' nullable value=values'value04' onUpdate=onUpdate sorter= a disabledValues='Coffee' options='Tea' 'Coffee' 'Water' ...'abcdefghijlkmnlopqrstu' /> <Select name='value04' value=values'value04' placeholder='Full screen select' onUpdate=onUpdate fullScreen nullable disabledValues='Coffee' options='Tea' 'Coffee' 'Water' ...100 /> <SelectWithOptionsArray name='value04' value=values'value04' onUpdate=onUpdate optionsArray= 'Tea' 'This is Tea!' 'Water' 'This is Water!' /> </div> <hr/> <h3>Toggle</h3> <div> <Toggle name='value05' on=Booleanvalues'value05' onUpdate=onUpdate /> </div> <div> <Toggle name='value05' on=Booleanvalues'value05' onTitle='This is on' offTitle='This is off' onUpdate=onUpdate /> </div> <hr/> <h3>Slider</h3> <div> <Slider name='value06' value=values'value06' || 10 min=0 max=100 step=1 onUpdate=onUpdate /> </div> <hr/> <h3>Range</h3> <div> <Range name='value07' value=values'value07' || 10 80 min=0 max=100 step=1 onUpdate=onUpdate /> </div> <hr/> <h3>Upload</h3> <div> <Upload name='value08' value=values'value08' multiple=true onUpdate=onUpdate /> </div> <hr/> <h3>Tag</h3> <Tag name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01' options='Banana' 'Orange' 'Apple' /> <hr/> <h3>Date</h3> <Date name='value-date-01' value=values'value-date-01' minDate='2018-03-09' placeholder='date only' onUpdate=onUpdate /> <Date name='value-date-01' value=values'value-date-01' placeholder='date and time' timeEnabled minDate='2018-03-09' onUpdate=onUpdate /> <Date name='value-date-01-time' value=values'value-date-01-time' placeholder='time only' noCalendar dateFormat='H:i' timeEnabled minDate='2018-03-09' onUpdate=onUpdate /> <br/> <h3>PinCode</h3> <PinCode name='value-pin-code-01' value=values'value-pin-code-01' onUpdate=onUpdate /> <br/> <h3>Number</h3> <Number name='value-number-01' value=values'value-number-01' min=-2 max=100 onUpdate=onUpdate /> <Number name='value-number-01' value=values'value-number-01' placeholder='number without min/max' onUpdate=onUpdate /> <br/> <br/> <hr/> <h2>Error</h2> <TheInput name='@' type='hidden' error='This is global error'/> <Text name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01' options='Banana' 'Orange' 'Apple' error='Something Wrong with This!' /> <Password name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01' error='Something Wrong with This!' /> <TextArea name='value01' value=values'value01' onUpdate=onUpdate placeholder='value01' error='Something Wrong with This!' onKeyDown= console /> <Select name='value04' value=values'value04' onUpdate=onUpdate options='Tea' 'Coffee' 'Water' error='Something Wrong with This!' /> <Select name='value04' spinning value=values'value04' onUpdate=onUpdate options='Tea' 'Coffee' 'Water' error='Something Wrong with This!' /> <Radio name='value02' value=values'value02' onUpdate=onUpdate options='Car' 'Ship' 'Plane' error='Something Wrong with This!' /> <Checkbox name='value03' value=values'value03' onUpdate=onUpdate options='Green' 'Pink' 'Brown' disabledValues='Pink' error='Something Wrong with This!' /> <Upload name='value08' value=values'value08' multiple=true error='Something Wrong with This!' onUpdate=onUpdate /> <br/> <br/> <br/> <hr/> <h2>Readonly</h2> <Text name='value01' value=values'value01' onUpdate=onUpdate readOnly placeholder='value01' /> <Select name='value04' value=values'value04' onUpdate=onUpdate options='Tea' 'Coffee' 'Water' readOnly /> <Radio name='value02' value=values'value02' onUpdate=onUpdate options='Car' 'Ship' 'Plane' readOnly /> <Checkbox name='value03' value=values'value03' onUpdate=onUpdate options='Green' 'Pink' 'Brown' readOnly /> <Upload name='value08' value=values'value08' multiple=true readOnly onUpdate=onUpdate /> </div> }
Components
TheInput
Input of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
error |
union | Input type | null |
name |
string | Name of input | '_the' |
onUpdate |
func | Handle for update | `` |
type |
string | 'text' |
|
value |
string | Value of input | '' |
options |
{} |
||
parser |
String |
TheInputCheckbox
Checkbox input of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
disabledValues |
array | Disabled values | [] |
error |
union | null |
|
name |
string | `` | |
onUpdate |
func | Handle for update | `` |
options |
union | Options | {} |
parser |
func | Value parser | String |
splitter |
string | Value Splitter text | ',' |
value |
union | Value of input | '' |
TheInputDate
Props
Name | Type | Description | Default |
---|---|---|---|
dateFormat |
string | null |
|
maxDate |
union | null |
|
minDate |
union | null |
|
name |
string | `` | |
noCalendar |
bool | false |
|
onUpdate |
func | `` | |
timeEnabled |
bool | false |
TheInputNumber
TheInputPassword
TheInputPinCode
TheInputRadio
Radio input of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
asButton |
bool | Using button-like style | false |
asToggle |
bool | Using toggle-like style | false |
disabledValues |
array | Disabled values | [] |
error |
union | Input error | null |
name |
string | Name of input | `` |
onUpdate |
func | Handle for update | `` |
options |
union | Options | {} |
parser |
func | Value parser | String |
sorter |
func | Options sorter | (v1, v2) => String(v1).localeCompare(v2) |
value |
union | Value of input | '' |
role |
'radiogroup' |
TheInputRange
Range Input
Props
Name | Type | Description | Default |
---|---|---|---|
barOnly |
bool | Hides min/max value text | false |
error |
union | Input error | null |
max |
number | Max value | 100 |
min |
number | Min value | 0 |
name |
string | `` | |
onUpdate |
func | Handle for update | `` |
step |
number | Value step | 0.1 |
value |
arrayOf number | Value of input | [0, 100] |
TheInputSearch
TheInputSelect
Select Input
Props
Name | Type | Description | Default |
---|---|---|---|
disabledValues |
arrayOf string | Unselecatable values | [] |
error |
union | Input error | null |
name |
string | Name of input | `` |
nullable |
bool | Allow null select | false |
nullText |
node | Text for null | '( no select )' |
onEnter |
func | Handle for enter | null |
onUpdate |
func | Handle for update | `` |
options |
union | Options | {} |
parser |
func | Value parser | String |
sorter |
func | Options sorter | (v1, v2) => String(v1).localeCompare(v2) |
spinning |
bool | false |
|
value |
string | Value of input | '' |
TheInputSlider
Slider Input
Props
Name | Type | Description | Default |
---|---|---|---|
barOnly |
bool | Hides min/max value text | false |
error |
union | Input error | null |
max |
number | Max value | 100 |
min |
number | Min value | 0 |
name |
string | `` | |
onUpdate |
func | Handle for update | `` |
step |
number | Value step | 0.1 |
value |
number | Value of input | 0 |
TheInputTag
TheInputText
Text Input
Props
Name | Type | Description | Default |
---|---|---|---|
error |
union | Input error | null |
matcher |
func | Options parser | `(candidate, value) => { |
return (
candidate.indexOf(value) !== -1 ||
candidate.toLowerCase().indexOf(value.toLowerCase()) !== -1
)
}| |
name| string | Name of input | `` | |
onDown| func | Handle for down | `` | |
onEnter| func | Handle for enter |
null| |
onLeft| func | Handle for left | `` | |
onRight| func | Handle for right | `` | |
onUp| func | Handle for up | `` | |
onUpdate| func | Handle for update | `` | |
options| union | Options |
{}| |
parser| func | Value parser |
(v) => String(v || '')| |
pattern| instanceOf | Regexp for input |
null| |
patternWarning| string | Warning text when pattern failed |
null| |
prefix| node | prefix |
null| |
suffix| node | suffix |
null| |
tabIndex| number | Tab index | `` | |
type| string | Text type |
'text'| |
value| union | Value of input |
''| |
readOnly| | |
false| |
role| | |
'textbox'| |
selectOnFocus| | |
false` |
TheInputTextArea
TextArea Input
Props
Name | Type | Description | Default |
---|---|---|---|
autoExpand |
bool | Auto expanding text area height | false |
maxRows |
number | Max rows when autoExpand is enabled | 10 |
minRows |
number | Min rows when autoExpand is enabled | 1 |
name |
string | Name of input | `` |
onUpdate |
func | Handle for update | `` |
parser |
func | Value parser | String |
rows |
number | TextArea rows | 5 |
value |
string | Value of input | '' |
error |
null |
||
readOnly |
false |
||
role |
'textbox' |
||
spellCheck |
false |
TheInputToggle
Toggle input of the-components
Props
Name | Type | Description | Default |
---|---|---|---|
offTitle |
string | Title text for off state | '' |
on |
bool | Switch on or not | false |
onTitle |
string | Title text for on state | '' |
width |
number | Width of component | 64 |
error |
null |
TheInputUpload
Props
Name | Type | Description | Default |
---|---|---|---|
accept |
string | Accept file type | null |
convertFile |
func | Convert input file | (file) => readFileAsDataURL(file) |
error |
union | Error message | null |
height |
number | Image height | 180 |
multiple |
bool | Allow multiple upload | false |
name |
string | `` | |
onError |
func | Handler for error event | `` |
onLoad |
func | Handler for load event | `` |
onUpdate |
func | Handle for update | `` |
spinner |
string | Spinner theme | `` |
text |
string | Guide text | 'Upload File' |
value |
union | Value of input | `` |
width |
number | Image width | 180 |
readOnly |
false |
License
This software is released under the MIT License.