Skip to content

Instantly share code, notes, and snippets.

@tungd
Last active July 26, 2020 12:09

Revisions

  1. tungd revised this gist Jan 19, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions react-catalyst.js
    Original file line number Diff line number Diff line change
    @@ -22,6 +22,8 @@
    (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
    define([], factory);
    } else if (typeof exports === 'object') {
    module.exports = factory();
    } else {
    root.ReactCatalyst = factory();
    }
  2. tungd revised this gist Jan 19, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-catalyst.js
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@

    (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
    define([], factory)
    define([], factory);
    } else {
    root.ReactCatalyst = factory();
    }
  3. tungd revised this gist Jan 19, 2014. 1 changed file with 16 additions and 10 deletions.
    26 changes: 16 additions & 10 deletions react-catalyst.js
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    /**
    * react-catalyst.js
    *
    * LinkedState for Facebook's React UI Library. Add support for
    * LinkedState for Facebook's React UI Library. Add support for
    * deep path state access.
    *
    * Author: Tung Dao <me@tungdao.com>
    @@ -19,9 +19,13 @@
    * });
    */

    window.ReactCatalyst = {}

    !function(ReactCatalyst) {
    (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
    define([], factory)
    } else {
    root.ReactCatalyst = factory();
    }
    }(this, function () {
    "use strict";

    function getIn(object, path) {
    @@ -46,13 +50,15 @@ window.ReactCatalyst = {}
    updateIn(component.state, path, value));
    }

    ReactCatalyst.LinkedStateMixin = {
    linkState: function(path) {
    return {
    value: getIn(this.state, path),
    requestChange: setPartialState.bind(null, this, path)
    return {
    LinkedStateMixin: {
    linkState: function(path) {
    return {
    value: getIn(this.state, path),
    requestChange: setPartialState.bind(null, this, path)
    }
    }
    }
    }

    }(window.ReactCatalyst);
    }));
  4. tungd revised this gist Jan 11, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions react-catalyst.js
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,8 @@
    *
    * var WithLink = React.createClass({
    * mixins: [ReactCatalyst.LinkedStateMixin],
    * getInitialState: function() {
    * return { values: [{ text: 'Hello!' }] };
    * getInitialState: function() {
    * return { values: [{ text: 'Hello!' }] };
    * },
    * render: function() {
    * return <input type="text" valueLink={this.linkState('values.0.text')} />;
  5. tungd revised this gist Jan 11, 2014. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions react-catalyst.js
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,6 @@
    * return <input type="text" valueLink={this.linkState('values.0.text')} />;
    * }
    * });
    *
    */

    window.ReactCatalyst = {}
    @@ -54,6 +53,6 @@ window.ReactCatalyst = {}
    requestChange: setPartialState.bind(null, this, path)
    }
    }
    }'
    }

    }(window.ReactCatalyst);
  6. tungd created this gist Jan 11, 2014.
    59 changes: 59 additions & 0 deletions react-catalyst.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    /**
    * react-catalyst.js
    *
    * LinkedState for Facebook's React UI Library. Add support for
    * deep path state access.
    *
    * Author: Tung Dao <me@tungdao.com>
    *
    * Usage:
    *
    * var WithLink = React.createClass({
    * mixins: [ReactCatalyst.LinkedStateMixin],
    * getInitialState: function() {
    * return { values: [{ text: 'Hello!' }] };
    * },
    * render: function() {
    * return <input type="text" valueLink={this.linkState('values.0.text')} />;
    * }
    * });
    *
    */

    window.ReactCatalyst = {}

    !function(ReactCatalyst) {
    "use strict";

    function getIn(object, path) {
    var stack = path.split('.');
    while (stack.length > 1) {
    object = object[stack.shift()];
    }
    return object[stack.shift()];
    }

    function updateIn(object, path, value) {
    var current = object, stack = path.split('.');
    while (stack.length > 1) {
    current = current[stack.shift()];
    }
    current[stack.shift()] = value;
    return object;
    }

    function setPartialState(component, path, value) {
    component.setState(
    updateIn(component.state, path, value));
    }

    ReactCatalyst.LinkedStateMixin = {
    linkState: function(path) {
    return {
    value: getIn(this.state, path),
    requestChange: setPartialState.bind(null, this, path)
    }
    }
    }'

    }(window.ReactCatalyst);