@dpocean/chatui 1.0.0

package/lib/components/Toolbar/Toolbar.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ToolbarButton = require("./ToolbarButton");
+var Toolbar = exports.Toolbar = function Toolbar(props) {
+  var items = props.items,
+    onClick = props.onClick;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "Toolbar"
+  }, items.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
+      item: item,
+      onClick: onClick,
+      key: item.type
+    });
+  }));
+};

package/lib/components/Toolbar/ToolbarButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ToolbarItemProps {
+    type: string;
+    title: string;
+    icon?: string;
+    img?: string;
+    render?: any;
+}
+export interface ToolbarButtonProps {
+    item: ToolbarItemProps;
+    onClick: (item: ToolbarItemProps, event: React.MouseEvent) => void;
+}
+export declare const ToolbarButton: (props: ToolbarButtonProps) => React.JSX.Element;

package/lib/components/Toolbar/ToolbarButton.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var ToolbarButton = exports.ToolbarButton = function ToolbarButton(props) {
+  var item = props.item,
+    _onClick = props.onClick;
+  var type = item.type,
+    icon = item.icon,
+    img = item.img,
+    title = item.title;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "Toolbar-item",
+    "data-type": type
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    className: "Toolbar-btn",
+    onClick: function onClick(e) {
+      return _onClick(item, e);
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "Toolbar-btnIcon"
+  }, icon && /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    type: icon
+  }), img && /*#__PURE__*/_react.default.createElement("img", {
+    className: "Toolbar-img",
+    src: img,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "Toolbar-btnText"
+  }, title)));
+};

package/lib/components/Toolbar/index.d.ts

@@ -0,0 +1,3 @@
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';
+export type { ToolbarItemProps } from './ToolbarButton';

package/lib/components/Toolbar/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toolbar", {
+  enumerable: true,
+  get: function get() {
+    return _Toolbar.Toolbar;
+  }
+});
+var _Toolbar = require("./Toolbar");

package/lib/components/Tree/Tree.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type TreeProps = {
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const Tree: (props: TreeProps) => React.JSX.Element;

package/lib/components/Tree/Tree.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tree = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var Tree = exports.Tree = function Tree(props) {
+  var className = props.className,
+    children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Tree', className),
+    role: "tree"
+  }, children);
+};

package/lib/components/Tree/TreeNode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type TreeNodeProps = {
+    title: string;
+    content?: string;
+    link?: string;
+    onClick: (data: any) => void;
+    onExpand: (title: string, isFolded: boolean) => void;
+    children: any[];
+};
+export declare const TreeNode: (props: TreeNodeProps) => React.JSX.Element;

package/lib/components/Tree/TreeNode.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeNode = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TreeNode = exports.TreeNode = function TreeNode(props) {
+  var title = props.title,
+    content = props.content,
+    link = props.link,
+    _props$children = props.children,
+    children = _props$children === void 0 ? [] : _props$children,
+    _onClick = props.onClick,
+    onExpand = props.onExpand;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var hasChildren = children.length > 0;
+  function handleTitleClick() {
+    if (hasChildren) {
+      setExpand(!expand);
+      onExpand(title, !expand);
+    } else {
+      _onClick({
+        title: title,
+        content: content,
+        link: link
+      });
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "TreeNode",
+    role: "treeitem",
+    "aria-expanded": expand
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "TreeNode-title",
+    onClick: handleTitleClick,
+    role: "treeitem",
+    "aria-expanded": expand,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "TreeNode-title-text"
+  }, title), hasChildren ? /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "TreeNode-title-icon",
+    type: expand ? 'chevron-up' : 'chevron-down'
+  }) : null), hasChildren ? children.map(function (t, j) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _clsx.default)('TreeNode-children', {
+        'TreeNode-children-active': expand
+      }),
+      key: j
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "TreeNode-title TreeNode-children-title",
+      onClick: function onClick() {
+        return _onClick(_objectSpread(_objectSpread({}, t), {
+          index: j
+        }));
+      },
+      role: "treeitem"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "TreeNode-title-text"
+    }, t.title)));
+  }) : null);
+};

package/lib/components/Tree/index.d.ts

@@ -0,0 +1,4 @@
+export { Tree } from './Tree';
+export type { TreeProps } from './Tree';
+export { TreeNode } from './TreeNode';
+export type { TreeNodeProps } from './TreeNode';

package/lib/components/Tree/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tree", {
+  enumerable: true,
+  get: function get() {
+    return _Tree.Tree;
+  }
+});
+Object.defineProperty(exports, "TreeNode", {
+  enumerable: true,
+  get: function get() {
+    return _TreeNode.TreeNode;
+  }
+});
+var _Tree = require("./Tree");
+var _TreeNode = require("./TreeNode");

package/lib/components/Typing/Typing.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TypingProps {
+    text?: string;
+}
+export declare function Typing({ text }: TypingProps): React.JSX.Element;
+export {};

