@sparklink-pro/apant/dist/widgets/DatePicker.js

Apollo & Antd tools

import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { version, DatePicker as DatePickerAntV5 } from 'antd';
import generatePicker from 'antd/es/date-picker/generatePicker';
import dayjs from 'dayjs';
import IMask from 'imask';
import { defaults } from 'lodash-es';
import dayJsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import { useConfiguration } from '../hooks/useConfiguration';
export const FORMAT_DATE_FULL = 'dddd DD MMMM';
export const FORMAT_DATE_YEAR_FULL = `${FORMAT_DATE_FULL} YYYY`;
const DatePickerAnt = parseInt(version.split('.')[0], 10) >= 5 ? DatePickerAntV5 : generatePicker(dayJsGenerateConfig);
// @ts-ignore
const getDateMask = (pattern) => ({
    mask: Date,
    pattern,
    min: new Date(1900, 0, 1),
    max: new Date(2050, 0, 1),
    lazy: true,
    eager: true,
    format(date) {
        return dayjs(date).format(pattern);
    },
    parse(str) {
        return dayjs(str, pattern);
    },
    blocks: {
        YYYY: {
            mask: IMask.MaskedRange,
            from: 1900,
            to: 2050,
        },
        MMM: {
            mask: IMask.MaskedEnum,
            // @ts-ignore
            enum: dayjs.monthsShort(),
            autofix: true,
        },
        MM: {
            mask: IMask.MaskedRange,
            from: 1,
            to: 12,
        },
        DD: {
            mask: IMask.MaskedRange,
            from: 1,
            to: 31,
        },
        HH: {
            mask: IMask.MaskedRange,
            from: 0,
            to: 23,
        },
        hh: {
            mask: IMask.MaskedRange,
            from: 1,
            to: 12,
        },
        mm: {
            mask: IMask.MaskedRange,
            from: 0,
            to: 59,
        },
        ss: {
            mask: IMask.MaskedRange,
            from: 0,
            to: 59,
        },
    },
});
export function DatePicker(_a) {
    var { onChange, value, format, scalarFormat } = _a, props = __rest(_a, ["onChange", "value", "format", "scalarFormat"]);
    const config = useConfiguration().datePicker;
    const formats = { format, scalar: scalarFormat };
    if (props.picker === 'time') {
        defaults(formats, config.time);
    }
    else if (props.showTime) {
        defaults(formats, config.datetime);
    }
    else {
        defaults(formats, config.date);
    }
    const mask = useMemo(() => IMask.createMask(getDateMask(formats.format)), [formats.format]);
    const onInputCallback = useCallback((e) => {
        if (e.data && e.target) {
            mask.resolve(e.target.value);
            const resolvedValue = mask.value;
            if (e.target.value !== resolvedValue) {
                e.target.value = resolvedValue;
            }
        }
    }, []);
    const onChangeDay = (date) => {
        if (onChange) {
            return onChange(date ? date.format(formats.scalar) : null);
        }
        return undefined;
    };
    // @ts-ignore
    const pickerProps = Object.assign({ onChange: onChangeDay, value: value ? dayjs(value, formats.scalar) : null, format: formats.format, onFocus: (e) => {
            if (e.target && !e.target.oninput) {
                e.target.oninput = onInputCallback;
            }
        } }, props);
    return _jsx(DatePickerAnt, Object.assign({}, pickerProps));
}
DatePicker.defaultProps = {
    onChange: undefined,
    value: undefined,
    showTime: undefined,
    scalarFormat: undefined,
    format: undefined,
};
export default DatePicker;
//# sourceMappingURL=DatePicker.js.map