@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/Collapse/CollapseItem.js

@@ -1,21 +1,22 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
-import React, { memo, useCallback, useContext, useMemo, useRef } from 'react';
+import React, { forwardRef, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
 import Icon from "../Icon/Icon";
 import Transition from "../Transition/Transition";
 import { useClassNames } from "../hooks";
 import { CollapseContext } from "./CollapseContext";
 import { afterEnter as _afterEnter, afterLeave as _afterLeave, beforeEnter as _beforeEnter, beforeLeave as _beforeLeave, onEnter as _onEnter, onLeave as _onLeave } from "./CollapseTransition";
-var CollapseItem = /*#__PURE__*/memo(function (props) {
+var CollapseItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var name = props.name,
     title = props.title,
+    icon = props.icon,
     disabled = props.disabled,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'collapse-item' : _props$classPrefix;
@@ -24,60 +25,101 @@ var CollapseItem = /*#__PURE__*/memo(function (props) {
     e = _useClassNames.e,
     is = _useClassNames.is;
   var _useContext = useContext(CollapseContext),
-    value = _useContext.value,
-    setValue = _useContext.setValue,
-    accordion = _useContext.accordion,
-    onChange = _useContext.onChange;
+    activeNames = _useContext.activeNames,
+    handleItemClick = _useContext.handleItemClick;
+  var isClick = useRef(false);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusing = _useState2[0],
+    setFocusing = _useState2[1];
   var containerRef = useRef(null);
   var active = useMemo(function () {
-    if (accordion && typeof value === 'string') {
-      return name === value;
-    } else {
-      if (value instanceof Array) {
-        return value.includes(name);
-      }
-    }
-    return false;
-  }, [accordion, name, value]);
-  var handleClick = useCallback(function () {
-    if (accordion) {
-      setValue(active ? '' : name);
-      onChange === null || onChange === void 0 || onChange(active ? '' : name);
-    } else {
-      if (value instanceof Array) {
-        if (active) {
-          var v = JSON.parse(JSON.stringify(value));
-          v.splice(v.indexOf(name), 1);
-          setValue(v);
-          onChange === null || onChange === void 0 || onChange(v);
-        } else {
-          setValue([].concat(_toConsumableArray(value), [name]));
-          onChange === null || onChange === void 0 || onChange([].concat(_toConsumableArray(value), [name]));
-        }
+    return activeNames.includes(name);
+  }, [activeNames, name]);
+  var handleFocus = function handleFocus() {
+    setTimeout(function () {
+      if (!isClick.current) {
+        setFocusing(true);
       } else {
-        setValue(active ? [] : [name]);
-        onChange === null || onChange === void 0 || onChange(active ? [] : [name]);
+        isClick.current = false;
       }
+    }, 50);
+  };
+  var handleHeaderClick = useCallback(function (event) {
+    if (disabled) {
+      return;
+    }
+    var target = event.target;
+    if (target !== null && target !== void 0 && target.closest('input, textarea, select')) {
+      return;
+    }
+    handleItemClick(name);
+    isClick.current = true;
+    setFocusing(false);
+  }, [disabled, handleItemClick, name]);
+  var handleEnterClick = function handleEnterClick(event) {
+    event.preventDefault();
+    if (event.key !== 'Enter' && event.code !== 'Space') {
+      return;
+    }
+    event.stopPropagation();
+    var target = event.target;
+    if (target !== null && target !== void 0 && target.closest('input, textarea, select')) {
+      return;
     }
-  }, [accordion, active, name, onChange, setValue, value]);
+    handleItemClick(name);
+  };
+  var getIcon = function getIcon() {
+    if (!icon) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        name: "angle-right",
+        className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["arrow"]))), is({
+          active: active
+        }))
+      });
+    }
+    if (typeof icon === 'function') {
+      return icon(active);
+    }
+    return /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["arrow"]))), is({
+        active: active
+      }))
+    });
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      isActive: active
+    };
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(b(), is({
       active: active,
       disabled: disabled
     }), props.className),
     style: props.style
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["header"]))),
-    onClick: handleClick
-  }, title, /*#__PURE__*/React.createElement(Icon, {
-    name: "angle-right",
-    className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["arrow"]))), is({
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["header"]))), is({
       active: active
-    }))
-  }))), /*#__PURE__*/React.createElement(Transition, {
-    nodeRef: containerRef,
-    name: b('menu-collapse', false),
+    }), {
+      focusing: focusing && !disabled
+    }),
+    onClick: handleHeaderClick,
+    onKeyDown: handleEnterClick,
+    tabIndex: 0,
+    onFocus: handleFocus,
+    onBlur: function onBlur() {
+      return setFocusing(false);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["title"])))
+  }, typeof title === 'function' ? title(active) : title), getIcon()), /*#__PURE__*/React.createElement(Transition, {
+    nodeRef: containerRef
+    // name={b('menu-collapse', false)}
+    ,
     duration: 300,
+    showDuration: 0,
     visible: active,
     beforeEnter: function beforeEnter() {
       return _beforeEnter(containerRef);
@@ -99,13 +141,13 @@ var CollapseItem = /*#__PURE__*/memo(function (props) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["wrap"])))),
+    className: classNames(e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["wrap"])))),
     style: {
       display: 'none'
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["content"])))
+    className: e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["content"])))
   }, props.children))));
