cx 24.6.4 → 24.6.5

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 (38) hide show
  1. package/dist/charts.js +27 -29
  2. package/dist/data.js +26 -29
  3. package/dist/manifest.js +802 -796
  4. package/dist/svg.js +59 -56
  5. package/dist/ui.js +51 -52
  6. package/dist/util.js +56 -10
  7. package/dist/widgets.js +68 -69
  8. package/package.json +1 -1
  9. package/src/charts/Legend.js +151 -151
  10. package/src/charts/Marker.d.ts +96 -96
  11. package/src/charts/Marker.js +299 -299
  12. package/src/charts/axis/Axis.d.ts +96 -96
  13. package/src/charts/axis/NumericAxis.js +347 -347
  14. package/src/charts/axis/Stack.js +55 -55
  15. package/src/charts/axis/TimeAxis.js +7 -6
  16. package/src/data/Binding.spec.js +69 -69
  17. package/src/data/StringTemplate.spec.js +105 -105
  18. package/src/data/getAccessor.spec.js +11 -11
  19. package/src/ui/Controller.d.ts +182 -182
  20. package/src/ui/FocusManager.js +171 -171
  21. package/src/ui/Format.js +3 -3
  22. package/src/ui/Instance.d.ts +72 -72
  23. package/src/ui/index.d.ts +42 -42
  24. package/src/util/Format.js +6 -5
  25. package/src/util/date/index.d.ts +10 -9
  26. package/src/util/date/index.js +10 -9
  27. package/src/util/date/parseDateInvariant.d.ts +3 -0
  28. package/src/util/date/parseDateInvariant.js +20 -0
  29. package/src/widgets/drag-drop/DropZone.js +214 -214
  30. package/src/widgets/form/Calendar.js +7 -6
  31. package/src/widgets/form/DateTimeField.js +8 -5
  32. package/src/widgets/form/DateTimePicker.js +9 -8
  33. package/src/widgets/form/MonthField.js +8 -8
  34. package/src/widgets/form/MonthPicker.js +17 -16
  35. package/src/widgets/form/TextField.js +289 -289
  36. package/src/widgets/form/UploadButton.d.ts +34 -34
  37. package/src/widgets/grid/variables.scss +88 -88
  38. package/src/widgets/overlay/Dropdown.js +612 -612
