@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
43 lines (42 loc) • 1.51 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Select } from '@mantine/core';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
export const DateRangePickerPresetSelect = ({ presets, value, onChange, selectProps = {} })=>{
const selectData = Object.entries(presets).map(([val, { label }])=>({
value: val,
label
}));
const getSelectedPreset = ()=>{
if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
const selected = Object.entries(presets).find(([, { range }])=>dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]));
if (selected) {
return selected[0];
}
}
return null;
};
const [selectedPreset, setSelectedPreset] = useState(getSelectedPreset());
useEffect(()=>{
const newPreset = getSelectedPreset();
if (newPreset !== selectedPreset) {
setSelectedPreset(newPreset);
}
}, [
value
]);
const onChangePreset = (presetId)=>{
const range = presets[presetId].range;
onChange?.(range);
};
return /*#__PURE__*/ _jsx(Select, {
label: "Date range",
placeholder: "Select a date range",
...selectProps,
value: selectedPreset,
onChange: onChangePreset,
data: selectData,
maxDropdownHeight: 240
});
};
//# sourceMappingURL=DateRangePickerPresetSelect.js.map