@dpocean/chatui 1.0.0

package/es/components/Portal/index.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+function getEl(el) {
+  if (!el) return null;
+  if (el instanceof Element) {
+    return el;
+  }
+  return typeof el === 'function' ? el() : el.current || el;
+}
+export var Portal = function Portal(props) {
+  var children = props.children,
+    _props$container = props.container,
+    container = _props$container === void 0 ? document.body : _props$container,
+    onRendered = props.onRendered;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    mountNode = _useState2[0],
+    setMountNode = _useState2[1];
+  useEffect(function () {
+    setMountNode(getEl(container));
+  }, [container]);
+  useLayoutEffect(function () {
+    if (onRendered && mountNode) {
+      onRendered();
+    }
+  }, [mountNode, onRendered]);
+  return mountNode ? /*#__PURE__*/createPortal(children, mountNode) : mountNode;
+};

package/es/components/Price/index.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "price", "currency", "locale", "original", "autoFit"];
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import clsx from 'clsx';
+var canFormat = 'Intl' in window && typeof Intl.NumberFormat.prototype.formatToParts === 'function';
+/**
+ * xl - 60
+ * lg - 48
+ * md - 36
+ * sm - 28
+ */
+function getSize(parts) {
+  var getPartLength = function getPartLength(type) {
+    var _parts$find;
+    return ((_parts$find = parts.find(function (p) {
+      return p.type === type;
+    })) === null || _parts$find === void 0 || (_parts$find = _parts$find.value) === null || _parts$find === void 0 ? void 0 : _parts$find.length) || 0;
+  };
+  var len1 = getPartLength('integer');
+  var len2 = getPartLength('fraction');
+  if (len1 < 2) {
+    return 'xl';
+  }
+  if (len1 === 2) {
+    return len2 ? 'lg' : 'xl';
+  }
+  if (len1 === 3) {
+    return len2 ? len2 > 1 ? 'md' : 'lg' : 'xl';
+  }
+  if (len1 === 4) {
+    return len2 ? len2 > 1 ? 'sm' : 'md' : 'lg';
+  }
+  return len2 ? 'sm' : 'md';
+}
+export var Price = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    price = props.price,
+    currency = props.currency,
+    locale = props.locale,
+    original = props.original,
+    autoFit = props.autoFit,
+    other = _objectWithoutProperties(props, _excluded);
+  var parts = [];
+  if (locale && currency && canFormat) {
+    parts = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currency,
+      useGrouping: false,
+      minimumFractionDigits: 0
+    }).formatToParts(price);
+  } else {
+    parts = undefined;
+  }
+
+  // 部分 Android 机只返回 `[{ type: 'literal', value: '¥5.88' }]`
+  if (!parts || parts.length < 2) {
+    var decimal = '.';
+    var _split = "".concat(price).split(decimal),
+      _split2 = _slicedToArray(_split, 2),
+      integer = _split2[0],
+      fraction = _split2[1];
+    parts = [{
+      type: 'currency',
+      value: currency
+    }, {
+      type: 'integer',
+      value: integer
+    }, {
+      type: 'decimal',
+      value: fraction && decimal
+    }, {
+      type: 'fraction',
+      value: fraction
+    }];
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('Price', {
+      'Price--original': original
+    }, className),
+    "data-size": autoFit ? getSize(parts) : undefined,
+    ref: ref,
+    "aria-label": "\u4EF7\u683C\uFF1A".concat(price)
+  }, other), parts.map(function (t, i) {
+    return t.value ? /*#__PURE__*/React.createElement("span", {
+      className: "Price-".concat(t.type),
+      key: i
+    }, t.value) : null;
+  }));
+});

package/es/components/Price/style.less