package/dist/widgets.js CHANGED
@@ -107,6 +107,7 @@ import {
107
107
  monthStart,
108
108
  zeroTime,
109
109
  sameDate,
110
+ parseDateInvariant,
110
111
  dateDiff,
111
112
  upperBoundCheck,
112
113
  lowerBoundCheck,
@@ -141,45 +142,41 @@ import { HtmlElement as HtmlElement$1 } from "cx/widgets";
141
142
  import { parseStyle as parseStyle$1 } from "cx/src/util/parseStyle";
142
143
 
143
144
  function _extends() {
144
- _extends = Object.assign
145
- ? Object.assign.bind()
146
- : function (target) {
147
- for (var i = 1; i < arguments.length; i++) {
148
- var source = arguments[i];
149
- for (var key in source) {
150
- if (Object.prototype.hasOwnProperty.call(source, key)) {
151
- target[key] = source[key];
152
- }
145
+ return (
146
+ (_extends = Object.assign
147
+ ? Object.assign.bind()
148
+ : function (n) {
149
+ for (var e = 1; e < arguments.length; e++) {
150
+ var t = arguments[e];
151
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
153
152
  }
154
- }
155
- return target;
156
- };
157
- return _extends.apply(this, arguments);
158
- }
159
- function _inheritsLoose(subClass, superClass) {
160
- subClass.prototype = Object.create(superClass.prototype);
161
- subClass.prototype.constructor = subClass;
162
- _setPrototypeOf(subClass, superClass);
153
+ return n;
154
+ }),
155
+ _extends.apply(null, arguments)
156
+ );
163
157
  }
164
- function _setPrototypeOf(o, p) {
165
- _setPrototypeOf = Object.setPrototypeOf
166
- ? Object.setPrototypeOf.bind()
167
- : function _setPrototypeOf(o, p) {
168
- o.__proto__ = p;
169
- return o;
170
- };
171
- return _setPrototypeOf(o, p);
158
+ function _inheritsLoose(t, o) {
159
+ (t.prototype = Object.create(o.prototype)), (t.prototype.constructor = t), _setPrototypeOf(t, o);
172
160
  }
173
- function _objectWithoutPropertiesLoose(source, excluded) {
174
- if (source == null) return {};
175
- var target = {};
176
- for (var key in source) {
177
- if (Object.prototype.hasOwnProperty.call(source, key)) {
178
- if (excluded.indexOf(key) >= 0) continue;
179
- target[key] = source[key];
161
+ function _objectWithoutPropertiesLoose(r, e) {
162
+ if (null == r) return {};
163
+ var t = {};
164
+ for (var n in r)
165
+ if ({}.hasOwnProperty.call(r, n)) {
166
+ if (e.includes(n)) continue;
167
+ t[n] = r[n];
180
168
  }
181
- }
182
- return target;
169
+ return t;
170
+ }
171
+ function _setPrototypeOf(t, e) {
172
+ return (
173
+ (_setPrototypeOf = Object.setPrototypeOf
174
+ ? Object.setPrototypeOf.bind()
175
+ : function (t, e) {
176
+ return (t.__proto__ = e), t;
177
+ }),
178
+ _setPrototypeOf(t, e)
179
+ );
183
180
  }
184
181
 
185
182
  var impl$1 = false;
@@ -2267,16 +2264,16 @@ function captureMouseOrTouch2(e, _ref2) {
2267
2264
  e.preventDefault();
2268
2265
  });
2269
2266
  };
2270
- var end = function end(e) {
2267
+ var _end = function end(e) {
2271
2268
  batchUpdates(function () {
2272
2269
  el.removeEventListener("touchmove", move);
2273
- el.removeEventListener("touchend", end);
2270
+ el.removeEventListener("touchend", _end);
2274
2271
  if (onMouseUp) onMouseUp(e);
2275
2272
  e.preventDefault();
2276
2273
  });
2277
2274
  };
2278
2275
  el.addEventListener("touchmove", move);
2279
- el.addEventListener("touchend", end);
2276
+ el.addEventListener("touchend", _end);
2280
2277
  e.stopPropagation();
2281
2278
  } else
2282
2279
  captureMouse2(e, {
@@ -2717,7 +2714,7 @@ function notifyDragMove(e, captureData) {
2717
2714
  }
2718
2715
  if (scrollY || scrollX) {
2719
2716
  if (!scrollTimer) {
2720
- var cb = function cb() {
2717
+ var _cb = function cb() {
2721
2718
  if (scrollY) {
2722
2719
  var current = vscrollParent.scrollTop;
2723
2720
  var next = Math.min(
@@ -2734,9 +2731,9 @@ function notifyDragMove(e, captureData) {
2734
2731
  ); //60 FPS
2735
2732
  hscrollParent.scrollLeft = _next;
2736
2733
  }
2737
- scrollTimer = requestAnimationFrame(cb);
2734
+ scrollTimer = requestAnimationFrame(_cb);
2738
2735
  };
2739
- scrollTimer = requestAnimationFrame(cb);
2736
+ scrollTimer = requestAnimationFrame(_cb);
2740
2737
  }
2741
2738
  } else {
2742
2739
  clearScrollTimer();
@@ -7994,14 +7991,14 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
7994
7991
  disabled: data.disabled,
7995
7992
  };
7996
7993
  if (data.value) {
7997
- var d = new Date(data.value);
7994
+ var d = parseDateInvariant(data.value);
7998
7995
  if (!isNaN(d.getTime())) {
7999
7996
  data.date = zeroTime(d);
8000
7997
  }
8001
7998
  }
8002
- if (data.refDate) data.refDate = zeroTime(new Date(data.refDate));
8003
- if (data.maxValue) data.maxValue = zeroTime(new Date(data.maxValue));
8004
- if (data.minValue) data.minValue = zeroTime(new Date(data.minValue));
7999
+ if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
8000
+ if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
8001
+ if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
8005
8002
  _Field.prototype.prepareData.apply(this, arguments);
8006
8003
  };
8007
8004
  _proto.validate = function validate(context, instance) {
@@ -8026,7 +8023,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
8026
8023
  if (widget.disabledDaysOfWeek.includes(data.date.getDay())) data.error = this.disabledDaysOfWeekErrorText;
8027
8024
  }
8028
8025
  if (data.dayData) {
8029
- var date = new Date(data.value);
8026
+ var date = parseDateInvariant(data.value);
8030
8027
  var info = data.dayData[date.toDateString()];
8031
8028
  if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
8032
8029
  }
@@ -8054,7 +8051,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
8054
8051
  if (!validationCheck$1(date, data)) return;
8055
8052
  if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
8056
8053
  if (widget.partial) {
8057
- var mixed = new Date(data.value);
8054
+ var mixed = parseDateInvariant(data.value);
8058
8055
  if (data.value && !isNaN(mixed)) {
8059
8056
  mixed.setFullYear(date.getFullYear());
8060
8057
  mixed.setMonth(date.getMonth());
@@ -10706,14 +10703,14 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
10706
10703
  data.stateMods = {
10707
10704
  disabled: data.disabled,
10708
10705
  };
10709
- if (!this.range && data.value) data.date = monthStart(new Date(data.value));
10706
+ if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
10710
10707
  if (this.range) {
10711
- if (data.from) data.from = monthStart(new Date(data.from));
10712
- if (data.to) data.to = monthStart(new Date(data.to));
10708
+ if (data.from) data.from = monthStart(parseDateInvariant(data.from));
10709
+ if (data.to) data.to = monthStart(parseDateInvariant(data.to));
10713
10710
  }
10714
- if (data.refDate) data.refDate = monthStart(new Date(data.refDate));
10715
- if (data.maxValue) data.maxValue = monthStart(new Date(data.maxValue));
10716
- if (data.minValue) data.minValue = monthStart(new Date(data.minValue));
10711
+ if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
10712
+ if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
10713
+ if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
10717
10714
  _Field.prototype.prepareData.apply(this, arguments);
10718
10715
  };
10719
10716
  _proto.validate = function validate(context, instance) {
@@ -11990,20 +11987,20 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
11990
11987
  month: "short",
11991
11988
  };
11992
11989
  if (!this.range && data.value) {
11993
- data.date = new Date(data.value);
11990
+ data.date = parseDateInvariant(data.value);
11994
11991
  data.formatted = this.culture.format(data.date, formatOptions);
11995
11992
  } else if (this.range && data.from && data.to) {
11996
- data.from = new Date(data.from);
11997
- data.to = new Date(data.to);
11993
+ data.from = parseDateInvariant(data.from);
11994
+ data.to = parseDateInvariant(data.to);
11998
11995
  data.to.setDate(data.to.getDate() - 1);
11999
11996
  var fromStr = this.culture.format(data.from, formatOptions);
12000
11997
  var toStr = this.culture.format(data.to, formatOptions);
12001
11998
  if (fromStr != toStr) data.formatted = fromStr + " - " + toStr;
12002
11999
  else data.formatted = fromStr;
12003
12000
  }
12004
- if (data.refDate) data.refDate = monthStart(new Date(data.refDate));
12005
- if (data.maxValue) data.maxValue = monthStart(new Date(data.maxValue));
12006
- if (data.minValue) data.minValue = monthStart(new Date(data.minValue));
12001
+ if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
12002
+ if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
12003
+ if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
12007
12004
  instance.lastDropdown = context.lastDropdown;
12008
12005
  };
12009
12006
  _proto.validateRequired = function validateRequired(context, instance) {
@@ -13868,7 +13865,7 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13868
13865
  _proto2.scrollTo = function scrollTo() {
13869
13866
  var _this4 = this;
13870
13867
  var size = this.props.size;
13871
- var callback = function callback() {
13868
+ var _callback = function callback() {
13872
13869
  if (!_this4.scrolling) return;
13873
13870
  var x = (_this4.index * _this4.state.wheelHeight) / size;
13874
13871
  var delta = Math.round(x - _this4.scrollEl.scrollTop);
@@ -13880,11 +13877,11 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13880
13877
  delta = Math.abs(delta) / 10;
13881
13878
  if (delta < 1) delta = 1;
13882
13879
  _this4.scrollEl.scrollTop += sign * delta;
13883
- requestAnimationFrame(callback);
13880
+ requestAnimationFrame(_callback);
13884
13881
  };
13885
13882
  if (!this.scrolling) {
13886
13883
  this.scrolling = true;
13887
- requestAnimationFrame(callback);
13884
+ requestAnimationFrame(_callback);
13888
13885
  }
13889
13886
  };
13890
13887
  return WheelComponent;
@@ -13932,7 +13929,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13932
13929
  function DateTimePickerComponent(props) {
13933
13930
  var _this;
13934
13931
  _this = _VDOM$Component.call(this, props) || this;
13935
- var date = props.data.value ? new Date(props.data.value) : new Date();
13932
+ var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
13936
13933
  if (isNaN(date.getTime())) date = new Date();
13937
13934
  _this.state = {
13938
13935
  date: date,
@@ -13959,7 +13956,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13959
13956
  _inheritsLoose(DateTimePickerComponent, _VDOM$Component);
13960
13957
  var _proto2 = DateTimePickerComponent.prototype;
13961
13958
  _proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
13962
- var date = props.data.value ? new Date(props.data.value) : new Date();
13959
+ var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
13963
13960
  if (isNaN(date.getTime())) date = new Date();
13964
13961
  this.setState({
13965
13962
  date: date,
@@ -14483,7 +14480,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
14483
14480
  _proto.prepareData = function prepareData(context, instance) {
14484
14481
  var data = instance.data;
14485
14482
  if (data.value) {
14486
- var date = new Date(data.value);
14483
+ var date = parseDateInvariant(data.value);
14484
+ // let date = new Date(data.value);
14485
+
14487
14486
  if (isNaN(date.getTime())) data.formatted = String(data.value);
14488
14487
  else {
14489
14488
  // handle utc edge cases
@@ -14492,9 +14491,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
14492
14491
  }
14493
14492
  data.date = date;
14494
14493
  } else data.formatted = "";
14495
- if (data.refDate) data.refDate = zeroTime(new Date(data.refDate));
14496
- if (data.maxValue) data.maxValue = new Date(data.maxValue);
14497
- if (data.minValue) data.minValue = new Date(data.minValue);
14494
+ if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
14495
+ if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
14496
+ if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
14498
14497
  if (this.segment == "date") {
14499
14498
  if (data.minValue) data.minValue = zeroTime(data.minValue);
14500
14499
  if (data.maxValue) data.maxValue = zeroTime(data.maxValue);
@@ -14954,7 +14953,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
14954
14953
  inputError: isNaN(date) && widget.inputErrorText,
14955
14954
  });
14956
14955
  if (!isNaN(date)) {
14957
- var mixed = new Date(baseValue);
14956
+ var mixed = parseDateInvariant(baseValue);
14958
14957
  if (date && baseValue && !isNaN(mixed) && widget.partial) {
14959
14958
  switch (widget.segment) {
14960
14959
  case "date":
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cx",
3
- "version": "24.6.4",
3
+ "version": "24.6.5",
4
4
  "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
5
5
  "main": "index.js",
6
6
  "jsnext:main": "src/index.js",
@@ -1,151 +1,151 @@
1
- import { Widget, VDOM } from "../ui/Widget";
2
- import { HtmlElement } from "../widgets/HtmlElement";
3
- import { PureContainer } from "../ui/PureContainer";
4
- import { getShape } from "./shapes";
5
- import { isUndefined } from "../util/isUndefined";
6
- import { isArray } from "../util/isArray";
7
- import { withHoverSync } from "../ui/HoverSync";
8
-
9
- export class Legend extends HtmlElement {
10
- prepareData(context, instance) {
11
- let { data } = instance;
12
- data.stateMods = Object.assign(data.stateMods || {}, {
13
- vertical: this.vertical,
14
- });
15
- super.prepareData(context, instance);
16
- }
17
-
18
- declareData() {
19
- super.declareData(...arguments, {
20
- shape: undefined,
21
- });
22
- }
23
-
24
- isValidHtmlAttribute(attrName) {
25
- switch (attrName) {
26
- case "shapeSize":
27
- case "svgSize":
28
- case "shape":
29
- return false;
30
-
31
- default:
32
- return super.isValidHtmlAttribute(attrName);
33
- }
34
- }
35
-
36
- explore(context, instance) {
37
- if (!context.legends) context.legends = {};
38
-
39
- instance.legends = context.legends;
40
-
41
- context.addLegendEntry = (legendName, entry) => {
42
- if (!legendName) return;
43
-
44
- //case when all legends are scoped and new entry is added outside the scope
45
- if (!context.legends) return;
46
-
47
- let legend = context.legends[legendName];
48
- if (!legend)
49
- legend = context.legends[legendName] = {
50
- entries: [],
51
- names: {},
52
- };
53
-
54
- if (!legend.names[entry.name]) {
55
- legend.entries.push(entry);
56
- legend.names[entry.name] = entry;
57
- }
58
- };
59
-
60
- super.explore(context, instance);
61
- }
62
-
63
- renderChildren(context, instance) {
64
- const CSS = this.CSS;
65
-
66
- let entries = instance.legends[this.name] && instance.legends[this.name].entries,
67
- list;
68
-
69
- if (isArray(entries) && entries.length > 0) {
70
- list = (
71
- <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
72
- {entries.map((e, i) =>
73
- withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
74
- <div
75
- key={i}
76
- className={CSS.element(this.baseClass, "entry", {
77
- "color-root": true,
78
- hover,
79
- disabled: e.disabled,
80
- selected: e.selected,
81
- })}
82
- onClick={e.onClick}
83
- onMouseMove={onMouseMove}
84
- onMouseLeave={onMouseLeave}
85
- >
86
- {this.renderShape(e, instance.data.shape)}
87
- {e.name}
88
- </div>
89
- )),
90
- )}
91
- </div>
92
- );
93
- }
94
-
95
- return [list, super.renderChildren(context, instance)];
96
- }
97
-
98
- renderShape(entry, legendEntriesShape) {
99
- const className = this.CSS.element(this.baseClass, "shape", {
100
- [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
101
- });
102
- const shape = getShape(legendEntriesShape || entry.shape || "square");
103
-
104
- return (
105
- <svg
106
- className={this.CSS.element(this.baseClass, "svg")}
107
- style={{
108
- width: `${this.svgSize}px`,
109
- height: `${this.svgSize}px`,
110
- marginTop: `${-this.svgSize / 2}px`,
111
- }}
112
- >
113
- {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
114
- style: entry.style,
115
- className: className,
116
- })}
117
- </svg>
118
- );
119
- }
120
- }
121
-
122
- Legend.prototype.name = "legend";
123
- Legend.prototype.baseClass = "legend";
124
- Legend.prototype.vertical = false;
125
- Legend.prototype.memoize = false;
126
- Legend.prototype.shapeSize = 18;
127
- Legend.prototype.shape = null;
128
- Legend.prototype.svgSize = 20;
129
-
130
- Widget.alias("legend", Legend);
131
-
132
- Legend.Scope = class extends PureContainer {
133
- explore(context, instance) {
134
- context.push("legends", (instance.legends = {}));
135
- super.explore(context, instance);
136
- }
137
-
138
- exploreCleanup(context, instance) {
139
- context.pop("legends");
140
- }
141
-
142
- prepare(context, instance) {
143
- context.push("legends", instance.legends);
144
- }
145
-
146
- prepareCleanup(context, instance) {
147
- context.pop("legends");
148
- }
149
- };
150
-
151
- export const LegendScope = Legend.Scope;
1
+ import { Widget, VDOM } from "../ui/Widget";
2
+ import { HtmlElement } from "../widgets/HtmlElement";
3
+ import { PureContainer } from "../ui/PureContainer";
4
+ import { getShape } from "./shapes";
5
+ import { isUndefined } from "../util/isUndefined";
6
+ import { isArray } from "../util/isArray";
7
+ import { withHoverSync } from "../ui/HoverSync";
8
+
9
+ export class Legend extends HtmlElement {
10
+ prepareData(context, instance) {
11
+ let { data } = instance;
12
+ data.stateMods = Object.assign(data.stateMods || {}, {
13
+ vertical: this.vertical,
14
+ });
15
+ super.prepareData(context, instance);
16
+ }
17
+
18
+ declareData() {
19
+ super.declareData(...arguments, {
20
+ shape: undefined,
21
+ });
22
+ }
23
+
24
+ isValidHtmlAttribute(attrName) {
25
+ switch (attrName) {
26
+ case "shapeSize":
27
+ case "svgSize":
28
+ case "shape":
29
+ return false;
30
+
31
+ default:
32
+ return super.isValidHtmlAttribute(attrName);
33
+ }
34
+ }
35
+
36
+ explore(context, instance) {
37
+ if (!context.legends) context.legends = {};
38
+
39
+ instance.legends = context.legends;
40
+
41
+ context.addLegendEntry = (legendName, entry) => {
42
+ if (!legendName) return;
43
+
44
+ //case when all legends are scoped and new entry is added outside the scope
45
+ if (!context.legends) return;
46
+
47
+ let legend = context.legends[legendName];
48
+ if (!legend)
49
+ legend = context.legends[legendName] = {
50
+ entries: [],
51
+ names: {},
52
+ };
53
+
54
+ if (!legend.names[entry.name]) {
55
+ legend.entries.push(entry);
56
+ legend.names[entry.name] = entry;
57
+ }
58
+ };
59
+
60
+ super.explore(context, instance);
61
+ }
62
+
63
+ renderChildren(context, instance) {
64
+ const CSS = this.CSS;
65
+
66
+ let entries = instance.legends[this.name] && instance.legends[this.name].entries,
67
+ list;
68
+
69
+ if (isArray(entries) && entries.length > 0) {
70
+ list = (
71
+ <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
72
+ {entries.map((e, i) =>
73
+ withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
74
+ <div
75
+ key={i}
76
+ className={CSS.element(this.baseClass, "entry", {
77
+ "color-root": true,
78
+ hover,
79
+ disabled: e.disabled,
80
+ selected: e.selected,
81
+ })}
82
+ onClick={e.onClick}
83
+ onMouseMove={onMouseMove}
84
+ onMouseLeave={onMouseLeave}
85
+ >
86
+ {this.renderShape(e, instance.data.shape)}
87
+ {e.name}
88
+ </div>
89
+ )),
90
+ )}
91
+ </div>
92
+ );
93
+ }
94
+
95
+ return [list, super.renderChildren(context, instance)];
96
+ }
97
+
98
+ renderShape(entry, legendEntriesShape) {
99
+ const className = this.CSS.element(this.baseClass, "shape", {
100
+ [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
101
+ });
102
+ const shape = getShape(legendEntriesShape || entry.shape || "square");
103
+
104
+ return (
105
+ <svg
106
+ className={this.CSS.element(this.baseClass, "svg")}
107
+ style={{
108
+ width: `${this.svgSize}px`,
109
+ height: `${this.svgSize}px`,
110
+ marginTop: `${-this.svgSize / 2}px`,
111
+ }}
112
+ >
113
+ {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
114
+ style: entry.style,
115
+ className: className,
116
+ })}
117
+ </svg>
118
+ );
119
+ }
120
+ }
121
+
122
+ Legend.prototype.name = "legend";
123
+ Legend.prototype.baseClass = "legend";
124
+ Legend.prototype.vertical = false;
125
+ Legend.prototype.memoize = false;
126
+ Legend.prototype.shapeSize = 18;
127
+ Legend.prototype.shape = null;
128
+ Legend.prototype.svgSize = 20;
129
+
130
+ Widget.alias("legend", Legend);
131
+
132
+ Legend.Scope = class extends PureContainer {
133
+ explore(context, instance) {
134
+ context.push("legends", (instance.legends = {}));
135
+ super.explore(context, instance);
136
+ }
137
+
138
+ exploreCleanup(context, instance) {
139
+ context.pop("legends");
140
+ }
141
+
142
+ prepare(context, instance) {
143
+ context.push("legends", instance.legends);
144
+ }
145
+
146
+ prepareCleanup(context, instance) {
147
+ context.pop("legends");
148
+ }
149
+ };
150
+
151
+ export const LegendScope = Legend.Scope;