'use strict';
exports.__esModule = true;
exports['default'] = Component;
var _hooks = require('./hooks');
var _util = require('./util');
var _linkedState = require('./linked-state');
var _vdomComponent = require('./vdom/component');
/** Base Component class, for he ES6 Class method of creating Components
* @public
*
* @example
* class MyFoo extends Component {
* render(props, state) {
* return <div />;
* }
* }
*/
function Component(props, context) {
/** @private */
this._dirty = true;
/** @public */
this._disableRendering = false;
/** @public */
this.prevState = this.prevProps = this.prevContext = this.base = this.nextBase = this._parentComponent = this._component = this.__ref = this.__key = this._linkedStates = this._renderCallbacks = null;
/** @public */
this.context = context || _util.createObject();
/** @type {object} */
this.props = props;
/** @type {object} */
this.state = _hooks.hook(this, 'getInitialState') || _util.createObject();
}
_util.extend(Component.prototype, {
/** Returns a `boolean` value indicating if the component should re-render when receiving the given `props` and `state`.
* @param {object} nextProps
* @param {object} nextState
* @param {object} nextContext
* @returns {Boolean} should the component re-render
* @name shouldComponentUpdate
* @function
*/
// shouldComponentUpdate() {
// return true;
// },
/** Returns a function that sets a state property when called.
* Calling linkState() repeatedly with the same arguments returns a cached link function.
*
* Provides some built-in special cases:
* - Checkboxes and radio buttons link their boolean `checked` value
* - Inputs automatically link their `value` property
* - Event paths fall back to any associated Component if not found on an element
* - If linked value is a function, will invoke it and use the result
*
* @param {string} key The path to set - can be a dot-notated deep key
* @param {string} [eventPath] If set, attempts to find the new state value at a given dot-notated path within the object passed to the linkedState setter.
* @returns {function} linkStateSetter(e)
*
* @example Update a "text" state value when an input changes:
* <input onChange={ this.linkState('text') } />
*
* @example Set a deep state value on click
* <button onClick={ this.linkState('touch.coords', 'touches.0') }>Tap</button
*/
linkState: function linkState(key, eventPath) {
var c = this._linkedStates || (this._linkedStates = _util.createObject()),
cacheKey = key + '|' + (eventPath || '');
return c[cacheKey] || (c[cacheKey] = _linkedState.createLinkedState(this, key, eventPath));
},
/** Update component state by copying properties from `state` to `this.state`.
* @param {object} state A hash of state properties to update with new values
*/
setState: function setState(state, callback) {
var s = this.state;
if (!this.prevState) this.prevState = _util.clone(s);
_util.extend(s, _util.isFunction(state) ? state(s, this.props) : state);
Iif (callback) (this._renderCallbacks = this._renderCallbacks || []).push(callback);
_vdomComponent.triggerComponentRender(this);
},
/** Immediately perform a synchronous re-render of the component.
* @private
*/
forceUpdate: function forceUpdate() {
_vdomComponent.renderComponent(this);
},
/** Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
* Virtual DOM is generally constructed via [JSX](http://jasonformat.com/wtf-is-jsx).
* @param {object} props Props (eg: JSX attributes) received from parent element/component
* @param {object} state The component's current state
* @param {object} context Context object (if a parent component has provided context)
* @returns VNode
*/
render: function render() {
return null;
}
});
module.exports = exports['default'];
|