@dpocean/chatui 1.0.0

package/lib/components/Message/Message.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { IMessageStatus } from '../MessageStatus';
+export interface User {
+    avatar?: string;
+    name?: string;
+    avatarAlt?: string;
+    url?: string;
+    [k: string]: any;
+}
+export type MessageId = string;
+export interface MessageProps {
+    /**
+     * 唯一ID
+     */
+    _id: MessageId;
+    /**
+     * 消息类型
+     */
+    type: string;
+    /**
+     * 消息内容
+     */
+    content?: any;
+    /**
+     * 消息创建时间
+     */
+    createdAt?: number;
+    /**
+     * 消息时间格式
+     */
+    timeFormat?: string;
+    /**
+     * 消息发送者信息
+     */
+    user?: User;
+    /**
+     * 消息位置
+     */
+    position?: 'left' | 'right' | 'center' | 'pop';
+    /**
+     * 是否显示时间
+     */
+    hasTime?: boolean;
+    /**
+     * 状态
+     */
+    status?: IMessageStatus;
+    /**
+     * 消息内容渲染函数
+     */
+    renderMessageContent?: (message: MessageProps) => React.ReactNode;
+}
+declare const _default: React.MemoExoticComponent<(props: MessageProps) => React.JSX.Element>;
+export default _default;

package/lib/components/Message/Message.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _SystemMessage = require("./SystemMessage");
+var _Avatar = require("../Avatar");
+var _Time = require("../Time");
+var _excluded = ["renderMessageContent"];
+var Message = function Message(props) {
+  var _props$renderMessageC = props.renderMessageContent,
+    renderMessageContent = _props$renderMessageC === void 0 ? function () {
+      return null;
+    } : _props$renderMessageC,
+    msg = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var type = msg.type,
+    content = msg.content,
+    _msg$user = msg.user,
+    user = _msg$user === void 0 ? {} : _msg$user,
+    id = msg._id,
+    _msg$position = msg.position,
+    position = _msg$position === void 0 ? 'left' : _msg$position,
+    _msg$hasTime = msg.hasTime,
+    hasTime = _msg$hasTime === void 0 ? true : _msg$hasTime,
+    createdAt = msg.createdAt,
+    timeFormat = msg.timeFormat;
+  var name = user.name,
+    avatar = user.avatar,
+    avatarAlt = user.avatarAlt;
+  if (type === 'system') {
+    return /*#__PURE__*/_react.default.createElement(_SystemMessage.SystemMessage, {
+      content: content.text,
+      action: content.action
+    });
+  }
+  var isRL = position === 'right' || position === 'left';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Message', position),
+    "data-id": id,
+    "data-type": type
+  }, hasTime && createdAt && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Message-meta"
+  }, /*#__PURE__*/_react.default.createElement(_Time.Time, {
+    date: createdAt,
+    timeFormat: timeFormat
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Message-main"
+  }, isRL && avatar && /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
+    src: avatar,
+    shape: "square",
+    alt: avatarAlt,
+    url: user.url
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Message-inner"
+  }, isRL && name && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Message-author"
+  }, name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Message-content",
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "false"
+  }, renderMessageContent(msg)))));
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Message);

package/lib/components/Message/SystemMessage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type SystemMessageProps = {
+    className?: string;
+    content: string;
+    action?: {
+        text: string;
+        onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        once?: boolean;
+        disabled?: boolean;
+    };
+};
+export declare const SystemMessage: (props: SystemMessageProps) => React.JSX.Element;

package/lib/components/Message/SystemMessage.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SystemMessage = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Button = require("../Button");
+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 SystemMessage = exports.SystemMessage = function SystemMessage(props) {
+  var className = props.className,
+    content = props.content,
+    action = props.action;
+  var _ref = action || {},
+    onClick = _ref.onClick,
+    once = _ref.once;
+  var _useState = (0, _react.useState)(action && action.disabled),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    disabled = _useState2[0],
+    setDisabled = _useState2[1];
+  var handleClick = function handleClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+    if (once) {
+      setDisabled(true);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)('Message SystemMessage', className)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "SystemMessage-inner"
+  }, /*#__PURE__*/_react.default.createElement("span", null, content), action && /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: "text",
+    disabled: disabled,
+    onClick: handleClick
+  }, action.text)));
+};

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

