❤
npm
Sign UpSign In

This package has been deprecated

Author message:

move to @the-/ui-input ( https://github.com/the-labo/the/tree/master/packages/ui-input#readme )

the-input

3.5.88 • Public • Published

the-input

Build Status npm Version JS Standard

Input of the-components

Installation

$ npm install the-input --save

Usage

Live Demo is hosted on GitHub Page

'use strict'
 
import React from 'react'
import { TheInput, TheInputStyle } from 'the-input'
import { TheSpinStyle } from 'the-spin'
 
class ExampleComponent extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      values: {}
    }
    this.onUpdate = this.onUpdate.bind(this)
  }
 
  onUpdate (values) {
    console.log('values', values)
    this.setState({
      values: Object.assign({}, this.state.values, values)
    })
  }
 
  render () {
    const { values } = this.state
    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={(v) => String(v).toUpperCase()}
              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={Text.EMAIL_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.log('combine enter')}
                  onEnter={() => console.log('enter')}
                  placeholder='value01'
        />
 
        <TextArea name='value01'
                  autoExpand
                  minRows={1}
                  maxRows={8}
                  value={values['value01']}
                  onUpdate={onUpdate}
                  onCombineEnter={() => console.log('combine enter')}
                  onEnter={() => console.log('enter')}
                  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, b) => a.localeCompare(b)}
                  disabledValues={['Coffee']}
                  options={['Tea', 'Coffee', 'Water', ...'abcdefghijlkmnlopqrstu'.split('')]}
          />
 
 
          <Select name='value04'
                  value={values['value04']}
                  placeholder='Full screen select'
                  onUpdate={onUpdate}
                  fullScreen
                  nullable
                  disabledValues={['Coffee']}
                  options={['Tea', 'Coffee', 'Water', ...new Array(100).fill(null).map((_, i) => `option-${i}`)]}
          />
 
          <Select.WithOptionsArray 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={Boolean(values['value05'])}
                  onUpdate={onUpdate}
          />
        </div>
 
        <div>
          <Toggle name='value05'
                  on={Boolean(values['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={(e) => console.log('key down', e.keyCode)}
        />
 
        <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>
 
    )
  }
}
 
export default ExampleComponent
 

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.

Links

Readme

Keywords

Package Sidebar

Install

npm i the-input

Repository

github.com/the-labo/the-input

Homepage

github.com/the-labo/the-input#readme

Weekly Downloads

160

Version

3.5.88

License

MIT

Unpacked Size

1.38 MB

Total Files

141

Last publish

Collaborators

  • fuji_haruka
  • okunishinishi
Try on RunKit
Report malware