-});
+}));
 CollapseItem.displayName = 'CollapseItem';
 export default CollapseItem;

package/dist/Collapse/CollapseTransition.js

@@ -22,10 +22,12 @@ export var onEnter = function onEnter(node) {
 };
 export var afterEnter = function afterEnter(node) {
   if (node.current) {
-    var el = node.current;
-    removeClass(el, 'collapse-transition');
-    el.style.height = '';
-    el.style.overflow = el.dataset.oldOverflow;
+    setTimeout(function () {
+      var el = node.current;
+      removeClass(el, 'collapse-transition');
+      el.style.height = '';
+      el.style.overflow = el.dataset.oldOverflow;
+    }, 300);
   }
 };
 export var beforeLeave = function beforeLeave(node) {
@@ -39,13 +41,15 @@ export var beforeLeave = function beforeLeave(node) {
     el.style.height = "".concat(el.scrollHeight, "px");
     el.style.overflow = 'hidden';
     el.style.margin = 0;
+    el.style.transitionProperty = 'height';
+    setTimeout(function () {
+      el.style.height = 0;
+    }, 0);
   }
 };
 export var onLeave = function onLeave(node) {
   if (node.current) {
     var el = node.current;
-    el.style.transitionProperty = 'height';
-    el.style.height = 0;
   }
 };
 export var afterLeave = function afterLeave(node) {
@@ -53,6 +57,6 @@ export var afterLeave = function afterLeave(node) {
     var el = node.current;
     el.style.height = '';
     el.style.overflow = el.dataset.oldOverflow;
-    el.style.display = '';
+    // el.style.display = '';
   }
 };

package/dist/Collapse/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Collapse } from './Collapse';
 export { default as CollapseItem } from './CollapseItem';
-export type { CollapseItemProps, CollapseProps } from './typings';
+export type { CollapseActiveName, CollapseItemProps, CollapseItemRef, CollapseProps, CollapseRef } from './typings';

package/dist/Collapse/typings.d.ts

@@ -1,20 +1,35 @@
 import React from 'react';
+import { IconName } from '../Icon';
 import { BaseProps, NativeProps } from '../types/common';
+export type CollapseActiveName = string | number;
+export type CollapseRef = {
+    activeNames: CollapseActiveName | CollapseActiveName[];
+    setActiveNames: (activeNames: CollapseActiveName[]) => void;
+};
+export type CollapseItemRef = {
+    isActive: boolean;
+};
 export interface CollapseProps extends BaseProps, NativeProps<'--el-collapse-border-color' | '--el-collapse-header-height' | '--el-collapse-header-bg-color' | '--el-collapse-header-text-color' | '--el-collapse-header-font-size' | '--el-collapse-content-bg-color' | '--el-collapse-content-font-size' | '--el-collapse-content-text-color' | '--el-transition-duration' | '--el-collapse-item-margin'> {
     /** 当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array) */
-    defaultActiveName?: string | string[];
+    defaultActiveName?: CollapseActiveName | CollapseActiveName[];
     /** 当前激活的面板(可控模式：如果是手风琴模式，绑定值类型需要为string，否则为array) */
-    activeName?: string | string[];
+    activeName?: CollapseActiveName | CollapseActiveName[];
     /** 是否手风琴模式 */
     accordion?: boolean;
+    /** 展开图标位置 */
+    expandIconPosition?: 'left' | 'right';
+    /** 折叠状态更改之前的折叠钩子。 返回 false 或者返回 Promise 且被 reject 则停止切换 */
+    beforeCollapse?: (name: CollapseActiveName) => Promise<boolean> | boolean;
     /** 当前激活面板改变时触发(如果是手风琴模式，参数 activeNames 类型为string，否则为array) */
-    onChange?: (activeNames: string | string[]) => void;
+    onChange?: (activeNames: CollapseActiveName | CollapseActiveName[]) => void;
 }
 export interface CollapseItemProps extends BaseProps, NativeProps {
     /** 唯一标志符 */
-    name: string;
+    name: CollapseActiveName;
     /** 面板标题 */
-    title?: string | React.ReactElement;
+    title?: string | React.ReactElement | ((isActive: boolean) => React.ReactNode);
+    /** 自定义图标 */
+    icon?: IconName | React.ReactElement | ((isActive: boolean) => React.ReactNode);
     /** 是否禁用 */
     disabled?: boolean;
 }

