@coveord/plasma-mantine/dist/esm/components/DateRangePicker/DateRangePicker.js

A Plasma flavoured Mantine theme

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { IconCalendar } from '@coveord/plasma-react-icons';
import { factory, InputBase, Popover, useProps, useStyles } from '@mantine/core';
import { useUncontrolled } from '@mantine/hooks';
import dayjs from 'dayjs';
import { useUrlSyncedState } from '../../hooks/use-url-synced-state';
import classes from './DateRange.module.css';
import { DateRangePickerInlineCalendar } from './DateRangePickerInlineCalendar';
const serialization = (input)=>Object.freeze(input);
const DATE_RANGE_SERIALIZATION = serialization({
    serializer: ([from, to])=>[
            [
                'from',
                from ? new Date(from).toISOString() : '',
                true
            ],
            [
                'to',
                to ? new Date(to).toISOString() : '',
                true
            ]
        ],
    deserializer: (params, initial)=>[
            params.get('from') ? params.get('from') : initial[0],
            params.get('to') ? params.get('to') : initial[1]
        ]
});
const defaultProps = {
    placeholder: 'Select date range',
    formatter: (time)=>dayjs(time).format('MMM D, YYYY')
};
export const DateRangePicker = factory((props, ref)=>{
    const { defaultValue, value, opened, defaultOpened, onOpenedChange, onClick, onCancel, onChange, presets, startProps, endProps, rangeCalendarProps, formatter, placeholder, syncWithUrl, error, className, classNames, style, styles, vars, unstyled, ...others } = useProps('PlasmaDateRangePicker', defaultProps, props);
    const getStyles = useStyles({
        name: 'DateRangePicker',
        classes,
        props,
        className,
        classNames,
        style,
        styles,
        unstyled,
        vars
    });
    const stylesApiProps = {
        classNames,
        styles
    };
    const [_opened, setOpened] = useUncontrolled({
        value: opened,
        defaultValue: defaultOpened,
        finalValue: false,
        onChange: onOpenedChange
    });
    const [dateRange, setDateRange] = useUrlSyncedState({
        ...DATE_RANGE_SERIALIZATION,
        initialState: defaultValue !== undefined ? defaultValue : [
            null,
            null
        ],
        sync: !!syncWithUrl
    });
    const handleApply = (dates)=>{
        if (value === undefined) {
            setDateRange(dates);
        }
        onChange?.(dates);
        setOpened(false);
    };
    const handleClick = ()=>{
        setOpened(true);
        onClick?.();
    };
    const handleCancel = ()=>{
        setOpened(false);
        onCancel?.();
    };
    const _value = value ?? dateRange;
    const formattedRange = `${formatter(_value[0])} - ${formatter(_value[1])}`;
    const dateRangeInitialized = _value.every((date)=>typeof date === 'string' && date !== '');
    return /*#__PURE__*/ _jsxs(Popover, {
        opened: _opened,
        onChange: setOpened,
        children: [
            /*#__PURE__*/ _jsx(Popover.Target, {
                children: /*#__PURE__*/ _jsx(InputBase, {
                    ref: ref,
                    component: "button",
                    leftSection: /*#__PURE__*/ _jsx(IconCalendar, {
                        height: 16
                    }),
                    onClick: handleClick,
                    error: error,
                    ...getStyles('input', {
                        className,
                        style,
                        ...stylesApiProps
                    }),
                    ...others,
                    children: dateRangeInitialized ? formattedRange : placeholder
                })
            }),
            /*#__PURE__*/ _jsx(Popover.Dropdown, {
                p: 0,
                children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
                    initialRange: _value,
                    onApply: handleApply,
                    onCancel: handleCancel,
                    presets: presets,
                    rangeCalendarProps: rangeCalendarProps,
                    startProps: startProps,
                    endProps: endProps
                })
            })
        ]
    });
});

//# sourceMappingURL=DateRangePicker.js.map