@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
75 lines (74 loc) • 2.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CalendarSize16Px } from '@coveord/plasma-react-icons';
import { Grid, InputBase, Popover, factory, useProps } from '@mantine/core';
import dayjs from 'dayjs';
import { useState } from 'react';
import { DateRangePickerInlineCalendar } from '../../date-range-picker';
import { TableComponentsOrder } from '../Table';
import { useTableContext } from '../TableContext';
const defaultProps = {
presets: {}
};
export const TableDateRangePicker = factory((props, ref)=>{
const { store, getStyles } = useTableContext();
const { presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others } = useProps('PlasmaTableDateRangePicker', defaultProps, props);
const [opened, setOpened] = useState(false);
const onApply = (dates)=>{
store.setDateRange(dates);
store.setPagination({
pageIndex: 0,
pageSize: store.state.pagination.pageSize
});
setOpened(false);
};
const onCancel = ()=>{
setOpened(false);
};
const formatDate = (date)=>dayjs(date).format('MMM DD, YYYY');
const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;
const dateRangeInitialized = store.state.dateRange.every((date)=>date instanceof Date);
const stylesApiProps = {
classNames,
styles
};
return /*#__PURE__*/ _jsx(Grid.Col, {
span: "content",
order: TableComponentsOrder.DateRangePicker,
ref: ref,
...getStyles('dateRangeRoot', {
className,
style,
...stylesApiProps
}),
...others,
children: /*#__PURE__*/ _jsxs(Popover, {
withinPortal: true,
opened: opened,
onChange: setOpened,
children: [
/*#__PURE__*/ _jsx(Popover.Target, {
children: /*#__PURE__*/ _jsx(InputBase, {
component: "button",
leftSection: /*#__PURE__*/ _jsx(CalendarSize16Px, {
height: 16
}),
miw: 220,
onClick: ()=>setOpened(true),
children: dateRangeInitialized ? formattedRange : 'Select date range'
})
}),
/*#__PURE__*/ _jsx(Popover.Dropdown, {
p: 0,
children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
initialRange: store.state.dateRange,
onApply: onApply,
onCancel: onCancel,
presets: presets,
rangeCalendarProps: rangeCalendarProps
})
})
]
})
});
});
//# sourceMappingURL=TableDateRangePicker.js.map