cx 25.5.1 → 25.6.0

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

@@ -1,86 +1,86 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface DayInfo {
-   mod?: string;
-   className?: string;
-   style?: Cx.Record;
-   unselectable?: boolean;
-   disabled?: boolean;
-}
-
-interface DayData {
-   [day: string]: DayInfo;
-}
-
-interface CalendarProps extends FieldProps {
-   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   value?: Cx.Prop<string | Date>;
-
-   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
-   refDate?: Cx.Prop<string | Date>;
-
-   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
-   baseClass?: string;
-
-   /** Highlight today's date. Default is true. */
-   highlightToday?: boolean;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** 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;
-
-   /** Set to true to show the button for quickly selecting today's date.  */
-   showTodayButton?: boolean;
-
-   /** Localizable text for the todayButton. Defaults to `"Today"`. */
-   todayButtonText?: string;
-
-   /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[];
-
-   /** Set to true to show weeks starting from Monday. */
-   startWithMonday?: boolean;
-
-   /** Map of days to additional day information such as style, className, mod, unselectable and disabled.
-    * Keys for the map should be created with date.toDateString().
-    * Example. {
-    *    [new Date().toDateString()]: {
-    *       style: "color: red",
-    *       className: 'test-class',
-    *       mod: 'holiday',
-    *       unselectable: false,
-    *       disabled: false
-    *    }
-    * }
-    */
-   dayData?: Cx.Prop<DayData>;
-}
-
-export class Calendar extends Cx.Widget<CalendarProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface DayInfo {
+   mod?: string;
+   className?: string;
+   style?: Cx.Record;
+   unselectable?: boolean;
+   disabled?: boolean;
+}
+
+interface DayData {
+   [day: string]: DayInfo;
+}
+
+interface CalendarProps extends FieldProps {
+   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   value?: Cx.Prop<string | Date>;
+
+   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
+   refDate?: Cx.Prop<string | Date>;
+
+   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   minValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: Cx.BooleanProp;
+
+   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   maxValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
+   baseClass?: string;
+
+   /** Highlight today's date. Default is true. */
+   highlightToday?: boolean;
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** 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;
+
+   /** Set to true to show the button for quickly selecting today's date.  */
+   showTodayButton?: boolean;
+
+   /** Localizable text for the todayButton. Defaults to `"Today"`. */
+   todayButtonText?: string;
+
+   /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to show weeks starting from Monday. */
+   startWithMonday?: boolean;
+
+   /** Map of days to additional day information such as style, className, mod, unselectable and disabled.
+    * Keys for the map should be created with date.toDateString().
+    * Example. {
+    *    [new Date().toDateString()]: {
+    *       style: "color: red",
+    *       className: 'test-class',
+    *       mod: 'holiday',
+    *       unselectable: false,
+    *       disabled: false
+    *    }
+    * }
+    */
+   dayData?: Cx.Prop<DayData>;
+}
+
+export class Calendar extends Cx.Widget<CalendarProps> {}

package/src/widgets/form/Checkbox.js

