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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/es/ChatMessageList/index.d.ts +1 -0
  2. package/es/ChatMessageList/index.js +12 -4
  3. package/es/index.d.ts +10 -0
  4. package/es/index.js +36 -2
  5. package/lib/ChatMessageList/index.d.ts +1 -0
  6. package/lib/ChatMessageList/index.js +15 -4
  7. package/lib/index.d.ts +10 -0
  8. package/lib/index.js +35 -2
  9. package/package.json +2 -2
package/es/ChatMessageList/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface RecordSession {
9
9
  relationType?: number;
10
10
  }
11
11
  export interface ChatMessageListProps {
12
+ searchValue?: string;
12
13
  h5?: boolean;
13
14
  msgs: IMMessage[];
14
15
  myAccount?: string;
package/es/ChatMessageList/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useMemo } from 'react';
2
2
  import ChatMessageItem from '../ChatMessageItem';
3
3
  import { debounce } from '../utils';
4
4
  import './index.less';
@@ -8,7 +8,8 @@ var LOADING_STATUS = {
8
8
  };
9
9
  var LOAD_LIMIT = 15;
10
10
  var ChatMessageList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
11
- var h5 = _ref.h5,
11
+ var searchValue = _ref.searchValue,
12
+ h5 = _ref.h5,
12
13
  msgs = _ref.msgs,
13
14
  onScrollTop = _ref.onScrollTop,
14
15
  onScrollBottom = _ref.onScrollBottom,
@@ -30,6 +31,13 @@ var ChatMessageList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
30
31
  isTop && (onScrollTop === null || onScrollTop === void 0 ? void 0 : onScrollTop(e));
31
32
  isBottom && (onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom(e));
32
33
  }, 200);
