@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
112 lines (111 loc) • 4.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Center, Group, Space } from '@mantine/core';
import { DatePicker } from '@mantine/dates';
import { useForm } from '@mantine/form';
import dayjs from 'dayjs';
import { Button } from '../button';
import DateRangeClasses from './DateRange.module.css';
import { DateRangePickerPresetSelect } from './DateRangePickerPresetSelect';
import { EditableDateRangePicker } from './EditableDateRangePicker';
const isDateRangePickerValue = (value)=>Array.isArray(value) && value.length === 2;
const endOfDay = (value)=>value ? dayjs(value).endOf('day').toDate() : value;
export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel, presets, startProps, endProps, rangeCalendarProps })=>{
const form = useForm({
initialValues: {
dates: initialRange
}
});
const calendarInputProps = form.getInputProps('dates');
const onCalendarChange = (range)=>{
const normalized = isDateRangePickerValue(range) && range[1] ? [
range[0],
endOfDay(range[1])
] : range;
calendarInputProps.onChange(normalized);
};
const 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__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsxs(Group, {
align: "center",
gap: "xs",
grow: true,
px: "md",
py: "sm",
className: DateRangeClasses.picker,
children: [
/*#__PURE__*/ _jsx(EditableDateRangePicker, {
value: calendarInputProps.value,
...calendarInputProps,
startProps: startProps,
endProps: endProps
}),
presets ? /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx(Space, {
w: "sm"
}),
/*#__PURE__*/ _jsx(DateRangePickerPresetSelect, {
value: calendarInputProps.value,
presets: presets,
...calendarInputProps,
selectProps: {
comboboxProps: {
withinPortal: false
}
}
})
]
}) : null
]
}),
/*#__PURE__*/ _jsx(Center, {
py: "sm",
px: "md",
children: /*#__PURE__*/ _jsx(DatePicker, {
numberOfColumns: 2,
columnsToScroll: 1,
type: "range",
styles: {
day: {
textAlign: 'center'
}
},
firstDayOfWeek: 0,
allowSingleDateInRange: true,
...rangeCalendarProps,
...calendarInputProps,
onChange: onCalendarChange
})
}),
/*#__PURE__*/ _jsxs(Group, {
justify: "right",
gap: "xs",
px: "md",
py: "sm",
className: DateRangeClasses.save,
children: [
/*#__PURE__*/ _jsx(Button, {
variant: "outline",
size: "xs",
onClick: onCancel,
children: "Cancel"
}),
/*#__PURE__*/ _jsx(Button, {
size: "xs",
onClick: onCalendarApply,
children: "Apply"
})
]
})
]
});
};
//# sourceMappingURL=DateRangePickerInlineCalendar.js.map