cx 24.6.4 → 24.6.6

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 (40) hide show
  1. package/dist/charts.js +27 -29
  2. package/dist/data.js +26 -29
  3. package/dist/manifest.js +808 -802
  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 +74 -74
  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/ColorField.js +3 -3
  32. package/src/widgets/form/DateTimeField.js +9 -6
  33. package/src/widgets/form/DateTimePicker.js +9 -8
  34. package/src/widgets/form/MonthField.js +9 -9
  35. package/src/widgets/form/MonthPicker.js +17 -16
  36. package/src/widgets/form/NumberField.js +1 -1
  37. package/src/widgets/form/TextField.js +290 -289
  38. package/src/widgets/form/UploadButton.d.ts +34 -34
  39. package/src/widgets/grid/variables.scss +88 -88
  40. 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();
@@ -7115,7 +7112,8 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
7115
7112
  autoFocus(this.input, this);
7116
7113
  };
7117
7114
  _proto2.componentWillUnmount = function componentWillUnmount() {
7118
- if (this.input == getActiveElement()) this.onChange(this.input.value, "blur");
7115
+ if (this.input == getActiveElement() && this.input.value != this.props.data.value)
7116
+ this.onChange(this.input.value, "blur");
7119
7117
  tooltipParentWillUnmount$1(this.props.instance);
7120
7118
  };
7121
7119
  _proto2.onKeyDown = function onKeyDown(e) {
@@ -7994,14 +7992,14 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
7994
7992
  disabled: data.disabled,
7995
7993
  };
7996
7994
  if (data.value) {
7997
- var d = new Date(data.value);
7995
+ var d = parseDateInvariant(data.value);
7998
7996
  if (!isNaN(d.getTime())) {
7999
7997
  data.date = zeroTime(d);
8000
7998
  }
8001
7999
  }
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));
8000
+ if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
8001
+ if (data.maxValue) data.maxValue = zeroTime(parseDateInvariant(data.maxValue));
8002
+ if (data.minValue) data.minValue = zeroTime(parseDateInvariant(data.minValue));
8005
8003
  _Field.prototype.prepareData.apply(this, arguments);
8006
8004
  };
8007
8005
  _proto.validate = function validate(context, instance) {
@@ -8026,7 +8024,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
8026
8024
  if (widget.disabledDaysOfWeek.includes(data.date.getDay())) data.error = this.disabledDaysOfWeekErrorText;
8027
8025
  }
8028
8026
  if (data.dayData) {
8029
- var date = new Date(data.value);
8027
+ var date = parseDateInvariant(data.value);
8030
8028
  var info = data.dayData[date.toDateString()];
8031
8029
  if (info && info.disabled) data.error = this.disabledDaysOfWeekErrorText;
8032
8030
  }
@@ -8054,7 +8052,7 @@ var Calendar = /*#__PURE__*/ (function (_Field) {
8054
8052
  if (!validationCheck$1(date, data)) return;
8055
8053
  if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date) === false) return;
8056
8054
  if (widget.partial) {
8057
- var mixed = new Date(data.value);
8055
+ var mixed = parseDateInvariant(data.value);
8058
8056
  if (data.value && !isNaN(mixed)) {
8059
8057
  mixed.setFullYear(date.getFullYear());
8060
8058
  mixed.setMonth(date.getMonth());
@@ -10124,7 +10122,7 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
10124
10122
  autoFocus(this.input, this);
10125
10123
  };
10126
10124
  _proto2.componentWillUnmount = function componentWillUnmount() {
10127
- if (this.input == getActiveElement()) {
10125
+ if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
10128
10126
  this.onChange(
10129
10127
  {
10130
10128
  target: {
@@ -10706,14 +10704,14 @@ var MonthPicker = /*#__PURE__*/ (function (_Field) {
10706
10704
  data.stateMods = {
10707
10705
  disabled: data.disabled,
10708
10706
  };
10709
- if (!this.range && data.value) data.date = monthStart(new Date(data.value));
10707
+ if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
10710
10708
  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));
10709
+ if (data.from) data.from = monthStart(parseDateInvariant(data.from));
10710
+ if (data.to) data.to = monthStart(parseDateInvariant(data.to));
10713
10711
  }
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));
10712
+ if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
10713
+ if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
10714
+ if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
10717
10715
  _Field.prototype.prepareData.apply(this, arguments);
10718
10716
  };
10719
10717
  _proto.validate = function validate(context, instance) {
@@ -11990,20 +11988,20 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
11990
11988
  month: "short",
11991
11989
  };
11992
11990
  if (!this.range && data.value) {
11993
- data.date = new Date(data.value);
11991
+ data.date = parseDateInvariant(data.value);
11994
11992
  data.formatted = this.culture.format(data.date, formatOptions);
11995
11993
  } else if (this.range && data.from && data.to) {
11996
- data.from = new Date(data.from);
11997
- data.to = new Date(data.to);
11994
+ data.from = parseDateInvariant(data.from);
11995
+ data.to = parseDateInvariant(data.to);
11998
11996
  data.to.setDate(data.to.getDate() - 1);
11999
11997
  var fromStr = this.culture.format(data.from, formatOptions);
12000
11998
  var toStr = this.culture.format(data.to, formatOptions);
12001
11999
  if (fromStr != toStr) data.formatted = fromStr + " - " + toStr;
12002
12000
  else data.formatted = fromStr;
12003
12001
  }
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));
12002
+ if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
12003
+ if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
12004
+ if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
12007
12005
  instance.lastDropdown = context.lastDropdown;
