@dpocean/chatui 1.0.0

package/es/components/Message/style.less

@@ -0,0 +1,132 @@
+.Message {
+  position: relative;
+
+  & + & {
+    margin-top: var(--gutter);
+  }
+  &.left {
+    .Message-main {
+      & > .Avatar {
+        margin-right: var(--msg-avatar-gap);
+      }
+    }
+    .Bubble {
+      margin-right: var(--msg-gutter);
+    }
+  }
+  &.right {
+    .Message-main,
+    .Message-content {
+      flex-direction: row-reverse;
+    }
+    .Message-main {
+      & > .Avatar {
+        margin-left: var(--msg-avatar-gap);
+      }
+    }
+    .Message-author {
+      text-align: right;
+    }
+    .Bubble {
+      margin-left: var(--msg-gutter);
+      background: var(--brand-3);
+    }
+  }
+  &.pop {
+    display: none;
+  }
+}
+
+.Message-meta {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.Message-main > .Avatar {
+  --avatar-size: var(--rate-width);
+}
+
+.Message-main,
+.Message-content {
+  display: flex;
+  align-items: flex-start;
+}
+
+.Message-inner {
+  flex: 1;
+  min-width: 0;
+}
+
+.Message-author {
+  margin-bottom: 6px;
+  color: var(--color-text-2);
+  font-size: var(--font-size-xs);
+  line-height: 1.1;
+}
+
+// SystemMessage
+.SystemMessage {
+  padding: 0 15Px;
+  color: var(--color-text-2);
+  text-align: center;
+
+  .Btn {
+    margin-left: 6px;
+
+    &:disabled {
+      color: var(--color-text-3);
+      opacity: 1;
+    }
+  }
+}
+
+.SystemMessage-inner {
+  position: relative;
+  display: inline-block;
+  padding: 6Px 9Px;
+  font-size: 12Px;
+  text-align: left;
+  border-radius: var(--radius-md);
+
+  &::before {
+    content: '';
+    position: absolute;
+    background: var(--color-fill-1);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    opacity: 0.7;
+    z-index: 0;
+  }
+
+  .Btn,
+  span {
+    z-index: 1;
+    position: relative;
+    vertical-align: top;
+  }
+}
+
+html[data-color-scheme="dark"] {
+  .SystemMessage-inner {
+    background: var(--color-fill-2);
+
+    &::before {
+      content: none;
+    }
+    span {
+      position: static;
+    }
+  }
+}
+
+.ChatApp[data-elder-mode="true"] {
+  .SystemMessage-inner {
+    padding: 7Px 14Px;
+    font-size: 14Px;
+  }
+}

package/es/components/MessageContainer/index.js

@@ -0,0 +1,187 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* eslint-disable no-underscore-dangle */
+import React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
+import { PullToRefresh } from '../PullToRefresh';
+import { Message } from '../Message';
+import { BackBottom } from '../BackBottom';
+import canUse from '../../utils/canUse';
+import throttle from '../../utils/throttle';
+import getToBottom from '../../utils/getToBottom';
+var listenerOpts = canUse('passiveListener') ? {
+  passive: true
+} : false;
+function isNearBottom(el, n) {
+  var offsetHeight = Math.max(el.offsetHeight, 600);
+  return getToBottom(el) < offsetHeight * n;
+}
+export var MessageContainer = /*#__PURE__*/React.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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showBackBottom = _useState2[0],
+    setShowBackBottom = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    newCount = _useState4[0],
+    setNewCount = _useState4[1];
+  var showBackBottomtRef = useRef(showBackBottom);
+  var newCountRef = useRef(newCount);
+  var messagesRef = useRef(null);
+  var scrollerRef = useRef(null);
+  var lastMessage = messages[messages.length - 1];
+  var clearBackBottom = function clearBackBottom() {
+    setNewCount(0);
+    setShowBackBottom(false);
+  };
+  var scrollToEnd = 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 = useRef(throttle(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);
+    }
+  };
+  useEffect(function () {
+    newCountRef.current = newCount;
+  }, [newCount]);
+  useEffect(function () {
+    showBackBottomtRef.current = showBackBottom;
+  }, [showBackBottom]);
+  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]);
+  useEffect(function () {
+    scrollToEnd();
+  }, [isTyping, scrollToEnd]);
+  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);
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      ref: messagesRef,
+      scrollToEnd: scrollToEnd
+    };
+  }, [scrollToEnd]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "MessageContainer",
+    ref: messagesRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "MessageContainer-before"
+  }, renderBeforeMessageList && renderBeforeMessageList()), /*#__PURE__*/React.createElement(PullToRefresh, {
+    onRefresh: onRefresh,
+    onScroll: handleScroll,
+    loadMoreText: loadMoreText,
+    ref: scrollerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "MessageList"
+  }, messages.map(function (msg) {
+    return /*#__PURE__*/React.createElement(Message, _extends({}, msg, {
+      renderMessageContent: renderMessageContent,
+      key: msg._id
+    }));
+  }), isTyping && /*#__PURE__*/React.createElement(Message, {
+    type: "typing",
+    _id: "typing"
+  }))), showBackBottom && /*#__PURE__*/React.createElement(BackBottom, {
+    count: newCount,
+    onClick: handleBackBottomClick,
+    onDidMount: onBackBottomShow
+  }));
+});

