@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
134 lines (133 loc) • 5.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DateRangePickerInlineCalendar", {
enumerable: true,
get: function() {
return DateRangePickerInlineCalendar;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _jsxruntime = require("react/jsx-runtime");
var _core = require("@mantine/core");
var _dates = require("@mantine/dates");
var _form = require("@mantine/form");
var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
var _Button = require("../Button/Button.js");
var _DateRangemodulecss = /*#__PURE__*/ _interop_require_default._(require("./DateRange.module.css"));
var _DateRangePickerPresetSelect = require("./DateRangePickerPresetSelect.js");
var _EditableDateRangePicker = require("./EditableDateRangePicker.js");
var isDateRangePickerValue = function isDateRangePickerValue(value) {
return Array.isArray(value) && value.length === 2;
};
var endOfDay = function endOfDay(value) {
return value ? (0, _dayjs.default)(value).endOf('day').toISOString() : value;
};
var DateRangePickerInlineCalendar = function DateRangePickerInlineCalendar(param) {
var initialRange = param.initialRange, onApply = param.onApply, onCancel = param.onCancel, presets = param.presets, startProps = param.startProps, endProps = param.endProps, rangeCalendarProps = param.rangeCalendarProps;
var form = (0, _form.useForm)({
initialValues: {
dates: initialRange
}
});
var calendarInputProps = form.getInputProps('dates');
var onCalendarChange = function onCalendarChange(range) {
// If the current value is [null, null] and a date is selected, set [selectedValue, null]
if (isDateRangePickerValue(range) && range[0] && range[1] === null) {
calendarInputProps.onChange([
(0, _dayjs.default)(range[0]).toISOString(),
null
]);
return;
}
var normalized = isDateRangePickerValue(range) && range[1] ? [
(0, _dayjs.default)(range[0]).toISOString(),
endOfDay(range[1])
] : range;
calendarInputProps.onChange(normalized);
};
var onCalendarApply = function onCalendarApply() {
// In case the user only clicked the start date, but not the end date,
// assume a single day was meant to be selected.
if (!form.values.dates[1]) {
form.values.dates[1] = endOfDay(form.values.dates[0]);
}
onApply(form.values.dates);
};
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
align: "center",
gap: "xs",
grow: true,
px: "md",
py: "sm",
className: _DateRangemodulecss.default.picker,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_EditableDateRangePicker.EditableDateRangePicker, _object_spread_props._(_object_spread._({
value: calendarInputProps.value
}, calendarInputProps), {
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, _object_spread_props._(_object_spread._({
value: calendarInputProps.value,
presets: presets
}, calendarInputProps), {
selectProps: {
comboboxProps: {
withinPortal: false
}
}
}))
]
}) : null
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
py: "sm",
px: "md",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DatePicker, _object_spread_props._(_object_spread._({
numberOfColumns: 2,
columnsToScroll: 1,
type: "range",
styles: {
day: {
textAlign: 'center'
}
},
firstDayOfWeek: 0,
allowSingleDateInRange: true
}, rangeCalendarProps, calendarInputProps), {
onChange: onCalendarChange
}))
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
justify: "right",
gap: "xs",
px: "md",
py: "sm",
className: _DateRangemodulecss.default.save,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button.Tertiary, {
onClick: onCancel,
children: "Cancel"
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button.Primary, {
onClick: onCalendarApply,
children: "Apply"
})
]
})
]
});
};
//# sourceMappingURL=DateRangePickerInlineCalendar.js.map