the-input v3.5.88

the-input

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

TheInputCheckbox

Checkbox input of the-components

Props

TheInputDate

Props

TheInputNumber

TheInputPassword

TheInputPinCode

TheInputRadio

Radio input of the-components

Props

TheInputRange

Range Input

Props

TheInputSearch

TheInputSelect

Select Input

Props

TheInputSlider

Slider Input

Props

TheInputTag

TheInputText

Text Input

Props

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

TheInputToggle

Toggle input of the-components

Props

TheInputUpload

Props

License

This software is released under the MIT License.

Links

• THE Labo