1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | import blessed from 'blessed';
|
8 | import ReactMultiChild from 'react/lib/ReactMultiChild';
|
9 | import ReactBlessedIDOperations from './ReactBlessedIDOperations';
|
10 | import invariant from 'invariant';
|
11 | import update from './update';
|
12 | import solveClass from './solveClass';
|
13 | import {extend, groupBy, startCase} from 'lodash';
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | const CONTENT_TYPES = {string: true, number: true};
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | export default class ReactBlessedComponent {
|
27 | constructor(tag) {
|
28 | this._tag = tag.toLowerCase();
|
29 | this._updating = false;
|
30 | this._renderedChildren = null;
|
31 | this._previousStyle = null;
|
32 | this._previousStyleCopy = null;
|
33 | this._rootNodeID = null;
|
34 | this._wrapperState = null;
|
35 | this._topLevelWrapper = null;
|
36 | this._nodeWithLegacyProperties = null;
|
37 | }
|
38 |
|
39 | construct(element) {
|
40 |
|
41 |
|
42 | this._currentElement = element;
|
43 | this._eventListener = (type, ...args) => {
|
44 | if (this._updating) return;
|
45 |
|
46 | const handler = this._currentElement.props['on' + startCase(type).replace(/ /g, '')];
|
47 |
|
48 | if (typeof handler === 'function') {
|
49 | if (type === 'focus' || type === 'blur') {
|
50 | args[0] = ReactBlessedIDOperations.get(this._rootNodeID)
|
51 | }
|
52 | handler(...args);
|
53 | }
|
54 | };
|
55 | }
|
56 |
|
57 | |
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 | mountComponent(rootID, transaction, context) {
|
66 | this._rootNodeID = rootID;
|
67 |
|
68 |
|
69 | const node = this.mountNode(
|
70 | ReactBlessedIDOperations.getParent(rootID),
|
71 | this._currentElement
|
72 | );
|
73 |
|
74 | ReactBlessedIDOperations.add(rootID, node);
|
75 |
|
76 |
|
77 | let childrenToUse = this._currentElement.props.children;
|
78 | childrenToUse = childrenToUse === null ? [] : [].concat(childrenToUse);
|
79 |
|
80 | if (childrenToUse.length) {
|
81 |
|
82 |
|
83 | const {content=null, realChildren=[]} = groupBy(childrenToUse, (c) => {
|
84 | return CONTENT_TYPES[typeof c] ? 'content' : 'realChildren';
|
85 | });
|
86 |
|
87 |
|
88 | if (content)
|
89 | node.setContent('' + content.join(''));
|
90 |
|
91 |
|
92 | this.mountChildren(
|
93 | realChildren,
|
94 | transaction,
|
95 | context
|
96 | );
|
97 | }
|
98 |
|
99 |
|
100 | ReactBlessedIDOperations.screen.debouncedRender();
|
101 | }
|
102 |
|
103 | |
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 | mountNode(parent, element) {
|
111 | const {props, type} = element,
|
112 | {children, ...options} = props,
|
113 | blessedElement = blessed[type];
|
114 |
|
115 | invariant(
|
116 | !!blessedElement,
|
117 | `Invalid blessed element "${type}".`
|
118 | );
|
119 |
|
120 | const node = blessed[type](solveClass(options));
|
121 |
|
122 | node.on('event', this._eventListener);
|
123 | parent.append(node);
|
124 |
|
125 | return node;
|
126 | }
|
127 |
|
128 | |
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 | receiveComponent(nextElement, transaction, context) {
|
138 | const {props: {children, ...options}} = nextElement,
|
139 | node = ReactBlessedIDOperations.get(this._rootNodeID);
|
140 |
|
141 | this._updating = true;
|
142 | update(node, solveClass(options));
|
143 | this._updating = false;
|
144 |
|
145 |
|
146 | const childrenToUse = children === null ? [] : [].concat(children);
|
147 |
|
148 |
|
149 | const {content=null, realChildren=[]} = groupBy(childrenToUse, (c) => {
|
150 | return CONTENT_TYPES[typeof c] ? 'content' : 'realChildren';
|
151 | });
|
152 |
|
153 |
|
154 | if (content)
|
155 | node.setContent('' + content.join(''));
|
156 |
|
157 | this.updateChildren(realChildren, transaction, context);
|
158 |
|
159 | ReactBlessedIDOperations.screen.debouncedRender();
|
160 | }
|
161 |
|
162 | |
163 |
|
164 |
|
165 | unmountComponent() {
|
166 | this.unmountChildren();
|
167 |
|
168 | const node = ReactBlessedIDOperations.get(this._rootNodeID);
|
169 |
|
170 | node.off('event', this._eventListener);
|
171 | node.destroy();
|
172 |
|
173 | ReactBlessedIDOperations.drop(this._rootNodeID);
|
174 |
|
175 | this._rootNodeID = null;
|
176 |
|
177 | ReactBlessedIDOperations.screen.debouncedRender();
|
178 | }
|
179 |
|
180 | |
181 |
|
182 |
|
183 |
|
184 |
|
185 | getPublicInstance() {
|
186 | return ReactBlessedIDOperations.get(this._rootNodeID);
|
187 | }
|
188 | }
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | extend(
|
194 | ReactBlessedComponent.prototype,
|
195 | ReactMultiChild.Mixin
|
196 | );
|