cx 25.6.2 → 25.6.3

package/src/widgets/form/LookupField.scss

@@ -1,219 +1,219 @@
-@mixin cx-lookupfield(
-   $name: "lookupfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $tag-state-style-map: $cx-input-tag-state-style-map,
-   $tag-clear-state-style-map: $cx-input-tag-clear-state-style-map,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   $padding: cx-get-state-rule($state-style-map, default, padding);
-   $border-radius-offset: round(cx-get-state-rule($tag-state-style-map, default, border-radius) * 0.25);
-
-   .#{$block}#{$name} {
-      cursor: pointer;
-      width: $width;
-      font: cx-get-state-rule($state-style-map, default, "font");
-      font-size: cx-get-state-rule($state-style-map, default, "font-size");
-
-      @include cxb-field($besm, $state-style-map, $input: false);
-
-      &.#{$state}multiple {
-         min-width: $cx-default-input-width;
-         width: auto;
-      }
-
-      &.#{$state}readonly {
-         pointer-events: none;
-
-         & > .#{$element}#{$name}-input {
-            padding-right: cx-right($padding);
-         }
-      }
-   }
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $input: false,
-         $overrides: (
-            default: (
-               height: 100%,
-               text-overflow: null,
-               padding: cx-top($padding)
-                  cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing) cx-bottom($padding)
-                  cx-left($padding),
-            )
-         )
-      );
-
-      .#{$state}multiple > & {
-         padding: 0 cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing)
-            $cx-default-input-tag-spacing 0;
-         align-items: center;
-         flex-wrap: wrap;
-         display: flex;
-      }
-
-      .#{$state}single > & {
-         overflow: hidden;
-         text-overflow: ellipsis;
-         white-space: nowrap;
-         display: block;
-         flex-basis: 0%;
-         flex-grow: 1;
-      }
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
-      }
-   }
-
-   .#{$element}#{$name}-tag {
-      display: inline-block;
-      position: relative;
-      box-sizing: border-box;
-
-      @include cx-add-state-rules($tag-state-style-map, default);
-
-      &:hover {
-         @include cx-add-state-rules($tag-state-style-map, hover);
-      }
-
-      &.#{$state}readonly {
-         padding-right: cx-right($padding);
-         pointer-events: none;
-      }
-   }
-
-   .#{$element}#{$name}-placeholder {
-      color: $cx-default-input-placeholder-color;
-
-      .#{$block}#{$name}.#{$state}multiple & {
-         display: inline-block;
-         margin: $cx-default-input-tag-spacing 0 0 $cx-default-input-tag-spacing;
-         box-sizing: border-box;
-         padding: cx-calc(cx-top($cx-default-input-padding), -$cx-default-input-tag-spacing)
-            cx-calc(cx-right($cx-default-input-padding), -$cx-default-input-tag-spacing)
-            cx-calc(cx-bottom($cx-default-input-padding), -$cx-default-input-tag-spacing)
-            cx-calc(cx-left($cx-default-input-padding), -$cx-default-input-tag-spacing);
-      }
-   }
-
-   .#{$element}#{$name}-tag-value {
-      padding: 0 cx-calc($cx-default-input-tag-spacing, $border-radius-offset);
-      display: inline-block;
-   }
-
-   .#{$element}#{$name}-tag-clear {
-      @include cxe-field-button($besm, $tag-clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-lookup-options {
-      padding: 0;
-      margin: 0;
-      min-width: 100%;
-      width: 100%;
-   }
-
-   .#{$element}#{$name}-query {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $width: calc(100% - 10px),
-         $overrides: (
-            default: (
-               margin: 5px,
-               flex: 0 0 auto,
-               height: auto,
-            )
-         )
-      );
-      //put query field down when placed up
-      .#{$state}place-up-right &,
-      .#{$state}place-up &,
-      .#{$state}place-up-left & {
-         order: 1;
-      }
-   }
-
-   .#{$element}#{$name}-dropdown {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-
-      &:focus {
-         outline: none;
-      }
-   }
-
-   .#{$element}#{$name}-message {
-      font-size: smaller;
-      padding: 10px;
-      color: gray;
-      font-style: italic;
-
-      &.#{$state}error {
-         color: #9e2f2d;
-      }
-   }
-
-   .#{$element}#{$name}-scroll-container {
-      overflow: auto;
-      flex: 1 1 auto;
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-
-      .#{$state}focus > & {
-         @include cx-add-state-rules($clear-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($clear-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-tool {
-      @include cxe-field-button($besm, $tool-state-style-map);
-
-      .#{$state}disabled > & {
-         border-width: 0;
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($tool-state-style-map, focus);
-      }
-      .#{$state}error > & {
-         @include cx-add-state-rules($tool-state-style-map, error);
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      @include cxe-field-button($besm, $left-icon-state-style-map);
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/LookupField")) {
-   @include cx-lookupfield();
-}
+@mixin cx-lookupfield(
+   $name: "lookupfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $tag-state-style-map: $cx-input-tag-state-style-map,
+   $tag-clear-state-style-map: $cx-input-tag-clear-state-style-map,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   $padding: cx-get-state-rule($state-style-map, default, padding);
+   $border-radius-offset: round(cx-get-state-rule($tag-state-style-map, default, border-radius) * 0.25);
+
+   .#{$block}#{$name} {
+      cursor: pointer;
+      width: $width;
+      font: cx-get-state-rule($state-style-map, default, "font");
+      font-size: cx-get-state-rule($state-style-map, default, "font-size");
+
+      @include cxb-field($besm, $state-style-map, $input: false);
+
+      &.#{$state}multiple {
+         min-width: $cx-default-input-width;
+         width: auto;
+      }
+
+      &.#{$state}readonly {
+         pointer-events: none;
+
+         & > .#{$element}#{$name}-input {
+            padding-right: cx-right($padding);
+         }
+      }
+   }
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $input: false,
+         $overrides: (
+            default: (
+               height: 100%,
+               text-overflow: null,
+               padding: cx-top($padding)
+                  cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing) cx-bottom($padding)
+                  cx-left($padding),
+            )
+         )
+      );
+
+      .#{$state}multiple > & {
+         padding: 0 cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing)
+            $cx-default-input-tag-spacing 0;
+         align-items: center;
+         flex-wrap: wrap;
+         display: flex;
+      }
+
+      .#{$state}single > & {
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+         display: block;
+         flex-basis: 0%;
+         flex-grow: 1;
+      }
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+      }
+   }
+
+   .#{$element}#{$name}-tag {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+
+      @include cx-add-state-rules($tag-state-style-map, default);
+
+      &:hover {
+         @include cx-add-state-rules($tag-state-style-map, hover);
+      }
+
+      &.#{$state}readonly {
+         padding-right: cx-right($padding);
+         pointer-events: none;
+      }
+   }
+
+   .#{$element}#{$name}-placeholder {
+      color: $cx-default-input-placeholder-color;
+
+      .#{$block}#{$name}.#{$state}multiple & {
+         display: inline-block;
+         margin: $cx-default-input-tag-spacing 0 0 $cx-default-input-tag-spacing;
+         box-sizing: border-box;
+         padding: cx-calc(cx-top($cx-default-input-padding), -$cx-default-input-tag-spacing)
+            cx-calc(cx-right($cx-default-input-padding), -$cx-default-input-tag-spacing)
+            cx-calc(cx-bottom($cx-default-input-padding), -$cx-default-input-tag-spacing)
+            cx-calc(cx-left($cx-default-input-padding), -$cx-default-input-tag-spacing);
+      }
+   }
+
+   .#{$element}#{$name}-tag-value {
+      padding: 0 cx-calc($cx-default-input-tag-spacing, $border-radius-offset);
+      display: inline-block;
+   }
+
+   .#{$element}#{$name}-tag-clear {
+      @include cxe-field-button($besm, $tag-clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-lookup-options {
+      padding: 0;
+      margin: 0;
+      min-width: 100%;
+      width: 100%;
+   }
+
+   .#{$element}#{$name}-query {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $width: calc(100% - 10px),
+         $overrides: (
+            default: (
+               margin: 5px,
+               flex: 0 0 auto,
+               height: auto,
+            )
+         )
+      );
+      //put query field down when placed up
+      .#{$state}place-up-right &,
+      .#{$state}place-up &,
+      .#{$state}place-up-left & {
+         order: 1;
+      }
+   }
+
+   .#{$element}#{$name}-dropdown {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      &:focus {
+         outline: none;
+      }
+   }
+
+   .#{$element}#{$name}-message {
+      font-size: smaller;
+      padding: 10px;
+      color: gray;
+      font-style: italic;
+
+      &.#{$state}error {
+         color: #9e2f2d;
+      }
+   }
+
+   .#{$element}#{$name}-scroll-container {
+      overflow: auto;
+      flex: 1 1 auto;
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+
+      .#{$state}focus > & {
+         @include cx-add-state-rules($clear-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($clear-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-tool {
+      @include cxe-field-button($besm, $tool-state-style-map);
+
+      .#{$state}disabled > & {
+         border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($tool-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($tool-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/LookupField")) {
+   @include cx-lookupfield();
+}

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

@@ -84,6 +84,14 @@ interface MonthPickerProps extends FieldProps {
     * When true, the quarters section will not render.
     */
    hideQuarters?: boolean;
+
+   /**
+    * Callback to create a function that determines if a date is selectable.
+    * Return `false` on factory method to disable specific month, quarter or a whole year.
+    *
+    * Note: Use the `onValidate` callback for validation purposes.
+    */
+   onCreateIsMonthDateSelectable?: (validationParams: Cx.Config, instance: Instance) => (monthDate: Date) => boolean;
 }
 
 export class MonthPicker extends Cx.Widget<MonthPickerProps> {}

package/src/widgets/form/MonthPicker.js

@@ -68,7 +68,8 @@ export class MonthPicker extends Field {
       super.init();
    }
 
-   prepareData(context, { data }) {
+   prepareData(context, instance) {
+      let { data } = instance;
       data.stateMods = {
          disabled: data.disabled,
       };
@@ -91,6 +92,14 @@ export class MonthPicker extends Field {
 
       if (data.minValue) data.minValue = monthStart(parseDateInvariant(data.minValue));
 
+      if (this.onCreateIsMonthDateSelectable) {
+         instance.isMonthDateSelectable = instance.invoke(
+            "onCreateIsMonthDateSelectable",
+            data.validationParams,
+            instance,
+         );
+      }
+
       super.prepareData(...arguments);
    }
 
@@ -129,12 +138,13 @@ export class MonthPicker extends Field {
    }
 
    handleSelect(e, instance, date1, date2) {
-      let { data, widget } = instance;
+      let { data, widget, isMonthDateSelectable } = instance;
       let encode = widget.encoding || Culture.getDefaultDateEncoding();
 
       if (data.disabled) return;
 
-      if (!validationCheck(date1, data)) return;
+      if (isMonthDateSelectable && !isMonthDateSelectable(date1)) return;
+      if (!dateSelectableCheck(date1, data)) return;
 
       if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
 
@@ -167,7 +177,7 @@ Localization.registerPrototype("cx/widgets/MonthPicker", MonthPicker);
 
 Widget.alias("month-picker", MonthPicker);
 
-const validationCheck = (date, data) => {
+const dateSelectableCheck = (date, data) => {
    if (data.maxValue && !upperBoundCheck(date, data.maxValue, data.maxExclusive)) return false;
 
    if (data.minValue && !lowerBoundCheck(date, data.minValue, data.minExclusive)) return false;
@@ -429,7 +439,7 @@ export class MonthPickerComponent extends VDOM.Component {
 
    render() {
       let { instance } = this.props;
-      let { data, widget } = instance;
+      let { data, widget, isMonthDateSelectable } = instance;
       let { CSS, baseClass, startYear, endYear, hideQuarters } = widget;
 
       let years = [];
@@ -464,29 +474,48 @@ export class MonthPickerComponent extends VDOM.Component {
       let showCursor = this.state.hover || this.state.focused;
 
       for (let y = start; y <= end; y++) {
+         let selectableMonths = 0b111111111111;
+         // Loop through the months in a year to check if all months are unselectable
+         for (let i = 0; i < 12; i++) {
+            if (
+               (isMonthDateSelectable && !isMonthDateSelectable(new Date(y, i, 1))) ||
+               !dateSelectableCheck(new Date(y, i, 1), data)
+            ) {
+               // Set month as unselectable at specified bit
+               selectableMonths &= ~(1 << i);
+            }
+         }
+
+         // All bits are 0 - all months are unselectable
+         const unselectableYear = selectableMonths === 0;
+
          let rows = [];
          for (let q = 0; q < 4; q++) {
             let row = [];
-            if (q == 0)
+            if (q == 0) {
                row.push(
                   <th
                      key="year"
                      rowSpan={4}
                      data-point={`Y-${y}`}
-                     className={CSS.element(baseClass, "year", {
-                        cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
-                     })}
-                     onMouseEnter={this.handleMouseEnter}
-                     onMouseDown={this.handleMouseDown}
-                     onMouseUp={this.handleMouseUp}
+                     className={CSS.expand(
+                        CSS.element(baseClass, "year", {
+                           cursor: showCursor && this.state.column == "Y" && y == this.state.cursorYear,
+                        }),
+                        CSS.state({ unselectable: unselectableYear }),
+                     )}
+                     onMouseEnter={unselectableYear ? null : this.handleMouseEnter}
+                     onMouseDown={unselectableYear ? null : this.handleMouseDown}
+                     onMouseUp={unselectableYear ? null : this.handleMouseUp}
                   >
                      {y}
                   </th>,
                );
+            }
 
             for (let i = 0; i < 3; i++) {
                let m = q * 3 + i + 1;
-               let unselectable = !validationCheck(new Date(y, m - 1, 1), data);
+               const unselectableMonth = (selectableMonths & (1 << (m - 1))) === 0;
                let mno = y * 12 + m - 1;
                let handle = true; //isTouchDevice(); //mno === from || mno === to - 1;
                row.push(
@@ -500,14 +529,14 @@ export class MonthPickerComponent extends VDOM.Component {
                            m == this.state.cursorMonth,
                         handle,
                         selected: mno >= from && mno < to,
-                        unselectable,
+                        unselectable: unselectableMonth,
                      })}
                      data-point={`Y-${y}-M-${m}`}
-                     onMouseEnter={unselectable ? null : this.handleMouseEnter}
-                     onMouseDown={unselectable ? null : this.handleMouseDown}
-                     onMouseUp={unselectable ? null : this.handleMouseUp}
-                     onTouchStart={unselectable ? null : this.handleMouseDown}
-                     onTouchMove={unselectable ? null : this.handleTouchMove}
+                     onMouseEnter={unselectableMonth ? null : this.handleMouseEnter}
+                     onMouseDown={unselectableMonth ? null : this.handleMouseDown}
+                     onMouseUp={unselectableMonth ? null : this.handleMouseUp}
+                     onTouchStart={unselectableMonth ? null : this.handleMouseDown}
+                     onTouchMove={unselectableMonth ? null : this.handleTouchMove}
                      onTouchEnd={this.handleMouseUp}
                   >
                      {monthNames[m - 1].substr(0, 3)}
@@ -515,7 +544,17 @@ export class MonthPickerComponent extends VDOM.Component {
                );
             }
 
-            if (!hideQuarters)
+            if (!hideQuarters) {
+               let unselectableQuarter = true;
+               const start = q * 3;
+               for (let i = start; i < start + 3; i++) {
+                  if ((selectableMonths & (1 << i)) !== 0) {
+                     // found a selectable month in a quarter
+                     unselectableQuarter = false;
+                     break;
+                  }
+               }
+
                row.push(
                   <th
                      key={`q${q}`}
@@ -525,15 +564,18 @@ export class MonthPickerComponent extends VDOM.Component {
                            this.state.column == "Q" &&
                            y == this.state.cursorYear &&
                            q == this.state.cursorQuarter,
+                        unselectable: unselectableQuarter,
                      })}
                      data-point={`Y-${y}-Q-${q}`}
-                     onMouseEnter={this.handleMouseEnter}
-                     onMouseDown={this.handleMouseDown}
-                     onMouseUp={this.handleMouseUp}
+                     onMouseEnter={unselectableQuarter ? null : this.handleMouseEnter}
+                     onMouseDown={unselectableQuarter ? null : this.handleMouseDown}
+                     onMouseUp={unselectableQuarter ? null : this.handleMouseUp}
                   >
                      {`Q${q + 1}`}
                   </th>,
                );
+            }
+
             rows.push(row);
          }
          years.push(rows);

package/src/widgets/form/MonthPicker.scss

@@ -57,6 +57,10 @@
          color: lightgray;
       }
 
+      th.#{$state}unselectable {
+         @include cx-add-state-rules($cx-list-item, disabled);
+      }
+
       .#{$element}#{$name}-year {
          font-size: 120%;
          color: gray;