@fle-ui/plus-im-record 0.0.8-beta.0 → 0.0.8-beta.3

package/es/ChatMessageItem/index.js

@@ -0,0 +1,130 @@
+import "antd/es/avatar/style";
+import _Avatar from "antd/es/avatar";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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) { _defineProperty(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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import dayjs from 'dayjs';
+import classNames from 'classnames';
+import ParseSession from '../ParseSession';
+import Icon from '../Icon';
+import { defaultAvatar, imMsgTypes, msgEventTypes } from '../common/const';
+import { paserAttach } from '../common/utils';
+import './index.less';
+var ChatMessageItem = function ChatMessageItem(_ref) {
+  var h5 = _ref.h5,
+    msg = _ref.msg,
+    prefix = _ref.prefix,
+    _ref$myAccount = _ref.myAccount,
+    myAccount = _ref$myAccount === void 0 ? '' : _ref$myAccount,
+    keyword = _ref.keyword,
+    _ref$accountInfo = _ref.accountInfo,
+    accountInfo = _ref$accountInfo === void 0 ? {} : _ref$accountInfo,
+    isSessionEnd = _ref.isSessionEnd,
+    recordSession = _ref.recordSession;
+  var paserMsg = _objectSpread(_objectSpread({}, msg), {}, {
+    attach: paserAttach(msg.attach || {})
+  });
+  var from = paserMsg.from,
+    _paserMsg$attach = paserMsg.attach,
+    attach = _paserMsg$attach === void 0 ? {} : _paserMsg$attach,
+    idClient = paserMsg.idClient,
+    time = paserMsg.time,
+    type = paserMsg.type,
+    flow = paserMsg.flow;
+  var isRecall = ['recall'].includes(type);
+  var isEvent = [imMsgTypes.event].includes(attach === null || attach === void 0 ? void 0 : attach.type);
+  var isTip = [imMsgTypes.tip].includes(attach === null || attach === void 0 ? void 0 : attach.type);
+  var isNotification = type === 'notification';
+  var isSelf = myAccount ? from === myAccount : flow === 'out';
+  var renderMsgDate = function renderMsgDate() {
+    var date = dayjs(time);
+    var isCurrentDay = date.isSame(dayjs(), 'day');
+    var isCurrentYear = date.isSame(dayjs(), 'year');
+    // eslint-disable-next-line no-nested-ternary
+    return isCurrentDay ? date.format('HH:mm:ss') : isCurrentYear ? date.format('MM-DD HH:mm:ss') : date.format('YYYY-MM-DD HH:mm:ss');
+  };
+  var renderRecallMsg = function renderRecallMsg() {
+    return /*#__PURE__*/React.createElement("div", {
+      key: idClient,
+      className: "".concat(prefix, "-tip")
+    }, "".concat(isSelf ? '您' : '用户', "\u64A4\u56DE\u4E86\u4E00\u6761\u4FE1\u606F"));
+  };
+  var renderEventMsg = function renderEventMsg() {
+    var _attach$content;
+    var isCloseEvent = [msgEventTypes.csClose, msgEventTypes.sysClose, msgEventTypes.userClose].includes((_attach$content = attach.content) === null || _attach$content === void 0 ? void 0 : _attach$content.eventType);
+    return attach.content.tips ? /*#__PURE__*/React.createElement("div", {
+      key: idClient,
+      className: classNames("".concat(prefix, "-tip"), {
+        'is-close': isCloseEvent
+      })
+    }, /*#__PURE__*/React.createElement("span", null, attach.content.tips)) : /*#__PURE__*/React.createElement(React.Fragment, null);
+  };
+  var renderTipMsg = function renderTipMsg() {
+    return /*#__PURE__*/React.createElement("div", {
+      key: idClient,
+      className: "".concat(prefix, "-tip")
+    }, /*#__PURE__*/React.createElement("span", null, attach.content));
+  };
+  function renderCenterMsg() {
+    if (isRecall) return renderRecallMsg();
+    if (isTip) return renderTipMsg();
+    if (isEvent) return renderEventMsg();
+    if (isNotification) {
+      /*#__PURE__*/React.createElement(ParseSession, {
+        msg: paserMsg,
+        prefix: "".concat(prefix)
+      });
+    }
+    return null;
+  }
+  function renderContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefix, "-box")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefix, "-date"), _defineProperty({}, "".concat(prefix, "-date-self"), isSelf))
+    }, renderMsgDate()), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefix, "-body"),
+      style: {
+        background: [imMsgTypes.video, imMsgTypes.order, imMsgTypes.product].includes(attach.type) ? 'transparent' : ''
+      }
+    }, /*#__PURE__*/React.createElement(ParseSession, {
+      h5: h5,
+      keyword: keyword,
+      msg: paserMsg,
+      prefix: "".concat(prefix),
+      recordSession: recordSession,
+      isSessionEnd: isSessionEnd
+    })), isSelf && myAccount && /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(prefix, "-read"), {
+        isRead: msg.readByOtherUser
+      })
+    }, msg.readByOtherUser ? '已读' : '未读'));
+  }
+  return renderCenterMsg() || /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefix, {
+      self: isSelf,
+      h5: h5
+    })
+  }, [imMsgTypes.chatrecord].includes(attach.type) ? /*#__PURE__*/React.createElement(_Avatar, {
+    size: 36,
+    style: {
+      backgroundColor: '#2c6bff',
+      verticalAlign: 'middle'
+    },
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      type: 'icon-kefu',
+      style: {
+        fontSize: 24,
+        color: '#fff'
+      }
+    })
+  }) : /*#__PURE__*/React.createElement(_Avatar, {
+    size: 36,
+    src: accountInfo.avatar || defaultAvatar
+  }), renderContent());
+};
+export default ChatMessageItem;

