react 0.13.0 → 0.14.0-alpha1

package/lib/ReactDOMForm.js

@@ -31,17 +31,17 @@ var ReactDOMForm = ReactClass.createClass({
 
   mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
 
-  render: function() {
+  render: function () {
     // TODO: Instead of using `ReactDOM` directly, we should use JSX. However,
     // `jshint` fails to parse JSX so in order for linting to work in the open
     // source repo, we need to just use `ReactDOM.form`.
     return form(this.props);
   },
 
-  componentDidMount: function() {
+  componentDidMount: function () {
     this.trapBubbledEvent(EventConstants.topLevelTypes.topReset, 'reset');
     this.trapBubbledEvent(EventConstants.topLevelTypes.topSubmit, 'submit');
   }
 });
 
-module.exports = ReactDOMForm;
+module.exports = ReactDOMForm;

package/lib/ReactDOMIDOperations.js

@@ -30,8 +30,7 @@ var setInnerHTML = require("./setInnerHTML");
  * @private
  */
 var INVALID_PROPERTY_ERRORS = {
-  dangerouslySetInnerHTML:
-    '`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.',
+  dangerouslySetInnerHTML: '`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.',
   style: '`style` must be set using `updateStylesByID()`.'
 };
 
@@ -50,13 +49,9 @@ var ReactDOMIDOperations = {
    * @param {*} value New value of the property.
    * @internal
    */
-  updatePropertyByID: function(id, name, value) {
+  updatePropertyByID: function (id, name, value) {
     var node = ReactMount.getNode(id);
-    ("production" !== process.env.NODE_ENV ? invariant(
-      !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
-      'updatePropertyByID(...): %s',
-      INVALID_PROPERTY_ERRORS[name]
-    ) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name)));
+    'production' !== process.env.NODE_ENV ? invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name), 'updatePropertyByID(...): %s', INVALID_PROPERTY_ERRORS[name]) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name));
 
     // If we're updating to null or undefined, we should remove the property
     // from the DOM node instead of inadvertantly setting to a string. This
@@ -76,13 +71,9 @@ var ReactDOMIDOperations = {
    * @param {string} name A property name to remove, see `DOMProperty`.
    * @internal
    */
-  deletePropertyByID: function(id, name, value) {
+  deletePropertyByID: function (id, name, value) {
     var node = ReactMount.getNode(id);
-    ("production" !== process.env.NODE_ENV ? invariant(
-      !INVALID_PROPERTY_ERRORS.hasOwnProperty(name),
-      'updatePropertyByID(...): %s',
-      INVALID_PROPERTY_ERRORS[name]
-    ) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name)));
+    'production' !== process.env.NODE_ENV ? invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name), 'updatePropertyByID(...): %s', INVALID_PROPERTY_ERRORS[name]) : invariant(!INVALID_PROPERTY_ERRORS.hasOwnProperty(name));
     DOMPropertyOperations.deleteValueForProperty(node, name, value);
   },
 