@@ -0,0 +1,45 @@
+.Price {
+  display: inline;
+  font-size: @price-font-size;
+  font-weight: 500;
+  font-family: 'AlibabaSans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
+
+  &--original {
+    color: var(--color-text-3);
+    text-decoration: line-through;
+  }
+  &[data-size] {
+    font-weight: 700;
+
+    .Price-currency,
+    .Price-decimal,
+    .Price-fraction {
+      font-size: 0.6em; // 不支持 max 的兜底处理
+    }
+    .Price-currency {
+      margin-right: 2px;
+      vertical-align: 1px;
+      font-size: max(0.6em, 11px);
+    }
+    .Price-decimal,
+    .Price-fraction {
+      font-size: max(0.6em, 14px);
+    }
+  }
+  &[data-size="xl"] {
+    font-size: 30px;
+  }
+  &[data-size="lg"] {
+    font-size: 24px;
+  }
+  &[data-size="md"] {
+    font-size: 18px;
+  }
+  &[data-size="sm"] {
+    font-size: 14px;
+  }
+}
+
+.Price-currency {
+  font-size: 0.8em;
+}

package/es/components/Progress/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "value", "status", "children"];
+import React from 'react';
+import clsx from 'clsx';
+export var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    value = props.value,
+    status = props.status,
+    children = props.children,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx('Progress', status && "Progress--".concat(status), className),
+    ref: ref
+  }, other), /*#__PURE__*/React.createElement("div", {
+    className: "Progress-bar",
+    role: "progressbar",
+    style: {
+      width: "".concat(value, "%")
+    },
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100
+  }, children));
+});

package/es/components/Progress/style.less

@@ -0,0 +1,23 @@
+.Progress {
+  display: flex;
+  height: @progress-height;
+  overflow: hidden;
+  background-color: @progress-bg;
+  border-radius: @progress-border-radius;
+
+  &-bar {
+    overflow: hidden;
+    background-color: @progress-bar-bg;
+    transition: @progress-bar-transition;
+  }
+  &--success {
+    .Progress-bar {
+      background-color: @progress-bar-bg-success;
+    }
+  }
+  &--error {
+    .Progress-bar {
+      background-color: @progress-bar-bg-error;
+    }
+  }
+}

package/es/components/PullToRefresh/index.js