package/dist/ColorPicker/typings.d.ts

@@ -1,6 +1,6 @@
 import { PopperOptions } from '../Popper';
 import { AnimationEventProps, BaseProps, NativeProps, TypeAttributes } from '../types/common';
-export interface ColorPickerProps extends BaseProps, NativeProps, AnimationEventProps, PopperOptions {
+export interface ColorPickerProps extends BaseProps, NativeProps<'--el-color-picker-alpha-bg-a' | '--el-color-picker-alpha-bg-b'>, AnimationEventProps, PopperOptions {
     /** 绑定值（可控模式） */
     value?: string;
     /** 默认值 */

package/dist/Countdown/Countdown.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CountdownProps, CountdownRef } from './typings';
+declare const Countdown: React.MemoExoticComponent<React.ForwardRefExoticComponent<CountdownProps & React.RefAttributes<CountdownRef>>>;
+export default Countdown;

package/dist/Countdown/Countdown.js

@@ -0,0 +1,121 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useMount, useUnmount } from 'ahooks';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import Statistic from "../Statistic/Statistic";
+import { cAF, rAF } from "../Util";
+import { mergeDefaultProps } from "../Util/base";
+import { formatTime, getTime } from "./util";
+var Countdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  props = mergeDefaultProps({
+    format: 'HH:mm:ss',
+    value: 0,
+    valueStyle: undefined
+  }, props);
+  var _props = props,
+    format = _props.format,
+    value = _props.value,
+    title = _props.title,
+    prefix = _props.prefix,
+    suffix = _props.suffix,
+    valueStyle = _props.valueStyle,
+    onChange = _props.onChange,
+    onFinish = _props.onFinish,
+    className = _props.className,
+    style = _props.style,
+    children = _props.children;
+  var timerRef = useRef(undefined);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    rawValue = _useState2[0],
+    setRawValue = _useState2[1];
+  var statisticRef = useRef(null);
+
+  /**
+   * @description 计算格式化后的倒计时显示值
+   */
+  var displayValue = useMemo(function () {
+    return formatTime(rawValue, format);
+  }, [rawValue, format]);
+
+  /**
+   * @description 自定义格式化函数，传递给 Statistic 组件
+   */
+  var formatter = useCallback(function (val) {
+    return formatTime(Number(val), format);
+  }, [format]);
+
+  /**
+   * @description 停止计时器
+   */
+  var stopTimer = useCallback(function () {
+    if (timerRef.current !== undefined) {
+      cAF(timerRef.current);
+      timerRef.current = undefined;
+    }
+  }, []);
+
+  /**
+   * @description 启动倒计时计时器
+   */
+  var startTimer = useCallback(function () {
+    var timestamp = getTime(value);
+    var frameFunc = function frameFunc() {
+      var diff = timestamp - Date.now();
+      onChange === null || onChange === void 0 || onChange(diff);
+      if (diff <= 0) {
+        diff = 0;
+        stopTimer();
+        onFinish === null || onFinish === void 0 || onFinish();
+      } else {
+        timerRef.current = rAF(frameFunc);
+      }
+      setRawValue(diff);
+    };
+    timerRef.current = rAF(frameFunc);
+  }, [value, onChange, onFinish, stopTimer]);
+  useMount(function () {
+    setRawValue(getTime(value) - Date.now());
+  });
+  useUnmount(function () {
+    stopTimer();
+  });
+
+  /**
+   * @description 组件挂载时初始化倒计时并启动计时器
+   */
+  useEffect(function () {
+    stopTimer();
+    startTimer();
+  }, [value, format]);
+
+  /**
+   * @description 暴露 displayValue 给父组件
+   */
+  useImperativeHandle(ref, function () {
+    return {
+      get ref() {
+        var _statisticRef$current;
+        return (_statisticRef$current = statisticRef.current) === null || _statisticRef$current === void 0 ? void 0 : _statisticRef$current.ref;
+      },
+      displayValue: displayValue
+    };
+  });
+  return /*#__PURE__*/React.createElement(Statistic, {
+    ref: statisticRef,
+    value: rawValue,
+    title: title,
+    prefix: prefix,
+    suffix: suffix,
+    formatter: formatter,
+    valueStyle: valueStyle,
+    className: className,
+    style: style
+  }, children);
+}));
+Countdown.displayName = 'ElCountdown';
+export default Countdown;