package/es/components/MessageContainer/style.less

@@ -0,0 +1,19 @@
+.MessageContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
+  & > .PullToRefresh {
+    flex: 1;
+  }
+  &:focus {
+    outline: 0;
+  }
+}
+
+.MessageList {
+  padding: var(--gutter);
+  font-size: 15px;
+}

package/es/components/MessageStatus/index.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+export var 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 = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var loadingTimerRef = useRef();
+  var failTimerRef = useRef();
+  var autoTimerRef = useRef();
+  function clear() {
+    if (loadingTimerRef.current) {
+      clearTimeout(loadingTimerRef.current);
+    }
+    if (failTimerRef.current) {
+      clearTimeout(failTimerRef.current);
+    }
+    if (autoTimerRef.current) {
+      clearInterval(autoTimerRef.current);
+    }
+  }
+  var doTimeout = 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]);
+  useEffect(function () {
+    clear();
+    if (status === 'pending') {
+      doTimeout();
+    } else if (status === 'sent') {
+      setType('');
+    } else if (status === 'fail') {
+      setType('fail');
+    }
+    return clear;
+  }, [status, doTimeout]);
+  useEffect(function () {
+    if (onChange) {
+      onChange(type);
+    }
+  }, [onChange, type]);
+  function handleRetry() {
+    setType('loading');
+    doTimeout();
+    if (onRetry) {
+      onRetry();
+    }
+  }
+  if (type) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "MessageStatus",
+      "data-status": type
+    }, type === 'fail' ? /*#__PURE__*/React.createElement(IconButton, {
+      icon: "warning-circle-fill",
+      onClick: handleRetry
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      type: "spinner",
+      spin: true
+    }));
+  }
+  return null;
+};

package/es/components/MessageStatus/style.less

@@ -0,0 +1,32 @@
+.MessageStatus {
+  align-self: center;
+  margin-right: @gutter;
+  font-size: 15Px;
+
+  &[data-status='loading'] {
+    .Icon {
+      color: var(--color-text-2);
+    }
+  }
+  &[data-status='fail'] {
+    .IconBtn {
+      color: #ff5959;
+    }
+  }
+  .IconBtn,
+  .Icon {
+    display: block;
+  }
+  .Message[data-type="text"] & {
+    // = calc(12px - var(--rate-width) - 8Px)
+    margin-right: calc(4Px - var(--rate-width));
+  }
+  .Message[data-type="order"] & {
+    // = -(气泡外边距40 - 间距12)
+    // calc(var(--rate-width) + 8Px) - 间距12
+    margin-right: calc(-4Px - var(--rate-width));
+    // = margin-right - 自宽15
+    // = calc(-4Px - var(--rate-width)) - 15Px
+    margin-left: calc(var(--rate-width) - 11Px);
+  }
+}