@@ -24,7 +24,7 @@ export class Checkbox extends Field {
             required: undefined,
             viewText: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -34,7 +34,10 @@ export class Checkbox extends Field {
          <label
             key={key}
             className={data.classNames}
-            onMouseDown={stopPropagation}
+            onMouseDown={(e) => {
+               e.stopPropagation();
+               if (this.unfocusable) e.preventDefault();
+            }}
             onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
             onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
             onClick={(e) => {

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

@@ -94,6 +94,11 @@ interface MonthFieldProps extends FieldProps {
    /** A boolean flag that determines whether the `to` date is included in the range.
     * When set to true the value stored in the to field would be the last day of the month, i.e. `2024-12-31`. */
    inclusiveTo?: boolean;
+
+   /** Optional configuration options for the MonthPicker component rendered within the dropdown.
+    * You can pass any valid additional MonthPicker props here, such as `startYear`, `endYear`, etc.
+    * Refer to the MonthPicker component documentation for a full list of supported options. */
+   monthPickerOptions?: Cx.Config;
 }
 
 export class MonthField extends Cx.Widget<MonthFieldProps> {}

package/src/widgets/form/MonthField.js

@@ -149,6 +149,7 @@ export class MonthField extends Field {
             data={instance.data}
             instance={instance}
             monthPicker={{
+               ...this.monthPickerOptions,
                value: this.value,
                from: this.from,
                to: this.to,

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

@@ -1,4 +1,5 @@
 import * as Cx from "../../core";
+import { Instance } from "../../ui";
 import { FieldProps } from "./Field";
 
 interface MonthPickerProps extends FieldProps {
@@ -71,6 +72,18 @@ interface MonthPickerProps extends FieldProps {
    /** A boolean flag that determines whether the `to` date is included in the range.
     * When set to true the value stored in the to field would be the last day of the month, i.e. `2024-12-31`. */
    inclusiveTo?: boolean;
+
+   /** Callback function that is called before writing data to the store. Return false to short-circuit updating the state. */
+   onBeforeSelect: (e: Event, instance: Instance, dateFrom?: Date, dateTo?: Date) => boolean;
+
+   /** Callback function that is called after value or date range has changed */
+   onSelect: (instance: Instance, dateFrom?: Date, dateTo?: Date) => void;
+
+   /**
+    * Optional parameter to hide the quarters period section on the picker.
+    * When true, the quarters section will not render.
+    */
+   hideQuarters?: boolean;
 }
 
 export class MonthPicker extends Cx.Widget<MonthPickerProps> {}

package/src/widgets/form/MonthPicker.js

@@ -154,6 +154,7 @@ MonthPicker.prototype.range = false;
 MonthPicker.prototype.startYear = 1980;
 MonthPicker.prototype.endYear = 2030;
 MonthPicker.prototype.bufferSize = 15;
+MonthPicker.prototype.hideQuarters = false;
 
 // Localization
 MonthPicker.prototype.maxValueErrorText = "Select {0:d} or before.";
@@ -193,7 +194,7 @@ export class MonthPickerComponent extends VDOM.Component {
          cursorQuarter: cursor.getMonth() / 3,
          column: "M",
          start: widget.startYear,
-         end: widget.startYear + widget.bufferSize,
+         end: Math.min(widget.startYear + widget.bufferSize, widget.endYear),
       };
 
       this.handleMouseDown = this.handleMouseDown.bind(this);
@@ -427,8 +428,9 @@ export class MonthPickerComponent extends VDOM.Component {
    }
 
    render() {
-      let { data, widget } = this.props.instance;
-      let { CSS, baseClass, startYear, endYear } = widget;
+      let { instance } = this.props;
+      let { data, widget } = instance;
+      let { CSS, baseClass, startYear, endYear, hideQuarters } = widget;
 
       let years = [];
 
@@ -512,24 +514,26 @@ export class MonthPickerComponent extends VDOM.Component {
                   </td>,
                );
             }
-            row.push(
-               <th
-                  key={`q${q}`}
-                  className={CSS.state({
-                     cursor:
-                        showCursor &&
-                        this.state.column == "Q" &&
-                        y == this.state.cursorYear &&
-                        q == this.state.cursorQuarter,
-                  })}
-                  data-point={`Y-${y}-Q-${q}`}
-                  onMouseEnter={this.handleMouseEnter}
-                  onMouseDown={this.handleMouseDown}
-                  onMouseUp={this.handleMouseUp}
-               >
-                  {`Q${q + 1}`}
-               </th>,
-            );
+
+            if (!hideQuarters)
+               row.push(
+                  <th
+                     key={`q${q}`}
+                     className={CSS.state({
+                        cursor:
+                           showCursor &&
+                           this.state.column == "Q" &&
+                           y == this.state.cursorYear &&
+                           q == this.state.cursorQuarter,
+                     })}
+                     data-point={`Y-${y}-Q-${q}`}
+                     onMouseEnter={this.handleMouseEnter}
+                     onMouseDown={this.handleMouseDown}
+                     onMouseUp={this.handleMouseUp}
+                  >
+                     {`Q${q + 1}`}
+                  </th>,
+               );
             rows.push(row);
          }
          years.push(rows);