cx 24.6.1 → 24.6.3

package/dist/widgets.css

@@ -1049,6 +1049,7 @@
   display: inline-block;
   vertical-align: middle;
   width: 18em;
+  overflow-y: auto;
   box-sizing: border-box;
 }
 .cxb-calendar:focus {
@@ -1116,8 +1117,8 @@
 .cxb-calendar:not(.cxs-disabled) td {
   cursor: pointer;
 }
-.cxb-calendar td:first-child,
-.cxb-calendar td:last-child {
+.cxb-calendar td:not(.cxe-calendar-year-option):first-child,
+.cxb-calendar td:not(.cxe-calendar-year-option):last-child {
   display: none;
   pointer-events: none;
 }
@@ -1145,6 +1146,34 @@
   user-select: none;
 }
 
+.cxe-calendar-year-name {
+  cursor: pointer;
+}
+.cxe-calendar-year-picker {
+  user-select: none;
+  overflow-y: scroll;
+  width: 100%;
+  max-height: 24em;
+  height: auto;
+}
+.cxe-calendar-year-option {
+  cursor: pointer;
+  font-size: 13px;
+  background-color: transparent;
+  border-radius: 0;
+}
+.cxe-calendar-year-option.cxs-active {
+  background-color: rgba(220, 250, 183, 0.5);
+}
+.cxe-calendar-year-option:hover {
+  background-color: rgba(128, 128, 128, 0.1);
+  outline: none;
+  cursor: pointer;
+}
+.cxe-calendar-year-option.cxs-selected {
+  background-color: rgba(123, 190, 255, 0.4);
+}
+
 .cxe-calendar-icon-prev-year {
   transform: rotate(180deg);
 }

package/dist/widgets.js

@@ -8101,6 +8101,7 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 				hover: false,
 				focus: false,
 				cursor: zeroTime(data.date || refDate),
+				activeView: "calendar",
 			},
 			_this2.getPage(refDate),
 		);
@@ -8269,9 +8270,13 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 		this.props.handleSelect(e, readDate(e.target.dataset));
 	};
 	_proto2.componentDidMount = function componentDidMount() {
+		var _this3 = this;
 		//calendar doesn't bring up keyboard so it's ok to focus it even on mobile
 		if (this.props.instance.widget.autoFocus) this.el.focus();
 		tooltipParentDidMount$1.apply(void 0, [this.el].concat(getFieldTooltip(this.props.instance)));
+		this.el.addEventListener("wheel", function (e) {
+			return _this3.handleWheel(e);
+		});
 	};
 	_proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
 		var data = props.instance.data;
