cx 25.2.0 → 25.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/dist/manifest.js +616 -616
  2. package/dist/widgets.js +8 -2
  3. package/package.json +32 -32
  4. package/src/charts/Legend.js +167 -167
  5. package/src/charts/Legend.scss +40 -40
  6. package/src/charts/LegendEntry.js +128 -128
  7. package/src/charts/LegendEntry.scss +27 -27
  8. package/src/charts/PieChart.d.ts +92 -92
  9. package/src/charts/PieChart.js +529 -529
  10. package/src/charts/axis/Axis.d.ts +113 -113
  11. package/src/charts/axis/Axis.js +280 -280
  12. package/src/charts/axis/CategoryAxis.d.ts +30 -30
  13. package/src/charts/axis/CategoryAxis.js +241 -241
  14. package/src/charts/axis/NumericAxis.js +351 -351
  15. package/src/charts/axis/Stack.js +55 -55
  16. package/src/charts/axis/TimeAxis.d.ts +28 -28
  17. package/src/charts/axis/TimeAxis.js +611 -611
  18. package/src/charts/helpers/PointReducer.js +47 -47
  19. package/src/charts/helpers/SnapPointFinder.js +69 -69
  20. package/src/data/Binding.spec.js +69 -69
  21. package/src/data/Expression.js +229 -229
  22. package/src/data/Expression.spec.js +229 -229
  23. package/src/data/StringTemplate.js +92 -92
  24. package/src/data/StringTemplate.spec.js +132 -132
  25. package/src/data/StructuredSelector.js +132 -132
  26. package/src/data/getAccessor.spec.js +11 -11
  27. package/src/data/getSelector.js +49 -49
  28. package/src/hooks/createLocalStorageRef.d.ts +3 -3
  29. package/src/hooks/createLocalStorageRef.js +20 -20
  30. package/src/index.scss +6 -6
  31. package/src/ui/Culture.d.ts +57 -57
  32. package/src/ui/Culture.js +139 -139
  33. package/src/ui/FocusManager.js +171 -171
  34. package/src/ui/Format.js +108 -108
  35. package/src/ui/HoverSync.js +147 -147
  36. package/src/ui/Instance.d.ts +72 -72
  37. package/src/ui/Instance.js +614 -614
  38. package/src/ui/Repeater.d.ts +61 -61
  39. package/src/ui/index.d.ts +42 -42
  40. package/src/ui/layout/ContentPlaceholder.d.ts +19 -19
  41. package/src/ui/layout/ContentPlaceholder.js +105 -105
  42. package/src/ui/layout/ContentPlaceholder.spec.js +579 -579
  43. package/src/ui/layout/LabelsTopLayout.js +134 -134
  44. package/src/util/Format.js +270 -270
  45. package/src/util/date/encodeDate.d.ts +1 -1
  46. package/src/util/date/encodeDate.js +8 -8
  47. package/src/util/date/encodeDateWithTimezoneOffset.d.ts +1 -1
  48. package/src/util/date/index.d.ts +11 -11
  49. package/src/util/date/index.js +11 -11
  50. package/src/util/date/parseDateInvariant.d.ts +3 -3
  51. package/src/util/date/parseDateInvariant.js +20 -20
  52. package/src/util/getSearchQueryPredicate.js +59 -59
  53. package/src/util/index.d.ts +51 -51
  54. package/src/util/index.js +54 -54
  55. package/src/util/isValidIdentifierName.d.ts +1 -1
  56. package/src/util/isValidIdentifierName.js +5 -5
  57. package/src/util/isValidIdentifierName.spec.js +33 -33
  58. package/src/util/scss/add-rules.scss +38 -38
  59. package/src/widgets/CxCredit.scss +37 -37
  60. package/src/widgets/HighlightedSearchText.js +36 -36
  61. package/src/widgets/HighlightedSearchText.scss +18 -18
  62. package/src/widgets/List.scss +91 -91
  63. package/src/widgets/drag-drop/DropZone.js +214 -214
  64. package/src/widgets/form/Calendar.js +618 -618
  65. package/src/widgets/form/Calendar.scss +196 -196
  66. package/src/widgets/form/Checkbox.scss +127 -127
  67. package/src/widgets/form/ColorField.js +397 -397
  68. package/src/widgets/form/ColorField.scss +96 -96
  69. package/src/widgets/form/ColorPicker.scss +283 -283
  70. package/src/widgets/form/DateTimeField.js +576 -576
  71. package/src/widgets/form/DateTimePicker.js +392 -392
  72. package/src/widgets/form/LookupField.d.ts +179 -179
  73. package/src/widgets/form/LookupField.scss +219 -219
  74. package/src/widgets/form/MonthField.d.ts +99 -99
  75. package/src/widgets/form/MonthField.js +523 -523
  76. package/src/widgets/form/MonthPicker.d.ts +76 -76
  77. package/src/widgets/form/MonthPicker.js +641 -641
  78. package/src/widgets/form/MonthPicker.scss +118 -118
  79. package/src/widgets/form/NumberField.js +459 -459
  80. package/src/widgets/form/NumberField.scss +61 -61
  81. package/src/widgets/form/Radio.scss +121 -121
  82. package/src/widgets/form/Select.scss +99 -99
  83. package/src/widgets/form/Slider.scss +118 -118
  84. package/src/widgets/form/Switch.scss +140 -140
  85. package/src/widgets/form/TextArea.scss +43 -43
  86. package/src/widgets/form/TextField.js +290 -290
  87. package/src/widgets/form/TextField.scss +55 -55
  88. package/src/widgets/form/UploadButton.d.ts +34 -34
  89. package/src/widgets/form/variables.scss +353 -353
  90. package/src/widgets/grid/Grid.d.ts +442 -442
  91. package/src/widgets/grid/Grid.js +3414 -3414
  92. package/src/widgets/grid/GridRow.js +228 -228
  93. package/src/widgets/grid/TreeNode.d.ts +23 -23
  94. package/src/widgets/grid/TreeNode.scss +88 -88
  95. package/src/widgets/grid/variables.scss +133 -133
  96. package/src/widgets/nav/Menu.scss +74 -74
  97. package/src/widgets/overlay/Dropdown.js +612 -612
  98. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  99. package/src/widgets/overlay/Overlay.d.ts +73 -73
  100. package/src/widgets/overlay/Tooltip.js +308 -303
  101. package/src/widgets/overlay/Window.js +202 -202
  102. package/src/widgets/overlay/captureMouse.js +124 -124
  103. package/src/widgets/overlay/createHotPromiseWindowFactory.d.ts +18 -18
  104. package/src/widgets/overlay/createHotPromiseWindowFactory.js +56 -56
  105. package/src/widgets/overlay/index.d.ts +11 -11
  106. package/src/widgets/overlay/index.js +11 -11
  107. package/src/widgets/variables.scss +144 -144