34
+ var filteredMsgs = useMemo(function () {
35
+ return msgs.filter(function (msg) {
36
+ var _msg$attach, _msg$attach2;
37
+ 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;
38
+ });
39
+ }, [msgs, searchValue]);
40
+ var messagesToRender = searchValue ? filteredMsgs : msgs;
33
41
  return /*#__PURE__*/React.createElement("div", {
34
42
  className: prefixCls,
35
43
  style: style || {}
@@ -39,13 +47,13 @@ var ChatMessageList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
39
47
  onScroll: onScrollHandler
40
48
  }, /*#__PURE__*/React.createElement("div", {
41
49
  className: "".concat(prefixCls, "-status")
42
- }, msgs.length < LOAD_LIMIT || !LOADING_STATUS[loadingStarus] ? null : LOADING_STATUS[loadingStarus]), msgs.map(function (msg) {
50
+ }, msgs.length < LOAD_LIMIT || !LOADING_STATUS[loadingStarus] ? null : LOADING_STATUS[loadingStarus]), messagesToRender.map(function (msg) {
43
51
  return /*#__PURE__*/React.createElement("div", {
44
52
  id: msg.idServer,
45
53
  key: msg.idServer
46
54
  }, /*#__PURE__*/React.createElement(ChatMessageItem, {
47
55
  h5: h5,
48
- keyword: '',
56
+ keyword: searchValue || '',
49
57
  myAccount: myAccount,
50
58
  prefix: "".concat(prefixCls, "-item"),
51
59
  msg: msg,
package/es/index.d.ts CHANGED
@@ -19,6 +19,16 @@ export interface IMRecordProps {
19
19
  style?: React.CSSProperties;
20
20
  isSessionEnd?: boolean;
21
21
  recordSession?: RecordSession;
22
+ /**是否显示搜索输入框 默认为false*/
23
+ showSearchInput?: boolean;
24
+ /**搜索事件,对外抛出搜索关键字*/
25
+ onSearch?: (keyword: string) => void;
26
+ /**搜索模式
27
+ * internal: 内部搜索 只对输入到组件内部的msgs进行搜索
28
+ * external: 外部搜索 只对外抛出搜索关键字,在外部搜索,从而改变输入到组件的msgs
29
+ * 默认为internal
30
+ */
31
+ searchMode?: 'internal' | 'external';
22
32
  }
23
33
  export interface ImContextProps {
24
34
  api: ReturnType<typeof apiCreate>;
package/es/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  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); }
2
- var _excluded = ["env", "token", "msgs", "recordSession"];
2
+ import "antd/es/input/style";
3
+ import _Input from "antd/es/input";
4
+ var _excluded = ["env", "token", "msgs", "recordSession", "showSearchInput", "searchMode", "onSearch"];
3
5
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
6
  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; }
5
7
  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; }
@@ -28,12 +30,21 @@ var IMRecord = function IMRecord(_ref) {
28
30
  token = _ref.token,
29
31
  msgs = _ref.msgs,
30
32
  recordSession = _ref.recordSession,
33
+ _ref$showSearchInput = _ref.showSearchInput,
34
+ showSearchInput = _ref$showSearchInput === void 0 ? false : _ref$showSearchInput,
35
+ _ref$searchMode = _ref.searchMode,
36
+ searchMode = _ref$searchMode === void 0 ? 'internal' : _ref$searchMode,
37
+ onSearch = _ref.onSearch,
31
38
  restProps = _objectWithoutProperties(_ref, _excluded);
32
39
  var api = apiCreate(env, token);
33
40
  var _useState = useState({}),
34
41
  _useState2 = _slicedToArray(_useState, 2),
35
42
  accountsMap = _useState2[0],
36
43
  setAccountsMap = _useState2[1];
44
+ var _useState3 = useState(),
45
+ _useState4 = _slicedToArray(_useState3, 2),
46
+ searchValue = _useState4[0],
47
+ setSearchValue = _useState4[1];
37
48
  var messageListDomRef = useRef(null);
38
49
  useEffect(function () {
39
50
  var accids = _toConsumableArray(new Set(msgs.map(function (x) {
@@ -43,6 +54,16 @@ var IMRecord = function IMRecord(_ref) {
43
54
  getAccountByAccids(accids);
44
55
  }
45
56
  }, [msgs]);
57
+ useEffect(function () {
58
+ var handler = setTimeout(function () {
59
+ if (onSearch && searchValue !== undefined) {
60
+ onSearch(searchValue); // 仅在external模式下触发onSearch
61
+ }
62
+ }, 300); // 300ms的防抖时间，可以根据需要调整
63
+ return function () {
64
+ clearTimeout(handler); // 清除上一次的定时器
65
+ };
66
+ }, [searchValue, searchMode, onSearch]);
46
67
  function getAccountByAccids(accids) {
47
68
  api.getAccountInfoByAccid({
48
69
  accids: accids
@@ -65,7 +86,20 @@ var IMRecord = function IMRecord(_ref) {
65
86
  value: {
66
87
  api: api
67
88
  }
68
- }, /*#__PURE__*/React.createElement(ChatMessageList, _extends({
89
+ }, showSearchInput && /*#__PURE__*/React.createElement("div", {
90
+ style: {
91
+ padding: 8,
92
+ backgroundColor: '#f7f7f7'
93
+ }
94
+ }, /*#__PURE__*/React.createElement(_Input, {
95
+ value: searchValue,
96
+ onChange: function onChange(e) {
97
+ return setSearchValue(e.target.value);
98
+ },
99
+ allowClear: true,
100
+ placeholder: "\u8F93\u5165\u5BF9\u8BDD\u5173\u952E\u8BCD\u641C\u7D22"
101
+ })), /*#__PURE__*/React.createElement(ChatMessageList, _extends({
102
+ searchValue: searchMode === 'internal' ? searchValue : undefined,
69
103
  ref: messageListDomRef,
70
104
  msgs: msgs,
71
105
  h5: true,
package/lib/ChatMessageList/index.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface RecordSession {
9
9
  relationType?: number;
10
10
  }
11
11
  export interface ChatMessageListProps {
12
+ searchValue?: string;
12
13
  h5?: boolean;
13
14
  msgs: IMMessage[];
14
15
  myAccount?: string;
package/lib/ChatMessageList/index.js CHANGED
@@ -1,21 +1,25 @@
1
1
  "use strict";
2
2
 
3
+ 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); }
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
+ var _react = _interopRequireWildcard(require("react"));
8
9
  var _ChatMessageItem = _interopRequireDefault(require("../ChatMessageItem"));
9
10
  var _utils = require("../utils");
10
11
  require("./index.less");
11
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
15
  var LOADING_STATUS = {
13
16
  loading: '加载中...',
14
17
  nomore: '没有更多了~'
15
18
  };
16
19
  var LOAD_LIMIT = 15;
17
20
  var ChatMessageList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
18
- var h5 = _ref.h5,
21
+ var searchValue = _ref.searchValue,
22
+ h5 = _ref.h5,
19
23
  msgs = _ref.msgs,
20
24
  onScrollTop = _ref.onScrollTop,
21
25
  onScrollBottom = _ref.onScrollBottom,
@@ -37,6 +41,13 @@ var ChatMessageList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
37
41
  isTop && (onScrollTop === null || onScrollTop === void 0 ? void 0 : onScrollTop(e));
38
42
  isBottom && (onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom(e));
39
43
  }, 200);
44
+ var filteredMsgs = (0, _react.useMemo)(function () {
45
+ return msgs.filter(function (msg) {
46
+ var _msg$attach, _msg$attach2;
47
+ 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;
48
+ });
49
+ }, [msgs, searchValue]);
50
+ var messagesToRender = searchValue ? filteredMsgs : msgs;
40
51
  return /*#__PURE__*/_react.default.createElement("div", {
41
52
  className: prefixCls,
42
53
  style: style || {}
@@ -46,13 +57,13 @@ var ChatMessageList = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
46
57
  onScroll: onScrollHandler
47
58
  }, /*#__PURE__*/_react.default.createElement("div", {
48
59
  className: "".concat(prefixCls, "-status")
49
- }, msgs.length < LOAD_LIMIT || !LOADING_STATUS[loadingStarus] ? null : LOADING_STATUS[loadingStarus]), msgs.map(function (msg) {
60
+ }, msgs.length < LOAD_LIMIT || !LOADING_STATUS[loadingStarus] ? null : LOADING_STATUS[loadingStarus]), messagesToRender.map(function (msg) {
50
61
  return /*#__PURE__*/_react.default.createElement("div", {
51
62
  id: msg.idServer,
52
63
  key: msg.idServer
53
64
  }, /*#__PURE__*/_react.default.createElement(_ChatMessageItem.default, {
54
65
  h5: h5,
55
- keyword: '',
66
+ keyword: searchValue || '',
56
67
  myAccount: myAccount,
57
68
  prefix: "".concat(prefixCls, "-item"),
58
69
  msg: msg,
package/lib/index.d.ts CHANGED
@@ -19,6 +19,16 @@ export interface IMRecordProps {
19
19
  style?: React.CSSProperties;
20
20
  isSessionEnd?: boolean;
21
21
  recordSession?: RecordSession;
22
+ /**是否显示搜索输入框 默认为false*/
23
+ showSearchInput?: boolean;
24
+ /**搜索事件,对外抛出搜索关键字*/
25
+ onSearch?: (keyword: string) => void;
26
+ /**搜索模式
27
+ * internal: 内部搜索 只对输入到组件内部的msgs进行搜索
28
+ * external: 外部搜索 只对外抛出搜索关键字,在外部搜索,从而改变输入到组件的msgs
29
+ * 默认为internal
30
+ */
31
+ searchMode?: 'internal' | 'external';
22
32
  }
23
33
  export interface ImContextProps {
24
34
  api: ReturnType<typeof apiCreate>;
package/lib/index.js CHANGED
@@ -8,8 +8,9 @@ exports.default = exports.ImContext = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _ChatMessageList = _interopRequireDefault(require("./ChatMessageList"));
10
10
  var _api = require("./api");
11
+ var _antd = require("antd");
11
12
  require("./styles/index.less");
12
- var _excluded = ["env", "token", "msgs", "recordSession"];
13
+ var _excluded = ["env", "token", "msgs", "recordSession", "showSearchInput", "searchMode", "onSearch"];
13
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,12 +38,21 @@ var IMRecord = function IMRecord(_ref) {
37
38
  token = _ref.token,
38
39
  msgs = _ref.msgs,
39
40
  recordSession = _ref.recordSession,
41
+ _ref$showSearchInput = _ref.showSearchInput,
42
+ showSearchInput = _ref$showSearchInput === void 0 ? false : _ref$showSearchInput,
43
+ _ref$searchMode = _ref.searchMode,
44
+ searchMode = _ref$searchMode === void 0 ? 'internal' : _ref$searchMode,
45
+ onSearch = _ref.onSearch,
40
46
  restProps = _objectWithoutProperties(_ref, _excluded);
41
47
  var api = (0, _api.apiCreate)(env, token);
42
48
  var _useState = (0, _react.useState)({}),
43
49
  _useState2 = _slicedToArray(_useState, 2),
44
50
  accountsMap = _useState2[0],
45
51
  setAccountsMap = _useState2[1];
52
+ var _useState3 = (0, _react.useState)(),
53
+ _useState4 = _slicedToArray(_useState3, 2),
54
+ searchValue = _useState4[0],
55
+ setSearchValue = _useState4[1];
46
56
  var messageListDomRef = (0, _react.useRef)(null);
47
57
  (0, _react.useEffect)(function () {
48
58
  var accids = _toConsumableArray(new Set(msgs.map(function (x) {
@@ -52,6 +62,16 @@ var IMRecord = function IMRecord(_ref) {
52
62
  getAccountByAccids(accids);
53
63
  }
54
64
  }, [msgs]);
65
+ (0, _react.useEffect)(function () {
66
+ var handler = setTimeout(function () {
67
+ if (onSearch && searchValue !== undefined) {
68
+ onSearch(searchValue); // 仅在external模式下触发onSearch
69
+ }
70
+ }, 300); // 300ms的防抖时间，可以根据需要调整
71
+ return function () {
72
+ clearTimeout(handler); // 清除上一次的定时器
73
+ };
74
+ }, [searchValue, searchMode, onSearch]);
55
75
  function getAccountByAccids(accids) {
56
76
  api.getAccountInfoByAccid({
57
77
  accids: accids
@@ -74,7 +94,20 @@ var IMRecord = function IMRecord(_ref) {
74
94
  value: {
75
95
  api: api
76
96
  }
77
- }, /*#__PURE__*/_react.default.createElement(_ChatMessageList.default, _extends({
97
+ }, showSearchInput && /*#__PURE__*/_react.default.createElement("div", {
98
+ style: {
99
+ padding: 8,
100
+ backgroundColor: '#f7f7f7'
101
+ }
102
+ }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
103
+ value: searchValue,
104
+ onChange: function onChange(e) {
105
+ return setSearchValue(e.target.value);
106
+ },
107
+ allowClear: true,
108
+ placeholder: "\u8F93\u5165\u5BF9\u8BDD\u5173\u952E\u8BCD\u641C\u7D22"
109
+ })), /*#__PURE__*/_react.default.createElement(_ChatMessageList.default, _extends({
110
+ searchValue: searchMode === 'internal' ? searchValue : undefined,
78
111
  ref: messageListDomRef,
79
112
  msgs: msgs,
80
113
  h5: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fle-ui/plus-im-record",
3
- "version": "0.0.8-beta.1",
3
+ "version": "0.0.8-beta.3",
4
4
  "description": "@fle-ui/plus-im-record",
5
5
  "keywords": [
6
6
  "fle-ui",
@@ -45,5 +45,5 @@
45
45
  "peerDependencies": {
46
46
  "react": ">=17.0.0"
47
47
  },
48
- "gitHead": "4bd791803dc3214ac5ed0ee7209f996b4e62eac7"
48
+ "gitHead": "8df4fb031a0dd746ad5e62f346ee7dd88278e297"
49
49
  }