{"parents":["c3f0d7c6bd5d4717335f7a3ca307611a575971bc"],"commit":{"authorName":"Toru Kobayashi","subject":"Add runtime deprecation warning for cloneWithProps","authoredAt":"2015-07-09T01:34:05+09:00","authorEmail":"koba0004@gmail.com","revision":"17a4dc83e0d5b507975df1bb9d2dd882330418ec","shortRevision":"17a4dc83e0"},"body":"","patch":"diff --git a\/src\/addons\/transitions\/ReactTransitionGroup.js b\/src\/addons\/transitions\/ReactTransitionGroup.js\nindex d3316619f6..352c4e5ae7 100644\n--- a\/src\/addons\/transitions\/ReactTransitionGroup.js\n+++ b\/src\/addons\/transitions\/ReactTransitionGroup.js\n@@ -15,7 +15,6 @@ var React = require('React');\n var ReactTransitionChildMapping = require('ReactTransitionChildMapping');\n \n var assign = require('Object.assign');\n-var cloneWithProps = require('cloneWithProps');\n var emptyFunction = require('emptyFunction');\n \n var ReactTransitionGroup = React.createClass({\n@@ -213,7 +212,7 @@ var ReactTransitionGroup = React.createClass({\n \/\/ already been removed. In case you need this behavior you can provide\n \/\/ a childFactory function to wrap every child, even the ones that are\n \/\/ leaving.\n- childrenToRender.push(cloneWithProps(\n+ childrenToRender.push(React.cloneElement(\n this.props.childFactory(child),\n {ref: key, key: key}\n ));\ndiff --git a\/src\/isomorphic\/deprecated\/__tests__\/cloneWithProps-test.js b\/src\/isomorphic\/deprecated\/__tests__\/cloneWithProps-test.js\nindex d12783bfea..5343fd49e8 100644\n--- a\/src\/isomorphic\/deprecated\/__tests__\/cloneWithProps-test.js\n+++ b\/src\/isomorphic\/deprecated\/__tests__\/cloneWithProps-test.js\n@@ -30,6 +30,26 @@ describe('cloneWithProps', function() {\n onlyChild = require('onlyChild');\n cloneWithProps = require('cloneWithProps');\n emptyObject = require('emptyObject');\n+ spyOn(console, 'error');\n+ });\n+\n+ it('should warn once because it is deprecated', function() {\n+ var Parent = React.createClass({\n+ render: function() {\n+ return (\n+

\n+ {cloneWithProps(onlyChild(this.props.children), {})}\n+ <\/div>\n+ );\n+ },\n+ });\n+ ReactTestUtils.renderIntoDocument(

<\/Parent>);\n+ ReactTestUtils.renderIntoDocument(

<\/Parent>);\n+ expect(console.error.argsForCall.length).toBe(1);\n+ expect(console.error.argsForCall[0][0]).toContain(\n+ 'cloneWithProps(...) is deprecated. ' +\n+ 'Please use React.cloneElement instead.'\n+ );\n });\n \n it('should clone a DOM component with new props', function() {\n@@ -80,8 +100,6 @@ describe('cloneWithProps', function() {\n });\n \n it('should warn when cloning with refs', function() {\n- spyOn(console, 'error');\n-\n var Grandparent = React.createClass({\n render: function() {\n return

<\/Parent>;\n@@ -99,7 +117,7 @@ describe('cloneWithProps', function() {\n \n var component = ReactTestUtils.renderIntoDocument();\n expect(component.refs).toBe(emptyObject);\n- expect(console.error.argsForCall.length).toBe(1);\n+ expect(console.error.argsForCall.length).toBe(2);\n });\n \n it('should transfer the key property', function() {\ndiff --git a\/src\/isomorphic\/deprecated\/cloneWithProps.js b\/src\/isomorphic\/deprecated\/cloneWithProps.js\nindex 3a5291e4da..589747c6ce 100644\n--- a\/src\/isomorphic\/deprecated\/cloneWithProps.js\n+++ b\/src\/isomorphic\/deprecated\/cloneWithProps.js\n@@ -20,6 +20,8 @@ var warning = require('warning');\n \n var CHILDREN_PROP = keyOf({children: null});\n \n+var didDeprecatedWarn = false;\n+\n \/**\n * Sometimes you want to change the props of a child passed to you. Usually\n * this is to add a CSS class.\n@@ -28,9 +30,16 @@ var CHILDREN_PROP = keyOf({children: null});\n * @param {object} props props you'd like to modify. className and style will be\n * merged automatically.\n * @return {ReactElement} a clone of child with props merged in.\n+ * @deprecated\n *\/\n function cloneWithProps(child, props) {\n if (__DEV__) {\n+ warning(\n+ didDeprecatedWarn,\n+ 'cloneWithProps(...) is deprecated. ' +\n+ 'Please use React.cloneElement instead.'\n+ );\n+ didDeprecatedWarn = true;\n warning(\n !child.ref,\n 'You are calling cloneWithProps() on a child with a ref. This is ' +\n","files":[{"status":"M","path":"src\/addons\/transitions\/ReactTransitionGroup.js"},{"status":"M","path":"src\/isomorphic\/deprecated\/__tests__\/cloneWithProps-test.js"},{"status":"M","path":"src\/isomorphic\/deprecated\/cloneWithProps.js"}]}

dillon1000/react

Files changed