@laser-ui/components 0.0.1

package/time-picker/TimePicker.js

@@ -0,0 +1,338 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as AccessTimeOutlined } from '@material-design-icons/svg/outlined/access_time.svg';
+import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import { isNull, isUndefined } from 'lodash';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { TimePickerPanel } from './internal/TimePickerPanel';
+import { deepCompareDate, orderTime } from './utils';
+import { CLASSES } from './vars';
+import { Button } from '../button';
+import dayjs from '../dayjs';
+import { useComponentProps, useControlled, useDesign, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { Icon } from '../icon';
+import { Portal } from '../internal/portal';
+import { Transition } from '../internal/transition';
+import { ROOT_DATA } from '../root/vars';
+import { getVerticalSidePosition, mergeCS } from '../utils';
+import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../vars';
+export const TimePicker = forwardRef((props, ref) => {
+    var _a, _b;
+    const _c = useComponentProps('TimePicker', props), { styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format = 'HH:mm:ss', order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, config, escClosable = true, inputRef, inputRender, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "config", "escClosable", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { 'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'], 'time-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker-popup'] }, styleOverrides);
+    const { t } = useTranslation();
+    const forceUpdate = useForceUpdate();
+    const async = useAsync();
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    const boxRef = useRef(null);
+    const popupRef = useRef(null);
+    const inputLeftRef = useRef(null);
+    const inputRightRef = useRef(null);
+    const indicatorRef = useRef(null);
+    const combineInputLeftRef = useForkRef(inputLeftRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]);
+    const combineInputRightRef = useForkRef(inputRightRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]);
+    const panelRef = useRef(null);
+    const dataRef = useRef({
+        latestFocused: 'start',
+        onceVisible: false,
+        focusAnother: false,
+        inputValue: [undefined, undefined],
+        rangeDate: [null, null],
+    });
+    const order = (date) => orderTime(date, orderProp);
+    const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
+    const [focused, setFocused] = useImmer([false, false]);
+    if (focused[0]) {
+        dataRef.current.latestFocused = 'start';
+    }
+    if (focused[1]) {
+        dataRef.current.latestFocused = 'end';
+    }
+    const [_value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, (a, b) => deepCompareDate(a, b, format), formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    let [valueLeft, valueRight = null] = range ? (_a = _value) !== null && _a !== void 0 ? _a : [null, null] : [_value, null];
+    if (range) {
+        if (isNull(_value)) {
+            [valueLeft, valueRight] = dataRef.current.rangeDate;
+        }
+        else {
+            dataRef.current.rangeDate = [null, null];
+        }
+    }
+    const inputValue = [0, 1].map((index) => focused[index] && !isUndefined(dataRef.current.inputValue[index])
+        ? dataRef.current.inputValue[index]
+        : (() => {
+            const value = index === 0 ? valueLeft : valueRight;
+            return isNull(value) ? '' : dayjs(value).format(format);
+        })());
+    const changeValue = (date) => {
+        const index = focused.findIndex((f) => f);
+        if (range) {
+            if (isNull(_value)) {
+                dataRef.current.rangeDate[index] = date;
+                if (dataRef.current.rangeDate.every((v) => !isNull(v))) {
+                    dataRef.current.focusAnother = order(dataRef.current.rangeDate);
+                    if (dataRef.current.focusAnother) {
+                        dataRef.current.rangeDate.reverse();
+                    }
+                    dataRef.current.inputValue = [undefined, undefined];
+                    _changeValue(dataRef.current.rangeDate);
+                }
+            }
+            else {
+                dataRef.current.inputValue = [undefined, undefined];
+                _changeValue((draft) => {
+                    draft[index] = date;
+                    dataRef.current.focusAnother = order(draft);
+                    if (dataRef.current.focusAnother) {
+                        draft.reverse();
+                    }
+                });
+            }
+        }
+        else {
+            dataRef.current.inputValue = [undefined, undefined];
+            _changeValue(date);
+        }
+        forceUpdate();
+    };
+    const [placeholderLeft = t('TimePicker', range ? 'Start time' : 'Select time'), placeholderRight = t('TimePicker', 'End time')] = range
+        ? (_b = placeholder) !== null && _b !== void 0 ? _b : []
+        : [placeholder];
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const maxZIndex = useMaxIndex(visible);
+    const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
+    const [transformOrigin, setTransformOrigin] = useState();
+    const [popupPositionStyle, setPopupPositionStyle] = useState({
+        top: '-200vh',
+        left: '-200vw',
+    });
+    const updatePosition = useEventCallback(() => {
+        if (visible && boxRef.current && popupRef.current) {
+            const height = popupRef.current.offsetHeight;
+            const maxWidth = ROOT_DATA.windowSize.width - WINDOW_SPACE * 2;
+            const width = Math.min(popupRef.current.scrollWidth, maxWidth);
+            const position = getVerticalSidePosition(boxRef.current, { width, height }, {
+                placement: 'bottom-left',
+                inWindow: WINDOW_SPACE,
+            });
+            setTransformOrigin(position.transformOrigin);
+            setPopupPositionStyle({
+                top: position.top,
+                left: position.left,
+                maxWidth,
+            });
+        }
+    });
+    const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
+    useEvent(pageScrollRef, 'scroll', updatePosition, { passive: true }, !visible || listenGlobalScrolling);
+    useResize(boxRef, updatePosition, undefined, !visible);
+    useResize(popupRef, updatePosition, undefined, !visible);
+    useResize(contentResizeRef, updatePosition, undefined, !visible);
+    useImperativeHandle(ref, () => ({
+        updatePosition,
+    }), [updatePosition]);
+    useEffect(() => {
+        if (boxRef.current && indicatorRef.current) {
+            let focus = false;
+            const boxRect = boxRef.current.getBoundingClientRect();
+            if (inputLeftRef.current && document.activeElement === inputLeftRef.current) {
+                const rect = inputLeftRef.current.getBoundingClientRect();
+                indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
+                focus = true;
+            }
+            if (inputRightRef.current && document.activeElement === inputRightRef.current) {
+                const rect = inputRightRef.current.getBoundingClientRect();
+                indicatorRef.current.style.cssText = `left:${rect.left - boxRect.left}px;width:${rect.width}px;opacity:1;`;
+                focus = true;
+            }
+            if (!focus) {
+                indicatorRef.current.style.cssText += 'opacity:0;';
+            }
+        }
+    });
+    useEffect(() => {
+        if (dataRef.current.focusAnother && document.activeElement) {
+            const el = document.activeElement.parentElement;
+            for (let index = 0; index < el.childElementCount; index++) {
+                const element = el.children.item(index);
+                if (element.tagName.toLowerCase() === 'input' && element !== document.activeElement) {
+                    element.focus({ preventScroll: true });
+                    break;
+                }
+            }
+        }
+        dataRef.current.focusAnother = false;
+    });
+    const handleEnter = (time) => {
+        var _a;
+        if (range) {
+            const index = focused.findIndex((f) => f);
+            if (isNull(index === 0 ? valueRight : valueLeft)) {
+                dataRef.current.focusAnother = true;
+                forceUpdate();
+            }
+            else {
+                changeVisible(false);
+            }
+        }
+        else {
+            changeVisible(false);
+        }
+        if (!dataRef.current.focusAnother) {
+            (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, time);
+        }
+    };
+    const clearable = clearableProp && !isNull(_value) && !visible && !disabled;
+    const inputNode = (isLeft) => {
+        const index = isLeft ? 0 : 1;
+        const value = isLeft ? valueLeft : valueRight;
+        const render = inputRender === null || inputRender === void 0 ? void 0 : inputRender[index];
+        const node = (_jsx("input", Object.assign({}, styled('time-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 10, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onChange: (e) => {
+                var _a;
+                forceUpdate();
+                dataRef.current.inputValue[index] = e.currentTarget.value;
+                if (dayjs(e.currentTarget.value, format, true).isValid()) {
+                    const date = dayjs(e.currentTarget.value, format).toDate();
+                    changeValue(date);
+                    (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
+                }
+            }, onKeyDown: (e) => {
+                if (e.code === 'Escape') {
+                    if (visible && escClosable) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        changeVisible(false);
+                    }
+                }
+                else if (e.code === 'Enter' && inputValue[index] && dayjs(inputValue[index], format, true).isValid()) {
+                    e.preventDefault();
+                    const time = dayjs(inputValue[index], format).toDate();
+                    handleEnter(time);
+                }
+            }, onFocus: () => {
+                var _a, _b, _c;
+                (_b = (_a = dataRef.current).clearTid) === null || _b === void 0 ? void 0 : _b.call(_a);
+                setFocused((draft) => {
+                    draft.fill(false);
+                    draft[isLeft ? 0 : 1] = true;
+                });
+                dataRef.current.inputValue = [undefined, undefined];
+                if (visible && range && value) {
+                    (_c = panelRef.current) === null || _c === void 0 ? void 0 : _c.call(panelRef, value);
+                }
+            }, onBlur: () => {
+                dataRef.current.clearTid = async.setTimeout(() => {
+                    setFocused([false, false]);
+                    changeVisible(false);
+                }, 20);
+            } })));
+        return render ? render(node) : node;
+    };
+    const preventBlur = (e) => {
+        if ((document.activeElement === inputLeftRef.current || document.activeElement === inputRightRef.current) &&
+            e.target !== inputLeftRef.current &&
+            e.target !== inputRightRef.current &&
+            e.button === 0) {
+            e.preventDefault();
+        }
+    };
+    const designProps = useDesign({ compose: { disabled }, form: formControl });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({}, restProps, mergeCS(styled('time-picker', `time-picker--${size}`, {
+                'time-picker.is-disabled': disabled,
+            }), {
+                className: restProps.className,
+                style: restProps.style,
+            }), designProps, { ref: boxRef, onMouseDown: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onMouseUp: (e) => {
+                    var _a;
+                    (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    preventBlur(e);
+                }, onClick: (e) => {
+                    var _a, _b;
+                    (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    if (!focused.some((f) => f)) {
+                        (_b = inputLeftRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+                    }
+                    changeVisible(true);
+                }, children: [inputNode(true), range && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({}, styled('time-picker__indicator'), { ref: indicatorRef })), _jsx("div", Object.assign({}, styled('time-picker__separator'), { children: _jsx(Icon, { children: _jsx(SwapHorizOutlined, {}) }) })), inputNode(false)] })), clearable && (_jsx("div", Object.assign({}, styled('time-picker__clear'), { role: "button", "aria-label": t('Clear'), onClick: (e) => {
+                            e.stopPropagation();
+                            dataRef.current.inputValue = [undefined, undefined];
+                            _changeValue(null);
+                            onClear === null || onClear === void 0 ? void 0 : onClear();
+                        }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), _jsx("div", Object.assign({}, mergeCS(styled('time-picker__icon'), {
+                        style: { visibility: clearable ? 'hidden' : undefined },
+                    }), { children: _jsx(Icon, { children: _jsx(AccessTimeOutlined, {}) }) }))] })), _jsx(Portal, { selector: () => {
+                    let el = document.getElementById(`${namespace}-time-picker-root`);
+                    if (!el) {
+                        el = document.createElement('div');
+                        el.id = `${namespace}-time-picker-root`;
+                        document.body.appendChild(el);
+                    }
+                    return el;
+                }, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: () => {
+                        updatePosition();
+                        const cb = () => {
+                            var _a;
+                            const value = focused[0] ? valueLeft : valueRight;
+                            if (value) {
+                                (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, value);
+                            }
+                        };
+                        if (range) {
+                            cb();
+                        }
+                        else if (!dataRef.current.onceVisible) {
+                            dataRef.current.onceVisible = true;
+                            cb();
+                        }
+                    }, afterEnter: () => {
+                        afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+                    }, afterLeave: () => {
+                        afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+                    }, children: (state) => {
+                        let transitionStyle = {};
+                        switch (state) {
+                            case 'enter':
+                                transitionStyle = { transform: 'scaleY(0.7)', opacity: 0 };
+                                break;
+                            case 'entering':
+                                transitionStyle = {
+                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
+                                    transformOrigin,
+                                };
+                                break;
+                            case 'leaving':
+                                transitionStyle = {
+                                    transform: 'scaleY(0.7)',
+                                    opacity: 0,
+                                    transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
+                                    transformOrigin,
+                                };
+                                break;
+                            case 'leaved':
+                                transitionStyle = { display: 'none' };
+                                break;
+                            default:
+                                break;
+                        }
+                        return (_jsxs("div", Object.assign({}, mergeCS(styled('time-picker-popup'), {
+                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                        }), { ref: popupRef, onMouseDown: (e) => {
+                                preventBlur(e);
+                            }, onMouseUp: (e) => {
+                                preventBlur(e);
+                            }, children: [_jsx(TimePickerPanel, { ref: panelRef, styled: styled, time: dataRef.current.latestFocused === 'start' ? valueLeft : valueRight, format: format, config: config ? (...args) => config(...args, dataRef.current.latestFocused, [valueLeft, valueRight]) : undefined, onTimeChange: (time) => {
+                                        changeValue(time);
+                                    } }), _jsx("div", Object.assign({}, styled('time-picker__footer'), { children: _jsx(Button, { pattern: "link", onClick: () => {
+                                            const now = new Date();
+                                            changeValue(now);
+                                            handleEnter(now);
+                                        }, children: t('TimePicker', 'Now') }) }))] })));
+                    } }) })] }));
+});