package/es/components/Modal/Base.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import useMount from '../../hooks/useMount';
+import { Backdrop } from '../Backdrop';
+import { IconButton } from '../IconButton';
+import { Button } from '../Button';
+import useNextId from '../../hooks/useNextId';
+import toggleClass from '../../utils/toggleClass';
+import { useConfig } from '../ConfigProvider';
+function clearModal() {
+  if (!document.querySelector('.Modal') && !document.querySelector('.Popup')) {
+    toggleClass('S--modalOpen', false);
+  }
+}
+export var Base = function Base(props) {
+  var baseClass = props.baseClass,
+    active = props.active,
+    className = props.className,
+    title = props.title,
+    subTitle = props.subTitle,
+    _props$showClose = props.showClose,
+    showClose = _props$showClose === void 0 ? true : _props$showClose,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+    _props$backdrop = props.backdrop,
+    backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
+    height = props.height,
+    overflow = props.overflow,
+    actions = props.actions,
+    _props$vertical = props.vertical,
+    vertical = _props$vertical === void 0 ? true : _props$vertical,
+    btnVariant = props.btnVariant,
+    bgColor = props.bgColor,
+    avatar = props.avatar,
+    children = props.children,
+    onBackdropClick = props.onBackdropClick,
+    onClose = props.onClose;
+  var mid = useNextId('modal-');
+  var titleId = props.titleId || mid;
+  var configCtx = useConfig();
+  var wrapper = useRef(null);
+  var _useMount = useMount({
+      active: active,
+      ref: wrapper
+    }),
+    didMount = _useMount.didMount,
+    isShow = _useMount.isShow;
+  useEffect(function () {
+    setTimeout(function () {
+      if (autoFocus && wrapper.current) {
+        wrapper.current.focus();
+      }
+    });
+  }, [autoFocus]);
+  useEffect(function () {
+    if (isShow) {
+      toggleClass('S--modalOpen', isShow);
+    }
+  }, [isShow]);
+  useEffect(function () {
+    if (!active && !didMount) {
+      clearModal();
+    }
+  }, [active, didMount]);
+  useEffect(function () {
+    return function () {
+      clearModal();
+    };
+  }, []);
+  if (!didMount) return null;
+  var isPopup = baseClass === 'Popup';
+  var hasAvatar = avatar && baseClass === 'Modal';
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    className: clsx(baseClass, className, {
+      active: isShow
+    }),
+    tabIndex: -1,
+    "data-elder-mode": configCtx.elderMode,
+    ref: wrapper
+  }, backdrop && /*#__PURE__*/React.createElement(Backdrop, {
+    active: isShow,
+    onClick: backdrop === true ? onBackdropClick || onClose : undefined
+  }), /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(baseClass, "-dialog"), {
+      'pb-safe': isPopup && !actions
+    }),
+    "data-bg-color": bgColor,
+    "data-height": isPopup && height ? height : undefined,
+    "data-has-avatar": hasAvatar,
+    role: "dialog",
+    "aria-labelledby": titleId,
+    "aria-modal": true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(baseClass, "-content")
+  }, hasAvatar && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(baseClass, "-avatar"),
+    style: {
+      '--avatar': "url(".concat(avatar, ")")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(baseClass, "-header")
+  }, /*#__PURE__*/React.createElement("h5", {
+    className: "".concat(baseClass, "-title"),
+    id: titleId
+  }, title), isPopup && subTitle && /*#__PURE__*/React.createElement("h6", {
+    className: "".concat(baseClass, "-subtitle")
+  }, subTitle), showClose && onClose && /*#__PURE__*/React.createElement(IconButton, {
+    className: "".concat(baseClass, "-close"),
+    icon: "close",
+    size: "lg",
+    onClick: onClose,
+    "aria-label": "\u5173\u95ED"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(baseClass, "-body"), {
+      overflow: overflow
+    })
+  }, children), actions && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(baseClass, "-footer ").concat(baseClass, "-footer--").concat(vertical ? 'v' : 'h'),
+    "data-variant": btnVariant || 'round'
+  }, actions.map(function (item) {
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      size: "lg",
+      block: isPopup,
+      variant: btnVariant
+    }, item, {
+      key: item.label
+    }));
+  }))))), document.body);
+};

package/es/components/Modal/Confirm.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "vertical", "actions"];
+import React from 'react';
+import clsx from 'clsx';
+import { Base } from './Base';
+import { useLocale } from '../ConfigProvider';
+var isPrimary = function isPrimary(btn) {
+  return btn.color === 'primary';
+};
+export var Confirm = function Confirm(_ref) {
+  var className = _ref.className,
+    oVertical = _ref.vertical,
+    actions = _ref.actions,
+    other = _objectWithoutProperties(_ref, _excluded);
+  var _useLocale = useLocale(),
+    _useLocale$locale = _useLocale.locale,
+    locale = _useLocale$locale === void 0 ? '' : _useLocale$locale;
+  var isZh = locale.includes('zh');
+  // 中文默认横排
+  var vertical = oVertical != null ? oVertical : !isZh;
+  if (Array.isArray(actions)) {
+    // 主按钮排序：横排主按钮在后，竖排主按钮在前
+    actions.sort(function (a, b) {
+      if (isPrimary(a)) {
+        return vertical ? -1 : 1;
+      }
+      if (isPrimary(b)) {
+        return vertical ? 1 : -1;
+      }
+      return 0;
+    });
+  }
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    baseClass: "Modal",
+    className: clsx('Confirm', className),
+    showClose: false,
+    btnVariant: "outline",
+    vertical: vertical,
+    actions: actions
+  }, other));
+};

package/es/components/Modal/Modal.js

@@ -0,0 +1,9 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { Base } from './Base';
+export var Modal = function Modal(props) {
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    baseClass: "Modal",
+    btnVariant: props.vertical === false ? undefined : 'outline'
+  }, props));
+};

package/es/components/Modal/Popup.js

@@ -0,0 +1,9 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { Base } from './Base';
+export var Popup = function Popup(props) {
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    baseClass: "Popup",
+    overflow: true
+  }, props));
+};

package/es/components/Modal/index.js

@@ -0,0 +1,3 @@
+export { Modal } from './Modal';
+export { Confirm } from './Confirm';
+export { Popup } from './Popup';