package/es/ChatMessageItem/index.less

@@ -0,0 +1,108 @@
+@prefix: chart-messages-item;
+
+.tipText() {
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  padding: 8px 56px;
+  span {
+    display: inline-block;
+    padding: 3px 8px;
+    border-radius: 4px;
+    background-color: #fff;
+  }
+}
+
+// 对话
+.@{prefix} {
+  display: flex;
+  padding: 8px;
+  // margin-bottom: 16px;
+  .ant-avatar {
+    border-radius: 50%;
+    margin-top: 20px;
+    margin-right: 8px;
+  }
+
+  &-recall {
+    .tipText();
+  }
+
+  &-tip {
+    .tipText();
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.is-close {
+      &::before,
+      &::after {
+        display: block;
+        flex: 1;
+        content: '';
+        height: 1px;
+        width: 100%;
+        background-color: #ddd;
+      }
+    }
+    span {
+      margin: 0 10px;
+      flex-shrink: 0;
+    }
+  }
+
+  &-box {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &-body {
+    position: relative;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: break-spaces;
+    overflow: hidden;
+    max-width: 375px;
+    min-width: 50px;
+    border-radius: 2px 6px 6px 6px;
+    background: #fff;
+  }
+  &-read {
+    display: block;
+    border-radius: 50%;
+    font-size: 12px;
+    color: #aaa;
+    transform: scale(0.85);
+  }
+  &-date {
+    font-size: 12px;
+    color: #aaa;
+    margin-bottom: 4px;
+  }
+}
+// 对话-自己
+.@{prefix}.self {
+  flex-direction: row-reverse;
+
+  .ant-avatar {
+    margin-right: 0;
+    margin-left: 12px;
+  }
+
+  .@{prefix}-box {
+    align-items: flex-end;
+  }
+
+  .@{prefix}-body {
+    border-radius: 6px 2px 6px 6px;
+    background: #dbe6ff;
+  }
+}
+
+// 对话-H5
+.@{prefix}.h5 {
+  .@{prefix}-body {
+    max-width: 276px;
+  }
+}

package/es/ChatMessageList/index.d.ts

@@ -0,0 +1,29 @@
+import React, { UIEventHandler } from 'react';
+import { IMMessage } from '../@types';
+import './index.less';
+declare const LOADING_STATUS: any;
+export type LoadingStatus = keyof typeof LOADING_STATUS | undefined;
+export interface RecordSession {
+    relationId?: string | number;
+    accid?: string;
+    relationType?: number;
+}
+export interface ChatMessageListProps {
+    searchValue?: string;
+    h5?: boolean;
+    msgs: IMMessage[];
+    myAccount?: string;
+    loadingStarus?: LoadingStatus;
+    onScrollTop?: UIEventHandler<HTMLDivElement>;
+    onScrollBottom?: UIEventHandler<HTMLDivElement>;
+    accountsMap?: Record<string, {
+        accid: string;
+        nickname: string;
+        avatar: string;
+    }>;
+    style?: React.CSSProperties;
+    isSessionEnd?: boolean;
+    recordSession?: RecordSession;
+}
+declare const ChatMessageList: React.ForwardRefExoticComponent<ChatMessageListProps & React.RefAttributes<HTMLDivElement>>;
+export default ChatMessageList;

package/es/ChatMessageList/index.js

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import ChatMessageItem from '../ChatMessageItem';
+import { debounce } from '../utils';
+import './index.less';
+var LOADING_STATUS = {
+  loading: '加载中...',
+  nomore: '没有更多了~'
+};
+var LOAD_LIMIT = 15;
+var ChatMessageList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var searchValue = _ref.searchValue,
+    h5 = _ref.h5,
+    msgs = _ref.msgs,
+    onScrollTop = _ref.onScrollTop,
+    onScrollBottom = _ref.onScrollBottom,
+    _ref$loadingStarus = _ref.loadingStarus,
+    loadingStarus = _ref$loadingStarus === void 0 ? '' : _ref$loadingStarus,
+    myAccount = _ref.myAccount,
+    style = _ref.style,
+    recordSession = _ref.recordSession,
+    _ref$accountsMap = _ref.accountsMap,
+    accountsMap = _ref$accountsMap === void 0 ? {} : _ref$accountsMap,
+    _ref$isSessionEnd = _ref.isSessionEnd,
+    isSessionEnd = _ref$isSessionEnd === void 0 ? false : _ref$isSessionEnd;
+  var prefixCls = "chart-messages";
+  var onScrollHandler = debounce(function (e) {
+    var scrollElRef = ref;
+    if (!(scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current)) return;
+    var isBottom = scrollElRef.current.scrollTop >= scrollElRef.current.scrollHeight - scrollElRef.current.clientHeight - 20;
+    var isTop = scrollElRef.current.scrollTop < 20;
+    isTop && (onScrollTop === null || onScrollTop === void 0 ? void 0 : onScrollTop(e));
+    isBottom && (onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom(e));
+  }, 200);
+  var filteredMsgs = useMemo(function () {
+    return msgs.filter(function (msg) {
+      var _msg$attach, _msg$attach2;
+      return ((_msg$attach = msg.attach) === null || _msg$attach === void 0 ? void 0 : _msg$attach.type) === 'text' && (((_msg$attach2 = msg.attach) === null || _msg$attach2 === void 0 ? void 0 : _msg$attach2.content) || '').indexOf(searchValue) > -1;
+    });
+  }, [msgs, searchValue]);
+  var messagesToRender = searchValue ? filteredMsgs : msgs;
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls,
+    style: style || {}
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "".concat(prefixCls, "-content scrollmini"),
+    onScroll: onScrollHandler
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-status")
+  }, msgs.length < LOAD_LIMIT || !LOADING_STATUS[loadingStarus] ? null : LOADING_STATUS[loadingStarus]), messagesToRender.map(function (msg) {
+    return /*#__PURE__*/React.createElement("div", {
+      id: msg.idServer,
+      key: msg.idServer
+    }, /*#__PURE__*/React.createElement(ChatMessageItem, {
+      h5: h5,
+      keyword: searchValue || '',
+      myAccount: myAccount,
+      prefix: "".concat(prefixCls, "-item"),
+      msg: msg,
+      isSessionEnd: isSessionEnd,
+      recordSession: recordSession,
+      accountInfo: accountsMap[msg.from] || {}
+    }));
+  })));
+});
+export default ChatMessageList;