@@ -0,0 +1,4 @@
+export { default as Message } from './Message';
+export type { MessageProps, MessageId } from './Message';
+export { SystemMessage } from './SystemMessage';
+export type { SystemMessageProps } from './SystemMessage';

package/lib/components/Message/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Message", {
+  enumerable: true,
+  get: function get() {
+    return _Message.default;
+  }
+});
+Object.defineProperty(exports, "SystemMessage", {
+  enumerable: true,
+  get: function get() {
+    return _SystemMessage.SystemMessage;
+  }
+});
+var _Message = _interopRequireDefault(require("./Message"));
+var _SystemMessage = require("./SystemMessage");

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ScrollToEndOptions } from '../PullToRefresh';
+import { MessageProps } from '../Message';
+export interface MessageContainerProps {
+    messages: MessageProps[];
+    renderMessageContent: (message: MessageProps) => React.ReactNode;
+    isTyping?: boolean;
+    loadMoreText?: string;
+    onRefresh?: () => Promise<any>;
+    onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    renderBeforeMessageList?: () => React.ReactNode;
+    onBackBottomShow?: () => void;
+    onBackBottomClick?: () => void;
+}
+export interface MessageContainerHandle {
+    ref: React.RefObject<HTMLDivElement>;
+    scrollToEnd: (options?: ScrollToEndOptions) => void;
+}
+export declare const MessageContainer: React.ForwardRefExoticComponent<MessageContainerProps & React.RefAttributes<MessageContainerHandle>>;

