@dpocean/chatui 1.0.0

package/lib/hooks/useMessages.d.ts

@@ -0,0 +1,14 @@
+import { MessageProps, MessageId } from '../components/Message';
+type Messages = MessageProps[];
+type MessageWithoutId = Omit<MessageProps, '_id'> & {
+    _id?: MessageId;
+};
+export default function useMessages(initialState?: MessageWithoutId[]): {
+    messages: Messages;
+    prependMsgs: (msgs: Messages) => void;
+    appendMsg: (msg: MessageWithoutId) => string;
+    updateMsg: (id: MessageId, msg: MessageWithoutId) => void;
+    deleteMsg: (id: MessageId) => void;
+    resetList: (list?: any) => void;
+};
+export {};

package/lib/hooks/useMessages.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMessages;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _utils = require("../utils");
+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 TIME_GAP = 5 * 60 * 1000;
+var lastTs = 0;
+var makeMsg = function makeMsg(msg, id) {
+  var ts = msg.createdAt || Date.now();
+  var hasTime = msg.hasTime || ts - lastTs > TIME_GAP;
+  if (hasTime) {
+    lastTs = ts;
+  }
+  return _objectSpread(_objectSpread({}, msg), {}, {
+    _id: msg._id || id || (0, _utils.getRandomString)(),
+    createdAt: ts,
+    position: msg.position || 'left',
+    hasTime: hasTime
+  });
+};
+function useMessages() {
+  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var initialMsgs = (0, _react.useMemo)(function () {
+    return initialState.map(function (t) {
+      return makeMsg(t);
+    });
+  }, [initialState]);
+  var _useState = (0, _react.useState)(initialMsgs),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    messages = _useState2[0],
+    setMessages = _useState2[1];
+  var prependMsgs = (0, _react.useCallback)(function (msgs) {
+    setMessages(function (prev) {
+      return [].concat((0, _toConsumableArray2.default)(msgs), (0, _toConsumableArray2.default)(prev));
+    });
+  }, []);
+  var updateMsg = (0, _react.useCallback)(function (id, msg) {
+    setMessages(function (prev) {
+      return prev.map(function (t) {
+        return t._id === id ? makeMsg(msg, id) : t;
+      });
+    });
+  }, []);
+  var appendMsg = (0, _react.useCallback)(function (msg) {
+    var newMsg = makeMsg(msg);
+    setMessages(function (prev) {
+      return [].concat((0, _toConsumableArray2.default)(prev), [newMsg]);
+    });
+    return newMsg._id;
+  }, []);
+  var deleteMsg = (0, _react.useCallback)(function (id) {
+    setMessages(function (prev) {
+      return prev.filter(function (t) {
+        return t._id !== id;
+      });
+    });
+  }, []);
+  var resetList = (0, _react.useCallback)(function () {
+    var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    setMessages(list);
+  }, []);
+  return {
+    messages: messages,
+    prependMsgs: prependMsgs,
+    appendMsg: appendMsg,
+    updateMsg: updateMsg,
+    deleteMsg: deleteMsg,
+    resetList: resetList
+  };
+}

package/lib/hooks/useMount.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface UseMountOptions {
+    active?: boolean;
+    ref: React.RefObject<any>;
+    delay?: number;
+}
+declare function useMount({ active, ref, delay }: UseMountOptions): {
+    didMount: boolean;
+    isShow: boolean;
+};
+export default useMount;

package/lib/hooks/useMount.js

@@ -0,0 +1,54 @@
+"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 _utils = require("../utils");
+function useMount(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    ref = _ref.ref,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 300 : _ref$delay;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isShow = _useState2[0],
+    setIsShow = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    didMount = _useState4[0],
+    setDidMount = _useState4[1];
+  var timeout = (0, _react.useRef)();
+  var clear = function clear() {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (active) {
+      clear();
+      setDidMount(active);
+    } else {
+      setIsShow(active);
+      timeout.current = setTimeout(function () {
+        setDidMount(active);
+      }, delay);
+    }
+    return clear;
+  }, [active, delay]);
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      (0, _utils.reflow)(ref.current);
+    }
+    setIsShow(didMount);
+  }, [didMount, ref]);
+  return {
+    didMount: didMount,
+    isShow: isShow
+  };
+}
+var _default = exports.default = useMount;

package/lib/hooks/useNextId.d.ts

@@ -0,0 +1 @@
+export default function useNextId(prefix?: string): string;

package/lib/hooks/useNextId.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useNextId;
+var _react = require("react");
+var nextId = 0;
+// eslint-disable-next-line no-plusplus
+var getNextId = function getNextId() {
+  return nextId++;
+};
+function useNextId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id-';
+  var idRef = (0, _react.useRef)("".concat(prefix).concat(getNextId()));
+  return idRef.current;
+}

