@zohoim/chat-components 1.1.5 → 1.1.6-beta.2

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 (8) hide show
  1. package/README.md +5 -0
  2. package/es/Theme/TooltipWrapper.js +20 -20
  3. package/es/constants/index.js +3 -4
  4. package/es/im/ReplyComposer/ReplyComposer.js +3 -1
  5. package/lib/Theme/TooltipWrapper.js +28 -23
  6. package/lib/constants/index.js +4 -4
  7. package/lib/im/ReplyComposer/ReplyComposer.js +5 -1
  8. package/package.json +8 -8
package/README.md CHANGED
@@ -10,6 +10,11 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
10
10
 
11
11
  > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
12
12
 
13
+ # 1.1.6
14
+
15
+ - In the message component, MP3 format support has been added for some integrations.
16
+ - **ReplyComposer** Added support for bodyElement rendering.
17
+
13
18
  # 1.1.5
14
19
 
15
20
  - lib folder added
package/es/Theme/TooltipWrapper.js CHANGED
@@ -1,7 +1,7 @@
1
1
  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); }
2
2
 
3
3
  /** ** Libraries *** */
4
- import React from 'react';
4
+ import React, { useCallback, useEffect, useRef } from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  /** ** Components *** */
7
7
 
@@ -23,36 +23,32 @@ export default function TooltipWrapper(props) {
23
23
  getContainerRef,
24
24
  customStyle = dummyObject
25
25
  } = props;
26
- let timer = null;
27
- const tooltipRef = React.useRef(null);
26
+ const timerRef = useRef(null);
27
+ const tooltipRef = useRef(null);
28
28
  setLibraryConfig({
29
29
  getTooltipContainer: () => getContainerRef()
30
30
  });
