cx 25.1.0 → 25.1.2

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 (106) hide show
  1. package/dist/data.js +9 -1
  2. package/dist/manifest.js +731 -731
  3. package/dist/widgets.js +18 -4
  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 -221
  23. package/src/data/Expression.spec.js +229 -217
  24. package/src/data/StringTemplate.js +92 -92
  25. package/src/data/StringTemplate.spec.js +127 -110
  26. package/src/data/getAccessor.spec.js +11 -11
  27. package/src/hooks/createLocalStorageRef.d.ts +3 -3
  28. package/src/hooks/createLocalStorageRef.js +20 -20
  29. package/src/index.scss +6 -6
  30. package/src/ui/Culture.d.ts +57 -57
  31. package/src/ui/Culture.js +139 -139
  32. package/src/ui/FocusManager.js +171 -171
  33. package/src/ui/Format.js +108 -108
  34. package/src/ui/HoverSync.js +147 -147
  35. package/src/ui/Instance.d.ts +72 -72
  36. package/src/ui/Instance.js +614 -614
  37. package/src/ui/Repeater.d.ts +61 -61
  38. package/src/ui/index.d.ts +42 -42
  39. package/src/ui/layout/ContentPlaceholder.d.ts +19 -19
  40. package/src/ui/layout/ContentPlaceholder.js +105 -105
  41. package/src/ui/layout/ContentPlaceholder.spec.js +579 -579
  42. package/src/ui/layout/LabelsTopLayout.js +134 -134
  43. package/src/util/date/encodeDate.d.ts +1 -1
  44. package/src/util/date/encodeDate.js +8 -8
  45. package/src/util/date/encodeDateWithTimezoneOffset.d.ts +1 -1
  46. package/src/util/date/index.d.ts +11 -11
  47. package/src/util/date/index.js +11 -11
  48. package/src/util/date/parseDateInvariant.d.ts +3 -3
  49. package/src/util/date/parseDateInvariant.js +20 -20
  50. package/src/util/getSearchQueryPredicate.js +59 -59
  51. package/src/util/index.d.ts +51 -51
  52. package/src/util/index.js +54 -54
  53. package/src/util/isValidIdentifierName.d.ts +1 -1
  54. package/src/util/isValidIdentifierName.js +5 -5
  55. package/src/util/isValidIdentifierName.spec.js +33 -33
  56. package/src/util/scss/add-rules.scss +38 -38
  57. package/src/widgets/CxCredit.scss +37 -37
  58. package/src/widgets/HighlightedSearchText.js +36 -36
  59. package/src/widgets/HighlightedSearchText.scss +18 -18
  60. package/src/widgets/List.scss +91 -91
  61. package/src/widgets/drag-drop/DropZone.js +214 -214
  62. package/src/widgets/form/Calendar.js +618 -618
  63. package/src/widgets/form/Calendar.scss +196 -196
  64. package/src/widgets/form/Checkbox.scss +127 -127
  65. package/src/widgets/form/ColorField.js +397 -397
  66. package/src/widgets/form/ColorField.scss +96 -96
  67. package/src/widgets/form/ColorPicker.scss +283 -283
  68. package/src/widgets/form/DateTimeField.js +576 -576
  69. package/src/widgets/form/DateTimePicker.js +392 -392
  70. package/src/widgets/form/LookupField.d.ts +179 -179
  71. package/src/widgets/form/LookupField.scss +219 -219
  72. package/src/widgets/form/MonthField.d.ts +99 -95
  73. package/src/widgets/form/MonthField.js +523 -517
  74. package/src/widgets/form/MonthPicker.d.ts +76 -74
  75. package/src/widgets/form/MonthPicker.js +641 -633
  76. package/src/widgets/form/MonthPicker.scss +118 -118
  77. package/src/widgets/form/NumberField.js +459 -459
  78. package/src/widgets/form/NumberField.scss +61 -61
  79. package/src/widgets/form/Radio.scss +121 -121
  80. package/src/widgets/form/Select.scss +99 -99
  81. package/src/widgets/form/Slider.scss +118 -118
  82. package/src/widgets/form/Switch.scss +140 -140
  83. package/src/widgets/form/TextArea.scss +43 -43
  84. package/src/widgets/form/TextField.js +290 -290
  85. package/src/widgets/form/TextField.scss +55 -55
  86. package/src/widgets/form/UploadButton.d.ts +34 -34
  87. package/src/widgets/form/variables.scss +353 -353
  88. package/src/widgets/grid/Grid.d.ts +442 -442
  89. package/src/widgets/grid/Grid.js +3414 -3414
  90. package/src/widgets/grid/Grid.scss +637 -637
  91. package/src/widgets/grid/GridRow.js +228 -228
  92. package/src/widgets/grid/TreeNode.d.ts +23 -23
  93. package/src/widgets/grid/TreeNode.scss +88 -88
  94. package/src/widgets/grid/variables.scss +133 -133
  95. package/src/widgets/nav/Menu.scss +74 -74
  96. package/src/widgets/overlay/Dropdown.js +612 -612
  97. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  98. package/src/widgets/overlay/Overlay.d.ts +73 -73
  99. package/src/widgets/overlay/Tooltip.js +303 -303
  100. package/src/widgets/overlay/Window.js +202 -202
  101. package/src/widgets/overlay/captureMouse.js +124 -124
  102. package/src/widgets/overlay/createHotPromiseWindowFactory.d.ts +18 -18
  103. package/src/widgets/overlay/createHotPromiseWindowFactory.js +56 -56
  104. package/src/widgets/overlay/index.d.ts +11 -11
  105. package/src/widgets/overlay/index.js +11 -11
  106. package/src/widgets/variables.scss +144 -144
