@canlooks/can-ui 0.0.1

package/dist/cjs/components/dataGrid/dataGridRows.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridRows = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const dataGrid_1 = require("./dataGrid");
+const utils_1 = require("../../utils");
+const dataGrid_style_1 = require("./dataGrid.style");
+const icons_1 = require("@ant-design/icons");
+const button_1 = require("../button");
+const transitionBase_1 = require("../transitionBase");
+const checkbox_1 = require("../checkbox");
+const radio_1 = require("../radio");
+const selectionContext_1 = require("../selectionContext");
+exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
+    const { primaryKey, childrenKey, flattedColumns, rowProps, clickRowToSelect, indent, expandedSet, toggleExpanded, renderExpandIcon, multiple } = (0, dataGrid_1.useDataGridContext)();
+    const { toggleSelected, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
+    return rows?.flatMap((row, i, arr) => {
+        const trKey = row[primaryKey];
+        const _rowProps = rowProps?.(row, i, arr);
+        const status = selectionStatus?.get(trKey);
+        const children = childrenKey && row[childrenKey];
+        const expandable = !(0, utils_1.isUnset)(children) && children !== false;
+        const currentExpanded = expandable && expandedSet.has(trKey);
+        let expandableIndex = -2;
+        const ret = [
+            (0, react_1.createElement)("tr", { ..._rowProps, key: trKey, className: (0, utils_1.classnames)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub), onClick: e => {
+                    _rowProps?.onClick?.(e);
+                    clickRowToSelect && toggleSelected(trKey, row);
+                }, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
+                if (typeof col === 'symbol') {
+                    if (col === dataGrid_1.DataGrid.EXPAND_COLUMN) {
+                        expandableIndex = j;
+                        return [];
+                    }
+                    // col === DataGrid.SELECT_COLUMN
+                    if (expandableIndex === j - 1) {
+                        // select column紧跟在expand column后面，需要顺延expandableIndex
+                        expandableIndex = j;
+                    }
+                    const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
+                    return ((0, jsx_runtime_1.jsx)("td", { className: dataGrid_style_1.classes.selectable, children: (0, jsx_runtime_1.jsx)(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => toggleSelected(trKey, row), onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                }
+                const { 
+                // 排除无需加入dom节点的属性
+                title, _key, key, field, render, sorter, sticky, _colSpan, _negativeRowSpan, ..._colProps } = col;
+                const renderedContent = (0, utils_1.renderCell)({ render, field }, row, i, arr);
+                const shouldRenderExpand = expandableIndex === j - 1;
+                return ((0, react_1.createElement)("td", { ..._colProps, key: _key ?? j, className: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, "data-sticky": typeof sticky !== 'undefined', style: typeof sticky === 'number' ? { left: sticky } : void 0 }, shouldRenderExpand
+                    ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "disabled", onClick: () => toggleExpanded?.(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
+                                    ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
+                                    : currentExpanded
+                                        ? (0, jsx_runtime_1.jsx)(icons_1.MinusSquareOutlined, {})
+                                        : (0, jsx_runtime_1.jsx)(icons_1.PlusSquareOutlined, {}) }), renderedContent] })
+                    : renderedContent));
+            }))
+        ];
+        if (Array.isArray(children)) {
+            currentExpanded && ret.push((0, jsx_runtime_1.jsx)(exports.DataGridRows, { rows: children, _level: _level + 1 }, trKey + '_children'));
+        }
+        else if (expandable) {
+            ret.push((0, jsx_runtime_1.jsx)("tr", { className: dataGrid_style_1.classes.sub, children: (0, jsx_runtime_1.jsx)("td", { className: dataGrid_style_1.classes.subTd, colSpan: flattedColumns?.length || 1, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: currentExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.children, children: typeof children === 'function'
+                                ? children(row, currentExpanded)
+                                : children }) }) }) }, trKey + '_children'));
+        }
+        return ret;
+    });
+});

package/dist/cjs/components/dataGrid/index.d.ts

@@ -0,0 +1 @@
+export * from './dataGrid';

package/dist/cjs/components/dataGrid/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./dataGrid"), exports);

