cx 25.10.1 → 26.0.1

package/src/widgets/form/DateTimePicker.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-datetimepicker(
    $name: 'datetimepicker',
    $dtp-font-size: $cx-default-font-size,
@@ -10,10 +12,10 @@
    $icon-size: $cx-default-input-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
       background: $dtp-background-color;

package/src/widgets/form/DateTimePicker.tsx

@@ -0,0 +1,431 @@
+/** @jsxImportSource react */
+
+import * as React from "react";
+import { Culture } from "../../ui/Culture";
+import { offFocusOut, oneFocusOut } from "../../ui/FocusManager";
+import { enableCultureSensitiveFormatting } from "../../ui/Format";
+import type { Instance } from "../../ui/Instance";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM, Widget } from "../../ui/Widget";
+import { parseDateInvariant } from "../../util";
+import { KeyCode } from "../../util/KeyCode";
+import { WheelComponent } from "./Wheel";
+
+enableCultureSensitiveFormatting();
+
+export class DateTimePicker extends Widget {
+   declare public size: number;
+   declare public segment: string;
+   declare public autoFocus?: boolean;
+   declare public showSeconds?: boolean;
+   declare public encoding?: (date: Date) => string;
+   declare public onFocusOut?: string | ((instance: Instance) => void);
+   declare public onSelect?: string | ((e: React.KeyboardEvent, instance: Instance, date: Date) => void);
+   declare baseClass: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      return super.declareData(...args, {
+         value: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      return (
+         <DateTimePickerComponent
+            key={key}
+            instance={instance}
+            data={instance.data}
+            size={this.size}
+            segment={this.segment}
+         />
+      );
+   }
+}
+
+DateTimePicker.prototype.baseClass = "datetimepicker";
+DateTimePicker.prototype.styled = true;
+DateTimePicker.prototype.size = 3;
+DateTimePicker.prototype.autoFocus = false;
+DateTimePicker.prototype.segment = "datetime";
+DateTimePicker.prototype.showSeconds = false;
+
+interface DateTimePickerComponentProps {
+   instance: Instance;
+   data: Record<string, unknown>;
+   size: number;
+   segment: string;
+}
+
+interface DateTimePickerComponentState {
+   date: Date;
+   activeWheel: string | null;
+}
+
+class DateTimePickerComponent extends VDOM.Component<DateTimePickerComponentProps, DateTimePickerComponentState> {
+   el!: HTMLDivElement;
+   declare wheels: Record<string, boolean>;
+   keyDownPipes: Record<string, (e: React.KeyboardEvent) => void>;
+
+   constructor(props: DateTimePickerComponentProps) {
+      super(props);
+      let date = props.data.value ? parseDateInvariant(props.data.value as string | number | Date) : new Date();
+      if (isNaN(date.getTime())) date = new Date();
+      this.state = {
+         date: date,
+         activeWheel: null,
+      };
+
+      let { widget } = props.instance;
+      let pickerWidget = widget as DateTimePicker;
+
+      this.handleChange = this.handleChange.bind(this);
+      this.onFocus = this.onFocus.bind(this);
+      this.onBlur = this.onBlur.bind(this);
+      this.onKeyDown = this.onKeyDown.bind(this);
+
+      let showDate = props.segment.indexOf("date") !== -1;
+      let showTime = props.segment.indexOf("time") !== -1;
+
+      this.wheels = {
+         year: showDate,
+         month: showDate,
+         date: showDate,
+         hours: showTime,
+         minutes: showTime,
+         seconds: showTime && !!pickerWidget.showSeconds,
+      };
+
+      this.keyDownPipes = {};
+   }
+
+   UNSAFE_componentWillReceiveProps(props: DateTimePickerComponentProps): void {
+      let date = props.data.value ? parseDateInvariant(props.data.value as string | number | Date) : new Date();
+      if (isNaN(date.getTime())) date = new Date();
+      this.setState({ date });
+   }
+
+   setDateComponent(date: Date, component: string, value: number): Date {
+      let v = new Date(date);
+      switch (component) {
+         case "year":
+            v.setFullYear(value);
+            break;
+
+         case "month":
+            v.setMonth(value);
+            break;
+
+         case "date":
+            v.setDate(value);
+            break;
+
+         case "hours":
+            v.setHours(value);
+            break;
+
+         case "minutes":
+            v.setMinutes(value);
+            break;
+
+         case "seconds":
+            v.setSeconds(value);
+            break;
+      }
+      return v;
+   }
+
+   handleChange(): void {
+      let { widget } = this.props.instance;
+      let pickerWidget = widget as DateTimePicker;
+      let encode = pickerWidget.encoding || Culture.getDefaultDateEncoding();
+      this.props.instance.set("value", encode!(this.state.date));
+   }
+
+   render(): React.ReactNode {
+      let { instance, data, size } = this.props;
+      let { widget } = instance;
+      let { CSS, baseClass } = widget;
+      let pickerWidget = widget as DateTimePicker;
+      let date = this.state.date;
+
+      let culture = Culture.getDateTimeCulture();
+      let monthNames = culture.getMonthNames("short");
+
+      let years = [];
+      for (let y = 1970; y <= 2050; y++) years.push(<span key={y}>{y}</span>);
+
+      let days = [];
+      let start = new Date(date.getFullYear(), date.getMonth(), 1);
+      while (start.getMonth() === date.getMonth()) {
+         let day = start.getDate();
+         days.push(<span key={day}>{day < 10 ? "0" + day : day}</span>);
+         start.setDate(start.getDate() + 1);
+      }
+
+      let hours = [];
+      for (let h = 0; h < 24; h++) {
+         hours.push(<span key={h}>{h < 10 ? "0" + h : h}</span>);
+      }
+
+      let minutes = [];
+      for (let m = 0; m < 60; m++) {
+         minutes.push(<span key={m}>{m < 10 ? "0" + m : m}</span>);
+      }
+
+      return (
+         <div
+            tabIndex={0}
+            ref={(el) => {
+               this.el = el!;
+            }}
+            className={data.classNames as string}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            onKeyDown={this.onKeyDown}
+         >
+            {this.wheels.year && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "year"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getFullYear() - 1970}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "year", newIndex + 1970),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["year"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "year" });
+                  }}
+               >
+                  {years}
+               </WheelComponent>
+            )}
+            {this.wheels.year && this.wheels.month && <span>-</span>}
+            {this.wheels.month && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "month"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getMonth()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "month", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["month"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "month" });
+                  }}
+               >
+                  {monthNames.map((m: string, i: number) => (
+                     <span key={i}>{m}</span>
+                  ))}
+               </WheelComponent>
+            )}
+            {this.wheels.month && this.wheels.date && <span>-</span>}
+            {this.wheels.date && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "date"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getDate() - 1}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "date", newIndex + 1),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["date"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "date" });
+                  }}
+               >
+                  {days}
+               </WheelComponent>
+            )}
+            {this.wheels.hours && this.wheels.year && <span className={CSS.element(baseClass!, "spacer")} />}
+            {this.wheels.hours && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  active={this.state.activeWheel === "hours"}
+                  baseClass={baseClass + "-wheel"}
+                  index={date.getHours()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "hours", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["hours"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "hours" });
+                  }}
+               >
+                  {hours}
+               </WheelComponent>
+            )}
+            {this.wheels.hours && this.wheels.minutes && <span>:</span>}
+            {this.wheels.minutes && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  baseClass={baseClass + "-wheel"}
+                  active={this.state.activeWheel === "minutes"}
+                  index={date.getMinutes()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "minutes", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["minutes"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "minutes" });
+                  }}
+               >
+                  {minutes}
+               </WheelComponent>
+            )}
+            {this.wheels.minutes && this.wheels.seconds && <span>:</span>}
+            {this.wheels.seconds && (
+               <WheelComponent
+                  size={size}
+                  CSS={CSS}
+                  baseClass={baseClass + "-wheel"}
+                  active={this.state.activeWheel === "seconds"}
+                  index={date.getSeconds()}
+                  onChange={(newIndex) => {
+                     this.setState(
+                        (state) => ({
+                           date: this.setDateComponent(this.state.date, "seconds", newIndex),
+                        }),
+                        this.handleChange,
+                     );
+                  }}
+                  onPipeKeyDown={(kd) => {
+                     this.keyDownPipes["seconds"] = kd;
+                  }}
+                  onMouseDown={() => {
+                     this.setState({ activeWheel: "seconds" });
+                  }}
+               >
+                  {minutes}
+               </WheelComponent>
+            )}
+         </div>
+      );
+   }
+
+   componentDidMount(): void {
+      let { widget } = this.props.instance;
+      let pickerWidget = widget as DateTimePicker;
+      if (pickerWidget.autoFocus) this.el.focus();
+   }
+
+   componentWillUnmount(): void {
+      offFocusOut(this);
+   }
+
+   onFocus(): void {
+      oneFocusOut(this, this.el, this.onFocusOut.bind(this));
+
+      if (!this.state.activeWheel) {
+         let firstWheel: string | null = null;
+         for (let wheel in this.wheels) {
+            if (this.wheels[wheel]) {
+               firstWheel = wheel;
+               break;
+            }
+         }
+
+         this.setState({
+            activeWheel: firstWheel,
+         });
+      }
+   }
+
+   onFocusOut(): void {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let pickerWidget = widget as DateTimePicker;
+      if (pickerWidget.onFocusOut) instance.invoke("onFocusOut", null, instance);
+   }
+
+   onBlur(): void {
+      this.setState({
+         activeWheel: null,
+      });
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let tmp: string | null = null;
+      let { instance } = this.props;
+      let { widget } = instance;
+      let pickerWidget = widget as DateTimePicker;
+
+      switch (e.keyCode) {
+         case KeyCode.right:
+            e.preventDefault();
+            for (let wheel in this.wheels) {
+               if (this.wheels[wheel]) {
+                  if (tmp === this.state.activeWheel) {
+                     this.setState({ activeWheel: wheel });
+                     break;
+                  }
+                  tmp = wheel;
+               }
+            }
+            break;
+
+         case KeyCode.left:
+            e.preventDefault();
+            for (let wheel in this.wheels) {
+               if (this.wheels[wheel]) {
+                  if (wheel === this.state.activeWheel && tmp) {
+                     this.setState({ activeWheel: tmp });
+                     break;
+                  }
+                  tmp = wheel;
+               }
+            }
+            break;
+
+         case KeyCode.enter:
+            e.preventDefault();
+            if (pickerWidget.onSelect) instance.invoke("onSelect", e, instance, this.state.date);
+            break;
+
+         default: let kdp = this.keyDownPipes[this.state.activeWheel!];
+            if (kdp) kdp(e);
+            break;
+      }
+   }
+}

package/src/widgets/form/Field.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cxb-field($besm, $state-style-map, $input: true, $box: false, $width: null) {
    position: relative;
    display: inline-block;
@@ -37,7 +39,7 @@
       height: cx-get-state-rule($state-style-map, default, "height");
    }
 
-   $state: map-get($besm, state);
+   $state: map.get($besm, state);
 
    &.#{$state}view-mode {
       line-height: $line-height;
@@ -49,7 +51,7 @@
 }
 
 @mixin cxe-field-input($besm, $state-style-map, $overrides: null, $placeholder: null, $width: 100%, $input: true) {
-   $state: map-get($besm, state);
+   $state: map.get($besm, state);
 
    $styles: cx-deep-map-merge($state-style-map, $overrides);