package/lib/hooks/useQuickReplies.d.ts

@@ -0,0 +1,12 @@
+import { QuickReplyItemProps } from '../components/QuickReplies';
+type QuickReplies = QuickReplyItemProps[];
+export default function useQuickReplies(initialState?: QuickReplies): {
+    quickReplies: QuickReplies;
+    prepend: (list: QuickReplies) => void;
+    replace: import("react").Dispatch<import("react").SetStateAction<QuickReplies>>;
+    visible: boolean;
+    setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    save: () => void;
+    pop: () => void;
+};
+export {};

package/lib/hooks/useQuickReplies.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useQuickReplies;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+function useQuickReplies() {
+  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var _useState = (0, _react.useState)(initialState),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    quickReplies = _useState2[0],
+    setQuickReplies = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var savedRef = (0, _react.useRef)();
+  var stashRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    savedRef.current = quickReplies;
+  }, [quickReplies]);
+  var prepend = function prepend(list) {
+    setQuickReplies(function (prev) {
+      return [].concat((0, _toConsumableArray2.default)(list), (0, _toConsumableArray2.default)(prev));
+    });
+  };
+
+  // prepend、replace 后立即 save 只会保存上一个状态
+  // 因为 savedRef.current 的更新优先级最后，用 setTimeout 可解
+  var save = function save() {
+    stashRef.current = savedRef.current;
+  };
+  var pop = function pop() {
+    if (stashRef.current) {
+      setQuickReplies(stashRef.current);
+    }
+  };
+  return {
+    quickReplies: quickReplies,
+    prepend: prepend,
+    replace: setQuickReplies,
+    visible: visible,
+    setVisible: setVisible,
+    save: save,
+    pop: pop
+  };
+}

package/lib/hooks/useTitleTyping.d.ts

@@ -0,0 +1,10 @@
+interface StartOptions {
+    delay?: number;
+    timeout?: number;
+}
+export declare function useTitleTyping(): {
+    isTyping: boolean;
+    start: ({ delay, timeout }?: StartOptions) => void;
+    stop: () => void;
+};
+export {};

package/lib/hooks/useTitleTyping.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTitleTyping = useTitleTyping;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _getRandomInt = _interopRequireDefault(require("../utils/getRandomInt"));
+function useTitleTyping() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isTyping = _useState2[0],
+    setIsTyping = _useState2[1];
+  // 间断变化
+  var timerRef = (0, _react.useRef)();
+  // 超时
+  var timeoutRef = (0, _react.useRef)();
+  var after = function after(_ref, cb) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      min = _ref2[0],
+      max = _ref2[1];
+    var ms = (0, _getRandomInt.default)(min, max);
+    timerRef.current = setTimeout(cb, ms);
+  };
+  var stop = (0, _react.useCallback)(function () {
+    clearTimeout(timerRef.current);
+    clearTimeout(timeoutRef.current);
+    setIsTyping(false);
+  }, []);
+  var start = (0, _react.useCallback)(function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      delay = _ref3.delay,
+      timeout = _ref3.timeout;
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(function () {
+      // delay 后开始
+      setIsTyping(true);
+      after([3000, 6000], function () {
+        // 3-6s 后暂停
+        setIsTyping(false);
+        after([1000, 2000], function () {
+          // 1-2s 后重新开始
+          start();
+        });
+      });
+    }, delay);
+    if (timeout) {
+      timeoutRef.current = setTimeout(function () {
+        stop();
+      }, timeout);
+    }
+  }, [stop]);
+  return {
+    isTyping: isTyping,
+    start: start,
+    stop: stop
+  };
+}

package/lib/hooks/useTypewriter.d.ts

@@ -0,0 +1,9 @@
+export interface Options {
+    interval?: number;
+    step?: number | number[];
+    initialIndex?: number;
+}
+export declare function useTypewriter(content: string, options?: Options): {
+    typedContent: string;
+    isTyping: boolean;
+};

package/lib/hooks/useTypewriter.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTypewriter = useTypewriter;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _getRandomInt = _interopRequireDefault(require("../utils/getRandomInt"));
+function useTypewriter(content) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$interval = options.interval,
+    interval = _options$interval === void 0 ? 80 : _options$interval,
+    _options$step = options.step,
+    step = _options$step === void 0 ? 1 : _options$step,
+    _options$initialIndex = options.initialIndex,
+    initialIndex = _options$initialIndex === void 0 ? 5 : _options$initialIndex;
+  var length = content.length;
+  var _useState = (0, _react.useState)(initialIndex),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (index < length) {
+      var timer = setTimeout(function () {
+        var currentStep = Array.isArray(step) ? (0, _getRandomInt.default)(step[0], step[1]) : step;
+        setIndex(function (prev) {
+          return prev + currentStep;
+        });
+      }, interval);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+    return;
+  }, [index, interval, length, step]);
+  return {
+    typedContent: content.slice(0, index),
+    isTyping: index < length
+  };
+}