package/dist/Countdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Countdown } from './Countdown';
+export type { CountdownProps, CountdownRef } from './typings';

package/dist/Countdown/index.js

@@ -0,0 +1 @@
+export { default as Countdown } from "./Countdown";

package/dist/Countdown/typings.d.ts

@@ -0,0 +1,52 @@
+import { Dayjs } from 'dayjs';
+import type { CSSProperties, ReactNode, RefObject } from 'react';
+import type { BaseProps, NativeProps } from '../types/common';
+/**
+ * @description Countdown 倒计时组件属性
+ */
+export interface CountdownProps extends BaseProps, NativeProps {
+    /**
+     * @description 格式化倒计时显示，支持 Y(年)/M(月)/D(天)/H(时)/m(分)/s(秒)/S(毫秒)
+     * @default 'HH:mm:ss'
+     */
+    format?: string;
+    /**
+     * @description 设置倒计时的前缀
+     */
+    prefix?: string | ReactNode;
+    /**
+     * @description 设置倒计时的后缀
+     */
+    suffix?: string | ReactNode;
+    /**
+     * @description 倒计时标题
+     */
+    title?: string | ReactNode;
+    /**
+     * @description 目标时间，支持时间戳（毫秒）或 dayjs 等时间对象
+     * @default 0
+     */
+    value?: number | Dayjs;
+    /**
+     * @description 倒计时数值的样式
+     */
+    valueStyle?: CSSProperties;
+    /**
+     * @description 倒计时数值变化时触发
+     * @param value - 剩余毫秒数
+     */
+    onChange?: (value: number) => void;
+    /**
+     * @description 倒计时结束时触发
+     */
+    onFinish?: () => void;
+}
+/**
+ * @description Countdown 组件暴露的 ref 接口
+ */
+export interface CountdownRef {
+    /** 倒计时容器 DOM 引用 */
+    ref: RefObject<HTMLDivElement>;
+    /** 当前格式化后的显示值 */
+    displayValue: string | ReactNode;
+}

package/dist/Countdown/typings.js

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

package/dist/Countdown/util.d.ts

@@ -0,0 +1,14 @@
+import { Dayjs } from 'dayjs';
+/**
+ * @description 将时间值转换为时间戳（毫秒）
+ * @param value - 时间值，可以是数字时间戳或 Dayjs 对象
+ * @returns 时间戳（毫秒）
+ */
+export declare function getTime(value: number | Dayjs): number;
+/**
+ * @description 格式化倒计时时间戳为显示字符串
+ * @param timestamp - 剩余毫秒数
+ * @param format - 格式化模板，支持 Y(年)/M(月)/D(天)/H(时)/m(分)/s(秒)/S(毫秒)，用 [] 包裹的文本不会被替换
+ * @returns 格式化后的时间字符串
+ */
+export declare function formatTime(timestamp: number, format: string): string;

package/dist/Countdown/util.js

@@ -0,0 +1,58 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { isNumber } from "../Util";
+
+/** 时间单位元组：[标识符, 毫秒值] */
+var timeUnits = [['Y', 1000 * 60 * 60 * 24 * 365],
+// years
+['M', 1000 * 60 * 60 * 24 * 30],
+// months
+['D', 1000 * 60 * 60 * 24],
+// days
+['H', 1000 * 60 * 60],
+// hours
+['m', 1000 * 60],
+// minutes
+['s', 1000],
+// seconds
+['S', 1] // million seconds
+];
+
+/**
+ * @description 将时间值转换为时间戳（毫秒）
+ * @param value - 时间值，可以是数字时间戳或 Dayjs 对象
+ * @returns 时间戳（毫秒）
+ */
+export function getTime(value) {
+  return isNumber(value) ? new Date(value).getTime() : value.valueOf();
+}
+
+/**
+ * @description 格式化倒计时时间戳为显示字符串
+ * @param timestamp - 剩余毫秒数
+ * @param format - 格式化模板，支持 Y(年)/M(月)/D(天)/H(时)/m(分)/s(秒)/S(毫秒)，用 [] 包裹的文本不会被替换
+ * @returns 格式化后的时间字符串
+ */
+export function formatTime(timestamp, format) {
+  var timeLeft = timestamp;
+  var escapeRegex = /\[([^\]]*)]/g;
+  var replacedText = timeUnits.reduce(function (current, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      name = _ref2[0],
+      unit = _ref2[1];
+    var replaceRegex = new RegExp("".concat(name, "+(?![^\\[\\]]*\\])"), 'g');
+    if (replaceRegex.test(current)) {
+      var value = Math.floor(timeLeft / unit);
+      timeLeft -= value * unit;
+      return current.replace(replaceRegex, function (match) {
+        return String(value).padStart(match.length, '0');
+      });
+    }
+    return current;
+  }, format);
+  return replacedText.replace(escapeRegex, '$1');
+}

