cx 24.6.2 → 24.6.3

package/src/widgets/drag-drop/variables.scss

@@ -1,12 +1,12 @@
-$cx-default-dragclone-background-color: rgba(white, 0.9) !default;
-$cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
-
-$cx-dragclone-style: (
-   background-color: $cx-default-dragclone-background-color,
-   box-shadow: $cx-default-dragclone-box-shadow,
-   opacity: 0.9
-) !default;
-
-$cx-dependencies: map-merge($cx-dependencies, (
-   'cx/widgets/DragSource': 'cx/widgets/DragClone'
+$cx-default-dragclone-background-color: rgba(white, 0.9) !default;
+$cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
+
+$cx-dragclone-style: (
+   background-color: $cx-default-dragclone-background-color,
+   box-shadow: $cx-default-dragclone-box-shadow,
+   opacity: 0.9
+) !default;
+
+$cx-dependencies: map-merge($cx-dependencies, (
+   'cx/widgets/DragSource': 'cx/widgets/DragClone'
 ))

package/src/widgets/enableAllInternalDependencies.d.ts

@@ -1 +1 @@
-export function enableAllInternalDependencies();
+export function enableAllInternalDependencies();

package/src/widgets/enableAllInternalDependencies.js

@@ -1,11 +1,11 @@
-import {enableTooltips} from './overlay/Tooltip';
-import {enableMsgBoxAlerts} from './overlay/MsgBox';
-import {enableCultureSensitiveFormatting} from '../ui/Format';
-import {enableFatArrowExpansion} from '../data/enableFatArrowExpansion';
-
-export function enableAllInternalDependencies() {
-   enableTooltips();
-   enableMsgBoxAlerts();
-   enableCultureSensitiveFormatting();
-   enableFatArrowExpansion();
-}
+import {enableTooltips} from './overlay/Tooltip';
+import {enableMsgBoxAlerts} from './overlay/MsgBox';
+import {enableCultureSensitiveFormatting} from '../ui/Format';
+import {enableFatArrowExpansion} from '../data/enableFatArrowExpansion';
+
+export function enableAllInternalDependencies() {
+   enableTooltips();
+   enableMsgBoxAlerts();
+   enableCultureSensitiveFormatting();
+   enableFatArrowExpansion();
+}

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/Calendar.js

@@ -1,26 +1,26 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { Culture } from "../../ui/Culture";
-import { FocusManager, oneFocusOut, offFocusOut } from "../../ui/FocusManager";
 import { StringTemplate } from "../../data/StringTemplate";
-import { zeroTime } from "../../util/date/zeroTime";
+import { Culture } from "../../ui/Culture";
+import { FocusManager, offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import "../../ui/Format";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
 import { dateDiff } from "../../util/date/dateDiff";
 import { lowerBoundCheck } from "../../util/date/lowerBoundCheck";
-import { upperBoundCheck } from "../../util/date/upperBoundCheck";
+import { monthStart } from "../../util/date/monthStart";
 import { sameDate } from "../../util/date/sameDate";
+import { upperBoundCheck } from "../../util/date/upperBoundCheck";
+import { zeroTime } from "../../util/date/zeroTime";
+import DropdownIcon from "../icons/drop-down";
+import ForwardIcon from "../icons/forward";
 import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
    tooltipMouseLeave,
+   tooltipMouseMove,
    tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
 } from "../overlay/tooltip-ops";
-import { KeyCode } from "../../util/KeyCode";
-import { Localization } from "../../ui/Localization";
-import ForwardIcon from "../icons/forward";
-import DropdownIcon from "../icons/drop-down";
-import "../../ui/Format";
-import { monthStart } from "../../util/date/monthStart";
+import { Field, getFieldTooltip } from "./Field";
 
 export class Calendar extends Field {
    declareData() {
@@ -37,7 +37,7 @@ export class Calendar extends Field {
             focusable: undefined,
             dayData: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -175,8 +175,9 @@ export class CalendarCmp extends VDOM.Component {
             hover: false,
             focus: false,
             cursor: zeroTime(data.date || refDate),
+            activeView: "calendar",
          },
-         this.getPage(refDate)
+         this.getPage(refDate),
       );
 
       this.handleMouseMove = this.handleMouseMove.bind(this);
@@ -367,6 +368,7 @@ export class CalendarCmp extends VDOM.Component {
       if (this.props.instance.widget.autoFocus) this.el.focus();
 
       tooltipParentDidMount(this.el, ...getFieldTooltip(this.props.instance));
+      this.el.addEventListener("wheel", (e) => this.handleWheel(e));
    }
 
    UNSAFE_componentWillReceiveProps(props) {
@@ -385,6 +387,85 @@ export class CalendarCmp extends VDOM.Component {
       tooltipParentWillUnmount(this.props.instance);
    }
 
+   showYearDropdown() {
+      this.setState({
+         activeView: "year-picker",
+         yearPickerHeight: this.el.firstChild.offsetHeight,
+      });
+   }
+
+   handleYearSelect(e, year) {
+      e.preventDefault();
+      e.stopPropagation();
+      let refDate = new Date(this.state.refDate);
+      refDate.setFullYear(year);
+      this.setState({
+         ...this.getPage(refDate),
+         refDate,
+         activeView: "calendar",
+      });
+   }
+
+   renderYearPicker() {
+      let { data, widget } = this.props.instance;
+      let minYear = data.minValue?.getFullYear();
+      let maxYear = data.maxValue?.getFullYear();
+      let { CSS } = this.props.instance.widget;
+
+      let years = [];
+      let currentYear = new Date().getFullYear();
+      let midYear = currentYear - (currentYear % 5);
+      let refYear = new Date(this.state.refDate).getFullYear();
+      for (let i = midYear - 100; i <= midYear + 100; i++) {
+         years.push(i);
+      }
+
+      let rows = [];
+      for (let i = 0; i < years.length; i += 5) {
+         rows.push(years.slice(i, i + 5));
+      }
+      return (
+         <div
+            className={CSS.element(widget.baseClass, "year-picker")}
+            style={{
+               height: this.state.yearPickerHeight,
+            }}
+            ref={(el) => {
+               if (el) {
+                  el.addEventListener("wheel", (e) => {
+                     e.stopPropagation();
+                  });
+
+                  let activeYear = el.querySelector("." + CSS.state("selected"));
+                  if (activeYear) activeYear.scrollIntoView({ block: "center", behavior: "instant" });
+               }
+            }}
+         >
+            <table>
+               <tbody>
+                  {rows.map((row, rowIndex) => (
+                     <tr key={rowIndex}>
+                        {row.map((year) => (
+                           <td
+                              key={year}
+                              className={CSS.element(this.props.instance.widget.baseClass, "year-option", {
+                                 unselectable: (minYear && year < minYear) || (maxYear && year > maxYear),
+                                 selected: year === refYear,
+                                 active: year === currentYear,
+                              })}
+                              onClick={(e) => this.handleYearSelect(e, year)}
+                           >
+                              {year}
+                           </td>
+                        ))}
+                     </tr>
+                  ))}
+               </tbody>
+            </table>
+         </div>
+      );
+   }
+
    render() {
       let { data, widget } = this.props.instance;
       let { CSS, baseClass, disabledDaysOfWeek, startWithMonday } = widget;
@@ -414,7 +495,7 @@ export class CalendarCmp extends VDOM.Component {
                   today: widget.highlightToday && sameDate(date, today),
                }),
                dayInfo.className,
-               CSS.mod(dayInfo.mod)
+               CSS.mod(dayInfo.mod),
             );
             let dateInst = new Date(date);
             days.push(
@@ -429,7 +510,7 @@ export class CalendarCmp extends VDOM.Component {
                   onMouseDown={unselectable ? null : this.handleMouseDown}
                >
                   {date.getDate()}
-               </td>
+               </td>,
             );
             date.setDate(date.getDate() + 1);
          }
@@ -438,7 +519,7 @@ export class CalendarCmp extends VDOM.Component {
                <td />
                {days}
                <td />
-            </tr>
+            </tr>,
          );
       }
 
@@ -465,44 +546,51 @@ export class CalendarCmp extends VDOM.Component {
             onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance))}
             onMouseLeave={(e) => this.handleMouseLeave(e)}
             onMouseEnter={(e) => this.handleMouseEnter(e)}
-            onWheel={(e) => this.handleWheel(e)}
+            // onWheel={(e) => this.handleWheel(e)}
             onFocus={(e) => this.handleFocus(e)}
             onBlur={(e) => this.handleBlur(e)}
          >
-            <table>
-               <thead>
-                  <tr key="h" className={CSS.element(baseClass, "header")}>
-                     <td />
-                     <td onClick={(e) => this.move(e, "y", -1)}>
-                        <ForwardIcon className={CSS.element(baseClass, "icon-prev-year")} />
-                     </td>
-                     <td onClick={(e) => this.move(e, "m", -1)}>
-                        <DropdownIcon className={CSS.element(baseClass, "icon-prev-month")} />
-                     </td>
-                     <th className={CSS.element(baseClass, "display")} colSpan="3">
-                        {monthNames[month]}
-                        <br />
-                        {year}
-                     </th>
-                     <td onClick={(e) => this.move(e, "m", +1)}>
-                        <DropdownIcon className={CSS.element(baseClass, "icon-next-month")} />
-                     </td>
-                     <td onClick={(e) => this.move(e, "y", +1)}>
-                        <ForwardIcon className={CSS.element(baseClass, "icon-next-year")} />
-                     </td>
-                     <td />
-                  </tr>
-                  <tr key="d" className={CSS.element(baseClass, "day-names")}>
-                     <td />
-                     {dayNames.map((name, i) => (
-                        <th key={i}>{name}</th>
-                     ))}
-                     <td />
-                  </tr>
-               </thead>
-               <tbody>{weeks}</tbody>
-            </table>
-            {widget.showTodayButton && (
+            {this.state.activeView == "calendar" && (
+               <table>
+                  <thead>
+                     <tr key="h" className={CSS.element(baseClass, "header")}>
+                        <td />
+                        <td onClick={(e) => this.move(e, "y", -1)}>
+                           <ForwardIcon className={CSS.element(baseClass, "icon-prev-year")} />
+                        </td>
+                        <td onClick={(e) => this.move(e, "m", -1)}>
+                           <DropdownIcon className={CSS.element(baseClass, "icon-prev-month")} />
+                        </td>
+                        <th className={CSS.element(baseClass, "display")} colSpan="3">
+                           {monthNames[month]}
+                           <br />
+                           <span
+                              onClick={() => this.showYearDropdown()}
+                              className={CSS.element(baseClass, "year-name")}
+                           >
+                              {year}
+                           </span>
+                        </th>
+                        <td onClick={(e) => this.move(e, "m", +1)}>
+                           <DropdownIcon className={CSS.element(baseClass, "icon-next-month")} />
+                        </td>
+                        <td onClick={(e) => this.move(e, "y", +1)}>
+                           <ForwardIcon className={CSS.element(baseClass, "icon-next-year")} />
+                        </td>
+                        <td />
+                     </tr>
+                     <tr key="d" className={CSS.element(baseClass, "day-names")}>
+                        <td />
+                        {dayNames.map((name, i) => (
+                           <th key={i}>{name}</th>
+                        ))}
+                        <td />
+                     </tr>
+                  </thead>
+                  <tbody>{weeks}</tbody>
+               </table>
+            )}
+            {this.state.activeView == "calendar" && widget.showTodayButton && (
                <div className={CSS.element(baseClass, "toolbar")}>
                   <button
                      className={CSS.expand(CSS.element(baseClass, "today-button"), CSS.block("button", "hollow"))}
@@ -517,6 +605,8 @@ export class CalendarCmp extends VDOM.Component {
                   </button>
                </div>
             )}
+
+            {this.state.activeView == "year-picker" && this.renderYearPicker()}
          </div>
       );
    }

package/src/widgets/form/Calendar.scss

@@ -16,6 +16,7 @@
       display: inline-block;
       vertical-align: middle;
       width: 18em;
+      overflow-y: auto;
       box-sizing: border-box;
 
       &:hover {
@@ -91,8 +92,8 @@
          }
       }
 
-      td:first-child,
-      td:last-child {
+      td:not(.cxe-calendar-year-option):first-child,
+      td:not(.cxe-calendar-year-option):last-child {
          display: none;
          pointer-events: none;
       }
@@ -137,6 +138,37 @@
       user-select: none;
    }
 
+   .#{$element}#{$name}-year {
+      &-name {
+         cursor: pointer;
+      }
+
+      &-picker {
+         user-select: none;
+         overflow-y: scroll;
+         width: 100%;
+         max-height: 24em;
+         height: auto;
+      }
+
+      &-option {
+         cursor: pointer;
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
+
+         &.#{$state}active {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
+         }
+
+         &:hover {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
+         }
+
+         &.#{$state}selected {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
+         }
+      }
+   }
+
    .#{$element}#{$name}-icon-prev-year {
       transform: rotate(180deg);
    }