Fixed a bug with re-ordering of children within a collapsed node
Brian Vaughn committed
Apr 17, 2019 at 09:39 UTC
74be38912464d63020eb52df016624b9d227335c
3 files changed
+88
-8
src/__tests__/__snapshots__/store-test.js.snap
+30
@@ -138,6 +138,26 @@ exports[`Store collapseNodesByDefault:false should support mount and update oper
138
139
exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
140
141
+exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
142
+[root]
143
+ ▾ <Component>
144
+ ▾ <Foo key="foo">
145
+ <Component key="0">
146
+ ▾ <Bar key="bar">
147
+ <Component key="0">
148
+ <Component key="1">
149
+`;
150
+
151
+exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `
152
+[root]
153
+ ▾ <Component>
154
+ ▾ <Bar key="bar">
155
+ <Component key="0">
156
+ <Component key="1">
157
+ ▾ <Foo key="foo">
158
+ <Component key="0">
159
+`;
160
+
161
exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
162
[root]
163
▸ <Wrapper>
@@ -310,6 +330,16 @@ exports[`Store collapseNodesByDefault:true should support mount and update opera
330
331
exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
332
333
+exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
334
+[root]
335
+ ▸ <Component>
336
+`;
337
+
338
+exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
339
+[root]
340
+ ▸ <Component>
341
+`;
342
+
343
exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
344
[root]
345
<Component>
src/__tests__/store-test.js
+42
@@ -187,6 +187,27 @@ describe('Store', () => {
187
act(() => store.toggleIsCollapsed(grandparentID, false));
188
expect(store).toMatchSnapshot('6: expand Grandparent');
189
});
190
+
191
+ it('should support reordering of children', () => {
192
+ const Component = ({ children = null }) => children;
193
+
194
+ const Foo = () => [<Component key="0" />];
195
+ const Bar = () => [<Component key="0" />, <Component key="1" />];
196
+ const foo = <Foo key="foo" />;
197
+ const bar = <Bar key="bar" />;
198
+
199
+ const container = document.createElement('div');
200
+
201
+ act(() =>
202
+ ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
203
+ );
204
+ expect(store).toMatchSnapshot('1: mount');
205
+
206
+ act(() =>
207
+ ReactDOM.render(<Component>{[bar, foo]}</Component>, container)
208
+ );
209
+ expect(store).toMatchSnapshot('3: reorder children');
210
+ });
211
});
212
213
describe('collapseNodesByDefault:true', () => {
@@ -406,5 +427,26 @@ describe('Store', () => {
427
act(() => store.toggleIsCollapsed(id, false));
428
expect(store).toMatchSnapshot('6: expand middle node');
429
});
430
+
431
+ it('should support reordering of children', () => {
432
+ const Component = ({ children = null }) => children;
433
+
434
+ const Foo = () => [<Component key="0" />];
435
+ const Bar = () => [<Component key="0" />, <Component key="1" />];
436
+ const foo = <Foo key="foo" />;
437
+ const bar = <Bar key="bar" />;
438
+
439
+ const container = document.createElement('div');
440
+
441
+ act(() =>
442
+ ReactDOM.render(<Component>{[foo, bar]}</Component>, container)
443
+ );
444
+ expect(store).toMatchSnapshot('1: mount');
445
+
446
+ act(() =>
447
+ ReactDOM.render(<Component>{[bar, foo]}</Component>, container)
448
+ );
449
+ expect(store).toMatchSnapshot('3: reorder children');
450
+ });
451
});
452
});
src/devtools/store.js
+16
-8
@@ -544,6 +544,7 @@ export default class Store extends EventEmitter {
544
}
545
546
if (__DEBUG__) {
547
+ console.groupCollapsed('onBridgeOperations');
548
debug('onBridgeOperations', operations);
549
}
550
@@ -797,17 +798,19 @@ export default class Store extends EventEmitter {
798
element = ((this._idToElement.get(id): any): Element);
799
element.children = Array.from(children);
800
800
- const prevWeight = element.weight;
801
- let childWeight = 0;
801
+ if (!element.isCollapsed) {
802
+ const prevWeight = element.weight;
803
+ let childWeight = 0;
804
803
- children.forEach(childID => {
804
- const child = ((this._idToElement.get(childID): any): Element);
805
- childWeight += child.weight;
806
- });
805
+ children.forEach(childID => {
806
+ const child = ((this._idToElement.get(childID): any): Element);
807
+ childWeight += child.weight;
808
+ });
809
808
- element.weight = childWeight + 1;
810
+ element.weight = childWeight + 1;
811
810
- weightDelta = childWeight + 1 - prevWeight;
812
+ weightDelta = childWeight + 1 - prevWeight;
813
+ }
814
break;
815
case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:
816
// Base duration updates are only sent while profiling is in progress.
@@ -861,6 +864,11 @@ export default class Store extends EventEmitter {
864
this.emit('roots');
865
}
866
867
+ if (__DEBUG__) {
868
+ console.log(this.__toSnapshot(true));
869
+ console.groupEnd();
870
+ }
871
+
872
this.emit('mutated', [addedElementIDs, removedElementIDs]);
873
};
874