package/lib/components/MessageContainer/index.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _PullToRefresh = require("../PullToRefresh");
+var _Message = require("../Message");
+var _BackBottom = require("../BackBottom");
+var _canUse = _interopRequireDefault(require("../../utils/canUse"));
+var _throttle = _interopRequireDefault(require("../../utils/throttle"));
+var _getToBottom = _interopRequireDefault(require("../../utils/getToBottom"));
+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); }
+/* eslint-disable no-underscore-dangle */
+
+var listenerOpts = (0, _canUse.default)('passiveListener') ? {
+  passive: true
+} : false;
+function isNearBottom(el, n) {
+  var offsetHeight = Math.max(el.offsetHeight, 600);
+  return (0, _getToBottom.default)(el) < offsetHeight * n;
+}
+var MessageContainer = exports.MessageContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var messages = props.messages,
+    isTyping = props.isTyping,
+    loadMoreText = props.loadMoreText,
+    onRefresh = props.onRefresh,
+    onScroll = props.onScroll,
+    renderBeforeMessageList = props.renderBeforeMessageList,
+    renderMessageContent = props.renderMessageContent,
+    onBackBottomShow = props.onBackBottomShow,
+    onBackBottomClick = props.onBackBottomClick;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showBackBottom = _useState2[0],
+    setShowBackBottom = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    newCount = _useState4[0],
+    setNewCount = _useState4[1];
+  var showBackBottomtRef = (0, _react.useRef)(showBackBottom);
+  var newCountRef = (0, _react.useRef)(newCount);
+  var messagesRef = (0, _react.useRef)(null);
+  var scrollerRef = (0, _react.useRef)(null);
+  var lastMessage = messages[messages.length - 1];
+  var clearBackBottom = function clearBackBottom() {
+    setNewCount(0);
+    setShowBackBottom(false);
+  };
+  var scrollToEnd = (0, _react.useCallback)(function (opts) {
+    if (scrollerRef.current) {
+      if (!showBackBottomtRef.current || opts && opts.force) {
+        scrollerRef.current.scrollToEnd(opts);
+        if (showBackBottomtRef.current) {
+          clearBackBottom();
+        }
+      }
+    }
+  }, []);
+  var handleBackBottomClick = function handleBackBottomClick() {
+    scrollToEnd({
+      animated: false,
+      force: true
+    });
+    // setNewCount(0);
+    // setShowBackBottom(false);
+
+    if (onBackBottomClick) {
+      onBackBottomClick();
+    }
+  };
+  var checkShowBottomRef = (0, _react.useRef)((0, _throttle.default)(function (el) {
+    if (isNearBottom(el, 3)) {
+      if (newCountRef.current) {
+        // 如果有新消息，离底部0.5屏-隐藏提示
+        if (isNearBottom(el, 0.5)) {
+          // setNewCount(0);
+          // setShowBackBottom(false);
+          clearBackBottom();
+        }
+      } else {
+        setShowBackBottom(false);
+      }
+    } else {
+      // 3屏+显示回到底部
+      setShowBackBottom(true);
+    }
+  }));
+  var handleScroll = function handleScroll(e) {
+    checkShowBottomRef.current(e.target);
+    if (onScroll) {
+      onScroll(e);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    newCountRef.current = newCount;
+  }, [newCount]);
+  (0, _react.useEffect)(function () {
+    showBackBottomtRef.current = showBackBottom;
+  }, [showBackBottom]);
+  (0, _react.useEffect)(function () {
+    var scroller = scrollerRef.current;
+    var wrapper = scroller && scroller.wrapperRef.current;
+    if (!wrapper || !lastMessage || lastMessage.position === 'pop') {
+      return;
+    }
+    if (lastMessage.position === 'right') {
+      // 自己发的消息，强制滚动到底部
+      scrollToEnd({
+        force: true
+      });
+    } else if (isNearBottom(wrapper, 2)) {
+      var animated = !!wrapper.scrollTop;
+      scrollToEnd({
+        animated: animated,
+        force: true
+      });
+    } else {
+      setNewCount(function (c) {
+        return c + 1;
+      });
+      setShowBackBottom(true);
+    }
+  }, [lastMessage, scrollToEnd]);
+  (0, _react.useEffect)(function () {
+    scrollToEnd();
+  }, [isTyping, scrollToEnd]);
+  (0, _react.useEffect)(function () {
+    var wrapper = messagesRef.current;
+    var needBlur = false;
+    var startY = 0;
+    function reset() {
+      needBlur = false;
+      startY = 0;
+    }
+    function touchStart(e) {
+      var _document = document,
+        activeElement = _document.activeElement;
+      if (activeElement && activeElement.nodeName === 'TEXTAREA') {
+        needBlur = true;
+        startY = e.touches[0].clientY;
+      }
+    }
+    function touchMove(e) {
+      if (needBlur && Math.abs(e.touches[0].clientY - startY) > 20) {
+        document.activeElement.blur();
+        reset();
+      }
+    }
+    wrapper.addEventListener('touchstart', touchStart, listenerOpts);
+    wrapper.addEventListener('touchmove', touchMove, listenerOpts);
+    wrapper.addEventListener('touchend', reset);
+    wrapper.addEventListener('touchcancel', reset);
+    return function () {
+      wrapper.removeEventListener('touchstart', touchStart);
+      wrapper.removeEventListener('touchmove', touchMove);
+      wrapper.removeEventListener('touchend', reset);
+      wrapper.removeEventListener('touchcancel', reset);
+    };
+  }, []);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      ref: messagesRef,
+      scrollToEnd: scrollToEnd
+    };
+  }, [scrollToEnd]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "MessageContainer",
+    ref: messagesRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "MessageContainer-before"
+  }, renderBeforeMessageList && renderBeforeMessageList()), /*#__PURE__*/_react.default.createElement(_PullToRefresh.PullToRefresh, {
+    onRefresh: onRefresh,
+    onScroll: handleScroll,
+    loadMoreText: loadMoreText,
+    ref: scrollerRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "MessageList"
+  }, messages.map(function (msg) {
+    return /*#__PURE__*/_react.default.createElement(_Message.Message, (0, _extends2.default)({}, msg, {
+      renderMessageContent: renderMessageContent,
+      key: msg._id
+    }));
+  }), isTyping && /*#__PURE__*/_react.default.createElement(_Message.Message, {
+    type: "typing",
+    _id: "typing"
+  }))), showBackBottom && /*#__PURE__*/_react.default.createElement(_BackBottom.BackBottom, {
+    count: newCount,
+    onClick: handleBackBottomClick,
+    onDidMount: onBackBottomShow
+  }));
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export type IMessageStatus = 'pending' | 'sent' | 'fail';
+type StatusType = '' | 'loading' | 'fail';
+export interface MessageStatusProps {
+    status: IMessageStatus;
+    delay?: number;
+    maxDelay?: number;
+    retryInterval?: number;
+    onRetry?: (isAutoRetry?: boolean) => void;
+    onChange?: (type: StatusType) => void;
+}
+export declare const MessageStatus: ({ status, delay, maxDelay, retryInterval, onRetry, onChange, }: MessageStatusProps) => React.JSX.Element | null;
+export {};

