PLC/vPLC-cloud-widgets-PROSAGA-码农传奇

Storybook

Inputs

TextInput

Prop name	Type	Description	Default
id	String	Input id	null
label	String	Input label	“”
value	String	Input value	“”
type	String	Input type	“text”
placeholder	String	Input placeholder	“”
validation	Function	Function to validate input	() => {}
onChange	Function	onChange callback	() => {}
onBlur	Function	onBlur callback	() => {}
onFocus	Function	onFocus callback	() => {}
autoFocus	Bool	Input autofocus	false
className	String	Input classname	“”

TextAreaInput

SelectInput

MultiSelectInput

Checkbox

Button

TagInput

RadioInput

RadioGroup

GeosuggestInput

Installation

For install:
npm install cloud-widgets --save

Usage

import _ from 'lodash'
import { FormUtils, TextInput, TextAreaInput, SelectInput, MultiSelectInput, TagInput, Button } from 'cloud-widgets'
...
  constructor(props) {
    super(props)
    this.formInputs = {}
  }
  _onSubmit(e) {
    // Function in FormUtils to validate inputs
    if (FormUtils.validateForm(this.formInputs)) {
      const data = {
        firstName: _.get(this.state, 'firstName', ''),
        lastName: _.get(this.state, 'lastName', ''),
      }
      this.props.onSubmit(data)
    }
  }
  _mandatoryValidate(value) {
    // Validation function example
    if (value != null && value != '') {
      return { isValid: true, error: '' }
    } else {
      return { isValid: false, error: 'Mandatory field' }
    }
  }
...
  render() {
    return (
      <TextInput
        ref={i => {
          this.formInputs.firstName = i
        }}
        id={'firstName'}
        label={'FirstName:'}
        value={this.state.firstName}
        placeholder={' '}
        onChange={firstName => this.setState({ firstName })}
        validation={v => this._mandatoryValidate(v)}
      />
    )
  }