package/src/ui/Format.js CHANGED
@@ -1,108 +1,108 @@
1
- import { Culture, getCurrentCultureCache } from "./Culture";
2
- import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
3
- import { setGetExpressionCacheCallback } from "../data/Expression";
4
- import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
5
- import { parseDateInvariant } from "../util";
6
- import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
7
-
8
- export const Format = Fmt;
9
-
10
- let cultureSensitiveFormatsRegistered = false;
11
-
12
- export function resolveNumberFormattingFlags(flags) {
13
- if (!flags) return null;
14
- let result = {};
15
- if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
16
- if (flags.indexOf("c") >= 0) result.notation = "compact";
17
- if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
18
- return result;
19
- }
20
-
21
- export function enableCultureSensitiveFormatting() {
22
- if (cultureSensitiveFormatsRegistered) return;
23
-
24
- cultureSensitiveFormatsRegistered = true;
25
-
26
- Fmt.registerFactory(["number", "n"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
27
- let culture = Culture.getNumberCulture();
28
-
29
- let formatter = culture.getFormatter({
30
- ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
31
- ...resolveNumberFormattingFlags(flags),
32
- });
33
-
34
- return (value) => formatter.format(value);
35
- });
36
-
37
- Fmt.registerFactory("currency", (format, currency, minimumFractionDigits, maximumFractionDigits, flags) => {
38
- let culture = Culture.getNumberCulture();
39
- currency = currency || Culture.defaultCurrency;
40
-
41
- let formatter = culture.getFormatter({
42
- style: "currency",
43
- currency: currency,
44
- ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
45
- ...resolveNumberFormattingFlags(flags),
46
- });
47
-
48
- return (value) => formatter.format(value);
49
- });
50
-
51
- Fmt.registerFactory(["percentage", "p", "%"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
52
- let culture = Culture.getNumberCulture();
53
- let formatter = culture.getFormatter({
54
- style: "percent",
55
- ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
56
- ...resolveNumberFormattingFlags(flags),
57
- });
58
- return (value) => formatter.format(value);
59
- });
60
-
61
- Fmt.registerFactory(["percentSign", "ps"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
62
- let culture = Culture.getNumberCulture();
63
- let formatter = culture.getFormatter({
64
- style: "percent",
65
- ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
66
- ...resolveNumberFormattingFlags(flags),
67
- });
68
- return (value) => formatter.format(value / 100);
69
- });
70
-
71
- Fmt.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
72
- let culture = Culture.getDateTimeCulture();
73
- let formatter = culture.getFormatter(format);
74
- return (value) => formatter.format(parseDateInvariant(value));
75
- });
76
-
77
- Fmt.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
78
- let culture = Culture.getDateTimeCulture();
79
- let formatter = culture.getFormatter(format);
80
- return (value) => formatter.format(parseDateInvariant(value));
81
- });
82
-
83
- Fmt.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
84
- let culture = Culture.getDateTimeCulture();
85
- let formatter = culture.getFormatter(format);
86
- return (value) => formatter.format(parseDateInvariant(value));
87
- });
88
-
89
- setGetFormatCacheCallback(() => {
90
- let cache = getCurrentCultureCache();
91
- if (!cache.formatCache) cache.formatCache = {};
92
- return cache.formatCache;
93
- });
94
-
95
- setGetExpressionCacheCallback(() => {
96
- let cache = getCurrentCultureCache();
97
- if (!cache.exprCache) cache.exprCache = {};
98
- return cache.exprCache;
99
- });
100
-
101
- setGetStringTemplateCacheCallback(() => {
102
- let cache = getCurrentCultureCache();
103
- if (!cache.strTplCache) cache.strTplCache = {};
104
- return cache.strTplCache;
105
- });
106
-
107
- GlobalCacheIdentifier.change();
108
- }
1
+ import { Culture, getCurrentCultureCache } from "./Culture";
2
+ import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
3
+ import { setGetExpressionCacheCallback } from "../data/Expression";
4
+ import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
5
+ import { parseDateInvariant } from "../util";
6
+ import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
7
+
8
+ export const Format = Fmt;
9
+
10
+ let cultureSensitiveFormatsRegistered = false;
11
+
12
+ export function resolveNumberFormattingFlags(flags) {
13
+ if (!flags) return null;
14
+ let result = {};
15
+ if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
16
+ if (flags.indexOf("c") >= 0) result.notation = "compact";
17
+ if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
18
+ return result;
19
+ }
20
+
21
+ export function enableCultureSensitiveFormatting() {
22
+ if (cultureSensitiveFormatsRegistered) return;
23
+
24
+ cultureSensitiveFormatsRegistered = true;
25
+
26
+ Fmt.registerFactory(["number", "n"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
27
+ let culture = Culture.getNumberCulture();
28
+
29
+ let formatter = culture.getFormatter({
30
+ ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
31
+ ...resolveNumberFormattingFlags(flags),
32
+ });
33
+
34
+ return (value) => formatter.format(value);
35
+ });
36
+
37
+ Fmt.registerFactory("currency", (format, currency, minimumFractionDigits, maximumFractionDigits, flags) => {
38
+ let culture = Culture.getNumberCulture();
39
+ currency = currency || Culture.defaultCurrency;
40
+
41
+ let formatter = culture.getFormatter({
42
+ style: "currency",
43
+ currency: currency,
44
+ ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
45
+ ...resolveNumberFormattingFlags(flags),
46
+ });
47
+
48
+ return (value) => formatter.format(value);
49
+ });
50
+
51
+ Fmt.registerFactory(["percentage", "p", "%"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
52
+ let culture = Culture.getNumberCulture();
53
+ let formatter = culture.getFormatter({
54
+ style: "percent",
55
+ ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
56
+ ...resolveNumberFormattingFlags(flags),
57
+ });
58
+ return (value) => formatter.format(value);
59
+ });
60
+
61
+ Fmt.registerFactory(["percentSign", "ps"], (format, minimumFractionDigits, maximumFractionDigits, flags) => {
62
+ let culture = Culture.getNumberCulture();
63
+ let formatter = culture.getFormatter({
64
+ style: "percent",
65
+ ...resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits),
66
+ ...resolveNumberFormattingFlags(flags),
67
+ });
68
+ return (value) => formatter.format(value / 100);
69
+ });
70
+
71
+ Fmt.registerFactory(["date", "d"], (fmt, format = "yyyyMMdd") => {
72
+ let culture = Culture.getDateTimeCulture();
73
+ let formatter = culture.getFormatter(format);
74
+ return (value) => formatter.format(parseDateInvariant(value));
75
+ });
76
+
77
+ Fmt.registerFactory(["time", "t"], (fmt, format = "hhmmss") => {
78
+ let culture = Culture.getDateTimeCulture();
79
+ let formatter = culture.getFormatter(format);
80
+ return (value) => formatter.format(parseDateInvariant(value));
81
+ });
82
+
83
+ Fmt.registerFactory(["datetime", "dt"], (fmt, format = "yyyyMd hhmm") => {
84
+ let culture = Culture.getDateTimeCulture();
85
+ let formatter = culture.getFormatter(format);
86
+ return (value) => formatter.format(parseDateInvariant(value));
87
+ });
88
+
89
+ setGetFormatCacheCallback(() => {
90
+ let cache = getCurrentCultureCache();
91
+ if (!cache.formatCache) cache.formatCache = {};
92
+ return cache.formatCache;
93
+ });
94
+
95
+ setGetExpressionCacheCallback(() => {
96
+ let cache = getCurrentCultureCache();
97
+ if (!cache.exprCache) cache.exprCache = {};
98
+ return cache.exprCache;
99
+ });
100
+
101
+ setGetStringTemplateCacheCallback(() => {
102
+ let cache = getCurrentCultureCache();
103
+ if (!cache.strTplCache) cache.strTplCache = {};
104
+ return cache.strTplCache;
105
+ });
106
+
107
+ GlobalCacheIdentifier.change();
108
+ }
@@ -1,147 +1,147 @@
1
- /*
2
- HoverSync transfers through the context methods for reporting and subscribing to hover data to
3
- its descendants. How this should work is that each component can subscribe and unsubscribe
4
- to a hover channel and receive info about hover changes.
5
- Also, each component should report mouse enter/leave events.
6
- Similar to controllers, hover sync should transcend into child contexts.
7
- */
8
-
9
- import { dummyCallback } from "../util/dummyCallback";
10
- import { parseStyle } from "../util/parseStyle";
11
- import { SubscriberList } from "../util/SubscriberList";
12
- import { Container } from "./Container";
13
- import { PureContainer } from "./PureContainer";
14
- import { VDOM } from "./VDOM";
15
-
16
- export class HoverSync extends PureContainer {
17
- initInstance(context, instance) {
18
- let channels = {};
19
- instance.hoverSync = {
20
- report: (channel, hoverId, active) => {
21
- let ch = channels[channel];
22
- if (!ch) return;
23
- let state = active && hoverId != null;
24
- if (ch.state !== state && (ch.state === hoverId || active)) {
25
- ch.state = state;
26
- ch.subscribers.notify(state);
27
- }
28
- },
29
- subscribe: (channel, callback) => {
30
- let ch = channels[channel];
31
- if (!ch)
32
- ch = channels[channel] = {
33
- subscribers: new SubscriberList(),
34
- state: false,
35
- };
36
- return ch.subscribers.subscribe(callback);
37
- },
38
- };
39
- }
40
-
41
- explore(context, instance) {
42
- context.push("hoverSync", instance.hoverSync);
43
- super.explore(context, instance);
44
- }
45
-
46
- exploreCleanup(context, instance) {
47
- context.pop("hoverSync");
48
- }
49
- }
50
-
51
- class HoverSyncChild extends VDOM.Component {
52
- constructor(props) {
53
- super(props);
54
- this.state = { hover: false };
55
- this.onMouseMove = this.onMouseMove.bind(this);
56
- this.onMouseLeave = this.onMouseLeave.bind(this);
57
- }
58
-
59
- onMouseMove() {
60
- this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
61
- }
62
-
63
- onMouseLeave() {
64
- this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
65
- }
66
-
67
- compontentWillUnmount() {
68
- this.unsubscribe();
69
- }
70
-
71
- componentDidMount() {
72
- this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId) => {
73
- let hover = hoverId === this.props.hoverId;
74
- if (hover !== this.state.hover) this.setState({ hover });
75
- });
76
- }
77
-
78
- render() {
79
- return this.props.render({
80
- hover: this.state.hover,
81
- onMouseLeave: this.onMouseLeave,
82
- onMouseMove: this.onMouseMove,
83
- key: "child",
84
- });
85
- }
86
- }
87
-
88
- export function withHoverSync(key, hoverSync, hoverChannel, hoverId, render) {
89
- if (!hoverSync || !hoverChannel || hoverId == null)
90
- return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
91
- return (
92
- <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
93
- );
94
- }
95
-
96
- export class HoverSyncElement extends Container {
97
- declareData(...args) {
98
- super.declareData(...args, {
99
- hoverId: undefined,
100
- hoverClass: { structured: true },
101
- hoverStyle: { structured: true },
102
- });
103
- }
104
-
105
- prepareData(context, instance) {
106
- instance.hoverSync = context.hoverSync;
107
- instance.inSvg = !!context.inSvg;
108
- let { data } = instance;
109
- data.hoverStyle = parseStyle(data.hoverStyle);
110
- super.prepareData(context, instance);
111
- }
112
-
113
- render(context, instance, key) {
114
- let { data, inSvg } = instance;
115
- let { CSS } = this;
116
- let children = this.renderChildren(context, instance);
117
- let eventHandlers = instance.getJsxEventProps();
118
- return withHoverSync(
119
- key,
120
- instance.hoverSync,
121
- this.hoverChannel,
122
- data.hoverId,
123
- ({ hover, onMouseMove, onMouseLeave, key }) => {
124
- let style = {
125
- ...data.style,
126
- ...(hover && data.hoverStyle),
127
- };
128
- return VDOM.createElement(
129
- inSvg ? "g" : "div",
130
- {
131
- key,
132
- className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
133
- style,
134
- ...eventHandlers,
135
- onMouseLeave,
136
- onMouseMove,
137
- },
138
- children,
139
- );
140
- },
141
- );
142
- }
143
- }
144
-
145
- HoverSyncElement.prototype.baseClass = "hoversyncelement";
146
- HoverSyncElement.prototype.styled = true;
147
- HoverSyncElement.prototype.hoverChannel = "default";
1
+ /*
2
+ HoverSync transfers through the context methods for reporting and subscribing to hover data to
3
+ its descendants. How this should work is that each component can subscribe and unsubscribe
4
+ to a hover channel and receive info about hover changes.
5
+ Also, each component should report mouse enter/leave events.
6
+ Similar to controllers, hover sync should transcend into child contexts.
7
+ */
8
+
9
+ import { dummyCallback } from "../util/dummyCallback";
10
+ import { parseStyle } from "../util/parseStyle";
11
+ import { SubscriberList } from "../util/SubscriberList";
12
+ import { Container } from "./Container";
13
+ import { PureContainer } from "./PureContainer";
14
+ import { VDOM } from "./VDOM";
15
+
16
+ export class HoverSync extends PureContainer {
17
+ initInstance(context, instance) {
18
+ let channels = {};
19
+ instance.hoverSync = {
20
+ report: (channel, hoverId, active) => {
21
+ let ch = channels[channel];
22
+ if (!ch) return;
23
+ let state = active && hoverId != null;
24
+ if (ch.state !== state && (ch.state === hoverId || active)) {
25
+ ch.state = state;
26
+ ch.subscribers.notify(state);
27
+ }
28
+ },
29
+ subscribe: (channel, callback) => {
30
+ let ch = channels[channel];
31
+ if (!ch)
32
+ ch = channels[channel] = {
33
+ subscribers: new SubscriberList(),
34
+ state: false,
35
+ };
36
+ return ch.subscribers.subscribe(callback);
37
+ },
38
+ };
39
+ }
40
+
41
+ explore(context, instance) {
42
+ context.push("hoverSync", instance.hoverSync);
43
+ super.explore(context, instance);
44
+ }
45
+
46
+ exploreCleanup(context, instance) {
47
+ context.pop("hoverSync");
48
+ }
49
+ }
50
+
51
+ class HoverSyncChild extends VDOM.Component {
52
+ constructor(props) {
53
+ super(props);
54
+ this.state = { hover: false };
55
+ this.onMouseMove = this.onMouseMove.bind(this);
56
+ this.onMouseLeave = this.onMouseLeave.bind(this);
57
+ }
58
+
59
+ onMouseMove() {
60
+ this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, true);
61
+ }
62
+
63
+ onMouseLeave() {
64
+ this.props.hoverSync.report(this.props.hoverChannel, this.props.hoverId, false);
65
+ }
66
+
67
+ compontentWillUnmount() {
68
+ this.unsubscribe();
69
+ }
70
+
71
+ componentDidMount() {
72
+ this.unsubscribe = this.props.hoverSync.subscribe(this.props.hoverChannel, (hoverId) => {
73
+ let hover = hoverId === this.props.hoverId;
74
+ if (hover !== this.state.hover) this.setState({ hover });
75
+ });
76
+ }
77
+
78
+ render() {
79
+ return this.props.render({
80
+ hover: this.state.hover,
81
+ onMouseLeave: this.onMouseLeave,
82
+ onMouseMove: this.onMouseMove,
83
+ key: "child",
84
+ });
85
+ }
86
+ }
87
+
88
+ export function withHoverSync(key, hoverSync, hoverChannel, hoverId, render) {
89
+ if (!hoverSync || !hoverChannel || hoverId == null)
90
+ return render({ key, hover: false, onMouseLeave: dummyCallback, onMouseMove: dummyCallback });
91
+ return (
92
+ <HoverSyncChild key={key} hoverSync={hoverSync} hoverChannel={hoverChannel} hoverId={hoverId} render={render} />
93
+ );
94
+ }
95
+
96
+ export class HoverSyncElement extends Container {
97
+ declareData(...args) {
98
+ super.declareData(...args, {
99
+ hoverId: undefined,
100
+ hoverClass: { structured: true },
101
+ hoverStyle: { structured: true },
102
+ });
103
+ }
104
+
105
+ prepareData(context, instance) {
106
+ instance.hoverSync = context.hoverSync;
107
+ instance.inSvg = !!context.inSvg;
108
+ let { data } = instance;
109
+ data.hoverStyle = parseStyle(data.hoverStyle);
110
+ super.prepareData(context, instance);
111
+ }
112
+
113
+ render(context, instance, key) {
114
+ let { data, inSvg } = instance;
115
+ let { CSS } = this;
116
+ let children = this.renderChildren(context, instance);
117
+ let eventHandlers = instance.getJsxEventProps();
118
+ return withHoverSync(
119
+ key,
120
+ instance.hoverSync,
121
+ this.hoverChannel,
122
+ data.hoverId,
123
+ ({ hover, onMouseMove, onMouseLeave, key }) => {
124
+ let style = {
125
+ ...data.style,
126
+ ...(hover && data.hoverStyle),
127
+ };
128
+ return VDOM.createElement(
129
+ inSvg ? "g" : "div",
130
+ {
131
+ key,
132
+ className: CSS.expand(data.classNames, CSS.state({ hover }), hover && data.hoverClass),
133
+ style,
134
+ ...eventHandlers,
135
+ onMouseLeave,
136
+ onMouseMove,
137
+ },
138
+ children,
139
+ );
140
+ },
141
+ );
142
+ }
143
+ }
144
+
145
+ HoverSyncElement.prototype.baseClass = "hoversyncelement";
146
+ HoverSyncElement.prototype.styled = true;
147
+ HoverSyncElement.prototype.hoverChannel = "default";
@@ -1,72 +1,72 @@
1
- import { Record } from "../core";
2
- import { RenderingContext } from "./RenderingContext";
3
- import { View } from "../data/View";
4
- import { Widget } from "./Widget";
5
-
6
- export class Instance<ViewModel = any, Controller = any> {
7
- store: View<ViewModel>;
8
- data: Record;
9
- widget: Widget;
10
- key: number;
11
- id: string;
12
- controller: Controller;
13
- parentOptions: any;
14
- children?: Instance[];
15
-
16
- constructor(widget: Widget, key: string | number, parent?: Instance, store?: View);
17
-
18
- setStore(store: View): void;
19
-
20
- init(context: RenderingContext): void;
21
-
22
- explore(context: RenderingContext): boolean;
23
-
24
- prepare(context: RenderingContext): void;
25
-
26
- cleanup(context: RenderingContext): void;
27
-
28
- render(context: RenderingContext, keyPrefix?: string): JSX.Element | void;
29
-
30
- setState(state: Cx.Record): void;
31
-
32
- set(prop: string, value: any, internal?: boolean);
33
-
34
- definePropertySetter(prop: string, setter: (value: any) => void): boolean;
35
-
36
- /**
37
- * @protected
38
- * @param prop
39
- * @param value
40
- * @returns {boolean}
41
- */
42
- protected doSet(prop: string, value: any): boolean;
43
-
44
- replaceState(state: Cx.Config);
45
-
46
- getInstanceCache(): InstanceCache;
47
-
48
- clearChildrenCache();
49
-
50
- getChild(context: RenderingContext | null, widget: Widget, keyPrefix?: string, store?: View): Instance;
51
-
52
- getDetachedChild(widget: Widget, key: number | string, store?: View): Instance;
53
-
54
- // TODO: check return type
55
- prepareRenderCleanupChild(widget: Widget, store?: View, keyPrefix?: string, options?: object): JSX.Element | void;
56
-
57
- getJsxEventProps(): Cx.Config;
58
-
59
- nestedDataSet(key: string, value: any, dataConfig: Cx.Config): boolean;
60
-
61
- invokeControllerMethod(methodName: string, ...args: any[]);
62
- }
63
-
64
- export class InstanceCache {
65
- constructor(parent: Instance);
66
-
67
- getChild(widget: Widget, store: View, keyPrefix?: string): Instance;
68
-
69
- mark();
70
-
71
- sweep();
72
- }
1
+ import { Record } from "../core";
2
+ import { RenderingContext } from "./RenderingContext";
3
+ import { View } from "../data/View";
4
+ import { Widget } from "./Widget";
5
+
6
+ export class Instance<ViewModel = any, Controller = any> {
7
+ store: View<ViewModel>;
8
+ data: Record;
9
+ widget: Widget;
10
+ key: number;
11
+ id: string;
12
+ controller: Controller;
13
+ parentOptions: any;
14
+ children?: Instance[];
15
+
16
+ constructor(widget: Widget, key: string | number, parent?: Instance, store?: View);
17
+
18
+ setStore(store: View): void;
19
+
20
+ init(context: RenderingContext): void;
21
+
22
+ explore(context: RenderingContext): boolean;
23
+
24
+ prepare(context: RenderingContext): void;
25
+
26
+ cleanup(context: RenderingContext): void;
27
+
28
+ render(context: RenderingContext, keyPrefix?: string): JSX.Element | void;
29
+
30
+ setState(state: Cx.Record): void;
31
+
32
+ set(prop: string, value: any, internal?: boolean);
33
+
34
+ definePropertySetter(prop: string, setter: (value: any) => void): boolean;
35
+
36
+ /**
37
+ * @protected
38
+ * @param prop
39
+ * @param value
40
+ * @returns {boolean}
41
+ */
42
+ protected doSet(prop: string, value: any): boolean;
43
+
44
+ replaceState(state: Cx.Config);
45
+
46
+ getInstanceCache(): InstanceCache;
47
+
48
+ clearChildrenCache();
49
+
50
+ getChild(context: RenderingContext | null, widget: Widget, keyPrefix?: string, store?: View): Instance;
51
+
52
+ getDetachedChild(widget: Widget, key: number | string, store?: View): Instance;
53
+
54
+ // TODO: check return type
55
+ prepareRenderCleanupChild(widget: Widget, store?: View, keyPrefix?: string, options?: object): JSX.Element | void;
56
+
57
+ getJsxEventProps(): Cx.Config;
58
+
59
+ nestedDataSet(key: string, value: any, dataConfig: Cx.Config): boolean;
60
+
61
+ invokeControllerMethod(methodName: string, ...args: any[]);
62
+ }
63
+
64
+ export class InstanceCache {
65
+ constructor(parent: Instance);
66
+
67
+ getChild(widget: Widget, store: View, keyPrefix?: string): Instance;
68
+
69
+ mark();
70
+
71
+ sweep();
72
+ }