cx 22.4.3 → 22.5.0

package/dist/util.js

@@ -1204,15 +1204,17 @@ var lastTouchEvent = 0;
 var isTouchDetectionEnabled = false;
 function enableTouchEventDetection() {
 	if (isTouchDevice() && !isTouchDetectionEnabled) {
-		var options;
+		var options = true; //capture
+
 		if (browserSupportsPassiveEventHandlers())
 			options = {
-				passive: true
+				passive: true,
+				capture: true
 			};
 		document.addEventListener(
 			"touchstart",
 			function() {
-				lastTouchEvent = new Date().getTime();
+				lastTouchEvent = Date.now();
 			},
 			options
 		);
@@ -1220,14 +1222,14 @@ function enableTouchEventDetection() {
 			"touchmove",
 			function() {
 				//console.log('TOUCHMOVE');
-				lastTouchEvent = new Date().getTime();
+				lastTouchEvent = Date.now();
 			},
 			options
 		);
 		document.addEventListener(
 			"touchend",
 			function() {
-				lastTouchEvent = new Date().getTime(); //console.log('TOUCHEND');
+				lastTouchEvent = Date.now(); //console.log('TOUCHEND');
 			},
 			options
 		);
@@ -1235,7 +1237,7 @@ function enableTouchEventDetection() {
 	}
 }
 function isTouchEvent() {
-	return isTouchDevice() && (!isTouchDetectionEnabled || new Date().getTime() - lastTouchEvent < 1000);
+	return isTouchDevice() && (!isTouchDetectionEnabled || Date.now() - lastTouchEvent < 1000);
 } //enable touch event detection if there is no performance penalty on scrolling
 
 if (isTouchDevice() && browserSupportsPassiveEventHandlers()) enableTouchEventDetection();

package/dist/widgets.js

@@ -9355,12 +9355,23 @@ var CalendarCmp = /*#__PURE__*/ (function(_VDOM$Component) {
 	_proto2.getPage = function getPage(refDate) {
 		refDate = monthStart(refDate); //make a copy
 
+		var startWithMonday = this.props.instance.widget.startWithMonday;
+		var startDay = startWithMonday ? 1 : 0;
 		var startDate = new Date(refDate);
-		startDate.setDate(1 - startDate.getDay());
+
+		while (startDate.getDay() != startDay) {
+			startDate.setDate(startDate.getDate() - 1);
+		}
+
 		var endDate = new Date(refDate);
 		endDate.setMonth(refDate.getMonth() + 1);
 		endDate.setDate(endDate.getDate() - 1);
-		endDate.setDate(endDate.getDate() + 6 - endDate.getDay());
+		var endDay = startWithMonday ? 0 : 6;
+
+		while (endDate.getDay() != endDay) {
+			endDate.setDate(endDate.getDate() + 1);
+		}
+
 		return {
 			refDate: refDate,
 			startDate: startDate,
@@ -9574,16 +9585,19 @@ var CalendarCmp = /*#__PURE__*/ (function(_VDOM$Component) {
 			baseClass = widget.baseClass,
 			disabledDaysOfWeek = widget.disabledDaysOfWeek,
 			startWithMonday = widget.startWithMonday;
-		var refDate = this.state.refDate;
+
+		var _this$getPage = this.getPage(this.state.refDate),
+			refDate = _this$getPage.refDate,
+			startDate = _this$getPage.startDate,
+			endDate = _this$getPage.endDate;
+
 		var month = refDate.getMonth();
 		var year = refDate.getFullYear();
-		var startDate = new Date(year, month, 1);
-		startDate.setDate(1 - startDate.getDay() + (startWithMonday ? 1 : 0));
 		var weeks = [];
 		var date = startDate;
 		var today = zeroTime(new Date());
 
-		while (date < refDate || date.getMonth() == month) {
+		while (date >= startDate && date <= endDate) {
 			var days = [];
 
 			for (var i = 0; i < 7; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.4.3",
+   "version": "22.5.0",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/ui/Repeater.d.ts

@@ -41,6 +41,9 @@ interface RepeaterProps extends PureContainerProps {
 
    /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
    sortOptions?: CollatorOptions;
+
+   /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to movement of records inside the collection.  */
+   keyField: StringProp;
 }
 
 export class Repeater extends Widget<RepeaterProps> {}

package/src/ui/layout/Content.d.ts

@@ -1,11 +1,14 @@
-import * as Cx from '../../core';
+import * as Cx from "../../core";
 
 interface ContentProps extends Cx.PureContainerProps {
+   /** Placeholder name where the content is rendered. */
+   name?: string;
 
-   name?: string,
-   putInto?: string,
-   isContent?: boolean
+   /** Placeholder name where the content is rendered. */
+   for?: string;
 
+   /** Placeholder name where the content is rendered. */
+   putInto?: string;
 }
 
 export class Content extends Cx.Widget<ContentProps> {}

package/src/util/isTouchEvent.js

@@ -1,5 +1,5 @@
-import { browserSupportsPassiveEventHandlers } from './browserSupportsPassiveEventHandlers';
-import { isTouchDevice } from './isTouchDevice';
+import { browserSupportsPassiveEventHandlers } from "./browserSupportsPassiveEventHandlers";
+import { isTouchDevice } from "./isTouchDevice";
 
 // This is primarily used for tooltips which behave differently on touch.
 // For example, tooltips are commonly toggled on touch or disabled completely.
@@ -15,38 +15,50 @@ let isTouchDetectionEnabled = false;
 
 export function enableTouchEventDetection() {
    if (isTouchDevice() && !isTouchDetectionEnabled) {
-      let options;
+      let options = true; //capture
 
       if (browserSupportsPassiveEventHandlers())
          options = {
-            passive: true
+            passive: true,
+            capture: true,
          };
 
-      document.addEventListener('touchstart', () => {
-         insideTouchEvent++;
-         //console.log('TOUCHSTART');
-         lastTouchEvent = new Date().getTime();
-      }, options);
+      document.addEventListener(
+         "touchstart",
+         () => {
+            insideTouchEvent++;
+            //console.log('TOUCHSTART');
+            lastTouchEvent = Date.now();
+         },
+         options
+      );
 
-      document.addEventListener('touchmove', () => {
-         //console.log('TOUCHMOVE');
-         lastTouchEvent = new Date().getTime();
-      }, options);
+      document.addEventListener(
+         "touchmove",
+         () => {
+            //console.log('TOUCHMOVE');
+            lastTouchEvent = Date.now();
+         },
+         options
+      );
 
-      document.addEventListener('touchend', () => {
-         insideTouchEvent--;
-         lastTouchEvent = new Date().getTime();
-         //console.log('TOUCHEND');
-      }, options);
+      document.addEventListener(
+         "touchend",
+         () => {
+            insideTouchEvent--;
+            lastTouchEvent = Date.now();
+            //console.log('TOUCHEND');
+         },
+         options
+      );
 
       isTouchDetectionEnabled = true;
    }
 }
 
 export function isTouchEvent() {
-   return isTouchDevice() && (!isTouchDetectionEnabled || (new Date().getTime() - lastTouchEvent) < 1000);
+   return isTouchDevice() && (!isTouchDetectionEnabled || Date.now() - lastTouchEvent < 1000);
 }
 
 //enable touch event detection if there is no performance penalty on scrolling
-if (isTouchDevice() && browserSupportsPassiveEventHandlers())
-   enableTouchEventDetection();
+if (isTouchDevice() && browserSupportsPassiveEventHandlers()) enableTouchEventDetection();

package/src/widgets/List.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
    BooleanProp,
    ClassProp,
@@ -11,7 +12,7 @@ import {
    StructuredProp,
    StyledContainerProps,
    StyleProp,
-   Widget,
+   Widget
 } from "../core";
 import { Instance } from "./../ui/Instance";
 
@@ -79,6 +80,8 @@ interface ListProps extends StyledContainerProps {
 
    /** Callback to be invoked when the list is being scrolled. Useful for loading additional items. */
    onScroll?: (event: Event, instance: Instance) => void;
+
+   onItemClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
 }
 
 export class List extends Widget<ListProps> {}

package/src/widgets/form/Calendar.d.ts

@@ -51,7 +51,10 @@ interface CalendarProps extends FieldProps {
    todayButtonText?: string;
 
    /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[]
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to show weeks starting from Monday. */
+   startWithMonday?: boolean;
 }
 
 export class Calendar extends Cx.Widget<CalendarProps> {}

package/src/widgets/form/Calendar.js

@@ -34,15 +34,14 @@ export class Calendar extends Field {
             minExclusive: undefined,
             maxValue: undefined,
             maxExclusive: undefined,
-            focusable: undefined
+            focusable: undefined,
          },
          ...arguments
       );
    }
 
    init() {
-      if (this.unfocusable)
-         this.focusable = false;
+      if (this.unfocusable) this.focusable = false;
 
       super.init();
    }
@@ -127,18 +126,18 @@ export class Calendar extends Field {
    }
 }
 
-   Calendar.prototype.baseClass = "calendar";
-   Calendar.prototype.highlightToday = true;
-   Calendar.prototype.maxValueErrorText = "Select a date not after {0:d}.";
-   Calendar.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
-   Calendar.prototype.minValueErrorText = "Select a date not before {0:d}.";
-   Calendar.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
-   Calendar.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
-   Calendar.prototype.suppressErrorsUntilVisited = false;
-   Calendar.prototype.showTodayButton = false;
-   Calendar.prototype.todayButtonText = "Today";
-   Calendar.prototype.startWithMonday = false;
-   Calendar.prototype.focusable = true;
+Calendar.prototype.baseClass = "calendar";
+Calendar.prototype.highlightToday = true;
+Calendar.prototype.maxValueErrorText = "Select a date not after {0:d}.";
+Calendar.prototype.maxExclusiveErrorText = "Select a date before {0:d}.";
+Calendar.prototype.minValueErrorText = "Select a date not before {0:d}.";
+Calendar.prototype.minExclusiveErrorText = "Select a date after {0:d}.";
+Calendar.prototype.disabledDaysOfWeekErrorText = "Selected day of week is not allowed.";
+Calendar.prototype.suppressErrorsUntilVisited = false;
+Calendar.prototype.showTodayButton = false;
+Calendar.prototype.todayButtonText = "Today";
+Calendar.prototype.startWithMonday = false;
+Calendar.prototype.focusable = true;
 
 Localization.registerPrototype("cx/widgets/Calendar", Calendar);
 
@@ -175,13 +174,18 @@ export class CalendarCmp extends VDOM.Component {
    getPage(refDate) {
       refDate = monthStart(refDate); //make a copy
 
+      let startWithMonday = this.props.instance.widget.startWithMonday;
+
+      let startDay = startWithMonday ? 1 : 0;
       let startDate = new Date(refDate);
-      startDate.setDate(1 - startDate.getDay());
+      while (startDate.getDay() != startDay) startDate.setDate(startDate.getDate() - 1);
 
       let endDate = new Date(refDate);
       endDate.setMonth(refDate.getMonth() + 1);
       endDate.setDate(endDate.getDate() - 1);
-      endDate.setDate(endDate.getDate() + 6 - endDate.getDay());
+
+      let endDay = startWithMonday ? 0 : 6;
+      while (endDate.getDay() != endDay) endDate.setDate(endDate.getDate() + 1);
 
       return {
          refDate,
@@ -373,19 +377,15 @@ export class CalendarCmp extends VDOM.Component {
       let { data, widget } = this.props.instance;
       let { CSS, baseClass, disabledDaysOfWeek, startWithMonday } = widget;
 
-      let refDate = this.state.refDate;
+      let { refDate, startDate, endDate } = this.getPage(this.state.refDate);
 
       let month = refDate.getMonth();
       let year = refDate.getFullYear();
-
-      let startDate = new Date(year, month, 1);
-      startDate.setDate(1 - startDate.getDay() + (startWithMonday ? 1 : 0));
-
       let weeks = [];
       let date = startDate;
 
       let today = zeroTime(new Date());
-      while (date < refDate || date.getMonth() == month) {
+      while (date >= startDate && date <= endDate) {
          let days = [];
          for (let i = 0; i < 7; i++) {
             let unselectable = !validationCheck(date, data, disabledDaysOfWeek);

package/src/widgets/nav/Link.d.ts

@@ -1,6 +1,9 @@
+import * as React from "react";
 import * as Cx from "../../core";
+import { Instance } from "../../ui/Instance";
+import { LinkButtonProps } from "./LinkButton";
 
-interface LinkProps extends Cx.HtmlElementProps {
+interface LinkProps extends LinkButtonProps {
    /** Set to `true` to disable the link. */
    disabled?: Cx.BooleanProp;
 
@@ -17,6 +20,7 @@ interface LinkProps extends Cx.HtmlElementProps {
 
    activeClass?: Cx.ClassProp;
    activeStyle?: Cx.StyleProp;
+   onClick?: string | ((e: React.SyntheticEvent<any>, instance: Instance) => void);
 }
 
 export class Link extends Cx.Widget<LinkProps> {}

package/src/widgets/nav/LinkButton.d.ts

@@ -1,7 +1,7 @@
 import * as Cx from "../../core";
 import { ButtonProps } from "../Button";
 
-interface LinkButtonProps extends ButtonProps {
+export interface LinkButtonProps extends ButtonProps {
    /** Url to the link's target location. Should start with `~/` or `#/` for pushState/hash based navigation. */
    href?: Cx.StringProp;