diff --git a/src/renderers/art/ReactART.js b/src/renderers/art/ReactART.js index bf1e298ef0184..0f102926e31ba 100644 --- a/src/renderers/art/ReactART.js +++ b/src/renderers/art/ReactART.js @@ -93,7 +93,7 @@ function injectAfter(parentNode, referenceNode, node) { // ContainerMixin for components that can hold ART nodes -const ContainerMixin = assign({}, ReactMultiChild.prototype, { +const ContainerMixin = assign({}, ReactMultiChild, { /** * Moves a child component to the supplied index. diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js index 3429c287638a6..c9bae5a8026aa 100644 --- a/src/renderers/dom/shared/ReactDOMComponent.js +++ b/src/renderers/dom/shared/ReactDOMComponent.js @@ -1200,7 +1200,7 @@ ReactDOMComponent.Mixin = { Object.assign( ReactDOMComponent.prototype, ReactDOMComponent.Mixin, - ReactMultiChild.prototype + ReactMultiChild ); module.exports = ReactDOMComponent; diff --git a/src/renderers/native/ReactNativeBaseComponent.js b/src/renderers/native/ReactNativeBaseComponent.js index 1872386b6896a..2192b019fc4ab 100644 --- a/src/renderers/native/ReactNativeBaseComponent.js +++ b/src/renderers/native/ReactNativeBaseComponent.js @@ -224,7 +224,7 @@ ReactNativeBaseComponent.Mixin = { */ Object.assign( ReactNativeBaseComponent.prototype, - ReactMultiChild.prototype, + ReactMultiChild, ReactNativeBaseComponent.Mixin, NativeMethodsMixin ); diff --git a/src/renderers/shared/stack/reconciler/ReactMultiChild.js b/src/renderers/shared/stack/reconciler/ReactMultiChild.js index d567c96573aea..220de49f3e6b5 100644 --- a/src/renderers/shared/stack/reconciler/ReactMultiChild.js +++ b/src/renderers/shared/stack/reconciler/ReactMultiChild.js @@ -169,8 +169,8 @@ if (__DEV__) { * children. This is used by `ReactDOMComponent` to mount, update, and * unmount child components. */ -class ReactMultiChild { - _reconcilerInstantiateChildren(nestedChildren, transaction, context) { +var ReactMultiChild = { + _reconcilerInstantiateChildren: function(nestedChildren, transaction, context) { if (__DEV__) { var selfDebugID = getDebugID(this); if (this._currentElement) { @@ -187,9 +187,9 @@ class ReactMultiChild { return ReactChildReconciler.instantiateChildren( nestedChildren, transaction, context ); - } + }, - _reconcilerUpdateChildren( + _reconcilerUpdateChildren: function( prevChildren, nextNestedChildrenElements, mountImages, @@ -235,7 +235,7 @@ class ReactMultiChild { selfDebugID ); return nextChildren; - } + }, /** * Generates a "mount image" for each of the supplied children. In the case @@ -245,7 +245,7 @@ class ReactMultiChild { * @return {array} An array of mounted representations. * @internal */ - mountChildren(nestedChildren, transaction, context) { + mountChildren: function(nestedChildren, transaction, context) { var children = this._reconcilerInstantiateChildren( nestedChildren, transaction, context ); @@ -278,7 +278,7 @@ class ReactMultiChild { } return mountImages; - } + }, /** * Replaces any rendered children with a text content string. @@ -286,7 +286,7 @@ class ReactMultiChild { * @param {string} nextContent String of content. * @internal */ - updateTextContent(nextContent) { + updateTextContent: function(nextContent) { var prevChildren = this._renderedChildren; // Remove any rendered children. ReactChildReconciler.unmountChildren(prevChildren, false); @@ -298,7 +298,7 @@ class ReactMultiChild { // Set new text content. var updates = [makeTextContent(nextContent)]; processQueue(this, updates); - } + }, /** * Replaces any rendered children with a markup string. @@ -306,7 +306,7 @@ class ReactMultiChild { * @param {string} nextMarkup String of markup. * @internal */ - updateMarkup(nextMarkup) { + updateMarkup: function(nextMarkup) { var prevChildren = this._renderedChildren; // Remove any rendered children. ReactChildReconciler.unmountChildren(prevChildren, false); @@ -317,7 +317,7 @@ class ReactMultiChild { } var updates = [makeSetMarkup(nextMarkup)]; processQueue(this, updates); - } + }, /** * Updates the rendered children with new children. @@ -326,10 +326,10 @@ class ReactMultiChild { * @param {ReactReconcileTransaction} transaction * @internal */ - updateChildren(nextNestedChildrenElements, transaction, context) { + updateChildren: function(nextNestedChildrenElements, transaction, context) { // Hook used by React ART this._updateChildren(nextNestedChildrenElements, transaction, context); - } + }, /** * @param {?object} nextNestedChildrenElements Nested child element maps. @@ -337,7 +337,7 @@ class ReactMultiChild { * @final * @protected */ - _updateChildren(nextNestedChildrenElements, transaction, context) { + _updateChildren: function(nextNestedChildrenElements, transaction, context) { var prevChildren = this._renderedChildren; var removedNodes = {}; var mountImages = []; @@ -414,7 +414,7 @@ class ReactMultiChild { if (__DEV__) { setChildrenForInstrumentation.call(this, nextChildren); } - } + }, /** * Unmounts all rendered children. This should be used to clean up children @@ -423,11 +423,11 @@ class ReactMultiChild { * * @internal */ - unmountChildren(safely) { + unmountChildren: function(safely) { var renderedChildren = this._renderedChildren; ReactChildReconciler.unmountChildren(renderedChildren, safely); this._renderedChildren = null; - } + }, /** * Moves a child component to the supplied index. @@ -437,14 +437,14 @@ class ReactMultiChild { * @param {number} lastIndex Last index visited of the siblings of `child`. * @protected */ - moveChild(child, afterNode, toIndex, lastIndex) { + moveChild: function(child, afterNode, toIndex, lastIndex) { // If the index of `child` is less than `lastIndex`, then it needs to // be moved. Otherwise, we do not need to move it because a child will be // inserted or moved before `child`. if (child._mountIndex < lastIndex) { return makeMove(child, afterNode, toIndex); } - } + }, /** * Creates a child component. @@ -453,9 +453,9 @@ class ReactMultiChild { * @param {string} mountImage Markup to insert. * @protected */ - createChild(child, afterNode, mountImage) { + createChild: function(child, afterNode, mountImage) { return makeInsertMarkup(mountImage, afterNode, child._mountIndex); - } + }, /** * Removes a child component. @@ -463,9 +463,9 @@ class ReactMultiChild { * @param {ReactComponent} child Child to remove. * @protected */ - removeChild(child, node) { + removeChild: function(child, node) { return makeRemove(child, node); - } + }, /** * Mounts a child with the supplied name. @@ -478,7 +478,7 @@ class ReactMultiChild { * @param {ReactReconcileTransaction} transaction * @private */ - _mountChildAtIndex( + _mountChildAtIndex: function( child, mountImage, afterNode, @@ -487,7 +487,7 @@ class ReactMultiChild { context) { child._mountIndex = index; return this.createChild(child, afterNode, mountImage); - } + }, /** * Unmounts a rendered child. @@ -497,11 +497,11 @@ class ReactMultiChild { * @param {ReactComponent} child Component to unmount. * @private */ - _unmountChild(child, node) { + _unmountChild: function(child, node) { var update = this.removeChild(child, node); child._mountIndex = null; return update; - } + }, }; module.exports = ReactMultiChild; diff --git a/src/renderers/testing/ReactTestRenderer.js b/src/renderers/testing/ReactTestRenderer.js index a60707da6643b..c053697ed5eda 100644 --- a/src/renderers/testing/ReactTestRenderer.js +++ b/src/renderers/testing/ReactTestRenderer.js @@ -48,13 +48,12 @@ function getRenderedHostOrTextFromComponent(component) { return component; } -class ReactTestComponent extends ReactMultiChild { +class ReactTestComponent { _currentElement: ReactElement; _renderedChildren: null | Object; _topLevelWrapper: null | ReactInstance; constructor(element: ReactElement) { - super(); this._currentElement = element; this._renderedChildren = null; this._topLevelWrapper = null; @@ -67,6 +66,7 @@ class ReactTestComponent extends ReactMultiChild { context: Object, ) { var element = this._currentElement; + // $FlowFixMe https://github.com/facebook/flow/issues/1805 this.mountChildren(element.props.children, transaction, context); } @@ -76,6 +76,7 @@ class ReactTestComponent extends ReactMultiChild { context: Object, ) { this._currentElement = nextElement; + // $FlowFixMe https://github.com/facebook/flow/issues/1805 this.updateChildren(nextElement.props.children, transaction, context); } @@ -111,6 +112,8 @@ class ReactTestComponent extends ReactMultiChild { unmountComponent(): void {} } +Object.assign(ReactTestComponent.prototype, ReactMultiChild); + // ============================================================================= ReactUpdates.injection.injectReconcileTransaction(