package/es/ChatMessageList/index.less

@@ -0,0 +1,34 @@
+@prefix: chart;
+
+.@{prefix}-messages {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  line-height: 1.2;
+  background-color: #f7f7f7;
+
+  &-input {
+    padding: 16px;
+    border-bottom: 1px solid #fff;
+  }
+
+  &-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ddd;
+    padding: 5px;
+  }
+
+  &-content {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+    position: relative;
+  }
+}

package/es/GoodsCard/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './index.less';
+declare const OrderCard: React.FC<{
+    prefix?: string;
+    suspend?: boolean;
+    onSend?: Function;
+    onClose?: Function;
+    content: {
+        productId: any;
+        relationId?: any;
+        relationType?: any;
+        orderProductId?: number;
+    };
+}>;
+export default OrderCard;

package/es/GoodsCard/index.js

@@ -0,0 +1,95 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { cardTagMap, fallbackImg } from '../common/const';
+import CardTag from '../CardTag';
+import { ImContext } from '..';
+import { fitUrl } from '../GoodsOrderCard';
+import './index.less';
+var OrderCard = function OrderCard(props) {
+  var _props$prefix = props.prefix,
+    prefix = _props$prefix === void 0 ? 'chart-messages-item' : _props$prefix,
+    content = props.content;
+  var productId = content.productId,
+    relationId = content.relationId,
+    relationType = content.relationType,
+    orderProductId = content.orderProductId;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useContext = useContext(ImContext),
+    api = _useContext.api;
+  useEffect(function () {
+    if (productId) {
+      api.getProductById({
+        productId: productId,
+        relationId: relationId,
+        relationType: relationType,
+        orderProductId: orderProductId
+      }).then(function (_ref) {
+        var data = _ref.data;
+        setData(data || {});
+      });
+    }
+  }, [productId]);
+  function onCardClick() {
+    // 现金
+    // https://cash.koudaiqifu.cn/1002855/product/product_info/87764307
+    // 积分
+    // https://jifen.koudaiqifu.cn/1003406/product/product_info/87799942
+    // https://jifen.koudaiqifu.cn/pcweb/goodsDetail/87876999
+    // 卡券
+    // http://cardjs.ufuly.cn/index.html#/8JmeYWGzdyI=/productDetail/87752904
+    // 1 积分 6 现金 7 礼包卡券
+    if (data.applicationId === 7) {
+      var _data$siteUrl;
+      if ((_data$siteUrl = data.siteUrl) === null || _data$siteUrl === void 0 ? void 0 : _data$siteUrl.includes('/display')) {
+        var url = fitUrl(data.siteUrl).replace('/display', "/productDetail/".concat(productId));
+        window.open(url, '_blank');
+      }
+    } else if (data.siteUrl) {
+      window.open("".concat(fitUrl(data.siteUrl), "/product/product_info/").concat(productId), '_blank');
+    }
+  }
+  var formatPrice = useMemo(function () {
+    if (data.priceType === 2) {
+      if (data.priceRangeMin && data.priceRangeMax) {
+        return "".concat(data.priceRangeMin, "-").concat(data.priceRangeMax, "\u5143");
+      }
+      return "".concat(data.price, "\u5143");
+    }
+    if (data.priceType === 1) {
+      var currencyStr = data.currencyStr || '积分';
+      if (data.minIntegralPrice && data.maxIntegralPrice && data.minIntegralPrice !== data.maxIntegralPrice) {
+        return "".concat(data.minIntegralPrice, "-").concat(data.maxIntegralPrice).concat(currencyStr);
+      }
+      return "".concat(data.integralPrice).concat(currencyStr);
+    }
+    return '';
+  }, [data]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-goods"),
+    onClick: function onClick() {
+      return onCardClick();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-goods-info")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-goods-info-img"),
+    style: {
+      background: "url(".concat(data.pic || fallbackImg, ") 0 0 / cover no-repeat")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-goods-info-right")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "one-line-text"
+  }, data.title), data.applicationId === 7 ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "-goods-info-price")
+  }, formatPrice)), /*#__PURE__*/React.createElement("div", null, data.supplierType && cardTagMap[data.supplierType] && /*#__PURE__*/React.createElement(CardTag, cardTagMap[data.supplierType])))));
+};
+export default OrderCard;

