From 9c38cb527a2fb72874547d38c0efd3a040b4283c Mon Sep 17 00:00:00 2001 From: SanderSpies Date: Fri, 18 Oct 2013 05:20:21 +0200 Subject: [PATCH 1/4] Initial support for 'data={obj}' --- src/core/ReactDOMComponent.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index 1c37a33cc3dba..d653c6ecc0675 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -119,6 +119,20 @@ ReactDOMComponent.Mixin = { var props = this.props; var ret = this._tagOpen; + if(props.data && typeof props.data === "object") { + var objectProps = Object.keys(props.data), + objectPropName, + objectPropValue; + + for(var i = 0, l = objectProps.length; i < l; i++) { + objectPropName = objectProps[i]; + objectPropValue = props.data[objectPropName]; + props["data-" + objectPropName] = objectPropValue; + } + + props.data = null; + } + for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { continue; From e5ea81e139f864a41648358d7c6892ff1bdf0418 Mon Sep 17 00:00:00 2001 From: SanderSpies Date: Fri, 18 Oct 2013 05:41:22 +0200 Subject: [PATCH 2/4] Support for data={object} --- src/core/ReactDOMComponent.js | 36 ++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index d653c6ecc0675..f9b967b026c85 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -104,6 +104,25 @@ ReactDOMComponent.Mixin = { } ), + _processDataAttribute: function(props) { + if (props.data && typeof props.data === "object") { + var objectProps = Object.keys(props.data), + objectPropName, + objectPropValue; + + for (var i = 0, l = objectProps.length; i < l; i++) { + objectPropName = objectProps[i]; + objectPropValue = props.data[objectPropName]; + if (typeof objectPropValue === "function") { + objectPropValue = objectPropValue.call(this); + } + props["data-" + objectPropName] = objectPropValue; + } + + props.data = null; + } + }, + /** * Creates markup for the open tag and all attributes. * @@ -118,21 +137,7 @@ ReactDOMComponent.Mixin = { _createOpenTagMarkup: function() { var props = this.props; var ret = this._tagOpen; - - if(props.data && typeof props.data === "object") { - var objectProps = Object.keys(props.data), - objectPropName, - objectPropValue; - - for(var i = 0, l = objectProps.length; i < l; i++) { - objectPropName = objectProps[i]; - objectPropValue = props.data[objectPropName]; - props["data-" + objectPropName] = objectPropValue; - } - - props.data = null; - } - + this._processDataAttribute(props); for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { continue; @@ -236,6 +241,7 @@ ReactDOMComponent.Mixin = { var propKey; var styleName; var styleUpdates; + this._processDataAttribute(nextProps); for (propKey in lastProps) { if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey)) { From fc9e275f2393530a9179bf54e0e748e4bf970ab5 Mon Sep 17 00:00:00 2001 From: SanderSpies Date: Fri, 18 Oct 2013 05:53:40 +0200 Subject: [PATCH 3/4] Add test + sanitizing --- src/core/ReactDOMComponent.js | 4 ++-- src/core/__tests__/ReactDOMComponent-test.js | 22 ++++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index f9b967b026c85..6266cb78c1f42 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -105,7 +105,7 @@ ReactDOMComponent.Mixin = { ), _processDataAttribute: function(props) { - if (props.data && typeof props.data === "object") { + if (props.data && typeof props.data === 'object') { var objectProps = Object.keys(props.data), objectPropName, objectPropValue; @@ -116,7 +116,7 @@ ReactDOMComponent.Mixin = { if (typeof objectPropValue === "function") { objectPropValue = objectPropValue.call(this); } - props["data-" + objectPropName] = objectPropValue; + props['data-' + objectPropName] = objectPropValue; } props.data = null; diff --git a/src/core/__tests__/ReactDOMComponent-test.js b/src/core/__tests__/ReactDOMComponent-test.js index 247257d66233a..fd22db05dbb82 100644 --- a/src/core/__tests__/ReactDOMComponent-test.js +++ b/src/core/__tests__/ReactDOMComponent-test.js @@ -49,6 +49,28 @@ describe('ReactDOMComponent', function() { expect(stub.getDOMNode().className).toEqual(''); }); + it("should handle data = {object}", function() { + var testObject = { + a: "a", + b: function() { + return "b"; + } + }; + var stub = ReactTestUtils.renderIntoDocument(
); + var domNode = stub.getDOMNode(); + expect(domNode.dataset.a).toEqual('a'); + expect(domNode.dataset.b).toEqual('b'); + testObject = { + a: function() { + return 1; + }, + b: "2" + }; + stub.receiveProps({data: testObject}); + expect(domNode.dataset.a).toEqual("1"); + expect(domNode.dataset.b).toEqual("2"); + }); + it("should gracefully handle various style value types", function() { var stub = ReactTestUtils.renderIntoDocument(
); var stubStyle = stub.getDOMNode().style; From 92a0d63fb8f9383a711ca2ac2f90725cf0a6978b Mon Sep 17 00:00:00 2001 From: SanderSpies Date: Fri, 18 Oct 2013 06:50:58 +0200 Subject: [PATCH 4/4] - change data= to dataset= - changed some variable names to be clearer about they are --- src/core/ReactDOMComponent.js | 28 ++++++++++---------- src/core/__tests__/ReactDOMComponent-test.js | 4 +-- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index 6266cb78c1f42..3901286f0e271 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -104,22 +104,22 @@ ReactDOMComponent.Mixin = { } ), - _processDataAttribute: function(props) { - if (props.data && typeof props.data === 'object') { - var objectProps = Object.keys(props.data), - objectPropName, - objectPropValue; + _processDatasetAttribute: function(props) { + if (props.dataset && typeof props.dataset === 'object') { + var datasetProps = Object.keys(props.dataset), + datasetPropName, + datasetPropValue; - for (var i = 0, l = objectProps.length; i < l; i++) { - objectPropName = objectProps[i]; - objectPropValue = props.data[objectPropName]; - if (typeof objectPropValue === "function") { - objectPropValue = objectPropValue.call(this); + for (var i = 0, l = datasetProps.length; i < l; i++) { + datasetPropName = datasetProps[i]; + datasetPropValue = props.dataset[datasetPropName]; + if (typeof datasetPropValue === "function") { + datasetPropValue = datasetPropValue.call(this); } - props['data-' + objectPropName] = objectPropValue; + props['data-' + datasetPropName] = datasetPropValue; } - props.data = null; + props.dataset = null; } }, @@ -137,7 +137,7 @@ ReactDOMComponent.Mixin = { _createOpenTagMarkup: function() { var props = this.props; var ret = this._tagOpen; - this._processDataAttribute(props); + this._processDatasetAttribute(props); for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { continue; @@ -241,7 +241,7 @@ ReactDOMComponent.Mixin = { var propKey; var styleName; var styleUpdates; - this._processDataAttribute(nextProps); + this._processDatasetAttribute(nextProps); for (propKey in lastProps) { if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey)) { diff --git a/src/core/__tests__/ReactDOMComponent-test.js b/src/core/__tests__/ReactDOMComponent-test.js index fd22db05dbb82..4b2e24c7d8b68 100644 --- a/src/core/__tests__/ReactDOMComponent-test.js +++ b/src/core/__tests__/ReactDOMComponent-test.js @@ -56,7 +56,7 @@ describe('ReactDOMComponent', function() { return "b"; } }; - var stub = ReactTestUtils.renderIntoDocument(
); + var stub = ReactTestUtils.renderIntoDocument(
); var domNode = stub.getDOMNode(); expect(domNode.dataset.a).toEqual('a'); expect(domNode.dataset.b).toEqual('b'); @@ -66,7 +66,7 @@ describe('ReactDOMComponent', function() { }, b: "2" }; - stub.receiveProps({data: testObject}); + stub.receiveProps({dataset: testObject}); expect(domNode.dataset.a).toEqual("1"); expect(domNode.dataset.b).toEqual("2"); });