@@ -0,0 +1,224 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
+import clsx from 'clsx';
+import { setTransform } from '../../utils/style';
+import { Icon } from '../Icon';
+import { Flex } from '../Flex';
+import { Button } from '../Button';
+import canUse from '../../utils/canUse';
+import smoothScroll from '../../utils/smoothScroll';
+import { useLatest } from '../../hooks/useLatest';
+var canPassive = canUse('passiveListener');
+var passiveOpts = canPassive ? {
+  passive: true
+} : false;
+var nonPassiveOpts = canPassive ? {
+  passive: false
+} : false;
+export var PullToRefresh = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$distance = props.distance,
+    oDistance = _props$distance === void 0 ? 20 : _props$distance,
+    _props$loadingDistanc = props.loadingDistance,
+    loadingDistance = _props$loadingDistanc === void 0 ? 30 : _props$loadingDistanc,
+    _props$maxDistance = props.maxDistance,
+    maxDistance = _props$maxDistance === void 0 ? 60 : _props$maxDistance,
+    _props$distanceRatio = props.distanceRatio,
+    distanceRatio = _props$distanceRatio === void 0 ? 2 : _props$distanceRatio,
+    _props$loadMoreText = props.loadMoreText,
+    loadMoreText = _props$loadMoreText === void 0 ? '点击加载更多' : _props$loadMoreText,
+    children = props.children,
+    onScroll = props.onScroll,
+    onRefresh = props.onRefresh,
+    _props$renderIndicato = props.renderIndicator,
+    renderIndicator = _props$renderIndicato === void 0 ? function (status) {
+      if (status === 'active' || status === 'loading') {
+        return /*#__PURE__*/React.createElement(Icon, {
+          className: "PullToRefresh-spinner",
+          type: "spinner",
+          spin: true
+        });
+      }
+      return null;
+    } : _props$renderIndicato;
+  var wrapperRef = useRef(null);
+  var contentRef = useRef(null);
+  var onRefreshRef = useLatest(onRefresh);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    distance = _useState2[0],
+    setDistance = _useState2[1];
+  var _useState3 = useState('pending'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    status = _useState4[0],
+    setStatus = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dropped = _useState6[0],
+    setDropped = _useState6[1];
+  var _useState7 = useState(!props.onRefresh),
+    _useState8 = _slicedToArray(_useState7, 2),
+    disabled = _useState8[0],
+    setDisabled = _useState8[1];
+  var sharedRef = useRef({});
+  var statusRef = useRef(status);
+  var timer1 = useRef();
+  var timer2 = useRef();
+  var useFallback = !canUse('touch');
+  useEffect(function () {
+    statusRef.current = status;
+  }, [status]);
+  var setContentStyle = function setContentStyle(y) {
+    var content = contentRef.current;
+    if (content) {
+      setTransform(content, "translate3d(0px,".concat(y, "px,0)"));
+    }
+  };
+  var scrollTo = function scrollTo(_ref) {
+    var y = _ref.y,
+      _ref$animated = _ref.animated,
+      animated = _ref$animated === void 0 ? true : _ref$animated;
+    var scroller = wrapperRef.current;
+    if (!scroller) return;
+    var offsetTop = y === '100%' ? scroller.scrollHeight - scroller.offsetHeight : y;
+    if (animated) {
+      smoothScroll({
+        el: scroller,
+        to: offsetTop,
+        x: false
+      });
+    } else {
+      scroller.scrollTop = offsetTop;
+    }
+  };
+  var scrollToEnd = useCallback(function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$animated = _ref2.animated,
+      animated = _ref2$animated === void 0 ? true : _ref2$animated;
+    scrollTo({
+      y: '100%',
+      animated: animated
+    });
+  }, []);
+  var reset = useCallback(function () {
+    setDistance(0);
+    setStatus('pending');
+    setContentStyle(0);
+  }, []);
+  var handleLoadMore = useCallback(function () {
+    var scroller = wrapperRef.current;
+    if (!scroller || !onRefreshRef.current) return;
+    setStatus('loading');
+    try {
+      var sh = scroller.scrollHeight;
+      onRefreshRef.current().then(function (res) {
+        var handleOffset = function handleOffset() {
+          scrollTo({
+            y: scroller.scrollHeight - sh - 50,
+            animated: false
+          });
+        };
+        clearTimeout(timer1.current);
+        clearTimeout(timer2.current);
+        handleOffset();
+        timer1.current = setTimeout(handleOffset, 150);
+        timer2.current = setTimeout(handleOffset, 250);
+        reset();
+        if (res && res.noMore) {
+          setDisabled(true);
+        }
+      });
+    } catch (ex) {
+      // eslint-disable-next-line no-console
+      console.error(ex);
+      reset();
+    }
+  }, [onRefreshRef, reset]);
+  var touchStart = function touchStart() {
+    sharedRef.current.startY = 0;
+  };
+  var touchMove = useCallback(function (e) {
+    var _wrapperRef$current;
+    var currentY = e.touches[0].clientY;
+    var canPull = ((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.scrollTop) <= 0;
+    if (canPull) {
+      if (!sharedRef.current.startY) {
+        sharedRef.current.startY = currentY;
+        setStatus('pull');
+        setDropped(false);
+      }
+    } else {
+      sharedRef.current.startY = 0;
+    }
+    var startY = sharedRef.current.startY;
+    if (!canPull || currentY < startY || statusRef.current === 'loading') return;
+    var dist = (currentY - startY) / distanceRatio;
+    if (maxDistance && dist > maxDistance) {
+      dist = maxDistance;
+    }
+    if (dist > 0) {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+      setContentStyle(dist);
+      setDistance(dist);
+      setStatus(dist >= oDistance ? 'active' : 'pull');
+    }
+  }, [distanceRatio, maxDistance, oDistance]);
+  var touchEnd = useCallback(function () {
+    setDropped(true);
+    if (sharedRef.current.startY && statusRef.current === 'active') {
+      handleLoadMore();
+    } else {
+      reset();
+    }
+  }, [handleLoadMore, reset]);
+  useEffect(function () {
+    var wrapper = wrapperRef.current;
+    if (!wrapper || useFallback) return;
+    if (disabled) {
+      wrapper.removeEventListener('touchstart', touchStart);
+      wrapper.removeEventListener('touchmove', touchMove);
+      wrapper.removeEventListener('touchend', touchEnd);
+      wrapper.removeEventListener('touchcancel', touchEnd);
+    } else {
+      wrapper.addEventListener('touchstart', touchStart, passiveOpts);
+      wrapper.addEventListener('touchmove', touchMove, nonPassiveOpts);
+      wrapper.addEventListener('touchend', touchEnd);
+      wrapper.addEventListener('touchcancel', touchEnd);
+    }
+  }, [disabled, touchEnd, touchMove, useFallback]);
+  useEffect(function () {
+    if (status === 'loading' && !useFallback) {
+      setContentStyle(loadingDistance);
+    }
+  }, [loadingDistance, status, useFallback]);
+  useImperativeHandle(ref, function () {
+    return {
+      scrollTo: scrollTo,
+      scrollToEnd: scrollToEnd,
+      wrapperRef: wrapperRef
+    };
+  }, [scrollToEnd]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "PullToRefresh",
+    ref: wrapperRef,
+    onScroll: onScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "PullToRefresh-inner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx('PullToRefresh-content', {
+      'PullToRefresh-transition': dropped
+    }),
+    ref: contentRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "PullToRefresh-indicator"
+  }, renderIndicator(status, distance)), !disabled && useFallback && /*#__PURE__*/React.createElement(Flex, {
+    className: "PullToRefresh-fallback",
+    center: true
+  }, renderIndicator(status, oDistance), /*#__PURE__*/React.createElement(Button, {
+    className: "PullToRefresh-loadMore",
+    variant: "text",
+    onClick: handleLoadMore
+  }, loadMoreText)), React.Children.only(children))));
+});