package/dist/cjs/components/dateTimePicker/calendar.d.ts

@@ -0,0 +1,18 @@
+import { DIVProps } from '../../../types';
+import { Dayjs } from 'dayjs';
+import { Dispatch, SetStateAction } from 'react';
+type SharedCalendarProps = {
+    defautNull: boolean;
+    value: Dayjs;
+    onChange(value: Dayjs): void;
+};
+export interface CalendarProps extends SharedCalendarProps, Omit<DIVProps, 'onChange'> {
+    type: 'dates' | 'months' | 'years';
+}
+export interface CommonCalendarProps extends SharedCalendarProps {
+    innerD: Dayjs;
+    setInnerD: Dispatch<SetStateAction<Dayjs>>;
+    setViewType(type: CalendarProps['type']): void;
+}
+export declare const Calendar: ({ type, ...props }: CalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/dateTimePicker/calendar.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const calendarDates_1 = require("./calendarDates");
+const utils_1 = require("../../utils");
+const calendarMonths_1 = require("./calendarMonths");
+const popper_1 = require("../popper");
+const calendarYears_1 = require("./calendarYears");
+const Calendar = ({ type, ...props }) => {
+    const { open } = (0, popper_1.usePopperContext)();
+    const [viewType, setViewType] = (0, utils_1.useDerivedState)(prevType => open ? type : prevType, [open, type]);
+    const [innerD, setInnerD] = (0, utils_1.useDerivedState)(props.value);
+    const commonProps = {
+        ...props,
+        setViewType,
+        innerD: innerD.current,
+        setInnerD
+    };
+    switch (viewType.current) {
+        case 'dates':
+            return (0, jsx_runtime_1.jsx)(calendarDates_1.CalendarDates, { ...commonProps });
+        case 'months':
+            return (0, jsx_runtime_1.jsx)(calendarMonths_1.CalendarMonths, { ...commonProps });
+        default:
+            return (0, jsx_runtime_1.jsx)(calendarYears_1.CalendarYears, { ...commonProps });
+    }
+};
+exports.Calendar = Calendar;

package/dist/cjs/components/dateTimePicker/calendar.style.d.ts

@@ -0,0 +1,15 @@
+export declare const classes: {
+    calendarHead: string;
+    calendarHeadSide: string;
+    calendarHeadControl: string;
+    calendarHeadCenter: string;
+    calendarHeadButton: string;
+    calendarBody: string;
+    dateItem: string;
+    monthItem: string;
+    yearItem: string;
+    calendarFoot: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/dateTimePicker/calendar.style.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const menuItem_style_1 = require("../menuItem/menuItem.style");
+exports.classes = (0, utils_1.defineClasses)('calendar', [
+    'calendarHead',
+    'calendarHeadSide',
+    'calendarHeadControl',
+    'calendarHeadCenter',
+    'calendarHeadButton',
+    'calendarBody',
+    'dateItem',
+    'monthItem',
+    'yearItem',
+    'calendarFoot'
+]);
+exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
+    .${exports.classes.calendarHead} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuItem_style_1.menuListPadding}px;
+        position: relative;
+
+        .${exports.classes.calendarHeadSide} {
+            z-index: 1;
+        }
+
+        .${exports.classes.calendarHeadControl} {
+            color: ${text.placeholder};
+        }
+
+        .${exports.classes.calendarHeadCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${exports.classes.calendarHeadButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${exports.classes.calendarBody} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=dates] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${exports.classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=months] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${exports.classes.monthItem},
+            .${exports.classes.yearItem} {
+                width: 72px;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+
+    .${exports.classes.calendarFoot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
+`);

package/dist/cjs/components/dateTimePicker/calendarDates.d.ts

@@ -0,0 +1,2 @@
+import { CommonCalendarProps } from './calendar';
+export declare const CalendarDates: import("react").MemoExoticComponent<({ defautNull, value, onChange, innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/calendarDates.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarDates = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const calendar_style_1 = require("./calendar.style");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const tooltip_1 = require("../tooltip");
+const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
+const calendar_style_2 = require("./calendar.style");
+const dateTimePicker_1 = require("./dateTimePicker");
+const days = ['一', '二', '三', '四', '五', '六', '日'];
+const renderedDaysList = (() => {
+    const ret = [];
+    for (let i = 0; i < 7; i++) {
+        ret.push((0, jsx_runtime_1.jsx)("div", { children: days[i] }, i));
+    }
+    return ret;
+})();
+const commonButtonProps = {
+    variant: 'text',
+    size: 'small',
+    color: 'text'
+};
+exports.CalendarDates = (0, react_1.memo)(({ defautNull, value, onChange, innerD, setInnerD, setViewType }) => {
+    const today = (0, dayjs_1.default)();
+    const prevMonth = () => {
+        setInnerD(d => d.subtract(1, 'month'));
+    };
+    const nextMonth = () => {
+        setInnerD(d => d.add(1, 'month'));
+    };
+    const prevYear = () => {
+        setInnerD(d => d.subtract(1, 'year'));
+    };
+    const nextYear = () => {
+        setInnerD(d => d.add(1, 'year'));
+    };
+    const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.calendarHeadControl, onClick: onClick, children: icon }) }));
+    const { min, max, disabledDates } = (0, dateTimePicker_1.useDateTimePickerContext)();
+    const isDisabled = (d) => {
+        if (disabledDates && !disabledDates(d)) {
+            return true;
+        }
+        if (min && min.isAfter(d)) {
+            return true;
+        }
+        if (max && max.isBefore(d)) {
+            return true;
+        }
+        return false;
+    };
+    const renderDates = () => {
+        let startD = innerD.date(0);
+        const startDay = startD.day();
+        const ret = [];
+        for (let i = 0; i < 42; i++) {
+            const offset = i - startDay + 1;
+            const _d = offset > 0 ? startD.add(offset, 'days')
+                : offset < 0 ? startD.subtract(-offset, 'days')
+                    : startD;
+            const isToday = _d.isSame(today, 'day');
+            const selected = _d.isSame(value, 'day');
+            const isCurrentMonth = _d.isSame(innerD, 'month');
+            const disabled = isDisabled(_d);
+            ret.push((0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.dateItem, size: "small", variant: disabled || selected ? 'filled'
+                    : isToday ? 'outlined'
+                        : 'text', disabled: disabled, color: selected ? 'primary' : 'text', "data-other-month": !isCurrentMonth, onClick: () => {
+                    // 默认为空时，任何日期都可选中
+                    (!selected || defautNull) && onChange(_d);
+                }, children: _d.date() }, i));
+        }
+        return ret;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: calendar_style_2.style, className: calendar_style_1.classes.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHead, children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHeadSide, children: [renderHeadControl((0, jsx_runtime_1.jsx)(icons_1.DoubleLeftOutlined, {}), '上一年', prevYear), renderHeadControl((0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}), '上一月', prevMonth)] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHeadSide, children: [renderHeadControl((0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}), '下一月', nextMonth), renderHeadControl((0, jsx_runtime_1.jsx)(icons_1.DoubleRightOutlined, {}), '下一年', nextYear)] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHeadCenter, children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.calendarHeadButton, onClick: () => setViewType('years'), children: [innerD.year(), "\u5E74"] }), (0, jsx_runtime_1.jsxs)(button_1.Button, { ...commonButtonProps, className: calendar_style_1.classes.calendarHeadButton, onClick: () => setViewType('months'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarBody, "data-view-type": "dates", children: [renderedDaysList, renderDates()] }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarFoot, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => onChange((0, dayjs_1.default)()), children: "\u56DE\u4ECA\u5929" }) })] }));
+});

package/dist/cjs/components/dateTimePicker/calendarMonths.d.ts

@@ -0,0 +1,2 @@
+import { CommonCalendarProps } from './calendar';
+export declare const CalendarMonths: import("react").MemoExoticComponent<({ innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/calendarMonths.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarMonths = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const calendar_style_1 = require("./calendar.style");
+const button_1 = require("../button");
+exports.CalendarMonths = (0, react_1.memo)(({ innerD, setInnerD, setViewType }) => {
+    const currentMonth = innerD.month();
+    const clickHandler = (month) => {
+        currentMonth !== month && setInnerD(d => d.month(month));
+        setViewType('dates');
+    };
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            ret.push((0, jsx_runtime_1.jsxs)(button_1.Button, { className: calendar_style_1.classes.monthItem, variant: currentMonth === i ? 'filled' : 'text', size: "large", color: currentMonth === i ? 'primary' : 'text', onClick: () => clickHandler(i), children: [i + 1, "\u6708"] }, i));
+        }
+        return ret;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: calendar_style_1.style, className: calendar_style_1.classes.root, children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHead, children: (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadCenter, children: "\u6708\u4EFD" }) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
+});

package/dist/cjs/components/dateTimePicker/calendarYears.d.ts

@@ -0,0 +1,2 @@
+import { CommonCalendarProps } from './calendar';
+export declare const CalendarYears: import("react").MemoExoticComponent<({ innerD, setInnerD, setViewType }: CommonCalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/dateTimePicker/calendarYears.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarYears = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const calendar_style_1 = require("./calendar.style");
+const button_1 = require("../button");
+const tooltip_1 = require("../tooltip");
+const icons_1 = require("@ant-design/icons");
+exports.CalendarYears = (0, react_1.memo)(({ innerD, setInnerD, setViewType }) => {
+    const currentYear = innerD.year();
+    const clickHandler = (year) => {
+        currentYear !== year && setInnerD(d => d.year(year));
+        setViewType('months');
+    };
+    const [page, setPage] = (0, react_1.useState)(() => Math.floor(currentYear / 12));
+    const renderHeadControl = (icon, title, onClick) => ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: title, children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.calendarHeadControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
+    const renderButtons = () => {
+        const ret = [];
+        for (let i = 0; i < 12; i++) {
+            const years = page * 12 + i + 1;
+            ret.push((0, jsx_runtime_1.jsx)(button_1.Button, { className: calendar_style_1.classes.monthItem, variant: currentYear === years ? 'filled' : 'text', size: "large", color: currentYear === years ? 'primary' : 'text', onClick: () => clickHandler(years), children: years }, i));
+        }
+        return ret;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: calendar_style_1.style, className: calendar_style_1.classes.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.calendarHead, children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}), '上一页', () => setPage(p => p - 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}), '下一页', () => setPage(p => p + 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarHeadCenter, children: "\u5E74\u4EFD" })] }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.calendarBody, "data-view-type": "months", children: renderButtons() })] }));
+});

package/dist/cjs/components/dateTimePicker/dateTimePicker.d.ts

@@ -0,0 +1,28 @@
+import { Ref } from 'react';
+import { PopperProps, PopperRef } from '../popper';
+import { InputBaseProps } from '../inputBase';
+import { Dayjs } from 'dayjs';
+export type DatePickerSharedProps = {
+    min?: Dayjs;
+    max?: Dayjs;
+    disabledDates?: (date: Dayjs) => any;
+    disabledHours?: (date: Dayjs, hours: number) => any;
+    disabledMinutes?: (date: Dayjs, minutes: number) => any;
+    disabledSeconds?: (date: Dayjs, seconds: number) => any;
+};
+export interface DateTimePickerProps extends DatePickerSharedProps, Omit<InputBaseProps<'input'>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> {
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    autoClose?: boolean;
+    format?: string;
+    defaultValue?: Dayjs | null;
+    value?: Dayjs | null;
+    onChange?(value: Dayjs | null): void;
+}
+export declare function useDateTimePickerContext(): DatePickerSharedProps;
+export declare const DateTimePicker: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/dateTimePicker/dateTimePicker.js

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePicker = void 0;
+exports.useDateTimePickerContext = useDateTimePickerContext;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const inputBase_1 = require("../inputBase");
+const utils_1 = require("../../utils");
+const dateTimePicker_style_1 = require("./dateTimePicker.style");
+const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
+const customParseFormat_1 = tslib_1.__importDefault(require("dayjs/plugin/customParseFormat"));
+const icons_1 = require("@ant-design/icons");
+const calendar_1 = require("./calendar");
+const timer_1 = require("./timer");
+dayjs_1.default.extend(customParseFormat_1.default);
+const availableFormatTokens = ['Y', 'M', 'D', 'H', 'm', 's'];
+const dateTimePickerContext = (0, react_1.createContext)({});
+function useDateTimePickerContext() {
+    return (0, react_1.useContext)(dateTimePickerContext);
+}
+exports.DateTimePicker = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, popperProps, popperRef, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format = 'YYYY-MM-DD', defaultValue = null, value, onChange, defaultOpen = false, open, onOpenChange, autoClose = !/[Hms]/.test(format), ...props }, ref) => {
+    const innerInputRef = (0, react_1.useRef)(null);
+    const focused = (0, react_1.useRef)(false);
+    const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
+    const setInnerOpen = (open) => {
+        popperProps?.onOpenChange?.(open);
+        // 如果仍聚焦在输入框，则不用关闭弹框
+        (open || !focused.current) && _setInnerOpen(open);
+    };
+    (0, react_1.useEffect)(() => {
+        if (!innerOpen.current && !dateValue.current) {
+            // 弹框关闭时没有选中日期，清空输入框
+            innerInputRef.current.value = '';
+        }
+    }, [innerOpen.current]);
+    const [dateValue, _setDateValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const setDateValue = (date) => {
+        _setDateValue(date);
+        autoClose && _setInnerOpen(false);
+    };
+    (0, react_1.useEffect)(() => {
+        innerInputRef.current.value = dateValue.current?.format(format) ?? format;
+    }, [dateValue.current]);
+    const clearHandler = () => {
+        setDateValue(null);
+        selectFn(innerInputRef.current);
+    };
+    const ranges = (0, react_1.useMemo)(() => {
+        const range = [];
+        format.length && availableFormatTokens.forEach(token => {
+            const matched = format.match(new RegExp(`${token}+`));
+            if (matched && typeof matched.index === 'number') {
+                range.push({
+                    token,
+                    start: matched.index,
+                    end: matched.index + matched[0].length
+                });
+            }
+        });
+        return range;
+    }, [format]);
+    const currentRange = (0, react_1.useRef)();
+    const selectFn = (input) => {
+        const { selectionStart } = input;
+        const range = ranges.find(({ end }) => (selectionStart || 0) <= end) || ranges[ranges.length - 1];
+        if (range) {
+            currentRange.current = range;
+            input.value ||= format;
+            input.setSelectionRange(range.start, range.end);
+        }
+    };
+    const selectHandler = (e) => {
+        if (e.nativeEvent.type === 'selectionchange' || !ranges.length) {
+            // setSelectionRange()方法也会触发该回调，通过nativeEvent.type排除
+            return;
+        }
+        selectFn(e.target);
+    };
+    const focusHandler = (e) => {
+        focused.current = true;
+        selectFn(e.target);
+    };
+    const blurHandler = (e) => {
+        if (!dateValue.current && !innerOpen.current) {
+            e.target.value = '';
+        }
+        resetContinue();
+        focused.current = false;
+        _setInnerOpen(false);
+    };
+    const valueContinueHelper = (0, react_1.useRef)({ token: '', value: '' });
+    const resetContinue = () => {
+        valueContinueHelper.current = { token: '', value: '' };
+    };
+    const keydownHandler = (e) => {
+        if (!currentRange.current) {
+            return;
+        }
+        const { key } = e;
+        const input = e.target;
+        const { token, start, end } = currentRange.current;
+        if (/^\d$/.test(e.key)) {
+            // 数字键
+            e.preventDefault();
+            let continuedValue;
+            if (valueContinueHelper.current.token === token) {
+                continuedValue = valueContinueHelper.current.value += key;
+            }
+            else {
+                valueContinueHelper.current = { token, value: key };
+                continuedValue = key;
+            }
+            input.value = `${input.value.slice(0, start)}${continuedValue.padStart(end - start, '0')}${input.value.slice(end)}`;
+            input.setSelectionRange(start, end);
+            const d = (0, dayjs_1.default)(input.value, format);
+            d.isValid() && _setDateValue(d);
+            // 当长度达到，或者数值超过，将会跳转下一个range
+            if (token === 'Y') {
+                if (continuedValue.length === 4) {
+                    return selectNext(input);
+                }
+            }
+            else if (continuedValue.length === 2) {
+                return selectNext(input);
+            }
+            switch (token) {
+                case 'M':
+                    if (+key > 1) {
+                        return selectNext(input);
+                    }
+                case 'D':
+                    if (+key > 3) {
+                        return selectNext(input);
+                    }
+                default:
+                    // 'H' | 'm' | 's'
+                    if (+key > 5) {
+                        return selectNext(input);
+                    }
+            }
+        }
+        switch (key) {
+            case 'Backspace':
+            case 'Delete':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'Escape':
+                e.preventDefault();
+                resetContinue();
+        }
+        switch (key) {
+            case 'Backspace':
+            case 'Delete':
+                input.value = `${input.value.slice(0, start)}${format.slice(start, end)}${input.value.slice(end)}`;
+                input.setSelectionRange(start, end);
+                _setDateValue(null);
+                break;
+            case 'ArrowLeft':
+                const prevRange = ranges[ranges.indexOf(currentRange.current) - 1] || ranges[0];
+                currentRange.current = prevRange;
+                input.setSelectionRange(prevRange.start, prevRange.end);
+                break;
+            case 'ArrowRight':
+                selectNext(input);
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                let valueFragment = +input.value.slice(start, end);
+                if (isNaN(valueFragment)) {
+                    valueFragment = 0;
+                }
+                key === 'ArrowUp' ? valueFragment++ : valueFragment--;
+                switch (token) {
+                    case 'Y':
+                        break;
+                    case 'M':
+                        valueFragment >= 13 ? valueFragment = 1
+                            : valueFragment <= 0 && (valueFragment = 12);
+                        break;
+                    case 'D':
+                        valueFragment >= 32 ? valueFragment = 1
+                            : valueFragment <= 0 && (valueFragment = 31);
+                        break;
+                    default:
+                        valueFragment >= 60 ? valueFragment = 1
+                            : valueFragment <= 0 && (valueFragment = 59);
+                }
+                input.value = `${input.value.slice(0, start)}${valueFragment.toString().padStart(end - start, '0')}${input.value.slice(end)}`;
+                input.setSelectionRange(start, end);
+                const d = (0, dayjs_1.default)(input.value, format);
+                d.isValid() && _setDateValue(d);
+                break;
+            case 'Escape':
+                _setInnerOpen(false);
+        }
+    };
+    const selectNext = (input) => {
+        resetContinue();
+        const nextRange = ranges[ranges.indexOf(currentRange.current) + 1] || ranges[ranges.length - 1];
+        currentRange.current = nextRange;
+        input.setSelectionRange(nextRange.start, nextRange.end);
+    };
+    const contextValue = (0, react_1.useMemo)(() => ({
+        min, max, disabledDates,
+        disabledHours, disabledMinutes, disabledSeconds
+    }), [
+        min, max, disabledDates,
+        disabledHours, disabledMinutes, disabledSeconds
+    ]);
+    const showCalendar = /[YMD]/.test(format);
+    const showTimer = /[Hms]/.test(format);
+    const _dateVal = dateValue.current || (0, dayjs_1.default)();
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(dateTimePickerContext.Provider, { value: contextValue, children: [showCalendar &&
+                    (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { type: format.includes('D') ? 'dates'
+                            : format.includes('M') ? 'months'
+                                : format.includes('Y') ? 'years'
+                                    : 'dates', defautNull: !dateValue.current, value: _dateVal, onChange: setDateValue }), showTimer &&
+                    (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue })] }), ...popperProps, popperRef: popperRef, onOpenChange: setInnerOpen, onPointerDown: e => {
+            popperProps?.onPointerDown?.(e);
+            e.preventDefault();
+        }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, ref: ref, css: dateTimePicker_style_1.style, className: (0, utils_1.classnames)(dateTimePicker_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef, innerInputRef), className: (0, utils_1.classnames)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
+                            ? (0, jsx_runtime_1.jsx)(icons_1.ClockCircleOutlined, {})
+                            : (0, jsx_runtime_1.jsx)(icons_1.CalendarOutlined, {}) })] }) }) }));
+}));