package/lib/hooks/useWindowResize.d.ts

@@ -0,0 +1 @@
+export default function useWindowResize(handler: () => void): void;

package/lib/hooks/useWindowResize.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useWindowResize;
+var _react = require("react");
+function useWindowResize(handler) {
+  var running = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    function runCallback() {
+      handler();
+      running.current = false;
+    }
+    function resizeThrottler() {
+      if (!running.current) {
+        running.current = true;
+        if (window.requestAnimationFrame) {
+          window.requestAnimationFrame(runCallback);
+        } else {
+          setTimeout(runCallback, 66);
+        }
+      }
+    }
+    window.addEventListener('resize', resizeThrottler);
+    return function () {
+      window.removeEventListener('resize', resizeThrottler);
+    };
+  }, [handler]);
+}

package/lib/index.d.ts

@@ -0,0 +1,153 @@
+import 'intersection-observer';
+export { default as clsx } from 'clsx';
+export { default as DOMPurify } from 'dompurify';
+export { default as canUse } from './utils/canUse';
+export { importScript } from './utils/importScript';
+export { lazyComponent } from './utils/lazyComponent';
+export { mountComponent } from './utils/mountComponent';
+export { default as useClickOutside } from './hooks/useClickOutside';
+export { default as useForwardRef } from './hooks/useForwardRef';
+export { useLatest } from './hooks/useLatest';
+export { default as useMessages } from './hooks/useMessages';
+export { default as useMount } from './hooks/useMount';
+export { default as useQuickReplies } from './hooks/useQuickReplies';
+export { useTitleTyping } from './hooks/useTitleTyping';
+export { useTypewriter } from './hooks/useTypewriter';
+export { ComponentsProvider, useComponents } from './components/ComponentsProvider';
+export type { ComponentsProviderProps, ComponentsMap } from './components/ComponentsProvider';
+export { LazyComponent } from './components/LazyComponent';
+export type { LazyComponentProps, LazyComponentOnLoadParams } from './components/LazyComponent';
+export { Avatar } from './components/Avatar';
+export type { AvatarProps, AvatarSize, AvatarShape } from './components/Avatar';
+export { Backdrop } from './components/Backdrop';
+export type { BackdropProps } from './components/Backdrop';
+export { Bubble } from './components/Bubble';
+export type { BubbleProps } from './components/Bubble';
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Card, CardMedia, CardHeader, CardTitle, CardContent, CardText, CardActions, } from './components/Card';
+export type { CardProps, CardSize, CardMediaProps, CardHeaderProps, CardTitleProps, CardContentProps, CardTextProps, CardActionsProps, } from './components/Card';
+export { Carousel } from './components/Carousel';
+export type { CarouselProps, CarouselHandle } from './components/Carousel';
+export { Checkbox, CheckboxGroup } from './components/Checkbox';
+export type { CheckboxProps, CheckboxGroupProps, CheckboxValue } from './components/Checkbox';
+export { ClickOutside } from './components/ClickOutside';
+export type { ClickOutsideProps } from './components/ClickOutside';
+export { Countdown } from './components/Countdown';
+export type { CountdownProps } from './components/Countdown';
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { Empty } from './components/Empty';
+export type { EmptyProps } from './components/Empty';
+export { ErrorBoundary } from './components/ErrorBoundary';
+export type { ErrorBoundaryProps, FallbackProps } from './components/ErrorBoundary';
+export { Flex, FlexItem } from './components/Flex';
+export type { FlexProps, FlexItemProps } from './components/Flex';
+export { Form, FormActions, FormItem } from './components/Form';
+export type { FormProps, FormItemProps } from './components/Form';
+export { Icon } from './components/Icon';
+export type { IconProps } from './components/Icon';
+export { IconButton } from './components/IconButton';
+export type { IconButtonProps } from './components/IconButton';
+export { Image } from './components/Image';
+export type { ImageProps } from './components/Image';
+export { ImageList } from './components/ImageList';
+export type { ImageListProps } from './components/ImageList';
+export { InfiniteScroll } from './components/InfiniteScroll';
+export type { InfiniteScrollProps } from './components/InfiniteScroll';
+export { Input } from './components/Input';
+export type { InputProps, InputVariant } from './components/Input';
+export { KvList, KvItem } from './components/KvList';
+export type { KvListProps, KvItemProps } from './components/KvList';
+export { List, ListItem } from './components/List';
+export type { ListProps, ListItemProps } from './components/List';
+export { Loading } from './components/Loading';
+export type { LoadingProps } from './components/Loading';
+export { ConfigProvider, ConfigProvider as LocaleProvider, ConfigContext, ConfigContext as LocaleContext, useConfig, useLocale, } from './components/ConfigProvider';
+export { MediaObject } from './components/MediaObject';
+export type { MediaObjectProps } from './components/MediaObject';
+export { Message, SystemMessage } from './components/Message';
+export type { MessageProps, SystemMessageProps } from './components/Message';
+export { MessageStatus } from './components/MessageStatus';
+export type { MessageStatusProps } from './components/MessageStatus';
+export { Modal, Confirm, Popup } from './components/Modal';
+export type { ModalProps } from './components/Modal';
+export { Navbar } from './components/Navbar';
+export type { NavbarProps } from './components/Navbar';
+export { Notice } from './components/Notice';
+export type { NoticeProps } from './components/Notice';
+export { Portal } from './components/Portal';
+export type { PortalProps } from './components/Portal';
+export { Price } from './components/Price';
+export type { PriceProps } from './components/Price';
+export { Progress } from './components/Progress';
+export type { ProgressProps } from './components/Progress';
+export { PullToRefresh } from './components/PullToRefresh';
+export type { PullToRefreshProps } from './components/PullToRefresh';
+export { QuickReplies } from './components/QuickReplies';
+export type { QuickRepliesProps, QuickReplyProps, QuickReplyItemProps, } from './components/QuickReplies';
+export { Quote } from './components/Quote';
+export type { QuoteProps } from './components/Quote';
+export { Radio, RadioGroup } from './components/Radio';
+export type { RadioProps, RadioGroupProps, RadioValue } from './components/Radio';
+export { RateActions } from './components/RateActions';
+export type { RateActionsProps } from './components/RateActions';
+export type { RecorderHandle } from './components/Recorder';
+export { RichText } from './components/RichText';
+export type { RichTextProps } from './components/RichText';
+export { ScrollGrid } from './components/ScrollGrid';
+export type { ScrollGridProps } from './components/ScrollGrid';
+export { ScrollView } from './components/ScrollView';
+export type { ScrollViewProps } from './components/ScrollView';
+export { Search } from './components/Search';
+export type { SearchProps } from './components/Search';
+export { Select } from './components/Select';
+export type { SelectProps } from './components/Select';
+export { Skeleton } from './components/Skeleton';
+export type { SkeletonProps } from './components/Skeleton';
+export { StatusBadge } from './components/StatusBadge';
+export type { StatusBadgeProps } from './components/StatusBadge';
+export { Ribbon } from './components/Ribbon';
+export type { RibbonProps } from './components/Ribbon';
+export { Stepper, Step } from './components/Stepper';
+export type { StepperProps, StepProps } from './components/Stepper';
+export { Tabs, Tab } from './components/Tabs';
+export type { TabsProps, TabProps } from './components/Tabs';
+export { Tag } from './components/Tag';
+export type { TagProps } from './components/Tag';
+export { Text } from './components/Text';
+export type { TextProps } from './components/Text';
+export { Think } from './components/Think';
+export type { ThinkProps } from './components/Think';
+export { Time } from './components/Time';
+export type { TimeProps } from './components/Time';
+export { Tips } from './components/Tips';
+export type { TipsProps } from './components/Tips';
+export { Toast, toast } from './components/Toast';
+export type { ToastProps } from './components/Toast';
+export { Toolbar } from './components/Toolbar';
+export type { ToolbarProps, ToolbarItemProps } from './components/Toolbar';
+export { Tree, TreeNode } from './components/Tree';
+export { Typing } from './components/Typing';
+export { TypingBubble } from './components/TypingBubble';
+export type { TypingBubbleProps } from './components/TypingBubble';
+export type { TreeProps, TreeNodeProps } from './components/Tree';
+export { Video } from './components/Video';
+export type { VideoProps } from './components/Video';
+export { VisuallyHidden } from './components/VisuallyHidden';
+export { FileCard } from './components/FileCard';
+export type { FileCardProps } from './components/FileCard';
+export { Filter } from './components/Filter';
+export type { FilterProps, FilterValue } from './components/Filter';
+export { Coupon } from './components/Coupon';
+export type { CouponProps } from './components/Coupon';
+export { Goods } from './components/Goods';
+export type { GoodsProps } from './components/Goods';
+export { OrderObject } from './components/OrderObject';
+export type { OrderObjectProps } from './components/OrderObject';
+export { RedPacket } from './components/RedPacket';
+export type { RedPacketProps } from './components/RedPacket';
+export { MultiRedPacket } from './components/MultiRedPacket';
+export type { MultiRedPacketProps } from './components/MultiRedPacket';
+export { Chat as default } from './components/Chat';
+export type { ChatProps } from './components/Chat';