cx 25.2.1 → 25.4.0

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