31
-
32
- function handleMouseOverDispatch(e) {
31
+ const handleMouseOverDispatch = useCallback(e => {
33
32
  const containerRef = getContainerRef();
34
33
 
35
34
  if (tooltipRef && tooltipRef.current) {
36
35
  tooltipRef.current.handleOver(e, containerRef);
37
36
  }
38
- }
39
-
40
- function handleOver(e) {
41
- if (timer) {
42
- timer = clearTimeout(timer);
37
+ }, [getContainerRef]);
38
+ const handleOver = useCallback(e => {
39
+ if (timerRef.current) {
40
+ timerRef.current = clearTimeout(timerRef.current);
43
41
  }
44
42
 
45
- timer = setTimeout(() => handleMouseOverDispatch(e), getLibraryConfig('tooltipDebounce'));
46
- }
47
-
48
- function removeTimeout() {
49
- if (timer) {
50
- timer = clearTimeout(timer);
43
+ timerRef.current = setTimeout(() => handleMouseOverDispatch(e), getLibraryConfig('tooltipDebounce'));
44
+ }, [handleMouseOverDispatch]);
45
+ const removeTimeout = useCallback(() => {
46
+ if (timerRef.current) {
47
+ timerRef.current = clearTimeout(timerRef.current);
51
48
  }
52
- } // componentDidMount and componentWillUnmount case
49
+ }, []); // componentDidMount and componentWillUnmount case
53
50
 
54
-
55
- React.useEffect(() => {
51
+ useEffect(() => {
56
52
  const containerRef = getContainerRef();
57
53
 
58
54
  if (containerRef) {
@@ -62,11 +58,15 @@ export default function TooltipWrapper(props) {
62
58
  }
63
59
 
64
60
  return () => {
61
+ setLibraryConfig({
62
+ getTooltipContainer: () => null
63
+ });
64
+
65
65
  if (containerRef) {
66
66
  containerRef.removeEventListener('mouseover', handleOver, false);
67
67
  containerRef.removeEventListener('mouseout', removeTimeout, false); // eslint-disable-next-line react-hooks/exhaustive-deps
68
68
 
69
- tooltipRef.current.unObserveElement();
69
+ tooltipRef.current && tooltipRef.current.unObserveElement();
70
70
  }
71
71
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
72
72
  }, []);
package/es/constants/index.js CHANGED
@@ -1,8 +1,7 @@
1
1
  export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
2
2
  export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
3
3
  export const EDITOR_POPUP_TARGET_PORTAL = 'EDITOR_POPUP_TARGET_PORTAL';
4
- const version = '1.4.9';
4
+ const version = '1.4.13';
5
5
  export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
6
- // `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
7
- // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
8
- `https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;
6
+ `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`; // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
7
+ // `https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;
package/es/im/ReplyComposer/ReplyComposer.js CHANGED
@@ -49,6 +49,7 @@ export default function ReplyComposer(props) {
49
49
  onFileSubmit: propOnFileSubmit,
50
50
  attachmentPreviewTexts,
51
51
  renderHeader,
52
+ renderBody,
52
53
  renderFooter,
53
54
  renderStencils,
54
55
  getEditorState: propGetEditorState,
@@ -104,6 +105,7 @@ export default function ReplyComposer(props) {
104
105
  isLoaded
105
106
  }, newStyle);
106
107
  const headerElement = useMemo(() => renderHandler(renderHeader)(), [renderHeader]);
108
+ const bodyElement = useMemo(() => renderBody ? renderHandler(renderBody)() : null, [renderBody]);
107
109
  const stencilsElement = useMemo(() => isLoading ? renderHandler(renderStencils)({
108
110
  needFooter
109
111
  }) : null, [renderStencils, needFooter, isLoading]);
@@ -125,7 +127,7 @@ export default function ReplyComposer(props) {
125
127
  onDescriptionChange: onChangeFileDescription,
126
128
  onSubmit: onFileSubmit,
127
129
  texts: attachmentPreviewTexts
128
- }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
130
+ }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, bodyElement || /*#__PURE__*/React.createElement("div", {
129
131
  className: replEditorWrapperClass
130
132
  }, /*#__PURE__*/React.createElement(ReplyEditor, _extends({
131
133
  content: content,
package/lib/Theme/TooltipWrapper.js CHANGED
@@ -1,11 +1,13 @@
1
1
  "use strict";
2
2
 
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports["default"] = TooltipWrapper;
7
9
 
8
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
9
11
 
10
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
13
 
@@ -21,48 +23,46 @@ var _TooltipWrapperModule = _interopRequireDefault(require("./css/TooltipWrapper
21
23
 
22
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23
25
 
26
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
28
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
+
24
30
  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); }
25
31
 
26
32
  function TooltipWrapper(props) {
27
33
  var getContainerRef = props.getContainerRef,
28
34
  _props$customStyle = props.customStyle,
29
35
  customStyle = _props$customStyle === void 0 ? _emptyConstants.dummyObject : _props$customStyle;
30
- var timer = null;
31
-
32
- var tooltipRef = _react["default"].useRef(null);
33
-
36
+ var timerRef = (0, _react.useRef)(null);
37
+ var tooltipRef = (0, _react.useRef)(null);
34
38
  (0, _Config.setLibraryConfig)({
35
39
  getTooltipContainer: function getTooltipContainer() {
36
40
  return getContainerRef();
37
41
  }
38
42
  });
39
-
40
- function handleMouseOverDispatch(e) {
43
+ var handleMouseOverDispatch = (0, _react.useCallback)(function (e) {
41
44
  var containerRef = getContainerRef();
42
45
 
43
46
  if (tooltipRef && tooltipRef.current) {
44
47
  tooltipRef.current.handleOver(e, containerRef);
45
48
  }
46
- }
47
-
48
- function handleOver(e) {
49
- if (timer) {
50
- timer = clearTimeout(timer);
49
+ }, [getContainerRef]);
50
+ var handleOver = (0, _react.useCallback)(function (e) {
51
+ if (timerRef.current) {
52
+ timerRef.current = clearTimeout(timerRef.current);
51
53
  }
52
54
 
53
- timer = setTimeout(function () {
55
+ timerRef.current = setTimeout(function () {
54
56
  return handleMouseOverDispatch(e);
55
57
  }, (0, _Config.getLibraryConfig)('tooltipDebounce'));
56
- }
57
-
58
- function removeTimeout() {
59
- if (timer) {
60
- timer = clearTimeout(timer);
58
+ }, [handleMouseOverDispatch]);
59
+ var removeTimeout = (0, _react.useCallback)(function () {
60
+ if (timerRef.current) {
61
+ timerRef.current = clearTimeout(timerRef.current);
61
62
  }
62
- } // componentDidMount and componentWillUnmount case
63
-
63
+ }, []); // componentDidMount and componentWillUnmount case
64
64
 
65
- _react["default"].useEffect(function () {
65
+ (0, _react.useEffect)(function () {
66
66
  var containerRef = getContainerRef();
67
67
 
68
68
  if (containerRef) {
@@ -72,17 +72,22 @@ function TooltipWrapper(props) {
72
72
  }
73
73
 
74
74
  return function () {
75
+ (0, _Config.setLibraryConfig)({
76
+ getTooltipContainer: function getTooltipContainer() {
77
+ return null;
78
+ }
79
+ });
80
+
75
81
  if (containerRef) {
76
82
  containerRef.removeEventListener('mouseover', handleOver, false);
77
83
  containerRef.removeEventListener('mouseout', removeTimeout, false); // eslint-disable-next-line react-hooks/exhaustive-deps
78
84
 
79
- tooltipRef.current.unObserveElement();
85
+ tooltipRef.current && tooltipRef.current.unObserveElement();
80
86
  }
81
87
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
82
88
  }, []);
83
89
  /* External CSS Customization */
84
90
 
85
-
86
91
  var newStyle = (0, _useMergeStyle["default"])(_TooltipWrapperModule["default"], customStyle);
87
92
  return /*#__PURE__*/_react["default"].createElement("div", {
88
93
  className: newStyle.tooltipWrapper
package/lib/constants/index.js CHANGED
@@ -10,9 +10,9 @@ var EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
10
10
  exports.EDITOR_POPUP_PORTAL = EDITOR_POPUP_PORTAL;
11
11
  var EDITOR_POPUP_TARGET_PORTAL = 'EDITOR_POPUP_TARGET_PORTAL';
12
12
  exports.EDITOR_POPUP_TARGET_PORTAL = EDITOR_POPUP_TARGET_PORTAL;
13
- var version = '1.4.9';
13
+ var version = '1.4.13';
14
14
  var defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
15
- // `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
16
- // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
17
- "https://static.zohocdn.com/rtelibrary/".concat(version, "/js/rte.min.js");
15
+ "https://static.zohocdn.com/rtelibrary/".concat(version, "/js/rte.js"); // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;
16
+ // `https://static.zohocdn.com/rtelibrary/${version}/js/rte.min.js`;
17
+
18
18
  exports.defaultEditorURL = defaultEditorURL;
package/lib/im/ReplyComposer/ReplyComposer.js CHANGED
@@ -69,6 +69,7 @@ function ReplyComposer(props) {
69
69
  propOnFileSubmit = props.onFileSubmit,
70
70
  attachmentPreviewTexts = props.attachmentPreviewTexts,
71
71
  renderHeader = props.renderHeader,
72
+ renderBody = props.renderBody,
72
73
  renderFooter = props.renderFooter,
73
74
  renderStencils = props.renderStencils,
74
75
  propGetEditorState = props.getEditorState,
@@ -126,6 +127,9 @@ function ReplyComposer(props) {
126
127
  var headerElement = (0, _react.useMemo)(function () {
127
128
  return (0, _renderHandler["default"])(renderHeader)();
128
129
  }, [renderHeader]);
130
+ var bodyElement = (0, _react.useMemo)(function () {
131
+ return renderBody ? (0, _renderHandler["default"])(renderBody)() : null;
132
+ }, [renderBody]);
129
133
  var stencilsElement = (0, _react.useMemo)(function () {
130
134
  return isLoading ? (0, _renderHandler["default"])(renderStencils)({
131
135
  needFooter: needFooter
@@ -149,7 +153,7 @@ function ReplyComposer(props) {
149
153
  onDescriptionChange: onChangeFileDescription,
150
154
  onSubmit: onFileSubmit,
151
155
  texts: attachmentPreviewTexts
152
- }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/_react["default"].createElement("div", {
156
+ }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, bodyElement || /*#__PURE__*/_react["default"].createElement("div", {
153
157
  className: replEditorWrapperClass
154
158
  }, /*#__PURE__*/_react["default"].createElement(_ReplyEditor["default"], _extends({
155
159
  content: content,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "1.1.5",
3
+ "version": "1.1.6-beta.2",
4
4
  "description": "Chat Components",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -35,7 +35,7 @@
35
35
  "@zoho/SecurityJS": "7.2.4",
36
36
  "@zohodesk-private/color-variable-preprocessor": "1.2.1",
37
37
  "@zohodesk-private/css-variable-migrator": "1.0.8",
38
- "@zohodesk/a11y": "2.3.5",
38
+ "@zohodesk/a11y": "2.3.6",
39
39
  "@zohodesk/components": "1.4.3",
40
40
  "@zohodesk/hooks": "2.0.5",
41
41
  "@zohodesk/icon": "1.3.15",
@@ -45,8 +45,8 @@
45
45
  "@zohodesk/utils": "1.3.14",
46
46
  "@zohodesk/variables": "1.0.0",
47
47
  "@zohodesk/virtualizer": "1.0.13",
48
- "@zohoim/chat-components-hooks": "1.1.5",
49
- "@zohoim/chat-components-utils": "1.1.5",
48
+ "@zohoim/chat-components-hooks": "1.1.6-beta.2",
49
+ "@zohoim/chat-components-utils": "1.1.6-beta.2",
50
50
  "html-to-react": "1.7.0 ",
51
51
  "jsdom": "23.0.0",
52
52
  "react-sortable-hoc": "1.11.0",
@@ -55,7 +55,7 @@
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@zoho/SecurityJS": "7.2.4",
58
- "@zohodesk/a11y": "2.3.5",
58
+ "@zohodesk/a11y": "2.3.6",
59
59
  "@zohodesk/components": "1.4.3",
60
60
  "@zohodesk/hooks": "2.0.5",
61
61
  "@zohodesk/icon": "1.3.15",
@@ -65,10 +65,10 @@
65
65
  "@zohodesk/utils": "1.3.14",
66
66
  "@zohodesk/variables": "1.0.0",
67
67
  "@zohodesk/virtualizer": "1.0.13",
68
- "@zohoim/chat-components-hooks": "1.1.4-beta.2",
69
- "@zohoim/chat-components-utils": "1.1.4-beta.2",
68
+ "@zohoim/chat-components-hooks": "1.1.6",
69
+ "@zohoim/chat-components-utils": "1.1.6",
70
70
  "react-sortable-hoc": "1.11.0",
71
71
  "velocity-react": "1.4.3"
72
72
  },
73
- "gitHead": "6908c5dc26f36e0bc17fa00d3d3d8fd79d821c82"
73
+ "gitHead": "7f04c95dbf6b5ba4a0092135f4b02b981bc7c802"
74
74
  }