1 | import { FORCE_RENDER } from './constants';
|
2 | import { extend, clone, isFunction } from './util';
|
3 | import { createLinkedState } from './linked-state';
|
4 | import { renderComponent } from './vdom/component';
|
5 | import { enqueueRender } from './render-queue';
|
6 |
|
7 | /** Base Component class, for he ES6 Class method of creating Components
|
8 | * @public
|
9 | *
|
10 | * @example
|
11 | * class MyFoo extends Component {
|
12 | * render(props, state) {
|
13 | * return <div />;
|
14 | * }
|
15 | * }
|
16 | */
|
17 | export function Component(props, context) {
|
18 | /** @private */
|
19 | this._dirty = true;
|
20 | // /** @public */
|
21 | // this._disableRendering = false;
|
22 | // /** @public */
|
23 | // this.prevState = this.prevProps = this.prevContext = this.base = this.nextBase = this._parentComponent = this._component = this.__ref = this.__key = this._linkedStates = this._renderCallbacks = null;
|
24 | /** @public */
|
25 | this.context = context;
|
26 | /** @type {object} */
|
27 | this.props = props;
|
28 | /** @type {object} */
|
29 | if (!this.state) this.state = {};
|
30 | }
|
31 |
|
32 |
|
33 | extend(Component.prototype, {
|
34 |
|
35 | /** Returns a `boolean` value indicating if the component should re-render when receiving the given `props` and `state`.
|
36 | * @param {object} nextProps
|
37 | * @param {object} nextState
|
38 | * @param {object} nextContext
|
39 | * @returns {Boolean} should the component re-render
|
40 | * @name shouldComponentUpdate
|
41 | * @function
|
42 | */
|
43 | // shouldComponentUpdate() {
|
44 | // return true;
|
45 | // },
|
46 |
|
47 |
|
48 | /** Returns a function that sets a state property when called.
|
49 | * Calling linkState() repeatedly with the same arguments returns a cached link function.
|
50 | *
|
51 | * Provides some built-in special cases:
|
52 | * - Checkboxes and radio buttons link their boolean `checked` value
|
53 | * - Inputs automatically link their `value` property
|
54 | * - Event paths fall back to any associated Component if not found on an element
|
55 | * - If linked value is a function, will invoke it and use the result
|
56 | *
|
57 | * @param {string} key The path to set - can be a dot-notated deep key
|
58 | * @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.
|
59 | * @returns {function} linkStateSetter(e)
|
60 | *
|
61 | * @example Update a "text" state value when an input changes:
|
62 | * <input onChange={ this.linkState('text') } />
|
63 | *
|
64 | * @example Set a deep state value on click
|
65 | * <button onClick={ this.linkState('touch.coords', 'touches.0') }>Tap</button
|
66 | */
|
67 | linkState(key, eventPath) {
|
68 | let c = this._linkedStates || (this._linkedStates = {});
|
69 | return c[key+eventPath] || (c[key+eventPath] = createLinkedState(this, key, eventPath));
|
70 | },
|
71 |
|
72 |
|
73 | /** Update component state by copying properties from `state` to `this.state`.
|
74 | * @param {object} state A hash of state properties to update with new values
|
75 | */
|
76 | setState(state, callback) {
|
77 | let s = this.state;
|
78 | if (!this.prevState) this.prevState = clone(s);
|
79 | extend(s, isFunction(state) ? state(s, this.props) : state);
|
80 | if (callback) (this._renderCallbacks = (this._renderCallbacks || [])).push(callback);
|
81 | enqueueRender(this);
|
82 | },
|
83 |
|
84 |
|
85 | /** Immediately perform a synchronous re-render of the component.
|
86 | * @private
|
87 | */
|
88 | forceUpdate() {
|
89 | renderComponent(this, FORCE_RENDER);
|
90 | },
|
91 |
|
92 |
|
93 | /** Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
|
94 | * Virtual DOM is generally constructed via [JSX](http://jasonformat.com/wtf-is-jsx).
|
95 | * @param {object} props Props (eg: JSX attributes) received from parent element/component
|
96 | * @param {object} state The component's current state
|
97 | * @param {object} context Context object (if a parent component has provided context)
|
98 | * @returns VNode
|
99 | */
|
100 | render() {}
|
101 |
|
102 | });
|