Usage of `uncontrollable`

Input.jsx

const PureInput = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,

    label: React.PropTypes.string,
    type: React.PropTypes.string,
    placeholder: React.PropTypes.string,

    // value/callback pair
    value: React.PropTypes.string,
    onChange: React.PropTypes.func.isRequired,

    focused: React.PropTypes.bool,
    onFocus: React.PropTypes.func.isRequired,
  },

  getDefaultProps(): Object {
    return {
      type: "text",
      focused: false,
    };
  },

  render(): React.Element {
    const fieldClass = cx(
      "field", {
        "field-focus": this.props.focused || !!this.props.value
      }
    );

    return (
      <div className={fieldClass}>
        <label className="field__label">
          {this.props.label}
        </label>

        <input
          className="field__input"
          type={this.props.type}
          name={this.props.name}
          value={this.props.value}
          placeholder={this.props.placeholder}
          onChange={(event) => this.props.onChange(event.target.value)}
          onFocus={() => this.props.onFocus(true)}
          onBlur={() => this.props.onFocus(false)}
        />
      </div>
    );
  }
});


const Input = uncontrollable(
  PureInput,
  {
    value: "onChange",
    focused: "onFocus",
  }
);