package/lib/components/MessageStatus/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageStatus = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = require("../Icon");
+var _IconButton = require("../IconButton");
+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 MessageStatus = exports.MessageStatus = function MessageStatus(_ref) {
+  var status = _ref.status,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 800 : _ref$delay,
+    _ref$maxDelay = _ref.maxDelay,
+    maxDelay = _ref$maxDelay === void 0 ? 12000 : _ref$maxDelay,
+    _ref$retryInterval = _ref.retryInterval,
+    retryInterval = _ref$retryInterval === void 0 ? 5000 : _ref$retryInterval,
+    onRetry = _ref.onRetry,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var loadingTimerRef = (0, _react.useRef)();
+  var failTimerRef = (0, _react.useRef)();
+  var autoTimerRef = (0, _react.useRef)();
+  function clear() {
+    if (loadingTimerRef.current) {
+      clearTimeout(loadingTimerRef.current);
+    }
+    if (failTimerRef.current) {
+      clearTimeout(failTimerRef.current);
+    }
+    if (autoTimerRef.current) {
+      clearInterval(autoTimerRef.current);
+    }
+  }
+  var doTimeout = (0, _react.useCallback)(function () {
+    clear();
+    loadingTimerRef.current = setTimeout(function () {
+      setType('loading');
+    }, delay);
+    failTimerRef.current = setTimeout(function () {
+      setType('fail');
+      clear();
+    }, maxDelay);
+    autoTimerRef.current = setInterval(function () {
+      if (onRetry) {
+        onRetry(true);
+      }
+    }, retryInterval);
+  }, [delay, maxDelay, onRetry, retryInterval]);
+  (0, _react.useEffect)(function () {
+    clear();
+    if (status === 'pending') {
+      doTimeout();
+    } else if (status === 'sent') {
+      setType('');
+    } else if (status === 'fail') {
+      setType('fail');
+    }
+    return clear;
+  }, [status, doTimeout]);
+  (0, _react.useEffect)(function () {
+    if (onChange) {
+      onChange(type);
+    }
+  }, [onChange, type]);
+  function handleRetry() {
+    setType('loading');
+    doTimeout();
+    if (onRetry) {
+      onRetry();
+    }
+  }
+  if (type) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "MessageStatus",
+      "data-status": type
+    }, type === 'fail' ? /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      icon: "warning-circle-fill",
+      onClick: handleRetry
+    }) : /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      type: "spinner",
+      spin: true
+    }));
+  }
+  return null;
+};

package/lib/components/Modal/Base.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+export type ModalProps = {
+    active?: boolean;
+    baseClass?: string;
+    className?: string;
+    title?: string;
+    subTitle?: string;
+    titleId?: string;
+    showClose?: boolean;
+    autoFocus?: boolean;
+    backdrop?: boolean | 'static';
+    height?: number | string;
+    overflow?: boolean;
+    actions?: ButtonProps[];
+    vertical?: boolean;
+    btnVariant?: ButtonProps['variant'];
+    bgColor?: string;
+    avatar?: string;
+    onClose?: () => void;
+    onBackdropClick?: () => void;
+    children?: React.ReactNode;
+};
+export declare const Base: (props: ModalProps) => React.ReactPortal | null;