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