@@ -8287,11 +8292,99 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 		offFocusOut(this);
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
-	_proto2.render = function render() {
-		var _this3 = this;
+	_proto2.showYearDropdown = function showYearDropdown() {
+		this.setState({
+			activeView: "year-picker",
+			yearPickerHeight: this.el.firstChild.offsetHeight,
+		});
+	};
+	_proto2.handleYearSelect = function handleYearSelect(e, year) {
+		e.preventDefault();
+		e.stopPropagation();
+		var refDate = new Date(this.state.refDate);
+		refDate.setFullYear(year);
+		this.setState(
+			_extends({}, this.getPage(refDate), {
+				refDate: refDate,
+				activeView: "calendar",
+			}),
+		);
+	};
+	_proto2.renderYearPicker = function renderYearPicker() {
+		var _data$minValue,
+			_data$maxValue,
+			_this4 = this;
 		var _this$props$instance = this.props.instance,
 			data = _this$props$instance.data,
 			widget = _this$props$instance.widget;
+		var minYear = (_data$minValue = data.minValue) == null ? void 0 : _data$minValue.getFullYear();
+		var maxYear = (_data$maxValue = data.maxValue) == null ? void 0 : _data$maxValue.getFullYear();
+		var CSS = this.props.instance.widget.CSS;
+		var years = [];
+		var currentYear = new Date().getFullYear();
+		var midYear = currentYear - (currentYear % 5);
+		var refYear = new Date(this.state.refDate).getFullYear();
+		for (var i = midYear - 100; i <= midYear + 100; i++) {
+			years.push(i);
+		}
+		var rows = [];
+		for (var _i = 0; _i < years.length; _i += 5) {
+			rows.push(years.slice(_i, _i + 5));
+		}
+		return /*#__PURE__*/ jsx("div", {
+			className: CSS.element(widget.baseClass, "year-picker"),
+			style: {
+				height: this.state.yearPickerHeight,
+			},
+			ref: function ref(el) {
+				if (el) {
+					el.addEventListener("wheel", function (e) {
+						e.stopPropagation();
+					});
+					var activeYear = el.querySelector("." + CSS.state("selected"));
+					if (activeYear)
+						activeYear.scrollIntoView({
+							block: "center",
+							behavior: "instant",
+						});
+				}
+			},
+			children: /*#__PURE__*/ jsx("table", {
+				children: /*#__PURE__*/ jsx("tbody", {
+					children: rows.map(function (row, rowIndex) {
+						return /*#__PURE__*/ jsx(
+							"tr",
+							{
+								children: row.map(function (year) {
+									return /*#__PURE__*/ jsx(
+										"td",
+										{
+											className: CSS.element(_this4.props.instance.widget.baseClass, "year-option", {
+												unselectable: (minYear && year < minYear) || (maxYear && year > maxYear),
+												selected: year === refYear,
+												active: year === currentYear,
+											}),
+											onClick: function onClick(e) {
+												return _this4.handleYearSelect(e, year);
+											},
+											children: year,
+										},
+										year,
+									);
+								}),
+							},
+							rowIndex,
+						);
+					}),
+				}),
+			}),
+		});
+	};
+	_proto2.render = function render() {
+		var _this5 = this;
+		var _this$props$instance2 = this.props.instance,
+			data = _this$props$instance2.data,
+			widget = _this$props$instance2.widget;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass,
 			disabledDaysOfWeek = widget.disabledDaysOfWeek,
@@ -8362,7 +8455,7 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 			className: data.classNames,
 			tabIndex: data.disabled || !data.focusable ? null : data.tabIndex || 0,
 			onKeyDown: function onKeyDown(e) {
-				return _this3.handleKeyPress(e);
+				return _this5.handleKeyPress(e);
 			},
 			onMouseDown: function onMouseDown(e) {
 				// prevent losing focus from the input field
@@ -8372,107 +8465,117 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 				e.stopPropagation();
 			},
 			ref: function ref(el) {
-				_this3.el = el;
+				_this5.el = el;
 			},
 			onMouseMove: function onMouseMove(e) {
-				return tooltipMouseMove$1.apply(void 0, [e].concat(getFieldTooltip(_this3.props.instance)));
+				return tooltipMouseMove$1.apply(void 0, [e].concat(getFieldTooltip(_this5.props.instance)));
 			},
 			onMouseLeave: function onMouseLeave(e) {
-				return _this3.handleMouseLeave(e);
+				return _this5.handleMouseLeave(e);
 			},
 			onMouseEnter: function onMouseEnter(e) {
-				return _this3.handleMouseEnter(e);
-			},
-			onWheel: function onWheel(e) {
-				return _this3.handleWheel(e);
+				return _this5.handleMouseEnter(e);
 			},
+			// onWheel={(e) => this.handleWheel(e)}
 			onFocus: function onFocus(e) {
-				return _this3.handleFocus(e);
+				return _this5.handleFocus(e);
 			},
 			onBlur: function onBlur(e) {
-				return _this3.handleBlur(e);
+				return _this5.handleBlur(e);
 			},
 			children: [
-				/*#__PURE__*/ jsxs("table", {
-					children: [
-						/*#__PURE__*/ jsxs("thead", {
-							children: [
-								/*#__PURE__*/ jsxs(
-									"tr",
-									{
-										className: CSS.element(baseClass, "header"),
-										children: [
-											/*#__PURE__*/ jsx("td", {}),
-											/*#__PURE__*/ jsx("td", {
-												onClick: function onClick(e) {
-													return _this3.move(e, "y", -1);
-												},
-												children: /*#__PURE__*/ jsx(ForwardIcon, {
-													className: CSS.element(baseClass, "icon-prev-year"),
+				this.state.activeView == "calendar" &&
+					/*#__PURE__*/ jsxs("table", {
+						children: [
+							/*#__PURE__*/ jsxs("thead", {
+								children: [
+									/*#__PURE__*/ jsxs(
+										"tr",
+										{
+											className: CSS.element(baseClass, "header"),
+											children: [
+												/*#__PURE__*/ jsx("td", {}),
+												/*#__PURE__*/ jsx("td", {
+													onClick: function onClick(e) {
+														return _this5.move(e, "y", -1);
+													},
+													children: /*#__PURE__*/ jsx(ForwardIcon, {
+														className: CSS.element(baseClass, "icon-prev-year"),
+													}),
 												}),
-											}),
-											/*#__PURE__*/ jsx("td", {
-												onClick: function onClick(e) {
-													return _this3.move(e, "m", -1);
-												},
-												children: /*#__PURE__*/ jsx(DropdownIcon, {
-													className: CSS.element(baseClass, "icon-prev-month"),
+												/*#__PURE__*/ jsx("td", {
+													onClick: function onClick(e) {
+														return _this5.move(e, "m", -1);
+													},
+													children: /*#__PURE__*/ jsx(DropdownIcon, {
+														className: CSS.element(baseClass, "icon-prev-month"),
+													}),
 												}),
-											}),
-											/*#__PURE__*/ jsxs("th", {
-												className: CSS.element(baseClass, "display"),
-												colSpan: "3",
-												children: [monthNames[month], /*#__PURE__*/ jsx("br", {}), year],
-											}),
-											/*#__PURE__*/ jsx("td", {
-												onClick: function onClick(e) {
-													return _this3.move(e, "m", +1);
-												},
-												children: /*#__PURE__*/ jsx(DropdownIcon, {
-													className: CSS.element(baseClass, "icon-next-month"),
+												/*#__PURE__*/ jsxs("th", {
+													className: CSS.element(baseClass, "display"),
+													colSpan: "3",
+													children: [
+														monthNames[month],
+														/*#__PURE__*/ jsx("br", {}),
+														/*#__PURE__*/ jsx("span", {
+															onClick: function onClick() {
+																return _this5.showYearDropdown();
+															},
+															className: CSS.element(baseClass, "year-name"),
+															children: year,
+														}),
+													],
 												}),
-											}),
-											/*#__PURE__*/ jsx("td", {
-												onClick: function onClick(e) {
-													return _this3.move(e, "y", +1);
-												},
-												children: /*#__PURE__*/ jsx(ForwardIcon, {
-													className: CSS.element(baseClass, "icon-next-year"),
+												/*#__PURE__*/ jsx("td", {
+													onClick: function onClick(e) {
+														return _this5.move(e, "m", +1);
+													},
+													children: /*#__PURE__*/ jsx(DropdownIcon, {
+														className: CSS.element(baseClass, "icon-next-month"),
+													}),
 												}),
-											}),
-											/*#__PURE__*/ jsx("td", {}),
-										],
-									},
-									"h",
-								),
-								/*#__PURE__*/ jsxs(
-									"tr",
-									{
-										className: CSS.element(baseClass, "day-names"),
-										children: [
-											/*#__PURE__*/ jsx("td", {}),
-											dayNames.map(function (name, i) {
-												return /*#__PURE__*/ jsx(
-													"th",
-													{
-														children: name,
+												/*#__PURE__*/ jsx("td", {
+													onClick: function onClick(e) {
+														return _this5.move(e, "y", +1);
 													},
-													i,
-												);
-											}),
-											/*#__PURE__*/ jsx("td", {}),
-										],
-									},
-									"d",
-								),
-							],
-						}),
-						/*#__PURE__*/ jsx("tbody", {
-							children: weeks,
-						}),
-					],
-				}),
-				widget.showTodayButton &&
+													children: /*#__PURE__*/ jsx(ForwardIcon, {
+														className: CSS.element(baseClass, "icon-next-year"),
+													}),
+												}),
+												/*#__PURE__*/ jsx("td", {}),
+											],
+										},
+										"h",
+									),
+									/*#__PURE__*/ jsxs(
+										"tr",
+										{
+											className: CSS.element(baseClass, "day-names"),
+											children: [
+												/*#__PURE__*/ jsx("td", {}),
+												dayNames.map(function (name, i) {
+													return /*#__PURE__*/ jsx(
+														"th",
+														{
+															children: name,
+														},
+														i,
+													);
+												}),
+												/*#__PURE__*/ jsx("td", {}),
+											],
+										},
+										"d",
+									),
+								],
+							}),
+							/*#__PURE__*/ jsx("tbody", {
+								children: weeks,
+							}),
+						],
+					}),
+				this.state.activeView == "calendar" &&
+					widget.showTodayButton &&
 					/*#__PURE__*/ jsx("div", {
 						className: CSS.element(baseClass, "toolbar"),
 						children: /*#__PURE__*/ jsx("button", {
@@ -8481,11 +8584,12 @@ var CalendarCmp = /*#__PURE__*/ (function (_VDOM$Component) {
 							"data-month": today.getMonth() + 1,
 							"data-date": today.getDate(),
 							onClick: function onClick(e) {
-								_this3.handleMouseDown(e);
+								_this5.handleMouseDown(e);
 							},
 							children: widget.todayButtonText,
 						}),
 					}),
+				this.state.activeView == "year-picker" && this.renderYearPicker(),
 			],
 		});
 	};
@@ -16132,14 +16236,16 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 		var comparer = column.comparer;
 		var sortOptions = column.sortOptions;
 		if (header && header.allowSorting && column.sortable && (field || value || data.sortField)) {
-			var direction = "ASC";
+			var _column$primarySortDi;
+			var direction = (_column$primarySortDi = column.primarySortDirection) != null ? _column$primarySortDi : "ASC";
 			if (
 				isNonEmptyArray(data.sorters) &&
 				((!!data.sorters[0].field && data.sorters[0].field == (field || data.sortField)) ||
 					(!!value && data.sorters[0].value == value))
 			) {
-				if (data.sorters[0].direction == "ASC") direction = "DESC";
-				else if (this.clearableSort && data.sorters[0].direction == "DESC") direction = null;
+				if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC")) direction = "DESC";
+				else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC")) direction = "ASC";
+				else direction = null;
 			}
 			var sorters = direction
 				? [

package/index.js

@@ -1,17 +1,17 @@
-import * as util from './util';
-import * as data from './data';
-import * as ui from './ui';
-import * as widgets from './widgets';
-import * as svg from './svg';
-import * as charts from './charts';
-import * as hooks from './hooks';
-
-export {
-   util,
-   data,
-   ui,
-   widgets,
-   svg,
-   charts,
-   hooks
-};
+import * as util from './util';
+import * as data from './data';
+import * as ui from './ui';
+import * as widgets from './widgets';
+import * as svg from './svg';
+import * as charts from './charts';
+import * as hooks from './hooks';
+
+export {
+   util,
+   data,
+   ui,
+   widgets,
+   svg,
+   charts,
+   hooks
+};

package/locale/de-de.js

@@ -1,75 +1,75 @@
-import { Localization } from 'cx/ui';
-
-var c = 'de-de';
-
-// Field
-Localization.localize(c, 'cx/widgets/Field', {
-   requiredText: 'Dieses Feld wird benötigt.',
-   validatingText: 'Wird validiert...',
-   validationExceptionText: 'Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.'
-});
-
-// LookupField
-Localization.localize(c, 'cx/widgets/LookupField', {
-   loadingText: 'Wird geladen...',
-   queryErrorText: 'Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.',
-   noResultsText: 'Keine Ergebnisse gefunden.',
-   minQueryLengthMessageText: 'Geben Sie mindestens {0} Zeichen ein.'
-});
-
-// In common for Calendar and MonthPicker
-const calendarErrorMessages = {
-   maxValueErrorText: 'Wählen Sie {0:d} oder vorher.',
-   maxExclusiveErrorText: 'Wählen Sie ein Datum vor dem {0:d}.',
-   minValueErrorText: 'Wählen Sie {0:d} oder später.',
-   minExclusiveErrorText: 'Wählen Sie ein Datum nach dem {0:d}.',
-};
-
-// Calendar
-Localization.localize(c, 'cx/widgets/Calendar', {
-   ...calendarErrorMessages,
-   todayButtonText: 'Heute',
-   startWithMonday: true
-});
-
-// MonthPicker
-Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
-
-// In common for DateField and MonthField
-const dateFieldErrorMessages = {
-   ...calendarErrorMessages,
-   inputErrorText: 'Ungültiges Datum eingegeben.'
-};
-
-// MonthField
-Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
-
-// DateField
-Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
-
-// NumberField
-Localization.localize(c, 'cx/widgets/NumberField', {
-   maxValueErrorText: 'Geben Sie {0} oder weniger ein.',
-   maxExclusiveErrorText: 'Geben Sie eine Zahl kleiner als {0} ein.',
-   minValueErrorText: 'Geben Sie {0} oder mehr ein.',
-   minExclusiveErrorText: 'Geben Sie eine Zahl größer als {0} ein.',
-   inputErrorText: 'Ungültige Zahl eingegeben.'
-});
-
-// TextField
-Localization.localize(c, 'cx/widgets/TextField', {
-   validationErrorText: 'Ungültige Eingabe.',
-   minLengthValidationErrorText: 'Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.',
-   maxLengthValidationErrorText: 'Benutzen Sie {0} oder weniger Zeichen.'
-});
-
-// UploadButton
-Localization.localize(c, 'cx/widgets/UploadButton', {
-   validationErrorText: 'Wird hochgeladen...'
-});
-
-// MsgBox
-Localization.localize(c, 'cx/widgets/MsgBox', {
-   yesText: "Ja",
-   noText: "Nein"
+import { Localization } from 'cx/ui';
+
+var c = 'de-de';
+
+// Field
+Localization.localize(c, 'cx/widgets/Field', {
+   requiredText: 'Dieses Feld wird benötigt.',
+   validatingText: 'Wird validiert...',
+   validationExceptionText: 'Bei der Eingabevalidierung ist ein Fehler aufgetreten. Überprüfen Sie das Log für weitere Details.'
+});
+
+// LookupField
+Localization.localize(c, 'cx/widgets/LookupField', {
+   loadingText: 'Wird geladen...',
+   queryErrorText: 'Bei der Abfrage der gesuchten Daten ist ein Felhler aufgetreten.',
+   noResultsText: 'Keine Ergebnisse gefunden.',
+   minQueryLengthMessageText: 'Geben Sie mindestens {0} Zeichen ein.'
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: 'Wählen Sie {0:d} oder vorher.',
+   maxExclusiveErrorText: 'Wählen Sie ein Datum vor dem {0:d}.',
+   minValueErrorText: 'Wählen Sie {0:d} oder später.',
+   minExclusiveErrorText: 'Wählen Sie ein Datum nach dem {0:d}.',
+};
+
+// Calendar
+Localization.localize(c, 'cx/widgets/Calendar', {
+   ...calendarErrorMessages,
+   todayButtonText: 'Heute',
+   startWithMonday: true
+});
+
+// MonthPicker
+Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: 'Ungültiges Datum eingegeben.'
+};
+
+// MonthField
+Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, 'cx/widgets/NumberField', {
+   maxValueErrorText: 'Geben Sie {0} oder weniger ein.',
+   maxExclusiveErrorText: 'Geben Sie eine Zahl kleiner als {0} ein.',
+   minValueErrorText: 'Geben Sie {0} oder mehr ein.',
+   minExclusiveErrorText: 'Geben Sie eine Zahl größer als {0} ein.',
+   inputErrorText: 'Ungültige Zahl eingegeben.'
+});
+
+// TextField
+Localization.localize(c, 'cx/widgets/TextField', {
+   validationErrorText: 'Ungültige Eingabe.',
+   minLengthValidationErrorText: 'Bitte tragen Sie noch {[{0}-{1}]} Zeichen ein.',
+   maxLengthValidationErrorText: 'Benutzen Sie {0} oder weniger Zeichen.'
+});
+
+// UploadButton
+Localization.localize(c, 'cx/widgets/UploadButton', {
+   validationErrorText: 'Wird hochgeladen...'
+});
+
+// MsgBox
+Localization.localize(c, 'cx/widgets/MsgBox', {
+   yesText: "Ja",
+   noText: "Nein"
 });