@react-awesome-query-builder/mui/esm/widgets/value/MuiTime.js

User-friendly query builder for React. MUI 5 widgets

import _extends from "@babel/runtime/helpers/extends";
var _xdpPackage$version$s, _xdpPackage$version;
import React from "react";
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import { Utils } from "@react-awesome-query-builder/ui";
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import xdpPackage from "@mui/x-date-pickers/package.json"; // to determine version
var moment = Utils.moment;
var xdpVersion = parseInt((_xdpPackage$version$s = xdpPackage === null || xdpPackage === void 0 || (_xdpPackage$version = xdpPackage.version) === null || _xdpPackage$version === void 0 || (_xdpPackage$version = _xdpPackage$version.split(".")) === null || _xdpPackage$version === void 0 ? void 0 : _xdpPackage$version[0]) !== null && _xdpPackage$version$s !== void 0 ? _xdpPackage$version$s : "0");
export default (function (props) {
  var value = props.value,
    setValue = props.setValue,
    use12Hours = props.use12Hours,
    readonly = props.readonly,
    placeholder = props.placeholder,
    timeFormat = props.timeFormat,
    valueFormat = props.valueFormat,
    customProps = props.customProps,
    config = props.config;
  var renderSize = config.settings.renderSize;
  var formatSingleValue = function formatSingleValue(value) {
    return value && value.isValid() ? value.format(valueFormat) : undefined;
  };
  var handleChange = function handleChange(value) {
    setValue(formatSingleValue(value));
  };
  var hasSeconds = timeFormat.indexOf(":ss") != -1;
  var timeValue = value ? moment(value, timeFormat) : null;
  var renderInput = function renderInput(params) {
    return /*#__PURE__*/React.createElement(TextField, _extends({
      size: renderSize,
      variant: "standard"
    }, params));
  };
  var desktopModeMediaQuery = "@media (pointer: fine), (pointer: none)";
  var pickerProps = xdpVersion >= 6 ? {
    format: timeFormat,
    slotProps: {
      textField: {
        size: renderSize,
        variant: "standard"
      },
      toolbar: {
        toolbarPlaceholder: !readonly ? placeholder : ""
      }
    }
  } : {
    inputFormat: timeFormat,
    renderInput: renderInput,
    toolbarPlaceholder: !readonly ? placeholder : ""
  };
  return /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
    desktopModeMediaQuery: desktopModeMediaQuery,
    readOnly: readonly,
    disabled: readonly,
    ampm: !!use12Hours,
    value: timeValue,
    onChange: handleChange,
    views: hasSeconds ? ["hours", "minutes", "seconds"] : ["hours", "minutes"],
    size: renderSize
  }, pickerProps, customProps)));
});