@react-awesome-query-builder/fluent
Version:
User-friendly query builder for React. Fluent 8 widgets
105 lines (104 loc) • 4.32 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@fluentui/react");
var _ui = require("@react-awesome-query-builder/ui");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var moment = _ui.Utils.moment;
var _default = exports["default"] = function _default(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 = (0, _react.useState)(dateValue),
_useState2 = (0, _slicedToArray2["default"])(_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["default"].createElement("div", {
style: {
display: "flex",
flexDirection: "row"
}
}, /*#__PURE__*/_react["default"].createElement(_react2.DatePicker, {
disabled: readonly,
value: dateValue,
formatDate: formatDate,
onSelectDate: onDateChange,
style: stylesDatePicker
}), /*#__PURE__*/_react["default"].createElement(_react2.TimePicker, {
useHour12: use12Hours,
value: timeDate,
showSeconds: hasSeconds,
disabled: readonly,
onChange: onTimeChange,
useComboBoxAsMenuWidth: true,
style: stylesTimePicker
}));
};