@react-awesome-query-builder/fluent/esm/widgets/value/FluentUIDateTime.js

User-friendly query builder for React. Fluent 8 widgets

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import { DatePicker, TimePicker } from "@fluentui/react";
import { Utils } from "@react-awesome-query-builder/ui";
var moment = Utils.moment;
export default (function (props) {
  var value = props.value,
    setValue = props.setValue,
    config = props.config,
    valueFormat = props.valueFormat,
    dateFormat = props.dateFormat,
    timeFormat = props.timeFormat,
    use12Hours = props.use12Hours,
    readonly = props.readonly,
    customProps = props.customProps;
  var momentValue = value ? moment(value, valueFormat) : undefined;
  var dateValue = momentValue ? momentValue.toDate() : undefined;
  var _useState = useState(dateValue),
    _useState2 = _slicedToArray(_useState, 2),
    timeDate = _useState2[0],
    setTimeDate = _useState2[1];
  var onDateChange = function onDateChange(date) {
    var newValue;
    // clear if invalid date
    if (date == "" || date instanceof Date && isNaN(date)) date = undefined;
    if (date) {
      // build new date
      var newMoment = moment(date);
      if (timeDate) {
        // if there is current time
        // copy current time
        var currTimeMoment = moment(timeDate);
        newMoment.set("hour", currTimeMoment.get("hour"));
        newMoment.set("minute", currTimeMoment.get("minute"));
        newMoment.set("second", currTimeMoment.get("second"));
      }
      newValue = newMoment.format(valueFormat);
    }
    if (newValue) {
      setValue(newValue);
    }
  };
  var onTimeChange = function onTimeChange(_e, date) {
    var newValue;
    // clear if invalid date
    if (date == "" || date instanceof Date && isNaN(date)) date = undefined;
    setTimeDate(date); // set to state!
    var newTimeMoment = date ? moment(date) : undefined;
    if (momentValue) {
      // if there is current date
      // copy current date
      var newMoment = moment(momentValue);
      // set new time
      if (newTimeMoment) {
        newMoment.set("hour", newTimeMoment.get("hour"));
        newMoment.set("minute", newTimeMoment.get("minute"));
        newMoment.set("second", newTimeMoment.get("second"));
      }
      newValue = newMoment.format(valueFormat);
    }
    if (newValue) {
      setValue(newValue);
    }
  };
  var hasSeconds = valueFormat.indexOf(":ss") != -1;
  var formatDate = function formatDate(date) {
    return moment(date).format(dateFormat);
  };
  var stylesTimePicker = {
    marginRight: "5px"
  };
  var stylesDatePicker = {
    width: "150px"
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "row"
    }
  }, /*#__PURE__*/React.createElement(DatePicker, {
    disabled: readonly,
    value: dateValue,
    formatDate: formatDate,
    onSelectDate: onDateChange,
    style: stylesDatePicker
  }), /*#__PURE__*/React.createElement(TimePicker, {
    useHour12: use12Hours,
    value: timeDate,
    showSeconds: hasSeconds,
    disabled: readonly,
    onChange: onTimeChange,
    useComboBoxAsMenuWidth: true,
    style: stylesTimePicker
  }));
});