package/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export type { TimePickerRef, TimePickerProps } from './types';
+export { TimePicker } from './TimePicker';

package/time-picker/index.js

@@ -0,0 +1 @@
+export { TimePicker } from './TimePicker';

package/time-picker/internal/TimePickerPanel.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { CLASSES } from '../vars';
+interface TimePickerPanelProps {
+    styled: Styled<typeof CLASSES>;
+    time: Date | null;
+    format: string;
+    config: ((unit: 'hour' | 'minute' | 'second', value: number) => {
+        disabled?: boolean;
+        hidden?: boolean;
+    }) | undefined;
+    inDatePicker?: boolean;
+    onTimeChange: (time: Date) => void;
+}
+export declare const TimePickerPanel: import("react").ForwardRefExoticComponent<TimePickerPanelProps & import("react").RefAttributes<(date: Date) => void>>;
+export {};

package/time-picker/internal/TimePickerPanel.js

@@ -0,0 +1,138 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEventCallback } from '@laser-ui/hooks';
+import { scrollTo } from '@laser-ui/utils';
+import { freeze } from 'immer';
+import { isUndefined } from 'lodash';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import dayjs from '../../dayjs';
+const H12 = freeze(['12', ...Array.from({ length: 11 }).map((_, i) => `${i + 1 < 10 ? '0' : ''}${i + 1}`)]);
+const [H24, M60, S60] = [24, 60, 60].map((num) => freeze(Array.from({ length: num }).map((_, i) => `${i < 10 ? '0' : ''}${i}`)));
+export const TimePickerPanel = forwardRef((props, ref) => {
+    const { styled, time: timeProp, format: formatProp, config, inDatePicker = false, onTimeChange } = props;
+    const ulHRef = useRef(null);
+    const ulMRef = useRef(null);
+    const ulSRef = useRef(null);
+    const dataRef = useRef({});
+    const is12Hour = formatProp.includes('hh');
+    const cols = (() => {
+        const cols = [];
+        if (formatProp.toLowerCase().includes('hh')) {
+            cols.push('HH');
+        }
+        if (formatProp.includes('mm')) {
+            cols.push('mm');
+        }
+        if (formatProp.includes('ss')) {
+            cols.push('ss');
+        }
+        return cols;
+    })();
+    const time = timeProp ? dayjs(timeProp) : dayjs('00:00:00', 'HH:mm:ss');
+    const [_a, setA] = useState('AM');
+    const a = timeProp ? (time.get('hour') < 12 ? 'AM' : 'PM') : _a;
+    const updateView = useEventCallback((t, unit, behavior = 'smooth') => {
+        var _b, _c, _d, _e, _f, _g;
+        if (unit === 'hour' || isUndefined(unit)) {
+            let hour = t.getHours();
+            if (is12Hour) {
+                if (a === 'AM' && hour > 11) {
+                    hour -= 12;
+                }
+                if (a === 'PM' && hour < 12) {
+                    hour += 12;
+                }
+            }
+            if (ulHRef.current) {
+                (_c = (_b = dataRef.current).clearHTid) === null || _c === void 0 ? void 0 : _c.call(_b);
+                dataRef.current.clearHTid = scrollTo(ulHRef.current, {
+                    top: Array.prototype.indexOf.call(ulHRef.current.children, ulHRef.current.querySelector(`[data-h="${hour}"]`)) * 28,
+                    behavior,
+                    during: 200,
+                });
+            }
+        }
+        if (unit === 'minute' || isUndefined(unit)) {
+            const minute = t.getMinutes();
+            if (ulMRef.current) {
+                (_e = (_d = dataRef.current).clearMTid) === null || _e === void 0 ? void 0 : _e.call(_d);
+                dataRef.current.clearMTid = scrollTo(ulMRef.current, {
+                    top: Array.prototype.indexOf.call(ulMRef.current.children, ulMRef.current.querySelector(`[data-m="${minute}"]`)) * 28,
+                    behavior,
+                    during: 200,
+                });
+            }
+        }
+        if (unit === 'second' || isUndefined(unit)) {
+            const second = t.getSeconds();
+            if (ulSRef.current) {
+                (_g = (_f = dataRef.current).clearSTid) === null || _g === void 0 ? void 0 : _g.call(_f);
+                dataRef.current.clearSTid = scrollTo(ulSRef.current, {
+                    top: Array.prototype.indexOf.call(ulSRef.current.children, ulSRef.current.querySelector(`[data-s="${second}"]`)) * 28,
+                    behavior,
+                    during: 200,
+                });
+            }
+        }
+    });
+    useImperativeHandle(ref, () => (t) => {
+        updateView(t, undefined, 'instant');
+    }, [updateView]);
+    return (_jsxs("div", Object.assign({}, styled('time-picker__panel'), { children: [inDatePicker && _jsx("div", Object.assign({}, styled('time-picker__header'), { children: time.format(cols.join(':')) })), cols.includes('HH') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: ulHRef, children: (is12Hour ? H12 : H24).map((n) => {
+                    var _b;
+                    let hour = Number(n);
+                    if (is12Hour) {
+                        if (a === 'AM' && hour === 12) {
+                            hour = 0;
+                        }
+                        if (a === 'PM' && hour !== 12) {
+                            hour += 12;
+                        }
+                    }
+                    const { disabled, hidden } = (_b = config === null || config === void 0 ? void 0 : config('hour', hour)) !== null && _b !== void 0 ? _b : {};
+                    return hidden ? null : (_createElement("li", Object.assign({}, styled('time-picker__cell', {
+                        'time-picker__cell.is-active': timeProp && time.get('hour') === hour,
+                        'time-picker__cell.is-disabled': disabled,
+                    }), { key: hour, "data-h": hour, onClick: () => {
+                            const newTime = time.set('hour', hour).toDate();
+                            updateView(newTime, 'hour');
+                            onTimeChange(newTime);
+                        } }), n));
+                }) }))), cols.includes('mm') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: ulMRef, children: M60.map((n) => {
+                    var _b;
+                    const minute = Number(n);
+                    const { disabled, hidden } = (_b = config === null || config === void 0 ? void 0 : config('minute', minute)) !== null && _b !== void 0 ? _b : {};
+                    return hidden ? null : (_createElement("li", Object.assign({}, styled('time-picker__cell', {
+                        'time-picker__cell.is-active': timeProp && time.get('minute') === minute,
+                        'time-picker__cell.is-disabled': disabled,
+                    }), { key: minute, "data-m": minute, onClick: () => {
+                            const newTime = time.set('minute', minute).toDate();
+                            updateView(newTime, 'minute');
+                            onTimeChange(newTime);
+                        } }), n));
+                }) }))), cols.includes('ss') && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { ref: ulSRef, children: S60.map((n) => {
+                    var _b;
+                    const second = Number(n);
+                    const { disabled, hidden } = (_b = config === null || config === void 0 ? void 0 : config('second', second)) !== null && _b !== void 0 ? _b : {};
+                    return hidden ? null : (_createElement("li", Object.assign({}, styled('time-picker__cell', {
+                        'time-picker__cell.is-active': timeProp && time.get('second') === second,
+                        'time-picker__cell.is-disabled': disabled,
+                    }), { key: second, "data-s": second, onClick: () => {
+                            const newTime = time.set('second', second).toDate();
+                            updateView(newTime, 'second');
+                            onTimeChange(newTime);
+                        } }), n));
+                }) }))), is12Hour && (_jsx("ul", Object.assign({}, styled('time-picker__column'), { children: ['AM', 'PM'].map((A) => (_createElement("li", Object.assign({}, styled('time-picker__cell', {
+                    'time-picker__cell.is-active': a === A,
+                }), { key: A, onClick: () => {
+                        if (timeProp) {
+                            if (a !== A) {
+                                const newT = time.set('hour', time.get('hour') + (A === 'AM' ? -12 : 12)).toDate();
+                                onTimeChange(newT);
+                            }
+                        }
+                        else {
+                            setA(A);
+                        }
+                    } }), A))) })))] })));
+});