package/es/GoodsCard/index.less

@@ -0,0 +1,49 @@
+@prefix: chart-messages-item;
+
+.@{prefix}-goods {
+  max-width: 272px;
+  padding-bottom: 2px;
+  &-info {
+    display: flex;
+    flex-flow: row;
+    padding: 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #fff;
+    &-img {
+      flex-shrink: 0;
+      border-radius: 3px;
+      width: 72px;
+      height: 72px;
+      margin-right: 6px;
+      overflow: hidden;
+      object-fit: fill;
+    }
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+
+    &-right {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    &-price {
+      font-size: 12px;
+      font-weight: 600;
+      color: #e10b19;
+    }
+  }
+
+  &-tip {
+    margin-top: 5px;
+    height: 24px;
+    padding-left: 5px;
+    line-height: 24px;
+    background: rgba(225, 11, 25, 0.06);
+    border-radius: 4px;
+    color: #e10b19;
+    font-size: 12px;
+  }
+}

package/es/GoodsOrderCard/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RecordSession } from '../ChatMessageList';
+import './index.less';
+export declare function fitUrl(url: string): string;
+declare const GoodsOrderCard: React.FC<{
+    prefix?: string;
+    suspend?: boolean;
+    onSend?: Function;
+    onClose?: Function;
+    orderSn?: any;
+    orderId?: any;
+    recordSession?: RecordSession;
+}>;
+export default GoodsOrderCard;