cx 25.1.2 → 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 (109) hide show
  1. package/dist/data.js +3 -3
  2. package/dist/manifest.js +747 -747
  3. package/dist/widgets.js +8 -2
  4. package/package.json +32 -32
  5. package/src/charts/Legend.js +167 -167
  6. package/src/charts/Legend.scss +40 -40
  7. package/src/charts/LegendEntry.js +128 -128
  8. package/src/charts/LegendEntry.scss +27 -27
  9. package/src/charts/PieChart.d.ts +92 -92
  10. package/src/charts/PieChart.js +529 -529
  11. package/src/charts/axis/Axis.d.ts +113 -113
  12. package/src/charts/axis/Axis.js +280 -280
  13. package/src/charts/axis/CategoryAxis.d.ts +30 -30
  14. package/src/charts/axis/CategoryAxis.js +241 -241
  15. package/src/charts/axis/NumericAxis.js +351 -351
  16. package/src/charts/axis/Stack.js +55 -55
  17. package/src/charts/axis/TimeAxis.d.ts +28 -28
  18. package/src/charts/axis/TimeAxis.js +611 -611
  19. package/src/charts/helpers/PointReducer.js +47 -47
  20. package/src/charts/helpers/SnapPointFinder.js +69 -69
  21. package/src/data/Binding.spec.js +69 -69
  22. package/src/data/Expression.js +229 -229
  23. package/src/data/Expression.spec.js +229 -229
  24. package/src/data/StringTemplate.js +92 -92
  25. package/src/data/StringTemplate.spec.js +132 -127
  26. package/src/data/StructuredSelector.js +2 -1
  27. package/src/data/getAccessor.spec.js +11 -11
  28. package/src/data/getSelector.js +2 -1
  29. package/src/hooks/createLocalStorageRef.d.ts +3 -3
  30. package/src/hooks/createLocalStorageRef.js +20 -20
  31. package/src/index.scss +6 -6
  32. package/src/ui/Culture.d.ts +57 -57
  33. package/src/ui/Culture.js +139 -139
  34. package/src/ui/FocusManager.js +171 -171
  35. package/src/ui/Format.js +108 -108
  36. package/src/ui/HoverSync.js +147 -147
  37. package/src/ui/Instance.d.ts +72 -72
  38. package/src/ui/Instance.js +614 -614
  39. package/src/ui/Repeater.d.ts +61 -61
  40. package/src/ui/index.d.ts +42 -42
  41. package/src/ui/layout/ContentPlaceholder.d.ts +19 -19
  42. package/src/ui/layout/ContentPlaceholder.js +105 -105
  43. package/src/ui/layout/ContentPlaceholder.spec.js +579 -579
  44. package/src/ui/layout/LabelsTopLayout.js +134 -134
  45. package/src/util/Format.js +270 -270
  46. package/src/util/date/encodeDate.d.ts +1 -1
  47. package/src/util/date/encodeDate.js +8 -8
  48. package/src/util/date/encodeDateWithTimezoneOffset.d.ts +1 -1
  49. package/src/util/date/index.d.ts +11 -11
  50. package/src/util/date/index.js +11 -11
  51. package/src/util/date/parseDateInvariant.d.ts +3 -3
  52. package/src/util/date/parseDateInvariant.js +20 -20
  53. package/src/util/getSearchQueryPredicate.js +59 -59
  54. package/src/util/index.d.ts +51 -51
  55. package/src/util/index.js +54 -54
  56. package/src/util/isValidIdentifierName.d.ts +1 -1
  57. package/src/util/isValidIdentifierName.js +5 -5
  58. package/src/util/isValidIdentifierName.spec.js +33 -33
  59. package/src/util/scss/add-rules.scss +38 -38
  60. package/src/widgets/CxCredit.scss +37 -37
  61. package/src/widgets/HighlightedSearchText.js +36 -36
  62. package/src/widgets/HighlightedSearchText.scss +18 -18
  63. package/src/widgets/List.scss +91 -91
  64. package/src/widgets/drag-drop/DropZone.js +214 -214
  65. package/src/widgets/form/Calendar.js +618 -618
  66. package/src/widgets/form/Calendar.scss +196 -196
  67. package/src/widgets/form/Checkbox.scss +127 -127
  68. package/src/widgets/form/ColorField.js +397 -397
  69. package/src/widgets/form/ColorField.scss +96 -96
  70. package/src/widgets/form/ColorPicker.scss +283 -283
  71. package/src/widgets/form/DateTimeField.js +576 -576
  72. package/src/widgets/form/DateTimePicker.js +392 -392
  73. package/src/widgets/form/LookupField.d.ts +179 -179
  74. package/src/widgets/form/LookupField.scss +219 -219
  75. package/src/widgets/form/MonthField.d.ts +99 -99
  76. package/src/widgets/form/MonthField.js +523 -523
  77. package/src/widgets/form/MonthPicker.d.ts +76 -76
  78. package/src/widgets/form/MonthPicker.js +641 -641
  79. package/src/widgets/form/MonthPicker.scss +118 -118
  80. package/src/widgets/form/NumberField.js +459 -459
  81. package/src/widgets/form/NumberField.scss +61 -61
  82. package/src/widgets/form/Radio.scss +121 -121
  83. package/src/widgets/form/Select.scss +99 -99
  84. package/src/widgets/form/Slider.scss +118 -118
  85. package/src/widgets/form/Switch.scss +140 -140
  86. package/src/widgets/form/TextArea.scss +43 -43
  87. package/src/widgets/form/TextField.js +290 -290
  88. package/src/widgets/form/TextField.scss +55 -55
  89. package/src/widgets/form/UploadButton.d.ts +34 -34
  90. package/src/widgets/form/variables.scss +353 -353
  91. package/src/widgets/grid/Grid.d.ts +442 -442
  92. package/src/widgets/grid/Grid.js +3414 -3414
  93. package/src/widgets/grid/Grid.scss +638 -637
  94. package/src/widgets/grid/GridRow.js +228 -228
  95. package/src/widgets/grid/TreeNode.d.ts +23 -23
  96. package/src/widgets/grid/TreeNode.scss +88 -88
  97. package/src/widgets/grid/variables.scss +133 -133
  98. package/src/widgets/nav/Menu.scss +74 -74
  99. package/src/widgets/overlay/Dropdown.js +612 -612
  100. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  101. package/src/widgets/overlay/Overlay.d.ts +73 -73
  102. package/src/widgets/overlay/Tooltip.js +308 -303
  103. package/src/widgets/overlay/Window.js +202 -202
  104. package/src/widgets/overlay/captureMouse.js +124 -124
  105. package/src/widgets/overlay/createHotPromiseWindowFactory.d.ts +18 -18
  106. package/src/widgets/overlay/createHotPromiseWindowFactory.js +56 -56
  107. package/src/widgets/overlay/index.d.ts +11 -11
  108. package/src/widgets/overlay/index.js +11 -11
  109. 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
+ });