package/time-picker/types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, CloneHTMLElement, Size } from '../types';
+export {};
+export interface TimePickerRef {
+    updatePosition: () => void;
+}
+export interface TimePickerProps extends BaseProps<'time-picker' | 'time-picker-popup', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'placeholder'> {
+    formControl?: FormControlProvider;
+    model?: Date | [Date, Date] | null;
+    defaultModel?: Date | [Date, Date] | null;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    placeholder?: string | [string?, string?];
+    range?: boolean;
+    format?: string;
+    order?: 'ascend' | 'descend' | false;
+    clearable?: boolean;
+    size?: Size;
+    disabled?: boolean;
+    config?: (unit: 'hour' | 'minute' | 'second', value: number, position: 'start' | 'end', current: [Date | null, Date | null]) => {
+        disabled?: boolean;
+        hidden?: boolean;
+    };
+    escClosable?: boolean;
+    inputRef?: [React.ForwardedRef<HTMLInputElement>?, React.ForwardedRef<HTMLInputElement>?];
+    inputRender?: [CloneHTMLElement?, CloneHTMLElement?];
+    onModelChange?: (date: any) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    onClear?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/time-picker/types.js

@@ -0,0 +1 @@
+export {};

package/time-picker/utils.d.ts

@@ -0,0 +1,4 @@
+import type { OpUnitType } from 'dayjs';
+export declare function deepCompareDate(a: Date | [Date, Date] | null, b: Date | [Date, Date] | null, format: string): boolean;
+export declare function orderDate(date: [Date, Date], order: 'ascend' | 'descend' | false, unit?: OpUnitType): boolean;
+export declare function orderTime(time: [Date, Date], order: 'ascend' | 'descend' | false): boolean;

package/time-picker/utils.js

@@ -0,0 +1,26 @@
+import { isArray, isDate, isNull } from 'lodash';
+import dayjs from '../dayjs';
+export function deepCompareDate(a, b, format) {
+    const isSame = (t1, t2) => dayjs(t1).format(format) === dayjs(t2).format(format);
+    if (isDate(a) && isDate(b)) {
+        return isSame(a, b);
+    }
+    if (isNull(a) && isNull(b)) {
+        return true;
+    }
+    if (isArray(a) && isArray(b)) {
+        return isSame(a[0], b[0]) && isSame(a[1], b[1]);
+    }
+    return false;
+}
+export function orderDate(date, order, unit) {
+    if ((order === 'ascend' && dayjs(date[0]).isAfter(date[1], unit)) || (order === 'descend' && dayjs(date[0]).isBefore(date[1], unit))) {
+        return true;
+    }
+    return false;
+}
+export function orderTime(time, order) {
+    const t1 = dayjs(time[0]).set('year', 2000).set('month', 0).set('date', 1);
+    const t2 = dayjs(time[1]).set('year', 2000).set('month', 0).set('date', 1);
+    return orderDate([t1.toDate(), t2.toDate()], order);
+}

package/time-picker/vars.d.ts

@@ -0,0 +1,20 @@
+export declare const CLASSES: {
+    'time-picker': string;
+    'time-picker.is-disabled': string;
+    'time-picker--small': string;
+    'time-picker--medium': string;
+    'time-picker--large': string;
+    'time-picker__input': string;
+    'time-picker__indicator': string;
+    'time-picker__separator': string;
+    'time-picker__clear': string;
+    'time-picker__icon': string;
+    'time-picker-popup': string;
+    'time-picker__panel': string;
+    'time-picker__header': string;
+    'time-picker__column': string;
+    'time-picker__cell': string;
+    'time-picker__cell.is-active': string;
+    'time-picker__cell.is-disabled': string;
+    'time-picker__footer': string;
+};

package/time-picker/vars.js

@@ -0,0 +1,20 @@
+export const CLASSES = {
+    'time-picker': '^time-picker',
+    'time-picker.is-disabled': 'is-disabled',
+    'time-picker--small': '^time-picker--small',
+    'time-picker--medium': '^time-picker--medium',
+    'time-picker--large': '^time-picker--large',
+    'time-picker__input': '^time-picker__input',
+    'time-picker__indicator': '^time-picker__indicator',
+    'time-picker__separator': '^time-picker__separator',
+    'time-picker__clear': '^time-picker__clear',
+    'time-picker__icon': '^time-picker__icon',
+    'time-picker-popup': '^time-picker-popup',
+    'time-picker__panel': '^time-picker__panel',
+    'time-picker__header': '^time-picker__header',
+    'time-picker__column': '^time-picker__column',
+    'time-picker__cell': '^time-picker__cell',
+    'time-picker__cell.is-active': 'is-active',
+    'time-picker__cell.is-disabled': 'is-disabled',
+    'time-picker__footer': '^time-picker__footer',
+};

package/timeline/Timeline.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TimelineItem, TimelineProps } from './types';
+export declare function Timeline<T extends TimelineItem>(props: TimelineProps<T>): JSX.Element | null;