package/src/ui/layout/ContentPlaceholder.spec.js CHANGED
@@ -1,579 +1,579 @@
1
- import { Cx } from "../Cx";
2
- import { VDOM } from "../Widget";
3
- import { HtmlElement } from "../../widgets/HtmlElement";
4
- import { Store } from "../../data/Store";
5
- import { Controller } from "../Controller";
6
- import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
7
-
8
- import renderer from "react-test-renderer";
9
- import assert from "assert";
10
- import { PureContainer } from "../PureContainer";
11
-
12
- describe("ContentPlaceholder", () => {
13
- it("allows putting content inside", () => {
14
- let store = new Store();
15
- const component = renderer.create(
16
- <Cx store={store} subscribe immediate>
17
- <div>
18
- <header>
19
- <ContentPlaceholder name="header" />
20
- </header>
21
- <main>
22
- <h2 putInto="header">Header</h2>
23
- </main>
24
- </div>
25
- </Cx>,
26
- );
27
-
28
- let tree = component.toJSON();
29
- assert.deepEqual(tree, {
30
- type: "div",
31
- props: {},
32
- children: [
33
- {
34
- type: "header",
35
- props: {},
36
- children: [
37
- {
38
- type: "h2",
39
- props: {},
40
- children: ["Header"],
41
- },
42
- ],
43
- },
44
- {
45
- type: "main",
46
- props: {},
47
- children: null,
48
- },
49
- ],
50
- });
51
- });
52
-
53
- it("updates content on change", () => {
54
- let store = new Store({
55
- data: {
56
- headerText: "Header",
57
- },
58
- });
59
- const component = renderer.create(
60
- <Cx store={store} subscribe immediate>
61
- <div>
62
- <ContentPlaceholder name="header" />
63
- <h2 putInto="header" text:bind="headerText" />
64
- </div>
65
- </Cx>,
66
- );
67
-
68
- let getTree = (headerText) => ({
69
- type: "div",
70
- props: {},
71
- children: [
72
- {
73
- type: "h2",
74
- props: {},
75
- children: [headerText],
76
- },
77
- ],
78
- });
79
-
80
- assert.deepEqual(component.toJSON(), getTree("Header"));
81
- store.set("headerText", "Footer");
82
- assert.deepEqual(component.toJSON(), getTree("Footer"));
83
- });
84
-
85
- it("allows putting multiple entries inside", () => {
86
- let store = new Store();
87
- const component = renderer.create(
88
- <Cx store={store} subscribe immediate>
89
- <div>
90
- <header>
91
- <ContentPlaceholder name="headers" allowMultiple />
92
- </header>
93
- <main>
94
- <h2 putInto="headers">Header1</h2>
95
- <h2 putInto="headers">Header2</h2>
96
- </main>
97
- </div>
98
- </Cx>,
99
- );
100
-
101
- let tree = component.toJSON();
102
- assert.deepEqual(tree, {
103
- type: "div",
104
- props: {},
105
- children: [
106
- {
107
- type: "header",
108
- props: {},
109
- children: [
110
- {
111
- type: "h2",
112
- props: {},
113
- children: ["Header1"],
114
- },
115
- {
116
- type: "h2",
117
- props: {},
118
- children: ["Header2"],
119
- },
120
- ],
121
- },
122
- {
123
- type: "main",
124
- props: {},
125
- children: null,
126
- },
127
- ],
128
- });
129
- });
130
-
131
- it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
132
- let store = new Store();
133
- const component = renderer.create(
134
- <Cx store={store} subscribe immediate>
135
- <div>
136
- <PureContainer>
137
- <h2 putInto="headers">Header1</h2>
138
- <h2 putInto="headers">Header2</h2>
139
- </PureContainer>
140
- <header>
141
- <ContentPlaceholder name="headers" allowMultiple />
142
- </header>
143
- <PureContainer>
144
- <h2 putInto="headers">Header3</h2>
145
- <h2 putInto="headers">Header4</h2>
146
- </PureContainer>
147
- </div>
148
- </Cx>,
149
- );
150
-
151
- let tree = component.toJSON();
152
- assert.deepEqual(tree, {
153
- type: "div",
154
- props: {},
155
- children: [
156
- {
157
- type: "header",
158
- props: {},
159
- children: [
160
- {
161
- type: "h2",
162
- props: {},
163
- children: ["Header1"],
164
- },
165
- {
166
- type: "h2",
167
- props: {},
168
- children: ["Header2"],
169
- },
170
- {
171
- type: "h2",
172
- props: {},
173
- children: ["Header3"],
174
- },
175
- {
176
- type: "h2",
177
- props: {},
178
- children: ["Header4"],
179
- },
180
- ],
181
- },
182
- ],
183
- });
184
- });
185
-
186
- it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
187
- let store = new Store();
188
- const component = renderer.create(
189
- <Cx store={store} subscribe immediate>
190
- <div>
191
- <ContentPlaceholderScope name="headers">
192
- <h2 putInto="headers">Header1</h2>
193
- <h2 putInto="headers">Header2</h2>
194
- <header>
195
- <ContentPlaceholder name="headers" allowMultiple />
196
- </header>
197
- </ContentPlaceholderScope>
198
-
199
- <ContentPlaceholderScope name="headers">
200
- <header>
201
- <ContentPlaceholder name="headers" allowMultiple />
202
- </header>
203
- <h2 putInto="headers">Header3</h2>
204
- <h2 putInto="headers">Header4</h2>
205
- </ContentPlaceholderScope>
206
- </div>
207
- </Cx>,
208
- );
209
-
210
- let tree = component.toJSON();
211
- assert.deepEqual(tree, {
212
- type: "div",
213
- props: {},
214
- children: [
215
- {
216
- type: "header",
217
- props: {},
218
- children: [
219
- {
220
- type: "h2",
221
- props: {},
222
- children: ["Header1"],
223
- },
224
- {
225
- type: "h2",
226
- props: {},
227
- children: ["Header2"],
228
- },
229
- ],
230
- },
231
- {
232
- type: "header",
233
- props: {},
234
- children: [
235
- {
236
- type: "h2",
237
- props: {},
238
- children: ["Header3"],
239
- },
240
- {
241
- type: "h2",
242
- props: {},
243
- children: ["Header4"],
244
- },
245
- ],
246
- },
247
- ],
248
- });
249
- });
250
-
251
- it("is used for defining body position in outer layouts", () => {
252
- let store = new Store();
253
-
254
- let layout = (
255
- <cx>
256
- <div>
257
- <header>Header</header>
258
- <ContentPlaceholder />
259
- <footer>Footer</footer>
260
- </div>
261
- </cx>
262
- );
263
-
264
- const component = renderer.create(
265
- <Cx store={store} subscribe immediate>
266
- <main outerLayout={layout} />
267
- </Cx>,
268
- );
269
-
270
- assert.deepEqual(component.toJSON(), {
271
- type: "div",
272
- props: {},
273
- children: [
274
- {
275
- type: "header",
276
- props: {},
277
- children: ["Header"],
278
- },
279
- {
280
- type: "main",
281
- props: {},
282
- children: null,
283
- },
284
- {
285
- type: "footer",
286
- props: {},
287
- children: ["Footer"],
288
- },
289
- ],
290
- });
291
- });
292
-
293
- it("data in deeply nested placeholders is correctly updated", () => {
294
- let store = new Store({
295
- data: {
296
- header: "H",
297
- footer: "F",
298
- body: "B",
299
- },
300
- });
301
-
302
- let layout = (
303
- <cx>
304
- <div>
305
- <header>
306
- <ContentPlaceholder name="header" />
307
- </header>
308
- <ContentPlaceholder />
309
- <footer>
310
- <ContentPlaceholder name="footer" />
311
- </footer>
312
- </div>
313
- </cx>
314
- );
315
-
316
- const component = renderer.create(
317
- <Cx store={store} subscribe immediate>
318
- <main outerLayout={layout}>
319
- <div putInto="header">
320
- <span text:bind="header" />
321
- </div>
322
- <div putInto="footer">
323
- <span text:bind="footer" />
324
- </div>
325
- <span text:bind="body" />
326
- </main>
327
- </Cx>,
328
- );
329
-
330
- let getTree = (h, b, f) => ({
331
- type: "div",
332
- props: {},
333
- children: [
334
- {
335
- type: "header",
336
- props: {},
337
- children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
338
- },
339
- {
340
- type: "main",
341
- props: {},
342
- children: [{ type: "span", props: {}, children: [b] }],
343
- },
344
- {
345
- type: "footer",
346
- props: {},
347
- children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
348
- },
349
- ],
350
- });
351
-
352
- assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
353
- store.set("header", "H2");
354
- assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
355
- store.set("footer", "F2");
356
- assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
357
- store.set("body", "B2");
358
- assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
359
- });
360
-
361
- it("inside a two-level deep outer-layout works", () => {
362
- let store = new Store();
363
-
364
- let outerLayout = (
365
- <cx>
366
- <div>
367
- <ContentPlaceholder />
368
- </div>
369
- </cx>
370
- );
371
-
372
- let innerLayout = (
373
- <cx>
374
- <main outerLayout={outerLayout}>
375
- <ContentPlaceholder />
376
- </main>
377
- </cx>
378
- );
379
-
380
- const component = renderer.create(
381
- <Cx store={store} subscribe immediate>
382
- <section outerLayout={innerLayout} />
383
- </Cx>,
384
- );
385
-
386
- let tree = component.toJSON();
387
- //console.log(tree);
388
-
389
- assert.deepEqual(tree, {
390
- type: "div",
391
- props: {},
392
- children: [
393
- {
394
- type: "main",
395
- props: {},
396
- children: [
397
- {
398
- type: "section",
399
- props: {},
400
- children: null,
401
- },
402
- ],
403
- },
404
- ],
405
- });
406
- });
407
-
408
- it("works in strange order", () => {
409
- let store = new Store();
410
-
411
- const component = renderer.create(
412
- <Cx store={store} subscribe immediate>
413
- <div>
414
- <ContentPlaceholder name="footer" />
415
- <PureContainer putInto="footer-content">works</PureContainer>
416
- <PureContainer putInto="footer">
417
- It
418
- <ContentPlaceholder name="footer-content">doesn't work</ContentPlaceholder>
419
- </PureContainer>
420
- </div>
421
- </Cx>,
422
- );
423
-
424
- let tree = component.toJSON();
425
- //console.log(tree);
426
-
427
- assert.deepEqual(tree, {
428
- type: "div",
429
- props: {},
430
- children: ["It", "works"],
431
- });
432
- });
433
-
434
- it("inside a complex two-level-deep outer-layout works", () => {
435
- let store = new Store();
436
-
437
- let outerLayout = (
438
- <cx>
439
- <div>
440
- <ContentPlaceholder />
441
- </div>
442
- </cx>
443
- );
444
-
445
- let innerLayout = (
446
- <cx>
447
- <PureContainer>
448
- <main outerLayout={outerLayout}>
449
- <ContentPlaceholder />
450
- </main>
451
- </PureContainer>
452
- </cx>
453
- );
454
-
455
- const component = renderer.create(
456
- <Cx store={store} subscribe immediate>
457
- <section outerLayout={innerLayout} />
458
- </Cx>,
459
- );
460
-
461
- assert.deepEqual(component.toJSON(), {
462
- type: "div",
463
- props: {},
464
- children: [{ type: "main", props: {}, children: [{ type: "section", props: {}, children: null }] }],
465
- });
466
- });
467
-
468
- it("each level use an outer-layout", () => {
469
- let store = new Store();
470
-
471
- let outerLayout1 = (
472
- <cx>
473
- <div>
474
- <ContentPlaceholder />
475
- </div>
476
- </cx>
477
- );
478
-
479
- let outerLayout2 = (
480
- <cx>
481
- <main>
482
- <ContentPlaceholder />
483
- </main>
484
- </cx>
485
- );
486
-
487
- const component = renderer.create(
488
- <Cx store={store} subscribe immediate>
489
- <PureContainer outerLayout={outerLayout1}>
490
- <PureContainer outerLayout={outerLayout2}>Content</PureContainer>
491
- </PureContainer>
492
- </Cx>,
493
- );
494
-
495
- assert.deepEqual(component.toJSON(), {
496
- type: "div",
497
- props: {},
498
- children: [{ type: "main", props: {}, children: ["Content"] }],
499
- });
500
- });
501
-
502
- it("data in a two-level deep outer-layout is correctly updated", () => {
503
- let store = new Store({
504
- data: {
505
- header: "H",
506
- footer: "F",
507
- body: "B",
508
- },
509
- });
510
-
511
- let outerLayout = (
512
- <cx>
513
- <div>
514
- <ContentPlaceholder />
515
- <footer>
516
- <ContentPlaceholder name="footer" />
517
- </footer>
518
- </div>
519
- </cx>
520
- );
521
-
522
- let innerLayout = (
523
- <cx>
524
- <PureContainer>
525
- <PureContainer outerLayout={outerLayout}>
526
- <header>
527
- <ContentPlaceholder name="header" />
528
- </header>
529
- <ContentPlaceholder />
530
- </PureContainer>
531
- </PureContainer>
532
- </cx>
533
- );
534
-
535
- const component = renderer.create(
536
- <Cx store={store} subscribe immediate>
537
- <main outerLayout={innerLayout}>
538
- <div putInto="header">
539
- <span text:bind="header" />
540
- </div>
541
- <div putInto="footer">
542
- <span text:bind="footer" />
543
- </div>
544
- <span text:bind="body" />
545
- </main>
546
- </Cx>,
547
- );
548
-
549
- let getTree = (h, b, f) => ({
550
- type: "div",
551
- props: {},
552
- children: [
553
- {
554
- type: "header",
555
- props: {},
556
- children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
557
- },
558
- {
559
- type: "main",
560
- props: {},
561
- children: [{ type: "span", props: {}, children: [b] }],
562
- },
563
- {
564
- type: "footer",
565
- props: {},
566
- children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
567
- },
568
- ],
569
- });
570
-
571
- assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
572
- store.set("header", "H2");
573
- assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
574
- store.set("footer", "F2");
575
- assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
576
- store.set("body", "B2");
577
- assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
578
- });
579
- });
1
+ import { Cx } from "../Cx";
2
+ import { VDOM } from "../Widget";
3
+ import { HtmlElement } from "../../widgets/HtmlElement";
4
+ import { Store } from "../../data/Store";
5
+ import { Controller } from "../Controller";
6
+ import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
7
+
8
+ import renderer from "react-test-renderer";
9
+ import assert from "assert";
10
+ import { PureContainer } from "../PureContainer";
11
+
12
+ describe("ContentPlaceholder", () => {
13
+ it("allows putting content inside", () => {
14
+ let store = new Store();
15
+ const component = renderer.create(
16
+ <Cx store={store} subscribe immediate>
17
+ <div>
18
+ <header>
19
+ <ContentPlaceholder name="header" />
20
+ </header>
21
+ <main>
22
+ <h2 putInto="header">Header</h2>
23
+ </main>
24
+ </div>
25
+ </Cx>,
26
+ );
27
+
28
+ let tree = component.toJSON();
29
+ assert.deepEqual(tree, {
30
+ type: "div",
31
+ props: {},
32
+ children: [
33
+ {
34
+ type: "header",
35
+ props: {},
36
+ children: [
37
+ {
38
+ type: "h2",
39
+ props: {},
40
+ children: ["Header"],
41
+ },
42
+ ],
43
+ },
44
+ {
45
+ type: "main",
46
+ props: {},
47
+ children: null,
48
+ },
49
+ ],
50
+ });
51
+ });
52
+
53
+ it("updates content on change", () => {
54
+ let store = new Store({
55
+ data: {
56
+ headerText: "Header",
57
+ },
58
+ });
59
+ const component = renderer.create(
60
+ <Cx store={store} subscribe immediate>
61
+ <div>
62
+ <ContentPlaceholder name="header" />
63
+ <h2 putInto="header" text:bind="headerText" />
64
+ </div>
65
+ </Cx>,
66
+ );
67
+
68
+ let getTree = (headerText) => ({
69
+ type: "div",
70
+ props: {},
71
+ children: [
72
+ {
73
+ type: "h2",
74
+ props: {},
75
+ children: [headerText],
76
+ },
77
+ ],
78
+ });
79
+
80
+ assert.deepEqual(component.toJSON(), getTree("Header"));
81
+ store.set("headerText", "Footer");
82
+ assert.deepEqual(component.toJSON(), getTree("Footer"));
83
+ });
84
+
85
+ it("allows putting multiple entries inside", () => {
86
+ let store = new Store();
87
+ const component = renderer.create(
88
+ <Cx store={store} subscribe immediate>
89
+ <div>
90
+ <header>
91
+ <ContentPlaceholder name="headers" allowMultiple />
92
+ </header>
93
+ <main>
94
+ <h2 putInto="headers">Header1</h2>
95
+ <h2 putInto="headers">Header2</h2>
96
+ </main>
97
+ </div>
98
+ </Cx>,
99
+ );
100
+
101
+ let tree = component.toJSON();
102
+ assert.deepEqual(tree, {
103
+ type: "div",
104
+ props: {},
105
+ children: [
106
+ {
107
+ type: "header",
108
+ props: {},
109
+ children: [
110
+ {
111
+ type: "h2",
112
+ props: {},
113
+ children: ["Header1"],
114
+ },
115
+ {
116
+ type: "h2",
117
+ props: {},
118
+ children: ["Header2"],
119
+ },
120
+ ],
121
+ },
122
+ {
123
+ type: "main",
124
+ props: {},
125
+ children: null,
126
+ },
127
+ ],
128
+ });
129
+ });
130
+
131
+ it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
132
+ let store = new Store();
133
+ const component = renderer.create(
134
+ <Cx store={store} subscribe immediate>
135
+ <div>
136
+ <PureContainer>
137
+ <h2 putInto="headers">Header1</h2>
138
+ <h2 putInto="headers">Header2</h2>
139
+ </PureContainer>
140
+ <header>
141
+ <ContentPlaceholder name="headers" allowMultiple />
142
+ </header>
143
+ <PureContainer>
144
+ <h2 putInto="headers">Header3</h2>
145
+ <h2 putInto="headers">Header4</h2>
146
+ </PureContainer>
147
+ </div>
148
+ </Cx>,
149
+ );
150
+
151
+ let tree = component.toJSON();
152
+ assert.deepEqual(tree, {
153
+ type: "div",
154
+ props: {},
155
+ children: [
156
+ {
157
+ type: "header",
158
+ props: {},
159
+ children: [
160
+ {
161
+ type: "h2",
162
+ props: {},
163
+ children: ["Header1"],
164
+ },
165
+ {
166
+ type: "h2",
167
+ props: {},
168
+ children: ["Header2"],
169
+ },
170
+ {
171
+ type: "h2",
172
+ props: {},
173
+ children: ["Header3"],
174
+ },
175
+ {
176
+ type: "h2",
177
+ props: {},
178
+ children: ["Header4"],
179
+ },
180
+ ],
181
+ },
182
+ ],
183
+ });
184
+ });
185
+
186
+ it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
187
+ let store = new Store();
188
+ const component = renderer.create(
189
+ <Cx store={store} subscribe immediate>
190
+ <div>
191
+ <ContentPlaceholderScope name="headers">
192
+ <h2 putInto="headers">Header1</h2>
193
+ <h2 putInto="headers">Header2</h2>
194
+ <header>
195
+ <ContentPlaceholder name="headers" allowMultiple />
196
+ </header>
197
+ </ContentPlaceholderScope>
198
+
199
+ <ContentPlaceholderScope name="headers">
200
+ <header>
201
+ <ContentPlaceholder name="headers" allowMultiple />
202
+ </header>
203
+ <h2 putInto="headers">Header3</h2>
204
+ <h2 putInto="headers">Header4</h2>
205
+ </ContentPlaceholderScope>
206
+ </div>
207
+ </Cx>,
208
+ );
209
+
210
+ let tree = component.toJSON();
211
+ assert.deepEqual(tree, {
212
+ type: "div",
213
+ props: {},
214
+ children: [
215
+ {
216
+ type: "header",
217
+ props: {},
218
+ children: [
219
+ {
220
+ type: "h2",
221
+ props: {},
222
+ children: ["Header1"],
223
+ },
224
+ {
225
+ type: "h2",
226
+ props: {},
227
+ children: ["Header2"],
228
+ },
229
+ ],
230
+ },
231
+ {
232
+ type: "header",
233
+ props: {},
234
+ children: [
235
+ {
236
+ type: "h2",
237
+ props: {},
238
+ children: ["Header3"],
239
+ },
240
+ {
241
+ type: "h2",
242
+ props: {},
243
+ children: ["Header4"],
244
+ },
245
+ ],
246
+ },
247
+ ],
248
+ });
249
+ });
250
+
251
+ it("is used for defining body position in outer layouts", () => {
252
+ let store = new Store();
253
+
254
+ let layout = (
255
+ <cx>
256
+ <div>
257
+ <header>Header</header>
258
+ <ContentPlaceholder />
259
+ <footer>Footer</footer>
260
+ </div>
261
+ </cx>
262
+ );
263
+
264
+ const component = renderer.create(
265
+ <Cx store={store} subscribe immediate>
266
+ <main outerLayout={layout} />
267
+ </Cx>,
268
+ );
269
+
270
+ assert.deepEqual(component.toJSON(), {
271
+ type: "div",
272
+ props: {},
273
+ children: [
274
+ {
275
+ type: "header",
276
+ props: {},
277
+ children: ["Header"],
278
+ },
279
+ {
280
+ type: "main",
281
+ props: {},
282
+ children: null,
283
+ },
284
+ {
285
+ type: "footer",
286
+ props: {},
287
+ children: ["Footer"],
288
+ },
289
+ ],
290
+ });
291
+ });
292
+
293
+ it("data in deeply nested placeholders is correctly updated", () => {
294
+ let store = new Store({
295
+ data: {
296
+ header: "H",
297
+ footer: "F",
298
+ body: "B",
299
+ },
300
+ });
301
+
302
+ let layout = (
303
+ <cx>
304
+ <div>
305
+ <header>
306
+ <ContentPlaceholder name="header" />
307
+ </header>
308
+ <ContentPlaceholder />
309
+ <footer>
310
+ <ContentPlaceholder name="footer" />
311
+ </footer>
312
+ </div>
313
+ </cx>
314
+ );
315
+
316
+ const component = renderer.create(
317
+ <Cx store={store} subscribe immediate>
318
+ <main outerLayout={layout}>
319
+ <div putInto="header">
320
+ <span text:bind="header" />
321
+ </div>
322
+ <div putInto="footer">
323
+ <span text:bind="footer" />
324
+ </div>
325
+ <span text:bind="body" />
326
+ </main>
327
+ </Cx>,
328
+ );
329
+
330
+ let getTree = (h, b, f) => ({
331
+ type: "div",
332
+ props: {},
333
+ children: [
334
+ {
335
+ type: "header",
336
+ props: {},
337
+ children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
338
+ },
339
+ {
340
+ type: "main",
341
+ props: {},
342
+ children: [{ type: "span", props: {}, children: [b] }],
343
+ },
344
+ {
345
+ type: "footer",
346
+ props: {},
347
+ children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
348
+ },
349
+ ],
350
+ });
351
+
352
+ assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
353
+ store.set("header", "H2");
354
+ assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
355
+ store.set("footer", "F2");
356
+ assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
357
+ store.set("body", "B2");
358
+ assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
359
+ });
360
+
361
+ it("inside a two-level deep outer-layout works", () => {
362
+ let store = new Store();
363
+
364
+ let outerLayout = (
365
+ <cx>
366
+ <div>
367
+ <ContentPlaceholder />
368
+ </div>
369
+ </cx>
370
+ );
371
+
372
+ let innerLayout = (
373
+ <cx>
374
+ <main outerLayout={outerLayout}>
375
+ <ContentPlaceholder />
376
+ </main>
377
+ </cx>
378
+ );
379
+
380
+ const component = renderer.create(
381
+ <Cx store={store} subscribe immediate>
382
+ <section outerLayout={innerLayout} />
383
+ </Cx>,
384
+ );
385
+
386
+ let tree = component.toJSON();
387
+ //console.log(tree);
388
+
389
+ assert.deepEqual(tree, {
390
+ type: "div",
391
+ props: {},
392
+ children: [
393
+ {
394
+ type: "main",
395
+ props: {},
396
+ children: [
397
+ {
398
+ type: "section",
399
+ props: {},
400
+ children: null,
401
+ },
402
+ ],
403
+ },
404
+ ],
405
+ });
406
+ });
407
+
408
+ it("works in strange order", () => {
409
+ let store = new Store();
410
+
411
+ const component = renderer.create(
412
+ <Cx store={store} subscribe immediate>
413
+ <div>
414
+ <ContentPlaceholder name="footer" />
415
+ <PureContainer putInto="footer-content">works</PureContainer>
416
+ <PureContainer putInto="footer">
417
+ It
418
+ <ContentPlaceholder name="footer-content">doesn't work</ContentPlaceholder>
419
+ </PureContainer>
420
+ </div>
421
+ </Cx>,
422
+ );
423
+
424
+ let tree = component.toJSON();
425
+ //console.log(tree);
426
+
427
+ assert.deepEqual(tree, {
428
+ type: "div",
429
+ props: {},
430
+ children: ["It", "works"],
431
+ });
432
+ });
433
+
434
+ it("inside a complex two-level-deep outer-layout works", () => {
435
+ let store = new Store();
436
+
437
+ let outerLayout = (
438
+ <cx>
439
+ <div>
440
+ <ContentPlaceholder />
441
+ </div>
442
+ </cx>
443
+ );
444
+
445
+ let innerLayout = (
446
+ <cx>
447
+ <PureContainer>
448
+ <main outerLayout={outerLayout}>
449
+ <ContentPlaceholder />
450
+ </main>
451
+ </PureContainer>
452
+ </cx>
453
+ );
454
+
455
+ const component = renderer.create(
456
+ <Cx store={store} subscribe immediate>
457
+ <section outerLayout={innerLayout} />
458
+ </Cx>,
459
+ );
460
+
461
+ assert.deepEqual(component.toJSON(), {
462
+ type: "div",
463
+ props: {},
464
+ children: [{ type: "main", props: {}, children: [{ type: "section", props: {}, children: null }] }],
465
+ });
466
+ });
467
+
468
+ it("each level use an outer-layout", () => {
469
+ let store = new Store();
470
+
471
+ let outerLayout1 = (
472
+ <cx>
473
+ <div>
474
+ <ContentPlaceholder />
475
+ </div>
476
+ </cx>
477
+ );
478
+
479
+ let outerLayout2 = (
480
+ <cx>
481
+ <main>
482
+ <ContentPlaceholder />
483
+ </main>
484
+ </cx>
485
+ );
486
+
487
+ const component = renderer.create(
488
+ <Cx store={store} subscribe immediate>
489
+ <PureContainer outerLayout={outerLayout1}>
490
+ <PureContainer outerLayout={outerLayout2}>Content</PureContainer>
491
+ </PureContainer>
492
+ </Cx>,
493
+ );
494
+
495
+ assert.deepEqual(component.toJSON(), {
496
+ type: "div",
497
+ props: {},
498
+ children: [{ type: "main", props: {}, children: ["Content"] }],
499
+ });
500
+ });
501
+
502
+ it("data in a two-level deep outer-layout is correctly updated", () => {
503
+ let store = new Store({
504
+ data: {
505
+ header: "H",
506
+ footer: "F",
507
+ body: "B",
508
+ },
509
+ });
510
+
511
+ let outerLayout = (
512
+ <cx>
513
+ <div>
514
+ <ContentPlaceholder />
515
+ <footer>
516
+ <ContentPlaceholder name="footer" />
517
+ </footer>
518
+ </div>
519
+ </cx>
520
+ );
521
+
522
+ let innerLayout = (
523
+ <cx>
524
+ <PureContainer>
525
+ <PureContainer outerLayout={outerLayout}>
526
+ <header>
527
+ <ContentPlaceholder name="header" />
528
+ </header>
529
+ <ContentPlaceholder />
530
+ </PureContainer>
531
+ </PureContainer>
532
+ </cx>
533
+ );
534
+
535
+ const component = renderer.create(
536
+ <Cx store={store} subscribe immediate>
537
+ <main outerLayout={innerLayout}>
538
+ <div putInto="header">
539
+ <span text:bind="header" />
540
+ </div>
541
+ <div putInto="footer">
542
+ <span text:bind="footer" />
543
+ </div>
544
+ <span text:bind="body" />
545
+ </main>
546
+ </Cx>,
547
+ );
548
+
549
+ let getTree = (h, b, f) => ({
550
+ type: "div",
551
+ props: {},
552
+ children: [
553
+ {
554
+ type: "header",
555
+ props: {},
556
+ children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
557
+ },
558
+ {
559
+ type: "main",
560
+ props: {},
561
+ children: [{ type: "span", props: {}, children: [b] }],
562
+ },
563
+ {
564
+ type: "footer",
565
+ props: {},
566
+ children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
567
+ },
568
+ ],
569
+ });
570
+
571
+ assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
572
+ store.set("header", "H2");
573
+ assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
574
+ store.set("footer", "F2");
575
+ assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
576
+ store.set("body", "B2");
577
+ assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
578
+ });
579
+ });