package/lib/components/Typing/Typing.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Typing = Typing;
+var _react = _interopRequireDefault(require("react"));
+var _Bubble = require("../Bubble");
+function Typing(_ref) {
+  var text = _ref.text;
+  return /*#__PURE__*/_react.default.createElement(_Bubble.Bubble, {
+    type: "typing"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "Typing",
+    "aria-busy": "true"
+  }, text && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Typing-text"
+  }, text), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Typing-dot",
+    "data-i": "0"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Typing-dot",
+    "data-i": "1"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Typing-dot",
+    "data-i": "2"
+  })));
+}

package/lib/components/Typing/index.d.ts

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

package/lib/components/Typing/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Typing", {
+  enumerable: true,
+  get: function get() {
+    return _Typing.Typing;
+  }
+});
+var _Typing = require("./Typing");

package/lib/components/TypingBubble/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Options } from '../../hooks/useTypewriter';
+export interface TypingBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    className?: string;
+    isRichText?: boolean;
+    options?: Options;
+    messageRender?: (content: string) => string;
+    onResize?: (el: HTMLDivElement) => void;
+    children?: React.ReactNode;
+}
+export declare const TypingBubble: (props: TypingBubbleProps) => React.JSX.Element;

package/lib/components/TypingBubble/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypingBubble = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _RichText = require("../RichText");
+var _useTypewriter2 = require("../../hooks/useTypewriter");
+var _excluded = ["content", "className", "isRichText", "options", "messageRender", "onResize", "children"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var TypingBubble = exports.TypingBubble = function TypingBubble(props) {
+  var content = props.content,
+    className = props.className,
+    isRichText = props.isRichText,
+    options = props.options,
+    messageRender = props.messageRender,
+    onResize = props.onResize,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useTypewriter = (0, _useTypewriter2.useTypewriter)(messageRender ? messageRender(content) : content, options),
+    typedContent = _useTypewriter.typedContent,
+    isTyping = _useTypewriter.isTyping;
+  var bubbleRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!('ResizeObserver' in window)) {
+      return;
+    }
+
+    // eslint-disable-next-line compat/compat
+    var resizeObserver = new ResizeObserver(function () {
+      onResize === null || onResize === void 0 || onResize(bubbleRef.current);
+    });
+    if (bubbleRef.current) {
+      resizeObserver.observe(bubbleRef.current);
+    }
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [onResize]);
+  var effect = isTyping ? 'typing' : null;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)('Bubble richtext', className)
+  }, other, {
+    ref: bubbleRef
+  }), typedContent && (isRichText ? /*#__PURE__*/_react.default.createElement(_RichText.RichText, {
+    "data-effect": effect,
+    content: typedContent
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    "data-effect": effect
+  }, /*#__PURE__*/_react.default.createElement("p", null, typedContent))), children);
+};

package/lib/components/Video/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type VideoProps = React.VideoHTMLAttributes<HTMLVideoElement> & {
+    className?: string;
+    src?: string;
+    cover?: string;
+    duration?: string | number;
+    style?: React.CSSProperties;
+    videoRef?: React.RefObject<HTMLVideoElement>;
+    onClick?: (paused: boolean, event: React.MouseEvent) => void;
+    onCoverLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+};
+export declare const Video: (props: VideoProps) => React.JSX.Element;

package/lib/components/Video/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Video = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Icon = require("../Icon");
+var _formatTime = require("../../utils/formatTime");
+var _excluded = ["className", "src", "cover", "duration", "onClick", "onCoverLoad", "style", "videoRef", "children"];
+/* eslint-disable jsx-a11y/media-has-caption */
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Video = exports.Video = function Video(props) {
+  var className = props.className,
+    src = props.src,
+    cover = props.cover,
+    duration = props.duration,
+    onClick = props.onClick,
+    onCoverLoad = props.onCoverLoad,
+    style = props.style,
+    outerVideoRef = props.videoRef,
+    children = props.children,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var localVideoRef = (0, _react.useRef)(null);
+  var videoRef = outerVideoRef || localVideoRef;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPlayed = _useState2[0],
+    setIsPlayed = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    paused = _useState4[0],
+    setPaused = _useState4[1];
+  function handleClick(e) {
+    setIsPlayed(true);
+    var video = videoRef.current;
+    if (video) {
+      if (video.ended || video.paused) {
+        video.play();
+      } else {
+        video.pause();
+      }
+    }
+    if (onClick) {
+      onClick(paused, e);
+    }
+  }
+  function handlePlay() {
+    setPaused(false);
+  }
+  function handlePause() {
+    setPaused(true);
+  }
+  var hasCover = !isPlayed && !!cover;
+  var hasDuration = hasCover && !!duration;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Video', "Video--".concat(paused ? 'paused' : 'playing'), className),
+    style: style
+  }, hasCover && /*#__PURE__*/_react.default.createElement("img", {
+    className: "Video-cover",
+    src: cover,
+    onLoad: onCoverLoad,
+    alt: ""
+  }), hasDuration && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Video-duration"
+  }, (0, _formatTime.formatTime)(+duration)), /*#__PURE__*/_react.default.createElement("video", (0, _extends2.default)({
+    className: "Video-video",
+    src: src,
+    ref: videoRef,
+    hidden: hasCover,
+    controls: true,
+    onPlay: handlePlay,
+    onPause: handlePause,
+    onEnded: handlePause
+  }, other), children), hasCover && /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _clsx.default)('Video-playBtn', {
+      paused: paused
+    }),
+    type: "button",
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    className: "Video-playIcon",
+    type: "play-fill"
+  })));
+};

