@react-awesome-query-builder/mui
Version:
User-friendly query builder for React. MUI 5 widgets
59 lines • 2.48 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
var _xdpPackage$version$s, _xdpPackage$version;
import React from "react";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import xdpPackage from "@mui/x-date-pickers/package.json"; // to determine version
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import { Utils } from "@react-awesome-query-builder/ui";
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,
readonly = props.readonly,
customProps = props.customProps,
dateFormat = props.dateFormat,
valueFormat = props.valueFormat,
placeholder = props.placeholder,
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 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: dateFormat,
slotProps: {
textField: {
size: renderSize,
variant: "standard"
},
toolbar: {
toolbarPlaceholder: !readonly ? placeholder : ""
}
}
} : {
inputFormat: dateFormat,
renderInput: renderInput,
toolbarPlaceholder: !readonly ? placeholder : ""
};
var aValue = value ? xdpVersion >= 6 ? moment(value, valueFormat) : value : null;
return /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(DatePicker, _extends({
desktopModeMediaQuery: desktopModeMediaQuery,
readOnly: readonly,
disabled: readonly,
value: aValue,
onChange: handleChange,
size: renderSize
}, pickerProps, customProps)));
});