package/es/components/PullToRefresh/style.less

@@ -0,0 +1,37 @@
+.PullToRefresh {
+  height: 100%;
+  overflow-y: scroll;
+
+  .no-scrolling & {
+    -webkit-overflow-scrolling: touch;
+  }
+  &-fallback {
+    padding-top: var(--gutter);
+    text-align: center;
+  }
+  &-loadMore {
+    font-size: 14Px;
+  }
+}
+
+.PullToRefresh-inner {
+  overflow: hidden;
+  min-height: 100%;
+}
+
+.PullToRefresh-indicator {
+  height: 30px;
+  margin-top: -30px;
+  color: grey;
+  text-align: center;
+  line-height: 30px;
+}
+
+.PullToRefresh-spinner {
+  color: var(--color-text-3);
+  font-size: 27px;
+}
+
+.PullToRefresh-transition {
+  transition: transform 0.3s;
+}

package/es/components/QuickReplies/QuickReplies.js

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useLayoutEffect, useRef } from 'react';
+import { ScrollView } from '../ScrollView/ScrollView';
+import { QuickReply } from './QuickReply';
+var QuickReplies = function QuickReplies(props) {
+  var _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    _props$visible = props.visible,
+    visible = _props$visible === void 0 ? true : _props$visible,
+    onClick = props.onClick,
+    onScroll = props.onScroll;
+  var scroller = useRef(null);
+  var _useState = useState(!!onScroll),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollEvent = _useState2[0],
+    setScrollEvent = _useState2[1];
+  useLayoutEffect(function () {
+    var timer;
+    if (scroller.current) {
+      setScrollEvent(false);
+      scroller.current.scrollTo({
+        x: 0
+      });
+      timer = setTimeout(function () {
+        setScrollEvent(true);
+      }, 500);
+    }
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [items]);
+  if (!items.length) return null;
+  return /*#__PURE__*/React.createElement(ScrollView, {
+    className: "QuickReplies",
+    data: items,
+    itemKey: "name",
+    ref: scroller,
+    "data-visible": visible,
+    onScroll: scrollEvent ? onScroll : undefined,
+    renderItem: function renderItem(item, index) {
+      return /*#__PURE__*/React.createElement(QuickReply, {
+        item: item,
+        index: index,
+        onClick: onClick,
+        key: item.name
+      });
+    }
+  });
+};
+export default /*#__PURE__*/React.memo(QuickReplies);

package/es/components/QuickReplies/QuickReply.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+export var QuickReply = function QuickReply(props) {
+  var item = props.item,
+    index = props.index,
+    onClick = props.onClick;
+  function handleClick() {
+    onClick(item, index);
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    className: clsx('QuickReply', {
+      new: item.isNew,
+      highlight: item.isHighlight
+    }),
+    type: "button",
+    "data-code": item.code,
+    "aria-label": "\u5FEB\u6377\u77ED\u8BED: ".concat(item.name, "\uFF0C\u53CC\u51FB\u53D1\u9001"),
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "QuickReply-inner"
+  }, item.icon && /*#__PURE__*/React.createElement(Icon, {
+    type: item.icon
+  }), item.img && /*#__PURE__*/React.createElement("img", {
+    className: "QuickReply-img",
+    src: item.img,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("span", null, item.name)));
+};

package/es/components/QuickReplies/index.js

@@ -0,0 +1,2 @@
+export { default as QuickReplies } from './QuickReplies';
+export { QuickReply } from './QuickReply';

package/es/components/QuickReplies/style.less

@@ -0,0 +1,94 @@
+.QuickReplies {
+  padding: @quick-replies-padding;
+  transition: opacity 0.3s;
+
+  &[data-visible='false'] {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &:not(.ScrollView--hasControls) {
+    padding-left: 0;
+    padding-right: 0;
+
+    .ScrollView-inner {
+      padding: 0 var(--gutter);
+    }
+    .ScrollView-item:last-child {
+      padding-right: var(--gutter);
+    }
+  }
+}
+
+.QuickReply {
+  position: relative;
+  display: block;
+  margin: 0;
+  padding: 4Px 12Px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  line-height: 20Px;
+  background: var(--color-fill-1);
+  cursor: pointer;
+  color: var(--color-text-1);
+  font-size: @quick-reply-font-size;
+  transition: 0.15s ease-in-out;
+
+  &.new::after {
+    content: '';
+    position: absolute;
+    top: @quick-reply-dot-top;
+    right: @quick-reply-dot-right;
+    width: @quick-reply-dot-size;
+    height: @quick-reply-dot-size;
+    background: @quick-reply-dot-bg;
+    overflow: hidden;
+    border: 1px solid var(--color-fill-1);
+    border-radius: 50%;
+  }
+  &.highlight {
+    background: var(--color-fill-1);
+    font-weight: 500;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      border: 1px solid var(--brand-1);
+      opacity: 0.5;
+      border-radius: inherit;
+    }
+  }
+  &-inner {
+    display: flex;
+    align-items: center;
+  }
+  &-img {
+    max-height: 13Px;
+  }
+  &-inner > .Icon,
+  &-img {
+    margin-right: 3Px;
+  }
+  .Icon {
+    color: var(--brand-1);
+    font-size: 15Px;
+  }
+}
+
+.ChatApp[data-elder-mode="true"] {
+  .QuickReply {
+    font-size: 17Px;
+    line-height: 26Px;
+
+    .Icon {
+      font-size: 17Px;
+    }
+  }
+  .QuickReply-img {
+    max-height: 17Px;
+  }
+}

package/es/components/Quote/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Quote = function Quote(props) {
+  var className = props.className,
+    author = props.author,
+    children = props.children,
+    onClick = props.onClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clsx('Quote', className),
+    onClick: onClick
+  }, author && /*#__PURE__*/React.createElement("div", {
+    className: "Quote-author"
+  }, author), /*#__PURE__*/React.createElement("div", {
+    className: "Quote-content"
+  }, children));
+};