package/lib/components/VisuallyHidden/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VisuallyHidden: (props: any) => React.JSX.Element;

package/lib/components/VisuallyHidden/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VisuallyHidden = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var style = {
+  position: 'absolute',
+  height: '1px',
+  width: '1px',
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  margin: '-1px',
+  // padding: 0,
+  // border: 0,
+  whiteSpace: 'nowrap'
+};
+var VisuallyHidden = exports.VisuallyHidden = function VisuallyHidden(props) {
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    style: style
+  }, props));
+};

package/lib/global.d.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/hooks/useClickOutside.d.ts

@@ -0,0 +1 @@
+export default function useClickOutside<T extends HTMLElement = any>(handler: (event: any) => void, eventName?: string): import("react").MutableRefObject<T | undefined>;

package/lib/hooks/useClickOutside.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useClickOutside;
+var _react = require("react");
+function useClickOutside(handler) {
+  var eventName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var listener = function listener(e) {
+      var targetElement = ref.current;
+      if (!targetElement || targetElement.contains(e.target)) {
+        return;
+      }
+      if (handler) {
+        handler(e);
+      }
+    };
+    document.addEventListener(eventName, listener);
+    return function () {
+      document.removeEventListener(eventName, listener);
+    };
+  }, [eventName, handler]);
+  return ref;
+}

package/lib/hooks/useCountdown.d.ts

@@ -0,0 +1,11 @@
+export interface Options {
+    targetDate: string | number | Date;
+    onEnd?: () => void;
+}
+export interface TimeLeft {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+declare const useCountdown: (options: Options) => TimeLeft;
+export default useCountdown;

package/lib/hooks/useCountdown.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useLatest = require("./useLatest");
+var calcLeft = function calcLeft(ts) {
+  if (!ts) {
+    return 0;
+  }
+  var left = new Date(ts).getTime() - Date.now();
+  return left < 0 ? 0 : left;
+};
+var parseMs = function parseMs(ms) {
+  return {
+    // days: Math.floor(ms / 86400000),
+    hours: Math.floor(ms / 3600000) % 24,
+    minutes: Math.floor(ms / 60000) % 60,
+    seconds: Math.floor(ms / 1000) % 60
+  };
+};
+var useCountdown = function useCountdown(options) {
+  var _ref = options || {},
+    targetDate = _ref.targetDate,
+    onEnd = _ref.onEnd;
+  var _useState = (0, _react.useState)(function () {
+      return calcLeft(targetDate);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    timeLeft = _useState2[0],
+    setTimeLeft = _useState2[1];
+  var onEndRef = (0, _useLatest.useLatest)(onEnd);
+  (0, _react.useEffect)(function () {
+    if (!targetDate) {
+      // for stop
+      setTimeLeft(0);
+      return;
+    }
+
+    // 立即执行一次
+    setTimeLeft(calcLeft(targetDate));
+    var timer = setInterval(function () {
+      var targetLeft = calcLeft(targetDate);
+      setTimeLeft(targetLeft);
+      if (targetLeft === 0) {
+        var _onEndRef$current;
+        clearInterval(timer);
+        (_onEndRef$current = onEndRef.current) === null || _onEndRef$current === void 0 || _onEndRef$current.call(onEndRef);
+      }
+    }, 1000);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, [onEndRef, targetDate]);
+  return parseMs(timeLeft);
+};
+var _default = exports.default = useCountdown;

package/lib/hooks/useForwardRef.d.ts

@@ -0,0 +1,2 @@
+import { ForwardedRef } from 'react';
+export default function useForwardRef<T>(ref: ForwardedRef<T>): import("react").RefObject<T>;

package/lib/hooks/useForwardRef.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useForwardRef;
+var _react = require("react");
+function useForwardRef(ref) {
+  var targetRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(targetRef.current);
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      ref.current = targetRef.current;
+    }
+  }, [ref]);
+  return targetRef;
+}

package/lib/hooks/useLatest.d.ts

@@ -0,0 +1 @@
+export declare function useLatest<T>(value: T): import("react").MutableRefObject<T>;

package/lib/hooks/useLatest.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLatest = useLatest;
+var _react = require("react");
+function useLatest(value) {
+  var ref = (0, _react.useRef)(value);
+  ref.current = value;
+  return ref;
+}