@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
81 lines (80 loc) • 3.32 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Group, Popover, Space } from '@mantine/core';
import { DatePicker } from '@mantine/dates';
import { useClickOutside, useUncontrolled } from '@mantine/hooks';
import { useState } from 'react';
import { DateRangePickerPresetSelect } from './DateRangePickerPresetSelect';
import { EditableDateRangePicker } from './EditableDateRangePicker';
export const DateRangePickerPopoverCalendar = ({ presets, value, defaultValue, onChange, startProps, endProps, rangeCalendarProps })=>{
const [opened, setOpened] = useState(false);
const ref = useClickOutside(()=>setOpened(false));
const [_value, handleChange] = useUncontrolled({
value,
defaultValue,
onChange,
finalValue: [
null,
null
]
});
const onCalendarChange = (dates)=>{
handleChange?.(dates);
if (dates[1] !== null) {
setOpened(false);
}
};
return /*#__PURE__*/ _jsx(_Fragment, {
children: /*#__PURE__*/ _jsxs(Popover, {
opened: opened,
onChange: setOpened,
trapFocus: true,
children: [
/*#__PURE__*/ _jsx(Popover.Target, {
children: /*#__PURE__*/ _jsxs(Group, {
align: "center",
children: [
/*#__PURE__*/ _jsx(EditableDateRangePicker, {
value: _value,
onChange: handleChange,
onFocus: ()=>setOpened(true),
startProps: startProps,
endProps: endProps
}),
presets ? /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx(Space, {
w: "sm"
}),
/*#__PURE__*/ _jsx(DateRangePickerPresetSelect, {
presets: presets,
value: _value,
onChange: handleChange
})
]
}) : null
]
})
}),
/*#__PURE__*/ _jsx(Popover.Dropdown, {
children: /*#__PURE__*/ _jsx(DatePicker, {
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