Text

Oh!, Yes it is!

Text with hint

Select on focus


Search


Password


Text Area

Radio
Checkbox
Select
Any drink?
Full screen select
Toggle
Slider
Range
Upload
Tag
Date

PinCode

Number


Error
This is global error
Something Wrong with This!
Something Wrong with This!
Something Wrong with This!
Something Wrong with This!
Something Wrong with This!
Something Wrong with This!
Something Wrong with This!
Something Wrong with This!



Readonly

'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

Links