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

User-friendly query builder for React. Fluent 8 widgets

import _extends from "@babel/runtime/helpers/extends";
import React from "react";
import { 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,
    use12Hours = props.use12Hours,
    readonly = props.readonly,
    customProps = props.customProps;
  var momentValue = value ? moment(value, valueFormat) : undefined;
  var timeValue = momentValue ? momentValue.toDate() : undefined;
  var onChange = function onChange(_e, date) {
    // clear if invalid date
    if (date == "" || date instanceof Date && isNaN(date)) date = undefined;
    var newValue = date ? moment(date).format(valueFormat) : undefined;
    setValue(newValue);
  };
  var hasSeconds = valueFormat.indexOf(":ss") != -1;
  var stylesOptionsContainer = {
    optionsContainerWrapper: {
      height: "500px"
    }
  };
  return /*#__PURE__*/React.createElement(TimePicker, _extends({
    styles: stylesOptionsContainer,
    useHour12: use12Hours,
    onChange: onChange,
    disabled: readonly,
    allowFreeform: true,
    showSeconds: hasSeconds,
    value: timeValue,
    useComboBoxAsMenuWidth: true
  }, customProps));
});