cx 23.5.1 → 23.5.3
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.
- package/dist/charts.js +5 -4
- package/dist/manifest.js +686 -680
- package/dist/ui.js +5 -9
- package/dist/util.js +75 -10
- package/dist/widgets.js +32 -33
- package/package.json +1 -1
- package/src/charts/axis/TimeAxis.js +7 -6
- package/src/data/StringTemplate.spec.js +95 -105
- package/src/ui/FocusManager.js +171 -171
- package/src/ui/Format.js +53 -69
- package/src/util/Format.js +73 -86
- package/src/util/date/index.d.ts +10 -9
- package/src/util/date/index.js +10 -9
- package/src/util/date/parseDateInvariant.d.ts +3 -0
- package/src/util/date/parseDateInvariant.js +20 -0
- package/src/widgets/form/Calendar.js +27 -26
- package/src/widgets/form/DateTimeField.d.ts +86 -86
- package/src/widgets/form/DateTimeField.js +575 -572
- package/src/widgets/form/DateTimePicker.js +9 -8
- package/src/widgets/form/MonthField.js +30 -30
- package/src/widgets/form/MonthPicker.js +17 -16
- package/src/widgets/grid/Grid.js +3266 -3273
|
@@ -5,6 +5,7 @@ import { WheelComponent } from "./Wheel";
|
|
|
5
5
|
import { oneFocusOut, offFocusOut } from "../../ui/FocusManager";
|
|
6
6
|
|
|
7
7
|
import { enableCultureSensitiveFormatting } from "../../ui/Format";
|
|
8
|
+
import { parseDateInvariant } from "../../util";
|
|
8
9
|
enableCultureSensitiveFormatting();
|
|
9
10
|
|
|
10
11
|
export class DateTimePicker extends Widget {
|
|
@@ -37,7 +38,7 @@ DateTimePicker.prototype.showSeconds = false;
|
|
|
37
38
|
class DateTimePickerComponent extends VDOM.Component {
|
|
38
39
|
constructor(props) {
|
|
39
40
|
super(props);
|
|
40
|
-
let date = props.data.value ?
|
|
41
|
+
let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
|
|
41
42
|
if (isNaN(date.getTime())) date = new Date();
|
|
42
43
|
this.state = {
|
|
43
44
|
date: date,
|
|
@@ -67,7 +68,7 @@ class DateTimePickerComponent extends VDOM.Component {
|
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
UNSAFE_componentWillReceiveProps(props) {
|
|
70
|
-
let date = props.data.value ?
|
|
71
|
+
let date = props.data.value ? parseDateInvariant(props.data.value) : new Date();
|
|
71
72
|
if (isNaN(date.getTime())) date = new Date();
|
|
72
73
|
this.setState({ date });
|
|
73
74
|
}
|
|
@@ -160,7 +161,7 @@ class DateTimePickerComponent extends VDOM.Component {
|
|
|
160
161
|
(state) => ({
|
|
161
162
|
date: this.setDateComponent(this.state.date, "year", newIndex + 1970),
|
|
162
163
|
}),
|
|
163
|
-
this.handleChange
|
|
164
|
+
this.handleChange,
|
|
164
165
|
);
|
|
165
166
|
}}
|
|
166
167
|
onPipeKeyDown={(kd) => {
|
|
@@ -186,7 +187,7 @@ class DateTimePickerComponent extends VDOM.Component {
|
|
|
186
187
|
(state) => ({
|
|
187
188
|
date: this.setDateComponent(this.state.date, "month", newIndex),
|
|
188
189
|
}),
|
|
189
|
-
this.handleChange
|
|
190
|
+
this.handleChange,
|
|
190
191
|
);
|
|
191
192
|
}}
|
|
192
193
|
onPipeKeyDown={(kd) => {
|
|
@@ -214,7 +215,7 @@ class DateTimePickerComponent extends VDOM.Component {
|
|
|
214
215
|
(state) => ({
|
|
215
216
|
date: this.setDateComponent(this.state.date, "date", newIndex + 1),
|
|
216
217
|
}),
|
|
217
|
-
this.handleChange
|
|
218
|
+
this.handleChange,
|
|
218
219
|
);
|
|
219
220
|
}}
|
|
220
221
|
onPipeKeyDown={(kd) => {
|
|
@@ -240,7 +241,7 @@ class DateTimePickerComponent extends VDOM.Component {
|
|
|
240
241
|
(state) => ({
|
|
241
242
|
date: this.setDateComponent(this.state.date, "hours", newIndex),
|
|
242
243
|
}),
|
|
243
|
-
this.handleChange
|
|
244
|
+
this.handleChange,
|
|
244
245
|
);
|
|
245
246
|
}}
|
|
246
247
|
onPipeKeyDown={(kd) => {
|
|
@@ -266,7 +267,7 @@ class DateTimePickerComponent extends VDOM.Component {
|
|
|
266
267
|
(state) => ({
|
|
267
268
|
date: this.setDateComponent(this.state.date, "minutes", newIndex),
|
|
268
269
|
}),
|
|
269
|
-
this.handleChange
|
|
270
|
+
this.handleChange,
|
|
270
271
|
);
|
|
271
272
|
}}
|
|
272
273
|
onPipeKeyDown={(kd) => {
|
|
@@ -292,7 +293,7 @@ class DateTimePickerComponent extends VDOM.Component {
|
|
|
292
293
|
(state) => ({
|
|
293
294
|
date: this.setDateComponent(this.state.date, "seconds", newIndex),
|
|
294
295
|
}),
|
|
295
|
-
this.handleChange
|
|
296
|
+
this.handleChange,
|
|
296
297
|
);
|
|
297
298
|
}}
|
|
298
299
|
onPipeKeyDown={(kd) => {
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { Widget, VDOM, getContent } from "../../ui/Widget";
|
|
2
|
-
import { Cx } from "../../ui/Cx";
|
|
3
|
-
import { Field, getFieldTooltip } from "./Field";
|
|
4
|
-
import { MonthPicker } from "./MonthPicker";
|
|
5
1
|
import { DateTimeCulture } from "intl-io";
|
|
6
|
-
import { Format } from "../../util/Format";
|
|
7
|
-
import { Dropdown } from "../overlay/Dropdown";
|
|
8
|
-
import { Console } from "../../util/Console";
|
|
9
2
|
import { StringTemplate } from "../../data/StringTemplate";
|
|
10
|
-
import {
|
|
3
|
+
import { Cx } from "../../ui/Cx";
|
|
4
|
+
import { Localization } from "../../ui/Localization";
|
|
5
|
+
import { VDOM, Widget, getContent } from "../../ui/Widget";
|
|
6
|
+
import { parseDateInvariant } from "../../util";
|
|
7
|
+
import { Console } from "../../util/Console";
|
|
8
|
+
import { Format } from "../../util/Format";
|
|
9
|
+
import { KeyCode } from "../../util/KeyCode";
|
|
11
10
|
import { dateDiff } from "../../util/date/dateDiff";
|
|
11
|
+
import { monthStart } from "../../util/date/monthStart";
|
|
12
|
+
import { stopPropagation } from "../../util/eventCallbacks";
|
|
13
|
+
import { isDefined } from "../../util/isDefined";
|
|
14
|
+
import { isTouchDevice } from "../../util/isTouchDevice";
|
|
15
|
+
import { isTouchEvent } from "../../util/isTouchEvent";
|
|
16
|
+
import { Icon } from "../Icon";
|
|
17
|
+
import { autoFocus } from "../autoFocus";
|
|
18
|
+
import ClearIcon from "../icons/clear";
|
|
19
|
+
import DropdownIcon from "../icons/drop-down";
|
|
20
|
+
import { Dropdown } from "../overlay/Dropdown";
|
|
12
21
|
import {
|
|
13
|
-
tooltipParentWillReceiveProps,
|
|
14
|
-
tooltipParentWillUnmount,
|
|
15
|
-
tooltipMouseMove,
|
|
16
22
|
tooltipMouseLeave,
|
|
23
|
+
tooltipMouseMove,
|
|
17
24
|
tooltipParentDidMount,
|
|
25
|
+
tooltipParentWillReceiveProps,
|
|
26
|
+
tooltipParentWillUnmount,
|
|
18
27
|
} from "../overlay/tooltip-ops";
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import CalendarIcon from "../icons/calendar";
|
|
22
|
-
import DropdownIcon from "../icons/drop-down";
|
|
23
|
-
import ClearIcon from "../icons/clear";
|
|
24
|
-
import { KeyCode } from "../../util/KeyCode";
|
|
25
|
-
import { isTouchEvent } from "../../util/isTouchEvent";
|
|
26
|
-
import { isTouchDevice } from "../../util/isTouchDevice";
|
|
27
|
-
import { Localization } from "../../ui/Localization";
|
|
28
|
-
import { isDefined } from "../../util/isDefined";
|
|
29
|
-
import { autoFocus } from "../autoFocus";
|
|
28
|
+
import { Field, getFieldTooltip } from "./Field";
|
|
29
|
+
import { MonthPicker } from "./MonthPicker";
|
|
30
30
|
|
|
31
31
|
export class MonthField extends Field {
|
|
32
32
|
declareData() {
|
|
@@ -63,7 +63,7 @@ export class MonthField extends Field {
|
|
|
63
63
|
maxExclusive: undefined,
|
|
64
64
|
icon: undefined,
|
|
65
65
|
},
|
|
66
|
-
...arguments
|
|
66
|
+
...arguments,
|
|
67
67
|
);
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -92,11 +92,11 @@ export class MonthField extends Field {
|
|
|
92
92
|
};
|
|
93
93
|
|
|
94
94
|
if (!this.range && data.value) {
|
|
95
|
-
data.date =
|
|
95
|
+
data.date = parseDateInvariant(data.value);
|
|
96
96
|
data.formatted = this.culture.format(data.date, formatOptions);
|
|
97
97
|
} else if (this.range && data.from && data.to) {
|
|
98
|
-
data.from =
|
|
99
|
-
data.to =
|
|
98
|
+
data.from = parseDateInvariant(data.from);
|
|
99
|
+
data.to = parseDateInvariant(data.to);
|
|
100
100
|
data.to.setDate(data.to.getDate() - 1);
|
|
101
101
|
let fromStr = this.culture.format(data.from, formatOptions);
|
|
102
102
|
let toStr = this.culture.format(data.to, formatOptions);
|
|
@@ -104,11 +104,11 @@ export class MonthField extends Field {
|
|
|
104
104
|
else data.formatted = fromStr;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
if (data.refDate) data.refDate = monthStart(
|
|
107
|
+
if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
|
|
108
108
|
|
|
109
|
-
if (data.maxValue) data.maxValue = monthStart(
|
|
109
|
+
if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
|
|
110
110
|
|
|
111
|
-
if (data.minValue) data.minValue = monthStart(
|
|
111
|
+
if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
|
|
112
112
|
|
|
113
113
|
instance.lastDropdown = context.lastDropdown;
|
|
114
114
|
}
|
|
@@ -322,7 +322,7 @@ class MonthInput extends VDOM.Component {
|
|
|
322
322
|
icon: !!icon,
|
|
323
323
|
empty: empty && !data.placeholder,
|
|
324
324
|
error: data.error && (state.visited || !suppressErrorsUntilVisited || !empty),
|
|
325
|
-
})
|
|
325
|
+
}),
|
|
326
326
|
)}
|
|
327
327
|
style={data.style}
|
|
328
328
|
onMouseDown={this.onMouseDown.bind(this)}
|
|
@@ -26,6 +26,7 @@ import { isTouchEvent } from "../../util/isTouchEvent";
|
|
|
26
26
|
import { getCursorPos } from "../overlay/captureMouse";
|
|
27
27
|
|
|
28
28
|
import { enableCultureSensitiveFormatting } from "../../ui/Format";
|
|
29
|
+
import { parseDateInvariant } from "../../util";
|
|
29
30
|
enableCultureSensitiveFormatting();
|
|
30
31
|
|
|
31
32
|
export class MonthPicker extends Field {
|
|
@@ -59,7 +60,7 @@ export class MonthPicker extends Field {
|
|
|
59
60
|
maxValue: undefined,
|
|
60
61
|
maxExclusive: undefined,
|
|
61
62
|
},
|
|
62
|
-
...arguments
|
|
63
|
+
...arguments,
|
|
63
64
|
);
|
|
64
65
|
}
|
|
65
66
|
|
|
@@ -72,19 +73,19 @@ export class MonthPicker extends Field {
|
|
|
72
73
|
disabled: data.disabled,
|
|
73
74
|
};
|
|
74
75
|
|
|
75
|
-
if (!this.range && data.value) data.date = monthStart(
|
|
76
|
+
if (!this.range && data.value) data.date = monthStart(parseDateInvariant(data.value));
|
|
76
77
|
|
|
77
78
|
if (this.range) {
|
|
78
|
-
if (data.from) data.from = monthStart(
|
|
79
|
+
if (data.from) data.from = monthStart(parseDateInvariant(data.from));
|
|
79
80
|
|
|
80
|
-
if (data.to) data.to = monthStart(
|
|
81
|
+
if (data.to) data.to = monthStart(parseDateInvariant(data.to));
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
if (data.refDate) data.refDate = monthStart(
|
|
84
|
+
if (data.refDate) data.refDate = monthStart(parseDateInvariant(data.refDate));
|
|
84
85
|
|
|
85
|
-
if (data.maxValue) data.maxValue = monthStart(
|
|
86
|
+
if (data.maxValue) data.maxValue = monthStart(parseDateInvariant(data.maxValue));
|
|
86
87
|
|
|
87
|
-
if (data.minValue) data.minValue = monthStart(
|
|
88
|
+
if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
|
|
88
89
|
|
|
89
90
|
super.prepareData(...arguments);
|
|
90
91
|
}
|
|
@@ -271,7 +272,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
271
272
|
cursorQuarter: (cursorQuarter + 3) % 4,
|
|
272
273
|
cursorYear: cursorQuarter == 0 ? cursorYear - 1 : cursorYear,
|
|
273
274
|
},
|
|
274
|
-
{ ensureVisible: true }
|
|
275
|
+
{ ensureVisible: true },
|
|
275
276
|
);
|
|
276
277
|
else if (column == "M")
|
|
277
278
|
if (cursorMonth > 3) this.moveCursor(e, { cursorMonth: cursorMonth - 3 }, { ensureVisible: true });
|
|
@@ -279,7 +280,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
279
280
|
this.moveCursor(
|
|
280
281
|
e,
|
|
281
282
|
{ cursorMonth: cursorMonth + 9, cursorYear: cursorYear - 1 },
|
|
282
|
-
{ ensureVisible: true }
|
|
283
|
+
{ ensureVisible: true },
|
|
283
284
|
);
|
|
284
285
|
break;
|
|
285
286
|
|
|
@@ -292,7 +293,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
292
293
|
cursorQuarter: (cursorQuarter + 1) % 4,
|
|
293
294
|
cursorYear: cursorQuarter == 3 ? cursorYear + 1 : cursorYear,
|
|
294
295
|
},
|
|
295
|
-
{ ensureVisible: true }
|
|
296
|
+
{ ensureVisible: true },
|
|
296
297
|
);
|
|
297
298
|
else if (column == "M")
|
|
298
299
|
if (cursorMonth < 10) this.moveCursor(e, { cursorMonth: cursorMonth + 3 }, { ensureVisible: true });
|
|
@@ -300,7 +301,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
300
301
|
this.moveCursor(
|
|
301
302
|
e,
|
|
302
303
|
{ cursorMonth: cursorMonth - 9, cursorYear: cursorYear + 1 },
|
|
303
|
-
{ ensureVisible: true }
|
|
304
|
+
{ ensureVisible: true },
|
|
304
305
|
);
|
|
305
306
|
break;
|
|
306
307
|
|
|
@@ -469,7 +470,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
469
470
|
onMouseUp={this.handleMouseUp}
|
|
470
471
|
>
|
|
471
472
|
{y}
|
|
472
|
-
</th
|
|
473
|
+
</th>,
|
|
473
474
|
);
|
|
474
475
|
|
|
475
476
|
for (let i = 0; i < 3; i++) {
|
|
@@ -499,7 +500,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
499
500
|
onTouchEnd={this.handleMouseUp}
|
|
500
501
|
>
|
|
501
502
|
{monthNames[m - 1].substr(0, 3)}
|
|
502
|
-
</td
|
|
503
|
+
</td>,
|
|
503
504
|
);
|
|
504
505
|
}
|
|
505
506
|
row.push(
|
|
@@ -518,7 +519,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
518
519
|
onMouseUp={this.handleMouseUp}
|
|
519
520
|
>
|
|
520
521
|
{`Q${q + 1}`}
|
|
521
|
-
</th
|
|
522
|
+
</th>,
|
|
522
523
|
);
|
|
523
524
|
rows.push(row);
|
|
524
525
|
}
|
|
@@ -567,7 +568,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
567
568
|
let visibleItems = ceil5(Math.ceil(this.dom.el.offsetHeight / this.state.yearHeight));
|
|
568
569
|
let start = Math.max(
|
|
569
570
|
startYear,
|
|
570
|
-
startYear + floor5(Math.floor(this.dom.el.scrollTop / this.state.yearHeight)) - visibleItems
|
|
571
|
+
startYear + floor5(Math.floor(this.dom.el.scrollTop / this.state.yearHeight)) - visibleItems,
|
|
571
572
|
);
|
|
572
573
|
if (start != this.state.start && start + bufferSize <= endYear) {
|
|
573
574
|
this.setState({
|
|
@@ -605,7 +606,7 @@ export class MonthPickerComponent extends VDOM.Component {
|
|
|
605
606
|
this.dom.el.scrollTop =
|
|
606
607
|
(this.state.cursorYear - startYear + yearCount / 2) * this.state.yearHeight -
|
|
607
608
|
this.dom.el.offsetHeight / 2;
|
|
608
|
-
}
|
|
609
|
+
},
|
|
609
610
|
);
|
|
610
611
|
}
|
|
611
612
|
|