@progress/kendo-react-dateinputs 7.2.4-develop.3 → 7.3.0-develop.1

package/datetimepicker/DateTimeSelector.mjs

@@ -0,0 +1,275 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as i from "react";
+import { provideLocalizationService as B, registerForLocalization as P } from "@progress/kendo-react-intl";
+import { dateTimePickerCancel as v, messages as m, dateTimePickerSet as b, date as k, time as y } from "../messages/index.mjs";
+import { Button as u, ButtonGroup as S } from "@progress/kendo-react-buttons";
+import { Calendar as K } from "../calendar/components/Calendar.mjs";
+import { TimePart as N } from "../timepicker/TimePart.mjs";
+import { MIDNIGHT_DATE as d, MIN_TIME as R, MAX_TIME as M, getToday as _, setTime as C } from "../utils.mjs";
+import { isEqualDate as D } from "@progress/kendo-date-math";
+import { Keys as o, classNames as x, getActiveElement as A } from "@progress/kendo-react-common";
+import { getNow as E } from "../timepicker/utils.mjs";
+const f = class f extends i.Component {
+  constructor(a) {
+    super(a), this._calendar = null, this._timePart = null, this._cancelButton = null, this._acceptButton = null, this._dateButtonRef = null, this._calendarWrap = null, this.shouldFocusPart = !1, this.focus = (t) => {
+      Promise.resolve().then(() => {
+        this.state.tab === "time" && this._timePart && this._timePart.focus(t);
+        const e = this.calendarElement();
+        this.state.tab === "date" && e && e.focus(t);
+      });
+    }, this.calendarElement = () => this._calendar && this._calendar.element || this._calendarWrap && this._calendarWrap.querySelector(".k-widget.k-calendar"), this.move = (t) => {
+      if (t === "right" && this.state.tab === "time" || t === "left" && this.state.tab === "date")
+        return;
+      const e = t === "left" ? "date" : "time";
+      this.shouldFocusPart = !0, this.setState({ tab: e });
+    }, this.dateTimeFooter = () => {
+      const { cancelButton: t } = this.props, e = this.localizationService.toLanguageString(v, m[v]), s = this.localizationService.toLanguageString(b, m[b]);
+      return /* @__PURE__ */ i.createElement("div", { className: "k-datetime-footer k-actions k-actions-stretched" }, t && /* @__PURE__ */ i.createElement(
+        u,
+        {
+          type: "button",
+          ref: (n) => {
+            this._cancelButton = n;
+          },
+          className: "k-time-cancel",
+          onClick: this.handleReject,
+          onKeyDown: this.handleCancelKeyDown,
+          title: e,
+          "aria-label": e
+        },
+        e
+      ), /* @__PURE__ */ i.createElement(
+        u,
+        {
+          type: "button",
+          themeColor: "primary",
+          ref: (n) => {
+            this._acceptButton = n;
+          },
+          className: "k-time-accept",
+          disabled: !this.hasDateValue,
+          onClick: this.handleAccept,
+          onKeyDown: this.handleSetKeyDown,
+          title: s,
+          "aria-label": s
+        },
+        s
+      ));
+    }, this.handleReject = (t) => {
+      this.setState({ dateValue: this.props.value, timeValue: this.props.value || d });
+      const e = this.mergeDate(this.props.value, this.props.value || d);
+      if (this.props.onReject) {
+        const s = {
+          nativeEvent: t.nativeEvent,
+          syntheticEvent: t,
+          target: this,
+          value: e
+        };
+        this.props.onReject.call(void 0, s);
+      }
+    }, this.handleAccept = (t, e) => {
+      if (!this.state.dateValue || !this.state.timeValue || !this.hasDateValue)
+        return;
+      const s = this.mergeDate(this.state.dateValue, e || this.state.timeValue);
+      this.props.onChange.call(void 0, {
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent,
+        value: s,
+        target: this
+      });
+    }, this.handleNowClick = (t) => {
+      this.setState({ timeValue: E() }), this.handleAccept(t, E());
+    }, this.handleCalendarValueChange = (t) => {
+      t.syntheticEvent.stopPropagation(), this.setState({ dateValue: t.value, tab: "time" }), this.shouldFocusPart = !0;
+    }, this.handleTimeListContainerChange = (t) => {
+      this.setState({ timeValue: t });
+    }, this.handleDateClick = (t) => {
+      t.stopPropagation(), this.move("left");
+    }, this.handleTimeClick = (t) => {
+      t.stopPropagation(), this.move("right");
+    }, this.handleKeyDown = (t) => {
+      const { keyCode: e, altKey: s } = t;
+      if (!this.props.disabled)
+        switch (e) {
+          case o.enter:
+            !this.hasActiveButton() && this.hasDateValue && this.handleAccept(t);
+            return;
+          case o.left:
+            if (!s)
+              return;
+            this.move("left");
+            return;
+          case o.right:
+            if (!s)
+              return;
+            this.move("right");
+            return;
+          default:
+            return;
+        }
+    }, this.handleCancelKeyDown = (t) => {
+      const { keyCode: e } = t;
+      e === o.tab && this._dateButtonRef && this._dateButtonRef.element && !this.hasDateValue && (t.preventDefault(), this._dateButtonRef.element.focus());
+    }, this.handleSetKeyDown = (t) => {
+      const { keyCode: e } = t;
+      e === o.tab && this._dateButtonRef && this._dateButtonRef.element && (t.preventDefault(), this._dateButtonRef.element.focus());
+    }, this.handleDateKeyDown = (t) => {
+      var n, h, r, c;
+      const { keyCode: e, shiftKey: s } = t;
+      s && e === o.tab && (t.stopPropagation(), this.hasDateValue ? (c = (r = this._acceptButton) == null ? void 0 : r.element) == null || c.focus() : (h = (n = this._cancelButton) == null ? void 0 : n.element) == null || h.focus()), e === o.enter && (t.stopPropagation(), this.move("left"));
+    }, this.handleTimeKeyDown = (t) => {
+      const { keyCode: e } = t;
+      e === o.enter && (t.stopPropagation(), this.move("right"));
+    }, this.handleTimePartMount = (t) => {
+      this.setState({ timeValue: t });
+    }, this.state = {
+      tab: "date",
+      dateValue: this.props.value,
+      timeValue: this.props.value || d
+    };
+  }
+  get calendar() {
+    return this._calendar;
+  }
+  get timePart() {
+    return this._timePart;
+  }
+  get hasDateValue() {
+    return this.state.dateValue !== null;
+  }
+  get localizationService() {
+    return B(this);
+  }
+  componentDidUpdate(a, t) {
+    var e, s;
+    this.shouldFocusPart && this.focus({ preventScroll: !0 }), (((e = a.value) == null ? void 0 : e.getTime()) !== ((s = this.props.value) == null ? void 0 : s.getTime()) || this.state.tab !== t.tab && this.props.value) && this.setState({
+      dateValue: a.value && this.props.value && D(a.value, this.props.value) ? this.state.dateValue : this.props.value,
+      timeValue: this.props.value || d
+    }), this.shouldFocusPart = !1;
+  }
+  render() {
+    const {
+      disabled: a,
+      min: t,
+      max: e,
+      weekNumber: s,
+      focusedDate: n,
+      format: h,
+      mobileMode: r,
+      footerActions: c
+    } = this.props, T = x(
+      {
+        "k-date-tab": this.state.tab === "date",
+        "k-time-tab": this.state.tab === "time",
+        "k-disabled": a
+      },
+      "k-datetime-wrap"
+    ), V = this.localizationService.toLanguageString(k, m[k]), w = this.localizationService.toLanguageString(y, m[y]), g = {
+      min: t,
+      max: e,
+      weekNumber: s,
+      focusedDate: n,
+      disabled: a || this.state.tab !== "date",
+      value: this.state.dateValue,
+      onChange: this.handleCalendarValueChange,
+      navigation: !1,
+      tabIndex: a || this.state.tab !== "date" ? -1 : void 0,
+      mobileMode: r
+    };
+    return /* @__PURE__ */ i.createElement(
+      "div",
+      {
+        onKeyDown: this.handleKeyDown,
+        className: T,
+        tabIndex: -1
+      },
+      /* @__PURE__ */ i.createElement("div", { className: "k-datetime-buttongroup" }, /* @__PURE__ */ i.createElement(S, { width: "100%" }, /* @__PURE__ */ i.createElement(
+        u,
+        {
+          ref: (l) => this._dateButtonRef = l,
+          type: "button",
+          selected: this.state.tab === "date",
+          togglable: !0,
+          onClick: this.handleDateClick,
+          onKeyDown: this.handleDateKeyDown
+        },
+        V
+      ), /* @__PURE__ */ i.createElement(
+        u,
+        {
+          type: "button",
+          selected: this.state.tab === "time",
+          togglable: !0,
+          onClick: this.handleTimeClick,
+          onKeyDown: this.handleTimeKeyDown
+        },
+        w
+      ))),
+      /* @__PURE__ */ i.createElement("div", { className: "k-datetime-selector" }, /* @__PURE__ */ i.createElement("div", { className: "k-datetime-calendar-wrap", ref: (l) => this._calendarWrap = l }, this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...g }) : /* @__PURE__ */ i.createElement(
+        K,
+        {
+          key: this.state.tab,
+          ref: (l) => {
+            this._calendar = l;
+          },
+          ...g
+        }
+      )), /* @__PURE__ */ i.createElement("div", { className: "k-datetime-time-wrap" }, /* @__PURE__ */ i.createElement("div", { className: r ? "k-reset k-timeselector-lg k-timeselector" : "" }, /* @__PURE__ */ i.createElement(
+        N,
+        {
+          key: 1,
+          onNowClick: this.handleNowClick,
+          disabled: a || this.state.tab !== "time",
+          ref: (l) => {
+            this._timePart = l;
+          },
+          min: this.minTime || R,
+          max: this.maxTime || M,
+          steps: this.props.steps,
+          value: this.state.timeValue,
+          format: h,
+          onChange: this.handleTimeListContainerChange,
+          onMount: this.handleTimePartMount,
+          mobileMode: r
+        }
+      )))),
+      c && this.dateTimeFooter()
+    );
+  }
+  get minTime() {
+    return this.props.minTime !== void 0 ? this.props.minTime : this.normalizeRange(this.props.min, this.state.dateValue);
+  }
+  get maxTime() {
+    return this.props.maxTime !== void 0 ? this.props.maxTime : this.normalizeRange(this.props.max, this.state.dateValue);
+  }
+  normalizeRange(a, t) {
+    return D(a, t || _()) ? a : null;
+  }
+  hasActiveButton() {
+    if (!this._acceptButton)
+      return !1;
+    const a = A(document);
+    return this._acceptButton && a === this._acceptButton.element || this._cancelButton && a === this._cancelButton.element;
+  }
+  mergeTime(a, t) {
+    return a && t ? C(t, a) : t;
+  }
+  mergeDate(a, t) {
+    return a ? C(a || _(), t) : t;
+  }
+};
+f.defaultProps = {
+  footerActions: !0
+};
+let p = f;
+P(p);
+export {
+  p as DateTimeSelector
+};