cx 23.12.1 → 23.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.12.1",
+   "version": "23.12.2",
    "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/data/AggregateFunction.d.ts

@@ -1,20 +1,20 @@
-interface Aggregator {
-   process(value: number, weight?: number);
-   getResult(): number;
-}
-
-export class AggregateFunction {
-   static sum(): Aggregator;
-
-   static avg(): Aggregator;
-
-   static count(): Aggregator;
-
-   static distinct(): Aggregator;
-
-   static min(): Aggregator;
-
-   static max(): Aggregator;
-
-   static last(): Aggregator;
-}
+interface Aggregator {
+   process(value: number, weight?: number);
+   getResult(): number;
+}
+
+export class AggregateFunction {
+   static sum(): Aggregator;
+
+   static avg(): Aggregator;
+
+   static count(): Aggregator;
+
+   static distinct(): Aggregator;
+
+   static min(): Aggregator;
+
+   static max(): Aggregator;
+
+   static last(): Aggregator;
+}

package/src/data/AggregateFunction.js

@@ -1,145 +1,145 @@
-export class AggregateFunction {
-   static sum() {
-      return new Sum();
-   }
-
-   static avg() {
-      return new Avg();
-   }
-
-   static count() {
-      return new Count();
-   }
-
-   static distinct() {
-      return new Distinct();
-   }
-
-   static min() {
-      return new Min();
-   }
-
-   static max() {
-      return new Max();
-   }
-
-   static last() {
-      return new LastValue();
-   }
-}
-
-class Sum {
-   process(value) {
-      this.empty = false;
-      if (!isNaN(value)) this.result += value;
-      else this.invalid = true;
-   }
-
-   getResult() {
-      if (this.invalid) return null;
-      return this.result;
-   }
-}
-
-Sum.prototype.result = 0;
-Sum.prototype.empty = true;
-
-class Avg {
-   process(value, count = 1) {
-      this.empty = false;
-      if (!isNaN(value) && !isNaN(count)) {
-         this.result += value * count;
-         this.count += count;
-      } else this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid || this.count == 0) return null;
-      return this.result / this.count;
-   }
-}
-
-Avg.prototype.result = 0;
-Avg.prototype.count = 0;
-Avg.prototype.empty = true;
-
-class Count {
-   process(value) {
-      if (value != null) this.result++;
-   }
-
-   getResult() {
-      return this.result;
-   }
-}
-
-Count.prototype.result = 0;
-
-class Distinct {
-   constructor() {
-      this.values = {};
-   }
-
-   process(value) {
-      if (value == null || this.values[value]) return;
-      this.values[value] = true;
-      this.empty = false;
-      this.result++;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Distinct.prototype.result = 0;
-Distinct.prototype.empty = true;
-
-class Max {
-   process(value) {
-      if (!isNaN(value)) {
-         if (this.empty) this.result = value;
-         else if (value > this.result) this.result = value;
-         this.empty = false;
-      } else if (value != null) this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Max.prototype.result = 0;
-Max.prototype.empty = true;
-
-class Min {
-   process(value) {
-      if (!isNaN(value)) {
-         if (this.empty) this.result = value;
-         else if (value < this.result) this.result = value;
-         this.empty = false;
-      } else if (value != null) this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Min.prototype.result = 0;
-Min.prototype.empty = true;
-
-class LastValue {
-   process(value) {
-      this.result = value;
-   }
-
-   getResult() {
-      return this.result;
-   }
-}
-
-LastValue.prototype.result = null;
+export class AggregateFunction {
+   static sum() {
+      return new Sum();
+   }
+
+   static avg() {
+      return new Avg();
+   }
+
+   static count() {
+      return new Count();
+   }
+
+   static distinct() {
+      return new Distinct();
+   }
+
+   static min() {
+      return new Min();
+   }
+
+   static max() {
+      return new Max();
+   }
+
+   static last() {
+      return new LastValue();
+   }
+}
+
+class Sum {
+   process(value) {
+      this.empty = false;
+      if (!isNaN(value)) this.result += value;
+      else this.invalid = true;
+   }
+
+   getResult() {
+      if (this.invalid) return null;
+      return this.result;
+   }
+}
+
+Sum.prototype.result = 0;
+Sum.prototype.empty = true;
+
+class Avg {
+   process(value, count = 1) {
+      this.empty = false;
+      if (!isNaN(value) && !isNaN(count)) {
+         this.result += value * count;
+         this.count += count;
+      } else this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid || this.count == 0) return null;
+      return this.result / this.count;
+   }
+}
+
+Avg.prototype.result = 0;
+Avg.prototype.count = 0;
+Avg.prototype.empty = true;
+
+class Count {
+   process(value) {
+      if (value != null) this.result++;
+   }
+
+   getResult() {
+      return this.result;
+   }
+}
+
+Count.prototype.result = 0;
+
+class Distinct {
+   constructor() {
+      this.values = {};
+   }
+
+   process(value) {
+      if (value == null || this.values[value]) return;
+      this.values[value] = true;
+      this.empty = false;
+      this.result++;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Distinct.prototype.result = 0;
+Distinct.prototype.empty = true;
+
+class Max {
+   process(value) {
+      if (!isNaN(value)) {
+         if (this.empty) this.result = value;
+         else if (value > this.result) this.result = value;
+         this.empty = false;
+      } else if (value != null) this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Max.prototype.result = 0;
+Max.prototype.empty = true;
+
+class Min {
+   process(value) {
+      if (!isNaN(value)) {
+         if (this.empty) this.result = value;
+         else if (value < this.result) this.result = value;
+         this.empty = false;
+      } else if (value != null) this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Min.prototype.result = 0;
+Min.prototype.empty = true;
+
+class LastValue {
+   process(value) {
+      this.result = value;
+   }
+
+   getResult() {
+      return this.result;
+   }
+}
+
+LastValue.prototype.result = null;

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

@@ -82,7 +82,12 @@ interface MonthFieldProps extends FieldProps {
     * Set to `true` to display the clear button even if `required` is set. Default is `false`.
     */
    alwaysShowClear?: boolean,
-
+   
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
 }
 
 export class MonthField extends Cx.Widget<MonthFieldProps> {}

package/src/widgets/form/MonthField.js

@@ -1,32 +1,32 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { Field, getFieldTooltip } from "./Field";
-import { MonthPicker } from "./MonthPicker";
 import { DateTimeCulture } from "intl-io";
-import { Format } from "../../util/Format";
-import { Dropdown } from "../overlay/Dropdown";
-import { Console } from "../../util/Console";
 import { StringTemplate } from "../../data/StringTemplate";
-import { monthStart } from "../../util/date/monthStart";
+import { Culture } from "../../ui";
+import { Cx } from "../../ui/Cx";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { Console } from "../../util/Console";
+import { Format } from "../../util/Format";
+import { KeyCode } from "../../util/KeyCode";
 import { dateDiff } from "../../util/date/dateDiff";
+import { monthStart } from "../../util/date/monthStart";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isDefined } from "../../util/isDefined";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { Icon } from "../Icon";
+import { autoFocus } from "../autoFocus";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+import { Dropdown } from "../overlay/Dropdown";
 import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
    tooltipMouseLeave,
+   tooltipMouseMove,
    tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
 } from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { Icon } from "../Icon";
-import CalendarIcon from "../icons/calendar";
-import DropdownIcon from "../icons/drop-down";
-import ClearIcon from "../icons/clear";
-import { KeyCode } from "../../util/KeyCode";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { Localization } from "../../ui/Localization";
-import { isDefined } from "../../util/isDefined";
-import { autoFocus } from "../autoFocus";
+import { Field, getFieldTooltip } from "./Field";
+import { MonthPicker } from "./MonthPicker";
 
 export class MonthField extends Field {
    declareData() {
@@ -179,16 +179,18 @@ export class MonthField extends Field {
    }
 
    handleSelect(instance, date1, date2) {
+      let { widget } = instance;
+      let encode = widget.encoding || Culture.getDefaultDateEncoding();
       instance.setState({
          inputError: false,
       });
       if (this.range) {
-         let d1 = date1 ? date1.toISOString() : this.emptyValue;
-         let d2 = date2 ? date2.toISOString() : this.emptyValue;
+         let d1 = date1 ? encode(date1) : this.emptyValue;
+         let d2 = date2 ? encode(date2) : this.emptyValue;
          instance.set("from", d1);
          instance.set("to", d2);
       } else {
-         let value = date1 ? date1.toISOString() : this.emptyValue;
+         let value = date1 ? encode(date1) : this.emptyValue;
          instance.set("value", value);
       }
    }
@@ -238,6 +240,7 @@ class MonthInput extends VDOM.Component {
          items: {
             type: MonthPicker,
             ...this.props.monthPicker,
+            encoding: widget.encoding,
             autoFocus: true,
             onFocusOut: (e) => {
                this.closeDropdown(e);

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

@@ -63,6 +63,12 @@ interface MonthPickerProps extends FieldProps {
    /** Minimum exclusive value error text. */
    minExclusiveErrorText?: string,
 
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
+
 }
 
 export class MonthPicker extends Cx.Widget<MonthPickerProps> {}

package/src/widgets/form/MonthPicker.js

@@ -124,7 +124,8 @@ export class MonthPicker extends Field {
    }
 
    handleSelect(e, instance, date1, date2) {
-      let { data } = instance;
+      let { data, widget } = instance;
+      let encode = widget.encoding || Culture.getDefaultDateEncoding();
 
       if (data.disabled) return;
 
@@ -133,9 +134,9 @@ export class MonthPicker extends Field {
       if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
 
       if (this.range) {
-         instance.set("from", date1.toISOString());
-         instance.set("to", date2.toISOString());
-      } else instance.set("value", date1.toISOString());
+         instance.set("from", encode(date1));
+         instance.set("to", encode(date2));
+      } else instance.set("value", encode(date1));
 
       if (this.onSelect) instance.invoke("onSelect", instance, date1, date2);
    }

package/src/widgets/overlay/Overlay.js

@@ -348,13 +348,11 @@ export class OverlayComponent extends VDOM.Component {
                })}
                style={parseStyle(data.shadowStyle)}
             >
-               {widget.backdrop && (
-                  <div
-                     key="backdrop"
-                     className={CSS.element("overlay", "modal-backdrop")}
-                     onClick={this.onBackdropClick.bind(this)}
-                  />
-               )}
+               <div
+                  key="backdrop"
+                  className={CSS.element("overlay", "modal-backdrop")}
+                  onClick={this.onBackdropClick.bind(this)}
+               />
                {content}
             </div>
          );
@@ -459,6 +457,8 @@ export class OverlayComponent extends VDOM.Component {
 
       if (widget.backdrop) {
          if (instance.dismiss) instance.dismiss();
+      } else if (widget.modal) {
+         FocusManager.focus(this.el);
       }
    }
 

package/src/widgets/overlay/Window.js

@@ -168,7 +168,7 @@ class WindowComponent extends OverlayComponent {
       super.onFocusIn();
       if (!this.state.active) {
          if (this.containerEl.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
-         this.setState({ active: true, });
+         this.setState({ active: true });
       }
    }