mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbage
c901b1005e
This moves all logic around legacy descriptors to ReactLegacyDescriptor. This is responsible for the layer that knows that createClass exports a legacy factory. When passed one of these classes, it unwraps it to be a real class. If it is passed a non legacy factory, it is assumed to be a non-react component that needs to be invoked as a plain function. The semantic change is that a descriptor is now always returned if passed a legacy factory. Even if that factory is a mock. A mock would previously return undefined. For mocks, I treat the factory as the authoritative function. I call it to extract the instance or fill it with an empty component placeholder. Additionally, I make the classes take props as the first argument to the constructor. This is what the new class system will do. We currently need to set up some internals by calling the internal construct method. Instead of doing that automatically in the constructor, I now move that to a second pass so that mocks can get the plain props. This means that we can assert that a mock has been called once it's mounted with it's final props. Instead of the descriptor factory being called.
115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
/**
|
|
* Copyright 2013-2014 Facebook, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
* @providesModule ReactTextComponent
|
|
* @typechecks static-only
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
var DOMPropertyOperations = require('DOMPropertyOperations');
|
|
var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
|
|
var ReactComponent = require('ReactComponent');
|
|
var ReactDescriptor = require('ReactDescriptor');
|
|
|
|
var escapeTextForBrowser = require('escapeTextForBrowser');
|
|
var mixInto = require('mixInto');
|
|
|
|
/**
|
|
* Text nodes violate a couple assumptions that React makes about components:
|
|
*
|
|
* - When mounting text into the DOM, adjacent text nodes are merged.
|
|
* - Text nodes cannot be assigned a React root ID.
|
|
*
|
|
* This component is used to wrap strings in elements so that they can undergo
|
|
* the same reconciliation that is applied to elements.
|
|
*
|
|
* TODO: Investigate representing React components in the DOM with text nodes.
|
|
*
|
|
* @class ReactTextComponent
|
|
* @extends ReactComponent
|
|
* @internal
|
|
*/
|
|
var ReactTextComponent = function(props) {
|
|
// This constructor and it's argument is currently used by mocks.
|
|
};
|
|
|
|
mixInto(ReactTextComponent, ReactComponent.Mixin);
|
|
mixInto(ReactTextComponent, ReactBrowserComponentMixin);
|
|
mixInto(ReactTextComponent, {
|
|
|
|
/**
|
|
* Creates the markup for this text node. This node is not intended to have
|
|
* any features besides containing text content.
|
|
*
|
|
* @param {string} rootID DOM ID of the root node.
|
|
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
|
|
* @param {number} mountDepth number of components in the owner hierarchy
|
|
* @return {string} Markup for this text node.
|
|
* @internal
|
|
*/
|
|
mountComponent: function(rootID, transaction, mountDepth) {
|
|
ReactComponent.Mixin.mountComponent.call(
|
|
this,
|
|
rootID,
|
|
transaction,
|
|
mountDepth
|
|
);
|
|
|
|
var escapedText = escapeTextForBrowser(this.props);
|
|
|
|
if (transaction.renderToStaticMarkup) {
|
|
// Normally we'd wrap this in a `span` for the reasons stated above, but
|
|
// since this is a situation where React won't take over (static pages),
|
|
// we can simply return the text as it is.
|
|
return escapedText;
|
|
}
|
|
|
|
return (
|
|
'<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
|
|
escapedText +
|
|
'</span>'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Updates this component by updating the text content.
|
|
*
|
|
* @param {object} nextComponent Contains the next text content.
|
|
* @param {ReactReconcileTransaction} transaction
|
|
* @internal
|
|
*/
|
|
receiveComponent: function(nextComponent, transaction) {
|
|
var nextProps = nextComponent.props;
|
|
if (nextProps !== this.props) {
|
|
this.props = nextProps;
|
|
ReactComponent.BackendIDOperations.updateTextContentByID(
|
|
this._rootNodeID,
|
|
nextProps
|
|
);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
var ReactTextComponentFactory = function(text) {
|
|
// Bypass validation and configuration
|
|
return new ReactDescriptor(ReactTextComponent, null, null, null, null, text);
|
|
};
|
|
|
|
ReactTextComponentFactory.type = ReactTextComponent;
|
|
|
|
module.exports = ReactTextComponentFactory;
|