React-reusable-formsy-components

Introduction

A simple library for form elements which can be used with react-formsy library.

Currently contains:

1. Input text ( Native HTML )
2. Select box ( Native HTML )
3. Check box ( Native HTML )
4. Radio button ( Native HTML )
5. single and multiple select using react-select library
6. Date range picker

Motivation

A simple reusable component which can be used for following cases (Components in this library are called Lib Components).

1. A basic Lib Component which will bind with Formsy Form.
2. A component which efficiently renders the content.
3. Controlling the (value set on the element and its display) through (props from parent or user input).
4. Lib Component itself has its own state which interacts with parent component ( User defined component in which the form will be rendered) and formsy HOC and keeps its value updated, ie. the component state will update based on the value props. Also it can respond to user interactions.
5. Supports all synthetic events as callback (through props) which can be passed to the native HTML element. Just pass to the events to Lib component through props.
6. Show Error message for validations either inline or block.

Default Structure of the component

Every input element is wrapped in a div. Any error message for the formsy component can be positioned inline or block.

<div
  className={this.props.wrapperClass}
  style={this.props.wrapperStyle}
>
  {Content}
  <div className={this.props.errorClass} style={errorMessageStyle}>
    { this.props.getErrorMessage() }
  </div>
</div>

Code Example

// Import the necessary Lib Components
import { InputText, InputSelect, InputCheck, InputRadioButtonGroup } from reusable-formsy-components;

// Pass this as props to selectbox. It will render based on the name and value.
this.selectBoxOptions = [
      { name: "option1", value: "1" },
      { name: "option2", value: "2" }
    ];

// Pass this as props to radio buttons.
this.radioButtonGroupOptions = [
      { name: "option1", value: "1", displayName: "1" },
      { name: "option2", value: "2", displayName: "2" }
];

// in the render function of the your component declare a form

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      canSubmit: true,
      selectValue: '',
      isSettingPristineValue: {},
    };

    // Hold the form names. Used to construct a state object with true.
    this.formName = [1, 2, 3, 4, 5, 6];
    // On changing input. used as callback for altering {this.state.isSettingPristineValue}
    this.onChangeInput = this.onChangeInput.bind(this);
    // Custom reset function. Resets the pristine values
    this.onReset = this.onReset.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    // Static options
    this.selectBoxOptions = [
      { name: "option1", value: "1" },
      { name: "option2", value: "2" }
    ];
    this.radioButtonGroupOptions = [
      { name: "option1", value: "1", displayName: "1" },
      { name: "option2", value: "2", displayName: "2" }
    ];
    this.customSelect = [
      { value: 'one', label: 'one', className: 'select-options-custom' },
      { value: 'two', label: 'two', className: 'select-options-custom' },
      { value: 'three', label: 'three', className: 'select-options-custom' },
      { value: 'four', label: 'four', className: 'select-options-custom' },
      { value: 'five', label: 'five', className: 'select-options-custom' },
      { value: 'six', label: 'six', className: 'select-options-custom' }
    ];
  }

  componentDidMount() {
    // Set all key value pair to have true for all form fields with name.
    let isSettingPristineValue = {};
    _.each((this.formName), (name) => {
      isSettingPristineValue[name] = true;
    });
    // This will store every input as untouched
    this.setState({
      isSettingPristineValue
    });
  }

  onChangeInput(name, value) {
    // If any of the form input change and if it is not the original value
    if(!_.isEqual(this.refs.hello.getPristineValues()[name], value)) {
      let isSettingPristineValue = JSON.parse(JSON.stringify(this.state.isSettingPristineValue));
      isSettingPristineValue[name] = false;
      this.setState({
        isSettingPristineValue,
      });
    }
  }

  onReset() {
    // on clicking reset just update the pristine value of form elements to true so that it will render from the value prop
    let isSettingPristineValue = {};
    _.each((this.formName), (name) => {
      isSettingPristineValue[name] = true;
    });
    this.setState({
      isSettingPristineValue,
    });
  }

  onSubmit() {
    console.log('submitting ', this.refs.hello.getModel());
  }

  render() {
    const dateTime = {
      startDate: moment('25/12/2017 12:00:00 am', 'DD/MM/YYYY hh:mm:ss a'),
      endDate: moment('25/12/2018 12:00:01 am', 'DD/MM/YYYY hh:mm:ss a'),
    };

    return (
      <div>
        <Formsy.Form
          ref="hello"
          onChange={this.onChangeForm}
          noValidate
        >
          <InputText
            name="1"
            label="Textbox:"
            onChangeInput={this.onChangeInput}
            wrapperClass="divs"
            value='abcdef'
            isValuePristine={this.state.isSettingPristineValue[1]}
          />
          <InputSelect
            name="2"
            label="SelectBox:"
            options={this.selectBoxOptions}
            value="2"
            onChangeInput={this.onChangeInput}
            isValuePristine={this.state.isSettingPristineValue[2]}
            value={'2'}
            wrapperClass="divs"
          />
          <InputCheck
            name="3"
            label="Checkbox:"
            displayName="input check"
            onChangeInput={this.onChangeInput}
            isValuePristine={this.state.isSettingPristineValue[3]}
            value={true}
            wrapperClass="divs"
          />
          <InputRadioButtonGroup
            name="4"
            label="Radio button:"
            options={this.radioButtonGroupOptions}
            onChangeInput={this.onChangeInput}
            wrapperClass="divs"
            isValuePristine={this.state.isSettingPristineValue[4]}
            value={'2'}
          />

          <InputSelectCustom
            name="5"
            options = { this.customSelect }
            onChangeInput = { this.onChangeInput }
            className = 'react-select'
            autofocus = {false}
            multi={true}
            isValuePristine={this.state.isSettingPristineValue[5]}
            value={['two', 'three']}
            wrapperClass="select-custom"
            label="React-select"
            labelClass="select-label"
            selectClass="select-class"
          />
          <InputDateTime
            name="6"
            timePicker={true}
            wrapperClass="date-time"
            onChangeInput = { this.onChangeInput }
            isValuePristine={this.state.isSettingPristineValue[6]}
            value={dateTime}
          >
            Select a date
          </InputDateTime>
          <input
            type="button"
            value="Reset to pristine value"
            onClick={this.onReset}
          />
          <button
            type="submit"
            disabled={!this.state.canSubmit}
            onClick={this.onSubmit}
          >
            Submit
          </button>
        </Formsy.Form>
      </div>
    );
  }
}
/*
 * Renders the app with the target container
 */