@@ -94,7 +85,7 @@ var ReactDOMIDOperations = {
    * @param {object} styles Mapping from styles to values.
    * @internal
    */
-  updateStylesByID: function(id, styles) {
+  updateStylesByID: function (id, styles) {
     var node = ReactMount.getNode(id);
     CSSPropertyOperations.setValueForStyles(node, styles);
   },
@@ -106,7 +97,7 @@ var ReactDOMIDOperations = {
    * @param {string} html An HTML string.
    * @internal
    */
-  updateInnerHTMLByID: function(id, html) {
+  updateInnerHTMLByID: function (id, html) {
     var node = ReactMount.getNode(id);
     setInnerHTML(node, html);
   },
@@ -118,7 +109,7 @@ var ReactDOMIDOperations = {
    * @param {string} content Text content.
    * @internal
    */
-  updateTextContentByID: function(id, content) {
+  updateTextContentByID: function (id, content) {
     var node = ReactMount.getNode(id);
     DOMChildrenOperations.updateTextContent(node, content);
   },
@@ -131,7 +122,7 @@ var ReactDOMIDOperations = {
    * @internal
    * @see {Danger.dangerouslyReplaceNodeWithMarkup}
    */
-  dangerouslyReplaceNodeWithMarkupByID: function(id, markup) {
+  dangerouslyReplaceNodeWithMarkupByID: function (id, markup) {
     var node = ReactMount.getNode(id);
     DOMChildrenOperations.dangerouslyReplaceNodeWithMarkup(node, markup);
   },
@@ -143,7 +134,7 @@ var ReactDOMIDOperations = {
    * @param {array<string>} markup List of markup strings.
    * @internal
    */
-  dangerouslyProcessChildrenUpdates: function(updates, markup) {
+  dangerouslyProcessChildrenUpdates: function (updates, markup) {
     for (var i = 0; i < updates.length; i++) {
       updates[i].parentNode = ReactMount.getNode(updates[i].parentID);
     }
@@ -161,4 +152,4 @@ ReactPerf.measureMethods(ReactDOMIDOperations, 'ReactDOMIDOperations', {
   dangerouslyProcessChildrenUpdates: 'dangerouslyProcessChildrenUpdates'
 });
 
-module.exports = ReactDOMIDOperations;
+module.exports = ReactDOMIDOperations;

package/lib/ReactDOMIframe.js

@@ -31,13 +31,13 @@ var ReactDOMIframe = ReactClass.createClass({
 
   mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
 
-  render: function() {
+  render: function () {
     return iframe(this.props);
   },
 
-  componentDidMount: function() {
+  componentDidMount: function () {
     this.trapBubbledEvent(EventConstants.topLevelTypes.topLoad, 'load');
   }
 });
 
-module.exports = ReactDOMIframe;
+module.exports = ReactDOMIframe;

package/lib/ReactDOMImg.js

@@ -31,14 +31,14 @@ var ReactDOMImg = ReactClass.createClass({
 
   mixins: [ReactBrowserComponentMixin, LocalEventTrapMixin],
 
-  render: function() {
+  render: function () {
     return img(this.props);
   },
 
-  componentDidMount: function() {
+  componentDidMount: function () {
     this.trapBubbledEvent(EventConstants.topLevelTypes.topLoad, 'load');
     this.trapBubbledEvent(EventConstants.topLevelTypes.topError, 'error');
   }
 });
 
-module.exports = ReactDOMImg;
+module.exports = ReactDOMImg;

package/lib/ReactDOMInput.js

@@ -21,6 +21,7 @@ var ReactMount = require("./ReactMount");
 var ReactUpdates = require("./ReactUpdates");
 
 var assign = require("./Object.assign");
+var findDOMNode = require("./findDOMNode");
 var invariant = require("./invariant");
 
 var input = ReactElement.createFactory('input');
@@ -56,7 +57,7 @@ var ReactDOMInput = ReactClass.createClass({
 
   mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
 
-  getInitialState: function() {
+  getInitialState: function () {
     var defaultValue = this.props.defaultValue;
     return {
       initialChecked: this.props.defaultChecked || false,
@@ -64,17 +65,17 @@ var ReactDOMInput = ReactClass.createClass({
     };
   },
 
-  render: function() {
+  render: function () {
     // Clone `this.props` so we don't mutate the input.
     var props = assign({}, this.props);
 
     props.defaultChecked = null;
     props.defaultValue = null;
 
-    var value = LinkedValueUtils.getValue(this);
+    var value = LinkedValueUtils.getValue(this.props);
     props.value = value != null ? value : this.state.initialValue;
 
-    var checked = LinkedValueUtils.getChecked(this);
+    var checked = LinkedValueUtils.getChecked(this.props);
     props.checked = checked != null ? checked : this.state.initialChecked;
 
     props.onChange = this._handleChange;
@@ -82,28 +83,24 @@ var ReactDOMInput = ReactClass.createClass({
     return input(props, this.props.children);
   },
 
-  componentDidMount: function() {
-    var id = ReactMount.getID(this.getDOMNode());
+  componentDidMount: function () {
+    var id = ReactMount.getID(findDOMNode(this));
     instancesByReactID[id] = this;
   },
 
-  componentWillUnmount: function() {
-    var rootNode = this.getDOMNode();
+  componentWillUnmount: function () {
+    var rootNode = findDOMNode(this);
     var id = ReactMount.getID(rootNode);
     delete instancesByReactID[id];
   },
 
-  componentDidUpdate: function(prevProps, prevState, prevContext) {
-    var rootNode = this.getDOMNode();
+  componentDidUpdate: function (prevProps, prevState, prevContext) {
+    var rootNode = findDOMNode(this);
     if (this.props.checked != null) {
-      DOMPropertyOperations.setValueForProperty(
-        rootNode,
-        'checked',
-        this.props.checked || false
-      );
+      DOMPropertyOperations.setValueForProperty(rootNode, 'checked', this.props.checked || false);
     }
 
-    var value = LinkedValueUtils.getValue(this);
+    var value = LinkedValueUtils.getValue(this.props);
     if (value != null) {
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
@@ -111,9 +108,9 @@ var ReactDOMInput = ReactClass.createClass({
     }
   },
 
-  _handleChange: function(event) {
+  _handleChange: function (event) {
     var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this);
+    var onChange = LinkedValueUtils.getOnChange(this.props);
     if (onChange) {
       returnValue = onChange.call(this, event);
     }
@@ -124,7 +121,7 @@ var ReactDOMInput = ReactClass.createClass({
 
     var name = this.props.name;
     if (this.props.type === 'radio' && name != null) {
-      var rootNode = this.getDOMNode();
+      var rootNode = findDOMNode(this);
       var queryRoot = rootNode;
 
       while (queryRoot.parentNode) {
@@ -137,27 +134,17 @@ var ReactDOMInput = ReactClass.createClass({
       // and won't include inputs that use the HTML5 `form=` attribute. Since
       // the input might not even be in a form, let's just use the global
       // `querySelectorAll` to ensure we don't miss anything.
-      var group = queryRoot.querySelectorAll(
-        'input[name=' + JSON.stringify('' + name) + '][type="radio"]');
+      var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]');
 
-      for (var i = 0, groupLen = group.length; i < groupLen; i++) {
+      for (var i = 0; i < group.length; i++) {
         var otherNode = group[i];
-        if (otherNode === rootNode ||
-            otherNode.form !== rootNode.form) {
+        if (otherNode === rootNode || otherNode.form !== rootNode.form) {
           continue;
         }
         var otherID = ReactMount.getID(otherNode);
-        ("production" !== process.env.NODE_ENV ? invariant(
-          otherID,
-          'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
-          'same `name` is not supported.'
-        ) : invariant(otherID));
+        'production' !== process.env.NODE_ENV ? invariant(otherID, 'ReactDOMInput: Mixing React and non-React radio inputs with the ' + 'same `name` is not supported.') : invariant(otherID);
         var otherInstance = instancesByReactID[otherID];
-        ("production" !== process.env.NODE_ENV ? invariant(
-          otherInstance,
-          'ReactDOMInput: Unknown radio button ID %s.',
-          otherID
-        ) : invariant(otherInstance));
+        'production' !== process.env.NODE_ENV ? invariant(otherInstance, 'ReactDOMInput: Unknown radio button ID %s.', otherID) : invariant(otherInstance);
         // If this is a controlled radio button group, forcing the input that
         // was previously checked to update will cause it to be come re-checked
         // as appropriate.
@@ -170,4 +157,4 @@ var ReactDOMInput = ReactClass.createClass({
 
 });
 
-module.exports = ReactDOMInput;
+module.exports = ReactDOMInput;

package/lib/ReactDOMOption.js

@@ -13,12 +13,18 @@
 
 var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
 var ReactClass = require("./ReactClass");
+var ReactDOMSelect = require("./ReactDOMSelect");
 var ReactElement = require("./ReactElement");
+var ReactInstanceMap = require("./ReactInstanceMap");
+var ReactPropTypes = require("./ReactPropTypes");
 
+var assign = require("./Object.assign");
 var warning = require("./warning");
 
 var option = ReactElement.createFactory('option');
 
+var valueContextKey = ReactDOMSelect.valueContextKey;
+
 /**
  * Implements an <option> native component that warns when `selected` is set.
  */
@@ -28,21 +34,57 @@ var ReactDOMOption = ReactClass.createClass({
 
   mixins: [ReactBrowserComponentMixin],
 
-  componentWillMount: function() {
+  getInitialState: function () {
+    return { selected: null };
+  },
+
+  contextTypes: (function () {
+    var obj = {};
+    obj[valueContextKey] = ReactPropTypes.any;
+    return obj;
+  })(),
+
+  componentWillMount: function () {
     // TODO (yungsters): Remove support for `selected` in <option>.
-    if ("production" !== process.env.NODE_ENV) {
-      ("production" !== process.env.NODE_ENV ? warning(
-        this.props.selected == null,
-        'Use the `defaultValue` or `value` props on <select> instead of ' +
-        'setting `selected` on <option>.'
-      ) : null);
+    if ('production' !== process.env.NODE_ENV) {
+      'production' !== process.env.NODE_ENV ? warning(this.props.selected == null, 'Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.') : null;
+    }
+
+    // Look up whether this option is 'selected' via parent-based context
+    var context = ReactInstanceMap.get(this)._context;
+    var selectValue = context[valueContextKey];
+
+    // If context key is null (e.g., no specified value or after initial mount)
+    // or missing (e.g., for <datalist>) skip props
+    if (selectValue != null) {
+      var selected = false;
+      if (Array.isArray(selectValue)) {
+        // multiple
+        for (var i = 0; i < selectValue.length; i++) {
+          if ('' + selectValue[i] === '' + this.props.value) {
+            selected = true;
+            break;
+          }
+        }
+      } else {
+        selected = '' + selectValue === '' + this.props.value;
+      }
+      this.setState({ selected: selected });
     }
   },
 
-  render: function() {
-    return option(this.props, this.props.children);
+  render: function () {
+    var props = this.props;
+
+    // Read state only from initial mount because <select> updates value
+    // manually; we need the initial state only for server rendering
+    if (this.state.selected != null) {
+      props = assign({}, props, { selected: this.state.selected });
+    }
+
+    return option(props, this.props.children);
   }
 
 });
 
-module.exports = ReactDOMOption;
+module.exports = ReactDOMOption;

package/lib/ReactDOMSelect.js

@@ -17,16 +17,20 @@ var ReactBrowserComponentMixin = require("./ReactBrowserComponentMixin");
 var ReactClass = require("./ReactClass");
 var ReactElement = require("./ReactElement");
 var ReactUpdates = require("./ReactUpdates");
+var ReactPropTypes = require("./ReactPropTypes");
 
 var assign = require("./Object.assign");
+var findDOMNode = require("./findDOMNode");
 
 var select = ReactElement.createFactory('select');
 
+var valueContextKey = '__ReactDOMSelect_value$' + Math.random().toString(36).slice(2);
+
 function updateOptionsIfPendingUpdateAndMounted() {
   /*jshint validthis:true */
   if (this._pendingUpdate) {
     this._pendingUpdate = false;
-    var value = LinkedValueUtils.getValue(this);
+    var value = LinkedValueUtils.getValue(this.props);
     if (value != null && this.isMounted()) {
       updateOptions(this, value);
     }
@@ -43,17 +47,11 @@ function selectValueType(props, propName, componentName) {
   }
   if (props.multiple) {
     if (!Array.isArray(props[propName])) {
-      return new Error(
-        ("The `" + propName + "` prop supplied to <select> must be an array if ") +
-        ("`multiple` is true.")
-      );
+      return new Error('The `' + propName + '` prop supplied to <select> must be an array if ' + '`multiple` is true.');
     }
   } else {
     if (Array.isArray(props[propName])) {
-      return new Error(
-        ("The `" + propName + "` prop supplied to <select> must be a scalar ") +
-        ("value if `multiple` is false.")
-      );
+      return new Error('The `' + propName + '` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.');
     }
   }
 }
@@ -64,15 +62,15 @@ function selectValueType(props, propName, componentName) {
  * @private
  */
 function updateOptions(component, propValue) {
-  var selectedValue, i, l;
-  var options = component.getDOMNode().options;
+  var selectedValue, i;
+  var options = findDOMNode(component).options;
 
   if (component.props.multiple) {
     selectedValue = {};
-    for (i = 0, l = propValue.length; i < l; i++) {
+    for (i = 0; i < propValue.length; i++) {
       selectedValue['' + propValue[i]] = true;
     }
-    for (i = 0, l = options.length; i < l; i++) {
+    for (i = 0; i < options.length; i++) {
       var selected = selectedValue.hasOwnProperty(options[i].value);
       if (options[i].selected !== selected) {
         options[i].selected = selected;
@@ -82,13 +80,15 @@ function updateOptions(component, propValue) {
     // Do not set `select.value` as exact behavior isn't consistent across all
     // browsers for all cases.
     selectedValue = '' + propValue;
-    for (i = 0, l = options.length; i < l; i++) {
+    for (i = 0; i < options.length; i++) {
       if (options[i].value === selectedValue) {
         options[i].selected = true;
         return;
       }
     }
-    options[0].selected = true;
+    if (options.length) {
+      options[0].selected = true;
+    }
   }
 }
 
@@ -113,12 +113,39 @@ var ReactDOMSelect = ReactClass.createClass({
 
   mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
 
+  statics: {
+    valueContextKey: valueContextKey
+  },
+
   propTypes: {
     defaultValue: selectValueType,
     value: selectValueType
   },
 
-  render: function() {
+  getInitialState: function () {
+    // Pass down initial value so initial generated markup has correct
+    // `selected` attributes
+    var value = LinkedValueUtils.getValue(this.props);
+    if (value != null) {
+      return { initialValue: value };
+    } else {
+      return { initialValue: this.props.defaultValue };
+    }
+  },
+
+  childContextTypes: (function () {
+    var obj = {};
+    obj[valueContextKey] = ReactPropTypes.any;
+    return obj;
+  })(),
+
+  getChildContext: function () {
+    var obj = {};
+    obj[valueContextKey] = this.state.initialValue;
+    return obj;
+  },
+
+  render: function () {
     // Clone `this.props` so we don't mutate the input.
     var props = assign({}, this.props);
 
@@ -128,21 +155,18 @@ var ReactDOMSelect = ReactClass.createClass({
     return select(props, this.props.children);
   },
 
-  componentWillMount: function() {
+  componentWillMount: function () {
     this._pendingUpdate = false;
   },
 
-  componentDidMount: function() {
-    var value = LinkedValueUtils.getValue(this);
-    if (value != null) {
-      updateOptions(this, value);
-    } else if (this.props.defaultValue != null) {
-      updateOptions(this, this.props.defaultValue);
-    }
+  componentWillReceiveProps: function (nextProps) {
+    // After the initial mount, we control selected-ness manually so don't pass
+    // the context value down
+    this.setState({ initialValue: null });
   },
 
-  componentDidUpdate: function(prevProps) {
-    var value = LinkedValueUtils.getValue(this);
+  componentDidUpdate: function (prevProps) {
+    var value = LinkedValueUtils.getValue(this.props);
     if (value != null) {
       this._pendingUpdate = false;
       updateOptions(this, value);
@@ -157,9 +181,9 @@ var ReactDOMSelect = ReactClass.createClass({
     }
   },
 
-  _handleChange: function(event) {
+  _handleChange: function (event) {
     var returnValue;
-    var onChange = LinkedValueUtils.getOnChange(this);
+    var onChange = LinkedValueUtils.getOnChange(this.props);
     if (onChange) {
       returnValue = onChange.call(this, event);
     }
@@ -171,4 +195,4 @@ var ReactDOMSelect = ReactClass.createClass({
 
 });
 
-module.exports = ReactDOMSelect;
+module.exports = ReactDOMSelect;