ES7 Decorator version of `LinkedStateMixin` that supports dot-separated paths

README.md

Make your React ES6 classes LinkState aware with a decorator. Supports nested state keys by specifying the key name with dots.

@NestedValueLink
class MyComponent extends React.Component {
  constructor(...args) {
    super(...args);

    this.state = {
      path: { to: { key: "" } }
    };
  }

  render() {
    return <input valueLink={this.linkState("path.to.key")} />;
  }
}

example.js

// This example is live at https://jsbin.com/soduqi/edit?js,output

@NestedValueLink
class Application extends React.Component {
  constructor(...args) {
    super(...args);

    this.state = {
      paymentData: "", // only used for display purposes
      payment: { // the data we want our form to manage
        name: "",
        ccard: "",
        verify: "",
        month: "",
        year: ""
      }
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleAssignClick = this.handleAssignClick.bind(this);
  }

  render() {
    return (
      <form onChange={this.handleChange}>
        <div>
          <label>Name</label>
          <input valueLink={this.linkState("payment.name")} />
        </div>
        <div>
          <label>CCard #</label>
          <input valueLink={this.linkState("payment.ccard")} />
        </div>
        <div>
          <label>CVV</label>
          <input valueLink={this.linkState("payment.verify")} />
        </div>
        <div>
          <label>Month</label>
          <input valueLink={this.linkState("payment.month")} />
        </div>
        <div>
          <label>Year</label>
          <input valueLink={this.linkState("payment.year")} />
        </div>
        <hr />
        <pre>{this.state.paymentData}</pre>
        <div>
          <button onClick={this.handleAssignClick}>Assign Some Data</button>
        </div>
      </form>
    );
  }

  handleChange(e) {
    setTimeout(() => {
      this.setState({paymentData: JSON.stringify(this.state.payment, null, "  ")});
    });
  }

  handleAssignClick(e) {
    e.preventDefault();
    const newPaymentData = {
      name: "My Name",
      ccard: "1234-5678-9012-3456",
      verify: "123",
      month: "01",
      year: "15"
    };
    this.setState({
      paymentData: JSON.stringify(newPaymentData, null, "  "),
      payment: newPaymentData
    });
  }
}

nested_value_link.js

function set(obj, path, val) {
  if (path.length === 0) return obj;

  const key = path[0];
  const nextVal = path.length === 1 ? val : set(obj[key], path.slice(1), val);
  return {
    ...obj,
    [key]: nextVal
  };
}

// This version of `linkState` can handle state keys
// with dots in them, which are interpreted as paths
// into the state. For example, passing `"user.name.first"`
// would bind to `this.state.user.name.first`.
function NestedValueLink(klass) {
  klass.prototype.linkState = function(name) {
    const nameParts = name.split(".");
    const currentValue = nameParts.reduce((acc, part) => {
      return acc[part];
    }, this.state);

    const setNewValue = newValue => {
      const newState = set(this.state, nameParts, newValue);
      this.setState(newState);
    };

    return {
      value: currentValue,
      requestChange: setNewValue
    };
  };

  return klass;
}