render(
  <App />,
  document.getElementById('app'));


Any synthetic react events can be passed to the Lib Component as props.

Efficient re rendering.

Every component re renders only when the value of its iternal state changes. It avoids unnecessary re rendering due to props change of the Formsy library.

Installation

npm i reusable-formsy-components

API Reference

1. InputText

|PropName|Type|Requirement|Description| |---|---|---|---| | name | string|isRequired |name of the form element|, | value | any | optional | Pass this as props to set the value | | wrapperClass | string | optional | css class for the wrapper div |, | fieldClass | string | optional | css class for the input element, | onChangeInput | func | optional | callback to the parent component based on user interaction|, | required | bool | optional | specifies whether form requires this to be valid |, | wrapperStyle | object | optional | Set inline style for wrapper div |, | fieldStyle | object | optional | Set inline style for input element |, | inline | bool | optional | Display error message inline or block |, | ref | string | optional | Passing refs for accessing |,

2. InputCheck

|PropName|Type|Requirement|Description| |---|---|---|---| | name | string| Required |name of the form element|, | displayName | string | Required | display name of the checkbox| | value | any | optional | Pass this as props to set the value | | wrapperClass | string | optional | css class for the wrapper div |, | selectClass | string | optional | css class for the select element, | optionClass | string | optional | css class for the option element, | onChangeInput | func | optional | callback to the parent component based on user interaction|, | required | bool | optional | specifies whether form requires this to be valid |, | inline | bool | optional | Display error message inline or block |, | ref | string | optional | Passing refs for accessing |,

3. InputSelect

|PropName|Type|Requirement|Description| |---|---|---|---| | name | string| Required |name of the form element|, | options | array | Required | Array of objects { name (display), value (actual value holded) } | | value | any | optional | Pass this as props to set the value | | wrapperClass | string | optional | css class for the wrapper div |, | selectClass | string | optional | css class for the select element, | optionClass | string | optional | css class for the option element, | onChangeInput | func | optional | callback to the parent component based on user interaction|, | required | bool | optional | specifies whether form requires this to be valid |, | inline | bool | optional | Display error message inline or block |, | ref | string | optional | Passing refs for accessing |,

4. InputRadioButton

|PropName|Type|Requirement|Description| |---|---|---|---| | name | string| Required |name of the form element|, | options | array | Required | Array of objects { name (form value will be on this name), value (actual value holded), displayName (display) } | | value | any | optional | Pass this as props to set the value | | wrapperClass | string | optional | css class for the wrapper div |, | selectClass | string | optional | css class for the select element, | optionClass | string | optional | css class for the option element, | onChangeInput | func | optional | callback to the parent component based on user interaction|, | required | bool | optional | specifies whether form requires this to be valid |, | inline | bool | optional | Display error message inline or block |, | ref | string | optional | Passing refs for accessing |,

Tests

Download the repository. run npm test.

Contributors

The whole aim is to keep it simple and more generic. Feel free to suggest improvements.

License

MIT License