package/dist/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["name", "readonly", "clearable", "required", "valueFormat", "plain", "onClick", "prepend", "append", "error", "warning", "shortcuts", "onChange", "formatter", "type", "isoWeek"];
+var _excluded = ["name", "readonly", "clearable", "required", "valueFormat", "plain", "onClick", "prepend", "append", "shortcuts", "onChange", "formatter", "type", "isoWeek"];
 var _this = this;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -50,8 +50,6 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     onClick = _props.onClick,
     prepend = _props.prepend,
     append = _props.append,
-    error = _props.error,
-    warning = _props.warning,
     shortcuts = _props.shortcuts,
     onChange = _props.onChange,
     formatter = _props.formatter,
@@ -248,8 +246,6 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     },
     className: classNames(_defineProperty(_defineProperty({}, "".concat(namespace, "-date"), readonly), 'is-focus', visible)),
     style: props.style,
-    error: error,
-    warning: warning,
     prepend: prepend,
     append: append,
     plain: plain,
@@ -264,9 +260,16 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     onDestroy: function onDestroy() {
       return setVisible(false);
     },
+    popperClass: "is-pure",
     transitionAppear: true,
     unmountOnExit: true
-  }, animationInputProps, popperProps), /*#__PURE__*/React.createElement(CalendarContext.Provider, {
+  }, animationInputProps, {
+    onEnter: function onEnter() {
+      var _props$onEnter, _props2, _popperInstRef$curren;
+      (_props$onEnter = (_props2 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props2);
+      (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
+    }
+  }, popperProps), /*#__PURE__*/React.createElement(CalendarContext.Provider, {
     value: {
       value: dateProp,
       valueRange: valueRange,

package/dist/DatePicker/DateRangePicker.js

@@ -48,8 +48,6 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
     prepend = _props.prepend,
     append = _props.append,
     onChange = _props.onChange,
-    error = _props.error,
-    warning = _props.warning,
     formatter = _props.formatter;
   var _useControlled = useControlled(props.value, props.defaultValue),
     _useControlled2 = _slicedToArray(_useControlled, 2),
@@ -232,9 +230,7 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(b('date-editor', 'date-editor--daterange', false), b(_templateObject || (_templateObject = _taggedTemplateLiteral(["editor"]))), be('input', 'wrapper', false), be('tooltip', 'trigger', false), _defineProperty({}, bm('editor', size), size), is({
         focus: visible,
-        disabled: disabled,
-        error: error,
-        warning: warning
+        disabled: disabled
       })),
       ref: referenceElement,
       onClick: onActive,
@@ -275,7 +271,7 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
         event.stopPropagation();
       }
     }));
-  }, [b, be, bm, size, is, visible, disabled, error, warning, onActive, append, prepend, props.style, props.readOnly, props.rangeSeparator, onMouseEnter, onMouseLeave, e, name, startPlaceholder, formatValue, endPlaceholder, clearable, ebm, onClear]);
+  }, [b, be, bm, size, is, visible, disabled, onActive, append, prepend, props.style, props.readOnly, props.rangeSeparator, onMouseEnter, onMouseLeave, e, name, startPlaceholder, formatValue, endPlaceholder, clearable, ebm, onClear]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, append || prepend ? /*#__PURE__*/React.createElement(InputGroup, {
     prepend: prepend,
     append: append,
@@ -289,6 +285,11 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
     onDestroy: function onDestroy() {
       return setVisible(false);
     },
+    onEnter: function onEnter() {
+      var _props$onEnter, _props2, _popperInstRef$curren;
+      (_props$onEnter = (_props2 = props).onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(_props2);
+      (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
+    },
     transitionAppear: true,
     unmountOnExit: true
   }, /*#__PURE__*/React.createElement(CalendarContext.Provider, {