@hitachivantara/uikit-react-core/dist/cjs/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const styles = require("@mui/material/styles");
const useMediaQuery = require("@mui/material/useMediaQuery");
const dayjs = require("dayjs");
const helpers = require("../../../../utils/helpers.cjs");
const Context = require("../../../Context.cjs");
const DateTimeValue_styles = require("./DateTimeValue.styles.cjs");
const utils = require("./utils.cjs");
const DatePicker = require("../../../../DatePicker/DatePicker.cjs");
const TimePicker = require("../../../../TimePicker/TimePicker.cjs");
const WarningText = require("../../../../FormElement/WarningText/WarningText.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
function valueIsRange(operator) {
  return operator === "range";
}
const DateTimeValue = ({
  id,
  operator,
  value: valueProp = {},
  initialTouched = false
}) => {
  const { classes, cx } = DateTimeValue_styles.useClasses();
  const theme = styles.useTheme();
  const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
  const isRange = valueIsRange(operator);
  const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
  const elementId = helpers.uniqueId(`datetime${id}`);
  const [touchedDate, setTouchedDate] = React.useState(initialTouched);
  const [touchedTime, setTouchedTime] = React.useState(initialTouched);
  const [touchedEndDate, setTouchedEndDate] = React.useState(initialTouched);
  const [touchedEndTime, setTouchedEndTime] = React.useState(initialTouched);
  const onDateChange = React.useCallback(
    (data) => {
      setTouchedDate(true);
      let date;
      if (data != null) {
        date = dayjs__default.default(data).format("YYYY-MM-DD");
      }
      const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;
      if (date !== oldValue) {
        let value;
        if (!isRange) {
          value = {
            date,
            time: valueProp?.time
          };
        } else {
          value = {
            start: {
              date,
              time: valueProp?.start?.time
            },
            end: valueProp?.end
          };
        }
        dispatchAction({
          type: "set-value",
          id,
          value
        });
      }
    },
    [dispatchAction, id, isRange, valueProp]
  );
  const onTimeChange = React.useCallback(
    (data) => {
      setTouchedTime(true);
      let time;
      if (data != null) {
        time = `${utils.padTime(data.hours)}:${utils.padTime(data.minutes)}:${utils.padTime(
          data.seconds
        )}`;
      }
      const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;
      if (time !== oldValue) {
        let value;
        if (!isRange) {
          value = {
            date: valueProp?.date,
            time
          };
        } else {
          value = {
            start: {
              date: valueProp?.start?.date,
              time
            },
            end: valueProp?.end
          };
        }
        dispatchAction({
          type: "set-value",
          id,
          value
        });
      }
    },
    [dispatchAction, id, isRange, valueProp]
  );
  const onEndDateChange = React.useCallback(
    (data) => {
      setTouchedEndDate(true);
      let date;
      if (data != null) {
        date = dayjs__default.default(data).format("YYYY-MM-DD");
      }
      if (date !== valueProp?.end?.date) {
        const value = {
          start: valueProp?.start,
          end: {
            date,
            time: valueProp?.end?.time
          }
        };
        dispatchAction({
          type: "set-value",
          id,
          value
        });
      }
    },
    [dispatchAction, id, valueProp]
  );
  const onEndTimeChange = React.useCallback(
    (data) => {
      setTouchedEndTime(true);
      let time;
      if (data != null) {
        time = `${utils.padTime(data.hours)}:${utils.padTime(data.minutes)}:${utils.padTime(
          data.seconds
        )}`;
      }
      if (time !== valueProp?.end?.time) {
        const value = {
          start: valueProp?.start,
          end: {
            date: valueProp?.end?.date,
            time
          }
        };
        dispatchAction({
          type: "set-value",
          id,
          value
        });
      }
    },
    [dispatchAction, id, valueProp]
  );
  const startDate = isRange ? valueProp?.start?.date : valueProp?.date;
  const datePickerValue = React.useMemo(() => utils.parseDate(startDate), [startDate]);
  const datePickerStatus = datePickerValue != null ? "valid" : "invalid";
  const startTime = (isRange ? valueProp?.start?.time : valueProp?.time) ?? "";
  const timePickerValue = React.useMemo(() => utils.parseTime(startTime), [startTime]);
  const timePickerStatus = timePickerValue != null ? "valid" : "invalid";
  const endDate = isRange ? valueProp?.end?.date : null;
  const endDatePickerValue = React.useMemo(() => utils.parseDate(endDate), [endDate]);
  const endTime = isRange ? valueProp?.end?.time : null;
  const endTimePickerValue = React.useMemo(() => utils.parseTime(endTime), [endTime]);
  const dateStatus = !touchedDate ? "standBy" : datePickerStatus;
  const timeStatus = !touchedTime ? "standBy" : timePickerStatus;
  const endDateIsBefore = startDate != null && endDate != null && endDate < startDate;
  const endTimeIsBeforeOrSame = startDate != null && endDate != null && endDate === startDate && startTime != null && endTime != null && endTime <= startTime;
  const endDateTimeIsBefore = endDateIsBefore || endTimeIsBeforeOrSame;
  const endDatePickerStatus = endDatePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
  const endDateStatus = !touchedEndDate ? "standBy" : endDatePickerStatus;
  const endTimePickerStatus = endTimePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
  const endTimeStatus = !touchedEndTime ? "standBy" : endTimePickerStatus;
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
    /* @__PURE__ */ jsxRuntime.jsxs(
      "div",
      {
        className: cx(classes.row, classes.horizontal, {
          [classes.isMdDown]: isMdDown
        }),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            DatePicker.HvDatePicker,
            {
              className: classes.datePicker,
              name: `${elementId}-date`,
              required: true,
              status: dateStatus,
              statusMessage: labels.rule.value.datetime.validation.required,
              label: isRange ? labels.rule.value.datetime.startDateLabel : labels.rule.value.datetime.dateLabel,
              placeholder: isRange ? labels.rule.value.datetime.startDatePlaceholder : labels.rule.value.datetime.datePlaceholder,
              value: datePickerValue,
              onChange: onDateChange,
              readOnly
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            TimePicker.HvTimePicker,
            {
              className: classes.timePicker,
              timeFormat: "24",
              name: `${elementId}-time`,
              required: true,
              status: timeStatus,
              statusMessage: labels.rule.value.datetime.validation.required,
              label: isRange ? labels.rule.value.datetime.startTimeLabel : labels.rule.value.datetime.timeLabel,
              placeholder: isRange ? labels.rule.value.datetime.startTimePlaceholder : labels.rule.value.datetime.timePlaceholder,
              value: timePickerValue || void 0,
              onChange: onTimeChange,
              onToggle: (_evt, open) => {
                if (!open && !touchedTime) {
                  setTouchedTime(true);
                }
              },
              readOnly
            }
          )
        ]
      }
    ),
    isRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.row, classes.vertical), children: [
      /* @__PURE__ */ jsxRuntime.jsxs(
        "div",
        {
          className: cx(classes.horizontal, {
            [classes.isMdDown]: isMdDown
          }),
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              DatePicker.HvDatePicker,
              {
                className: classes.datePicker,
                name: `${elementId}-endDate`,
                required: true,
                status: endDateStatus,
                statusMessage: labels.rule.value.datetime.validation.required,
                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
                label: labels.rule.value.datetime.endDateLabel,
                placeholder: labels.rule.value.datetime.endDatePlaceholder,
                value: endDatePickerValue,
                onChange: onEndDateChange,
                readOnly
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              TimePicker.HvTimePicker,
              {
                className: classes.timePicker,
                timeFormat: "24",
                name: `${elementId}-endTime`,
                required: true,
                status: endTimeStatus,
                statusMessage: labels.rule.value.datetime.validation.required,
                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
                label: labels.rule.value.datetime.endTimeLabel,
                placeholder: labels.rule.value.datetime.endTimePlaceholder,
                value: endTimePickerValue || void 0,
                onChange: onEndTimeChange,
                onToggle: (_evt, open) => {
                  if (!open && !touchedEndTime) {
                    setTouchedEndTime(true);
                  }
                },
                readOnly
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        WarningText.HvWarningText,
        {
          disableBorder: true,
          id: `${elementId}-combined-error`,
          isVisible: endDateTimeIsBefore,
          children: labels.rule.value.datetime.validation.invalidInterval
        }
      )
    ] })
  ] });
};
React.memo(DateTimeValue);
exports.DateTimeValue = DateTimeValue;