@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
105 lines (104 loc) • 4.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DateRangePickerPopoverCalendar", {
enumerable: true,
get: function() {
return DateRangePickerPopoverCalendar;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _jsxruntime = require("react/jsx-runtime");
var _core = require("@mantine/core");
var _dates = require("@mantine/dates");
var _hooks = require("@mantine/hooks");
var _react = require("react");
var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
var _DateRangePickerPresetSelect = require("./DateRangePickerPresetSelect.js");
var _EditableDateRangePicker = require("./EditableDateRangePicker.js");
var DateRangePickerPopoverCalendar = function DateRangePickerPopoverCalendar(param) {
var presets = param.presets, value = param.value, defaultValue = param.defaultValue, onChange = param.onChange, startProps = param.startProps, endProps = param.endProps, rangeCalendarProps = param.rangeCalendarProps;
var _useState = _sliced_to_array._((0, _react.useState)(false), 2), opened = _useState[0], setOpened = _useState[1];
var ref = (0, _hooks.useClickOutside)(function() {
return setOpened(false);
});
var _useUncontrolled = _sliced_to_array._((0, _hooks.useUncontrolled)({
value: value,
defaultValue: defaultValue,
onChange: onChange,
finalValue: [
null,
null
]
}), 2), _value = _useUncontrolled[0], handleChange = _useUncontrolled[1];
var onCalendarChange = function onCalendarChange(dates) {
if (dates[0] !== null) {
dates[0] = (0, _dayjs.default)(dates[0]).toISOString();
}
if (dates[1] !== null) {
dates[1] = (0, _dayjs.default)(dates[1]).toISOString();
}
handleChange === null || handleChange === void 0 ? void 0 : handleChange(dates);
if (dates[1] !== null) {
setOpened(false);
}
};
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
opened: opened,
onChange: setOpened,
trapFocus: true,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
align: "center",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_EditableDateRangePicker.EditableDateRangePicker, {
value: _value,
onChange: handleChange,
onFocus: function onFocus() {
return setOpened(true);
},
startProps: startProps,
endProps: endProps
}),
presets ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Space, {
w: "sm"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_DateRangePickerPresetSelect.DateRangePickerPresetSelect, {
presets: presets,
value: _value,
onChange: handleChange
})
]
}) : null
]
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Dropdown, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DatePicker, _object_spread._({
ref: ref,
type: "range",
styles: {
day: {
textAlign: 'center'
}
},
numberOfColumns: 2,
columnsToScroll: 1,
firstDayOfWeek: 0,
allowSingleDateInRange: true,
value: _value,
onChange: onCalendarChange
}, rangeCalendarProps))
})
]
})
});
};
//# sourceMappingURL=DateRangePickerPopoverCalendar.js.map