12008
12006
  };
12009
12007
  _proto.validateRequired = function validateRequired(context, instance) {
@@ -12394,7 +12392,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
12394
12392
  autoFocus(this.input, this);
12395
12393
  };
12396
12394
  _proto2.componentWillUnmount = function componentWillUnmount() {
12397
- if (this.input == getActiveElement()) {
12395
+ if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
12398
12396
  this.onChange(this.input.value, "blur");
12399
12397
  }
12400
12398
  tooltipParentWillUnmount$1(this.props.instance);
@@ -12779,7 +12777,7 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
12779
12777
  if (this.props.instance.widget.autoFocus && !isTouchDevice()) this.input.focus();
12780
12778
  };
12781
12779
  _proto2.componentWillUnmount = function componentWillUnmount() {
12782
- if (this.input == getActiveElement()) {
12780
+ if (this.input == getActiveElement() && this.input.value != this.props.data.value) {
12783
12781
  this.onChange(this.input.value, "blur");
12784
12782
  }
12785
12783
  tooltipParentWillUnmount$1(this.props.instance);
@@ -13868,7 +13866,7 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13868
13866
  _proto2.scrollTo = function scrollTo() {
13869
13867
  var _this4 = this;
13870
13868
  var size = this.props.size;
13871
- var callback = function callback() {
13869
+ var _callback = function callback() {
13872
13870
  if (!_this4.scrolling) return;
13873
13871
  var x = (_this4.index * _this4.state.wheelHeight) / size;
13874
13872
  var delta = Math.round(x - _this4.scrollEl.scrollTop);
@@ -13880,11 +13878,11 @@ var WheelComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13880
13878
  delta = Math.abs(delta) / 10;
13881
13879
  if (delta < 1) delta = 1;
13882
13880
  _this4.scrollEl.scrollTop += sign * delta;
13883
- requestAnimationFrame(callback);
13881
+ requestAnimationFrame(_callback);
13884
13882
  };
13885
13883
  if (!this.scrolling) {
13886
13884
  this.scrolling = true;
13887
- requestAnimationFrame(callback);
13885
+ requestAnimationFrame(_callback);
13888
13886
  }
13889
13887
  };
13890
13888
  return WheelComponent;
@@ -13932,7 +13930,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13932
13930
  function DateTimePickerComponent(props) {
13933
13931
  var _this;
13934
13932
  _this = _VDOM$Component.call(this, props) || this;
13935
- var date = props.data.value ? new Date(props.data.value) : new Date();
13933
+ var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
13936
13934
  if (isNaN(date.getTime())) date = new Date();
13937
13935
  _this.state = {
13938
13936
  date: date,
@@ -13959,7 +13957,7 @@ var DateTimePickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
13959
13957
  _inheritsLoose(DateTimePickerComponent, _VDOM$Component);
13960
13958
  var _proto2 = DateTimePickerComponent.prototype;
13961
13959
  _proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
13962
- var date = props.data.value ? new Date(props.data.value) : new Date();
13960
+ var date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
13963
13961
  if (isNaN(date.getTime())) date = new Date();
13964
13962
  this.setState({
13965
13963
  date: date,
@@ -14483,7 +14481,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
14483
14481
  _proto.prepareData = function prepareData(context, instance) {
14484
14482
  var data = instance.data;
14485
14483
  if (data.value) {
14486
- var date = new Date(data.value);
14484
+ var date = parseDateInvariant(data.value);
14485
+ // let date = new Date(data.value);
14486
+
14487
14487
  if (isNaN(date.getTime())) data.formatted = String(data.value);
14488
14488
  else {
14489
14489
  // handle utc edge cases
@@ -14492,9 +14492,9 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
14492
14492
  }
14493
14493
  data.date = date;
14494
14494
  } 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);
14495
+ if (data.refDate) data.refDate = zeroTime(parseDateInvariant(data.refDate));
14496
+ if (data.maxValue) data.maxValue = parseDateInvariant(data.maxValue);
14497
+ if (data.minValue) data.minValue = parseDateInvariant(data.minValue);
14498
14498
  if (this.segment == "date") {
14499
14499
  if (data.minValue) data.minValue = zeroTime(data.minValue);
14500
14500
  if (data.maxValue) data.maxValue = zeroTime(data.maxValue);
@@ -14926,7 +14926,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
14926
14926
  autoFocus(this.input, this);
14927
14927
  };
14928
14928
  _proto2.componentWillUnmount = function componentWillUnmount() {
14929
- if (this.input == getActiveElement()) {
14929
+ if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
14930
14930
  this.onChange(this.input.value, "blur");
14931
14931
  }
14932
14932
  tooltipParentWillUnmount$1(this.props.instance);
@@ -14954,7 +14954,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
14954
14954
  inputError: isNaN(date) && widget.inputErrorText,
14955
14955
  });
14956
14956
  if (!isNaN(date)) {
14957
- var mixed = new Date(baseValue);
14957
+ var mixed = parseDateInvariant(baseValue);
14958
14958
  if (date && baseValue && !isNaN(mixed) && widget.partial) {
14959
14959
  switch (widget.segment) {
14960
14960
  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.6",
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;