@zohoim/chat-components 1.0.9-beta.4 → 1.0.9-beta.5

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 (138) hide show
  1. package/es/AttachmentHandler/AttachmentHandler.js +84 -0
  2. package/es/AttachmentHandler/css/AttachmentHandler.module.css +27 -0
  3. package/es/AttachmentHandler/index.js +1 -0
  4. package/es/AttachmentHandler/props/defaultProps.js +10 -0
  5. package/es/AttachmentHandler/props/propTypes.js +17 -0
  6. package/es/AttachmentPreview/AttachmentPreview.js +115 -0
  7. package/es/AttachmentPreview/css/AttachmentPreview.module.css +39 -0
  8. package/es/AttachmentPreview/index.js +1 -0
  9. package/es/AttachmentPreview/props/defaultProps.js +8 -0
  10. package/es/AttachmentPreview/props/propTypes.js +32 -0
  11. package/es/AttachmentPreviewBody/AttachmentPreviewBody.js +81 -0
  12. package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +70 -0
  13. package/es/AttachmentPreviewBody/index.js +1 -0
  14. package/es/AttachmentPreviewBody/props/defaultProps.js +7 -0
  15. package/es/AttachmentPreviewBody/props/propTypes.js +20 -0
  16. package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js +84 -0
  17. package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +47 -0
  18. package/es/AttachmentPreviewHeader/index.js +1 -0
  19. package/es/AttachmentPreviewHeader/props/defaultProps.js +7 -0
  20. package/es/AttachmentPreviewHeader/props/propTypes.js +16 -0
  21. package/es/Emoji/Emoji.js +72 -0
  22. package/es/Emoji/css/Emoji.module.css +48 -0
  23. package/es/Emoji/css/cssJSLogic.js +18 -0
  24. package/es/Emoji/index.js +1 -0
  25. package/es/Emoji/props/defaultProps.js +8 -0
  26. package/es/Emoji/props/propTypes.js +16 -0
  27. package/es/EmojiPopup/EmojiPopup.js +116 -0
  28. package/es/EmojiPopup/css/EmojiPopup.module.css +55 -0
  29. package/es/EmojiPopup/index.js +1 -0
  30. package/es/EmojiPopup/props/defaultProps.js +11 -0
  31. package/es/EmojiPopup/props/propTypes.js +21 -0
  32. package/es/Emojis/Emojis.js +79 -0
  33. package/es/Emojis/index.js +1 -0
  34. package/es/Emojis/props/defaultProps.js +10 -0
  35. package/es/Emojis/props/propTypes.js +19 -0
  36. package/es/EmojisEmptyState/EmojisEmptyState.js +50 -0
  37. package/es/EmojisEmptyState/css/EmojisEmptyState.module.css +18 -0
  38. package/es/EmojisEmptyState/index.js +1 -0
  39. package/es/EmojisEmptyState/props/defaultProps.js +9 -0
  40. package/es/EmojisEmptyState/props/propTypes.js +8 -0
  41. package/es/EmojisFooter/EmojisFooter.js +71 -0
  42. package/es/EmojisFooter/css/EmojisFooter.module.css +40 -0
  43. package/es/EmojisFooter/index.js +1 -0
  44. package/es/EmojisFooter/props/defaultProps.js +7 -0
  45. package/es/EmojisFooter/props/propTypes.js +12 -0
  46. package/es/EmojisHeader/EmojisHeader.js +65 -0
  47. package/es/EmojisHeader/css/EmojisHeader.module.css +36 -0
  48. package/es/EmojisHeader/index.js +1 -0
  49. package/es/EmojisHeader/props/defaultProps.js +8 -0
  50. package/es/EmojisHeader/props/propTypes.js +13 -0
  51. package/es/EmojisList/EmojisList.js +130 -0
  52. package/es/EmojisList/css/EmojisList.module.css +50 -0
  53. package/es/EmojisList/css/cssJSLogic.js +25 -0
  54. package/es/EmojisList/index.js +1 -0
  55. package/es/EmojisList/props/defaultProps.js +10 -0
  56. package/es/EmojisList/props/propTypes.js +20 -0
  57. package/es/Message/Message.js +2 -8
  58. package/es/MessageActions/MessageActions.js +0 -2
  59. package/es/MessageActions/props/propTypes.js +1 -2
  60. package/es/MessageActionsMore/MessageActionsMore.js +3 -5
  61. package/es/MessageActionsMore/props/propTypes.js +5 -3
  62. package/es/MessageActionsWrapper/MessageActionsWrapper.js +4 -7
  63. package/es/MessageActionsWrapper/props/propTypes.js +1 -2
  64. package/es/MessageBubble/css/MessageBubble.module.css +7 -0
  65. package/es/MessageBubble/props/defaultProps.js +1 -2
  66. package/es/MessageBubble/props/propTypes.js +1 -2
  67. package/es/Theme/ThemeAssets.js +2 -2
  68. package/es/Theme/ThemeWrapper.js +18 -7
  69. package/es/Theme/TooltipWrapper.js +1 -1
  70. package/es/Theme/props/defaultProps.js +2 -1
  71. package/es/Theme/props/propTypes.js +2 -1
  72. package/es/Theme/themeVariables/dark/blueTheme.js +18 -1
  73. package/es/Theme/themeVariables/dark/commonColorVariable.js +20 -1
  74. package/es/Theme/themeVariables/dark/greenTheme.js +18 -1
  75. package/es/Theme/themeVariables/dark/orangeTheme.js +18 -1
  76. package/es/Theme/themeVariables/dark/redTheme.js +18 -1
  77. package/es/Theme/themeVariables/dark/yellowTheme.js +18 -1
  78. package/es/Theme/themeVariables/light/blueTheme.js +22 -1
  79. package/es/Theme/themeVariables/light/commonColorVariable.js +19 -0
  80. package/es/Theme/themeVariables/light/greenTheme.js +18 -1
  81. package/es/Theme/themeVariables/light/orangeTheme.js +18 -1
  82. package/es/Theme/themeVariables/light/redTheme.js +18 -1
  83. package/es/Theme/themeVariables/light/yellowTheme.js +18 -1
  84. package/es/Theme/themeVariables/pureDark/blueTheme.js +18 -1
  85. package/es/Theme/themeVariables/pureDark/commonColorVariable.js +20 -1
  86. package/es/Theme/themeVariables/pureDark/greenTheme.js +18 -1
  87. package/es/Theme/themeVariables/pureDark/orangeTheme.js +18 -1
  88. package/es/Theme/themeVariables/pureDark/redTheme.js +18 -1
  89. package/es/Theme/themeVariables/pureDark/yellowTheme.js +18 -1
  90. package/es/Theme/utils/getThemeConfigurations.js +1 -1
  91. package/es/constants/index.js +7 -1
  92. package/es/constants/propConstants/editorPropConstants.js +3 -0
  93. package/es/constants/propConstants/popupPropConstants.js +2 -0
  94. package/es/im/IMAttachmentHandler/IMAttachmentHandler.js +50 -0
  95. package/es/im/IMAttachmentHandler/index.js +1 -0
  96. package/es/im/IMAttachmentHandler/props/defaultProps.js +10 -0
  97. package/es/im/IMAttachmentHandler/props/propTypes.js +28 -0
  98. package/es/im/ReplyComposer/ReplyComposer.js +137 -0
  99. package/es/im/ReplyComposer/css/ReplyComposer.module.css +5 -0
  100. package/es/im/ReplyComposer/index.js +1 -0
  101. package/es/im/ReplyComposer/props/defaultProps.js +7 -0
  102. package/es/im/ReplyComposer/props/propTypes.js +60 -0
  103. package/es/im/ReplyComposerFooter/ReplyComposerFooter.js +41 -0
  104. package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css +10 -0
  105. package/es/im/ReplyComposerFooter/index.js +1 -0
  106. package/es/im/ReplyComposerFooter/props/defaultProps.js +8 -0
  107. package/es/im/ReplyComposerFooter/props/propTypes.js +17 -0
  108. package/es/im/ReplyEditor/ReplyEditor.js +103 -0
  109. package/es/im/ReplyEditor/css/ReplyEditor.module.css +48 -0
  110. package/es/im/ReplyEditor/css/cssJSLogic.js +10 -0
  111. package/es/im/ReplyEditor/index.js +1 -0
  112. package/es/im/ReplyEditor/props/defaultProps.js +8 -0
  113. package/es/im/ReplyEditor/props/propTypes.js +27 -0
  114. package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js +149 -0
  115. package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css +5 -0
  116. package/es/im/ReplyEditorExtensions/index.js +1 -0
  117. package/es/im/ReplyEditorExtensions/props/defaultProps.js +6 -0
  118. package/es/im/ReplyEditorExtensions/props/propTypes.js +16 -0
  119. package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js +93 -0
  120. package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css +8 -0
  121. package/es/im/ReplyEditorSuggestions/index.js +1 -0
  122. package/es/im/ReplyEditorSuggestions/props/defaultProps.js +6 -0
  123. package/es/im/ReplyEditorSuggestions/props/propTypes.js +21 -0
  124. package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js +91 -0
  125. package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css +7 -0
  126. package/es/im/ReplyEditorSuggestionsPopup/index.js +1 -0
  127. package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js +10 -0
  128. package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js +21 -0
  129. package/es/im/index.js +8 -1
  130. package/es/index.js +13 -2
  131. package/es/rte/Editor/Editor.js +80 -0
  132. package/es/rte/Editor/css/Editor.module.css +17 -0
  133. package/es/rte/Editor/index.js +1 -0
  134. package/es/rte/Editor/props/defaultProps.js +21 -0
  135. package/es/rte/Editor/props/propTypes.js +52 -0
  136. package/es/rte/index.js +1 -0
  137. package/package.json +7 -7
  138. package/es/Theme/constants/index.js +0 -41
@@ -0,0 +1,84 @@
1
+ /** ** Libraries *** */
2
+ import React, { useMemo } from 'react';
3
+ /** ** Component *** */
4
+
5
+ import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
6
+ import { Container } from '@zohodesk/components/es/Layout';
7
+ /** ** Hooks *** */
8
+
9
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
10
+ import useAttachmentHandler from '@zohoim/chat-components-hooks/es/AttachmentHandler/useAttachmentHandler';
11
+ /** ** Constants *** */
12
+
13
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
14
+ import attachmentHandlerDefaultProps from "./props/defaultProps";
15
+ import attachmentHandlerPropTypes from "./props/propTypes";
16
+ /** ** Methods *** */
17
+
18
+ import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
19
+ /** ** Styles *** */
20
+
21
+ import style from "./css/AttachmentHandler.module.css";
22
+ export default function AttachmentHandler(props) {
23
+ const {
24
+ customStyle,
25
+ iconName,
26
+ iconSize,
27
+ iconTitle,
28
+ renderCustomIcon,
29
+ getRef: propGetRef,
30
+ supportedFileTypes,
31
+ isMultiAttachment,
32
+ onAttach: propOnAttach,
33
+ customProps = dummyObject
34
+ } = props;
35
+ const {
36
+ inputProps = dummyObject
37
+ } = customProps;
38
+ const {
39
+ onAttach,
40
+ onAttachmentClick,
41
+ getRef
42
+ } = useAttachmentHandler({
43
+ onAttach: propOnAttach,
44
+ getRef: propGetRef
45
+ });
46
+ /* External customization */
47
+
48
+ const newStyle = useMergeStyle(style, customStyle);
49
+ const inputEl = useMemo(() => /*#__PURE__*/React.createElement("input", {
50
+ ref: getRef,
51
+ accept: supportedFileTypes,
52
+ hidden: true,
53
+ multiple: isMultiAttachment,
54
+ onChange: onAttach,
55
+ size: "1",
56
+ type: "file",
57
+ ...inputProps
58
+ }), [supportedFileTypes, getRef, onAttach, isMultiAttachment, inputProps]);
59
+ const customIcon = useMemo(() => {
60
+ /* Render Custom Icon */
61
+ const icon = renderHandler(renderCustomIcon)({
62
+ onClick: onAttachmentClick
63
+ });
64
+
65
+ if (icon) {
66
+ return /*#__PURE__*/React.createElement(React.Fragment, null, icon, inputEl);
67
+ }
68
+
69
+ return null;
70
+ }, [renderCustomIcon, onAttachmentClick, inputEl]);
71
+ return /*#__PURE__*/React.createElement(Container, {
72
+ alignBox: "column"
73
+ }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
74
+ className: newStyle.iconButton,
75
+ iconClass: newStyle.icon,
76
+ iconName: iconName,
77
+ iconSize: iconSize,
78
+ onClick: onAttachmentClick,
79
+ title: iconTitle
80
+ }, inputEl));
81
+ }
82
+ AttachmentHandler.propTypes = attachmentHandlerPropTypes;
83
+ AttachmentHandler.defaultProps = attachmentHandlerDefaultProps;
84
+ AttachmentHandler.displayName = 'AttachmentHandler';
@@ -0,0 +1,27 @@
1
+ /** ** Styles *** */
2
+
3
+ .attachmentHandler {
4
+ /** ** Use this class for css customisation *** */
5
+ }
6
+
7
+ [dir=ltr] .iconButton {
8
+ margin-right: var(--zd_size5) ;
9
+ }
10
+
11
+ [dir=rtl] .iconButton {
12
+ margin-left: var(--zd_size5) ;
13
+ }
14
+
15
+ .icon {
16
+ color: initial;
17
+ }
18
+
19
+
20
+ .icon :global .path1:before {
21
+ color: var(--imlib_chat_components_emojiPopup_ttIcon_path1_color) !important;
22
+ opacity: 1;
23
+ }
24
+
25
+ .icon :global .path2:before {
26
+ color: var(--imlib_chat_components_emojiPopup_ttIcon_path2_color) !important;
27
+ }
@@ -0,0 +1 @@
1
+ export { default as AttachmentHandler } from "./AttachmentHandler";
@@ -0,0 +1,10 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
+ const attachmentHandlerDefaultProps = {
4
+ customStyle: dummyObject,
5
+ iconName: 'ZD-TT-image',
6
+ iconSize: '14',
7
+ iconTitle: 'Upload',
8
+ isMultiAttachment: false
9
+ };
10
+ export default attachmentHandlerDefaultProps;
@@ -0,0 +1,17 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const attachmentHandlerPropTypes = {
4
+ customStyle: PropTypes.object,
5
+ iconName: PropTypes.string.isRequired,
6
+ iconSize: PropTypes.number,
7
+ iconTitle: PropTypes.string,
8
+ renderCustomIcon: PropTypes.func,
9
+ getRef: PropTypes.func,
10
+ supportedFileTypes: PropTypes.string,
11
+ isMultiAttachment: PropTypes.bool,
12
+ onAttach: PropTypes.func.isRequired,
13
+ customProps: PropTypes.shape({
14
+ inputProps: PropTypes.object
15
+ })
16
+ };
17
+ export default attachmentHandlerPropTypes;
@@ -0,0 +1,115 @@
1
+ /* eslint-disable max-len */
2
+
3
+ /** ** Libraries *** */
4
+ import React, { useMemo } from 'react';
5
+ /** ** Components *** */
6
+
7
+ import { Container, Box } from '@zohodesk/components/es/Layout';
8
+ import AttachmentPreviewHeader from "../AttachmentPreviewHeader/AttachmentPreviewHeader";
9
+ import AttachmentPreviewBody from "../AttachmentPreviewBody/AttachmentPreviewBody";
10
+ /** ** Hooks *** */
11
+
12
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
13
+ import useAttachmentPreview from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreview';
14
+ import useAttachmentPreviewEditor from '@zohoim/chat-components-hooks/es/AttachmentPreview/useAttachmentPreviewEditor';
15
+ /** ** Constants *** */
16
+
17
+ import attachmentPreviewDefaultProps from "./props/defaultProps";
18
+ import attachmentPreviewPropTypes from "./props/propTypes";
19
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
20
+ import { mediaTypes } from '@zohoim/chat-components-utils/es/constants/messageConstants';
21
+ /** ** Styles *** */
22
+
23
+ import style from "./css/AttachmentPreview.module.css";
24
+ const {
25
+ IMAGE
26
+ } = mediaTypes;
27
+ export default function AttachmentPreview(props) {
28
+ const {
29
+ customStyle,
30
+ isDescriptionNeeded,
31
+ files,
32
+ customProps,
33
+ onSubmit,
34
+ onCancel,
35
+ texts,
36
+ descriptionDetails,
37
+ onDescriptionChange: propOnDescriptionChange,
38
+ needCloseOnEscape,
39
+ needUploadOnEnter
40
+ } = props;
41
+ const {
42
+ editorProps = dummyObject,
43
+ attachmentPreviewHeaderProps = dummyObject,
44
+ attachmentPreviewBodyProps = dummyObject
45
+ } = customProps || dummyObject;
46
+ const {
47
+ submitText = 'Submit',
48
+ cancelText = 'Cancel',
49
+ placeHolder = 'Add a description for the image'
50
+ } = texts || dummyObject;
51
+ /* External customization */
52
+
53
+ const newStyle = useMergeStyle(style, customStyle);
54
+ const {
55
+ selectedFile,
56
+ isShow,
57
+ description,
58
+ onDescriptionChange,
59
+ onEscape
60
+ } = useAttachmentPreview({
61
+ files,
62
+ onDescriptionChange: propOnDescriptionChange,
63
+ descriptionDetails,
64
+ needCloseOnEscape,
65
+ onCancel
66
+ });
67
+ const {
68
+ onEditorKeyDown
69
+ } = useAttachmentPreviewEditor({
70
+ editorProps,
71
+ onPreviewPopupKeyDown: onEscape,
72
+ needUploadOnEnter,
73
+ onSubmit
74
+ });
75
+ const {
76
+ fileName,
77
+ formattedFileSize: fileSize,
78
+ attachmentURL,
79
+ fileFormat,
80
+ mediaType,
81
+ attachmentId
82
+ } = selectedFile;
83
+ const isImageFile = useMemo(() => mediaType === IMAGE, [mediaType]);
84
+ return isShow ? /*#__PURE__*/React.createElement(Container, {
85
+ align: "both",
86
+ alignBox: "column",
87
+ className: newStyle.attachmentPreview
88
+ }, /*#__PURE__*/React.createElement("div", {
89
+ className: newStyle.uploadPrev
90
+ }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewHeader, {
91
+ cancelText: cancelText,
92
+ fileName: fileName,
93
+ fileSize: fileSize,
94
+ onCancel: onCancel,
95
+ onSubmit: onSubmit,
96
+ submitText: submitText,
97
+ ...attachmentPreviewHeaderProps
98
+ })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AttachmentPreviewBody, {
99
+ attachmentId: attachmentId,
100
+ attachmentURL: attachmentURL,
101
+ description: description,
102
+ editorProps: editorProps,
103
+ fileFormat: fileFormat,
104
+ isDescriptionNeeded: isDescriptionNeeded,
105
+ isImageFile: isImageFile,
106
+ mediaType: mediaType,
107
+ onDescriptionChange: onDescriptionChange,
108
+ onEditorKeyDown: onEditorKeyDown,
109
+ placeHolder: placeHolder,
110
+ ...attachmentPreviewBodyProps
111
+ })))) : null;
112
+ }
113
+ AttachmentPreview.propTypes = attachmentPreviewPropTypes;
114
+ AttachmentPreview.defaultProps = attachmentPreviewDefaultProps;
115
+ AttachmentPreview.displayName = 'AttachmentPreview';
@@ -0,0 +1,39 @@
1
+ /** ** Styles *** */
2
+ .attachmentPreview {
3
+ position: fixed;
4
+ top: 0 ;
5
+ bottom: 0 ;
6
+ z-index: 2147483643;
7
+ overflow: hidden;
8
+ background-color: rgba(42, 45, 54, 0.94);
9
+ }
10
+ [dir=ltr] .attachmentPreview {
11
+ animation: scaleIn 0.3s ease;
12
+ right: 0 ;
13
+ left: 0 ;
14
+ }
15
+ [dir=rtl] .attachmentPreview {
16
+ animation: scaleIn 0.3s ease;
17
+ left: 0 ;
18
+ right: 0 ;
19
+ }
20
+
21
+ @keyframes scaleIn {
22
+ 0% {
23
+ -webkit-transform: scale(0.9);
24
+ transform: scale(0.9);
25
+ opacity: .7
26
+ }
27
+
28
+ 100% {
29
+ -webkit-transform: scale(1);
30
+ transform: scale(1);
31
+ opacity: 1
32
+ }
33
+ }
34
+
35
+ .uploadPrev {
36
+ width: 100% ;
37
+ max-width: 43.75rem;
38
+ border-radius: 5px;
39
+ }
@@ -0,0 +1 @@
1
+ export { default as AttachmentPreview } from "./AttachmentPreview";
@@ -0,0 +1,8 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
3
+ const attachmentPreviewDefaultProps = {
4
+ customStyle: dummyObject,
5
+ needCloseOnEscape: true,
6
+ needUploadOnEnter: true
7
+ };
8
+ export default attachmentPreviewDefaultProps;
@@ -0,0 +1,32 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const attachmentPreviewPropTypes = {
4
+ customStyle: PropTypes.object,
5
+ isDescriptionNeeded: PropTypes.bool,
6
+ files: PropTypes.arrayOf(PropTypes.shape({
7
+ id: PropTypes.string,
8
+ name: PropTypes.string,
9
+ size: PropTypes.string,
10
+ type: PropTypes.string,
11
+ url: PropTypes.string
12
+ })).isRequired,
13
+ customProps: PropTypes.shape({
14
+ attachmentIconProps: PropTypes.object,
15
+ cancelButtonProps: PropTypes.object,
16
+ editorProps: PropTypes.object,
17
+ submitButtonProps: PropTypes.object
18
+ }),
19
+ onSubmit: PropTypes.func,
20
+ onCancel: PropTypes.func,
21
+ texts: PropTypes.shape({
22
+ cancelText: PropTypes.string,
23
+ editText: PropTypes.string,
24
+ placeHolder: PropTypes.string,
25
+ submitText: PropTypes.string
26
+ }).isRequired,
27
+ descriptionDetails: PropTypes.object,
28
+ onDescriptionChange: PropTypes.func,
29
+ needCloseOnEscape: PropTypes.bool,
30
+ needUploadOnEnter: PropTypes.bool
31
+ };
32
+ export default attachmentPreviewPropTypes;
@@ -0,0 +1,81 @@
1
+ /** ** Libraries *** */
2
+ import React, { useMemo } from 'react';
3
+ /** ** Components *** */
4
+
5
+ import { Container } from '@zohodesk/components/es/Layout';
6
+ import ReplyEditor from "../im/ReplyEditor/ReplyEditor";
7
+ import AttachmentIcon from "../AttachmentIcon/AttachmentIcon";
8
+ /** ** Hooks *** */
9
+
10
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
11
+ /** ** Constants *** */
12
+
13
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
14
+ import attachmentPreviewBodyDefaultProps from "./props/defaultProps";
15
+ import attachmentPreviewBodyPropTypes from "./props/propTypes";
16
+ /** ** Styles *** */
17
+
18
+ import style from "./css/AttachmentPreviewBody.module.css";
19
+ export default function AttachmentPreviewBody(props) {
20
+ const {
21
+ customStyle,
22
+ customProps,
23
+ isImageFile,
24
+ attachmentURL,
25
+ fileFormat,
26
+ mediaType,
27
+ isDescriptionNeeded,
28
+ description,
29
+ attachmentId,
30
+ onDescriptionChange,
31
+ onEditorKeyDown,
32
+ placeHolder,
33
+ editorProps
34
+ } = props;
35
+ const {
36
+ attachmentIconProps = dummyObject
37
+ } = customProps || {};
38
+ /* External customization */
39
+
40
+ const newStyle = useMergeStyle(style, customStyle);
41
+ const iconCustomStyle = useMemo(() => ({
42
+ icon: newStyle.attachmentIcon
43
+ }), [newStyle.attachmentIcon]);
44
+ const editorCustomStyle = useMemo(() => ({
45
+ editorWrapper: newStyle.editorWrapper,
46
+ editableDiv: newStyle.editableDiv
47
+ }), [newStyle.editorWrapper, newStyle.editableDiv]);
48
+ const editorCustomProps = useMemo(() => ({
49
+ editorProps: {
50
+ needAutoFocus: true,
51
+ ...editorProps
52
+ }
53
+ }), [editorProps]);
54
+ return /*#__PURE__*/React.createElement(Container, {
55
+ align: "both",
56
+ alignBox: "column",
57
+ className: `${newStyle.zoomContent} ${newStyle.imgContent}`
58
+ }, /*#__PURE__*/React.createElement("div", {
59
+ className: newStyle.fileContainer
60
+ }, isImageFile ? /*#__PURE__*/React.createElement("img", {
61
+ alt: "",
62
+ className: newStyle.imgZoomOut,
63
+ src: attachmentURL
64
+ }) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AttachmentIcon, {
65
+ customStyle: iconCustomStyle,
66
+ fileFormat: fileFormat,
67
+ mediaType: mediaType,
68
+ ...attachmentIconProps
69
+ }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyEditor, {
70
+ content: description,
71
+ customProps: editorCustomProps,
72
+ customStyle: editorCustomStyle,
73
+ id: `${attachmentId}_Attach_Editor`,
74
+ onChange: onDescriptionChange,
75
+ onKeyDown: onEditorKeyDown,
76
+ placeHolder: placeHolder
77
+ }) : null);
78
+ }
79
+ AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;
80
+ AttachmentPreviewBody.defaultProps = attachmentPreviewBodyDefaultProps;
81
+ AttachmentPreviewBody.displayName = 'AttachmentPreviewBody';
@@ -0,0 +1,70 @@
1
+ /** ** Styles *** */
2
+ .attachmentIcon {
3
+ width: var(--zd_size60) !important;
4
+ height: var(--zd_size60) !important;
5
+ }
6
+
7
+ .editorWrapper {
8
+ display: flex;
9
+ flex-direction: column;
10
+ height: 100% ;
11
+ width: 100% ;
12
+ padding: 0 ;
13
+ margin-top: var(--zd_size40) ;
14
+ }
15
+
16
+ .editableDiv {
17
+ min-height: var(--zd_size48) !important;
18
+ max-height: var(--zd_size48) !important;
19
+ background-color: transparent !important;
20
+ border: 0 !important;
21
+ border-bottom: 1px solid
22
+ var(--imlib_chat_components_attachmentPreviewBody_editor_border_color) !important;
23
+ }
24
+
25
+ .editableDiv:hover {
26
+ border-color: var(
27
+ --imlib_chat_components_attachmentPreviewBody_editor_border_hover_color
28
+ ) !important;
29
+ }
30
+
31
+ .editableDiv:focus {
32
+ border-color: var(
33
+ --imlib_chat_components_attachmentPreviewBody_editor_border_active_color
34
+ ) !important;
35
+ }
36
+
37
+ .imgContent,
38
+ .zoomContent {
39
+ overflow: auto;
40
+ position: relative;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ .imgContent, .zoomContent {
45
+ background-color: var(--imlib_chat_components_attachmentPreviewBody_bg_color);
46
+ padding: var(--zd_size40);
47
+ }
48
+
49
+ [dir=ltr] .imgContent, [dir=ltr] .zoomContent {
50
+ border-bottom-left-radius: var(--zd_size5);
51
+ border-bottom-right-radius: var(--zd_size5);
52
+ }
53
+
54
+ [dir=rtl] .imgContent, [dir=rtl] .zoomContent {
55
+ border-bottom-right-radius: var(--zd_size5);
56
+ border-bottom-left-radius: var(--zd_size5);
57
+ }
58
+
59
+ .fileContainer {
60
+ height: var(--zd_size225);
61
+ composes: dflex from '~@zohodesk/components/es/common/common.module.css';
62
+ composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
63
+ composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
64
+ }
65
+
66
+ .imgZoomOut {
67
+ width: auto ;
68
+ max-width: 100% ;
69
+ max-height: 100% ;
70
+ }
@@ -0,0 +1 @@
1
+ export { default as AttachmentPreviewBody } from "./AttachmentPreviewBody";
@@ -0,0 +1,7 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
+ const attachmentPreviewBodyDefaultProps = {
4
+ customStyle: dummyObject,
5
+ customProps: dummyObject
6
+ };
7
+ export default attachmentPreviewBodyDefaultProps;
@@ -0,0 +1,20 @@
1
+ /** ** Libraries *** */
2
+ import PropTypes from 'prop-types';
3
+ const attachmentPreviewBodyPropTypes = {
4
+ customStyle: PropTypes.object,
5
+ customProps: PropTypes.shape({
6
+ attachmentIconProps: PropTypes.object
7
+ }),
8
+ isImageFile: PropTypes.bool,
9
+ attachmentURL: PropTypes.string,
10
+ fileFormat: PropTypes.string,
11
+ mediaType: PropTypes.string,
12
+ isDescriptionNeeded: PropTypes.bool,
13
+ description: PropTypes.string,
14
+ attachmentId: PropTypes.string,
15
+ onDescriptionChange: PropTypes.func,
16
+ onEditorKeyDown: PropTypes.func,
17
+ placeHolder: PropTypes.string,
18
+ editorProps: PropTypes.object
19
+ };
20
+ export default attachmentPreviewBodyPropTypes;
@@ -0,0 +1,84 @@
1
+ /** ** Libraries *** */
2
+ import React from 'react';
3
+ /** ** Components *** */
4
+
5
+ import { Container, Box } from '@zohodesk/components/es/Layout';
6
+ import Button from '@zohodesk/components/es/Button/Button';
7
+ /** ** Hooks *** */
8
+
9
+ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
10
+ /** ** Constants *** */
11
+
12
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
13
+ import attachmentPreviewHeaderDefaultProps from "./props/defaultProps";
14
+ import attachmentPreviewHeaderPropTypes from "./props/propTypes";
15
+ /** ** Styles *** */
16
+
17
+ import style from "./css/AttachmentPreviewHeader.module.css";
18
+ export default function AttachmentPreviewHeader(props) {
19
+ const {
20
+ customStyle,
21
+ fileName,
22
+ fileSize,
23
+ submitText,
24
+ cancelText,
25
+ onSubmit,
26
+ onCancel,
27
+ customProps
28
+ } = props;
29
+ const {
30
+ submitButtonProps = dummyObject,
31
+ cancelButtonProps = dummyObject
32
+ } = customProps || {};
33
+ /* External customization */
34
+
35
+ const newStyle = useMergeStyle(style, customStyle);
36
+ return /*#__PURE__*/React.createElement(Container, {
37
+ align: "vertical",
38
+ alignBox: "row",
39
+ className: newStyle.imgPreviewerheader,
40
+ isCover: false
41
+ }, /*#__PURE__*/React.createElement(Box, {
42
+ flexible: true
43
+ }, /*#__PURE__*/React.createElement(Container, {
44
+ align: "vertical",
45
+ alignBox: "row"
46
+ }, /*#__PURE__*/React.createElement(Box, {
47
+ flexible: true
48
+ }, /*#__PURE__*/React.createElement("div", {
49
+ className: newStyle.imgName,
50
+ title: fileName
51
+ }, fileName), /*#__PURE__*/React.createElement("div", {
52
+ className: newStyle.imgSize
53
+ }, fileSize)))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
54
+ align: "vertical",
55
+ alignBox: "row",
56
+ className: newStyle.navIcon,
57
+ isCover: false
58
+ }, /*#__PURE__*/React.createElement("span", {
59
+ className: newStyle.attachBtn
60
+ }, /*#__PURE__*/React.createElement(Button, {
61
+ disabled: false,
62
+ isBold: true,
63
+ onClick: onSubmit,
64
+ palette: "primaryFilled",
65
+ rounded: false,
66
+ size: "medium",
67
+ status: "none",
68
+ text: submitText,
69
+ ...submitButtonProps
70
+ })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
71
+ disabled: false,
72
+ isBold: true,
73
+ onClick: onCancel,
74
+ palette: "secondary",
75
+ rounded: false,
76
+ size: "medium",
77
+ status: "none",
78
+ text: cancelText,
79
+ ...cancelButtonProps
80
+ })))));
81
+ }
82
+ AttachmentPreviewHeader.propTypes = attachmentPreviewHeaderPropTypes;
83
+ AttachmentPreviewHeader.defaultProps = attachmentPreviewHeaderDefaultProps;
84
+ AttachmentPreviewHeader.displayName = 'AttachmentPreviewHeader';
@@ -0,0 +1,47 @@
1
+ /** ** Styles *** */
2
+ .imgPreviewerheader {
3
+ position: relative;
4
+ background-color: var(
5
+ --imlib_chat_components_attachmentPreviewHeader_bg_color
6
+ );
7
+ padding: var(--zd_size15) var(--zd_size40);
8
+ border-bottom: var(--zd_size1) solid var(--zd_im_common_border);
9
+ }
10
+ [dir=ltr] .imgPreviewerheader {
11
+ border-top-left-radius: var(--zd_size5);
12
+ border-top-right-radius: var(--zd_size5);
13
+ }
14
+ [dir=rtl] .imgPreviewerheader {
15
+ border-top-right-radius: var(--zd_size5);
16
+ border-top-left-radius: var(--zd_size5);
17
+ }
18
+
19
+ .imgName {
20
+ color: var(--imlib_chat_components_attachmentPreviewHeader_name_color);
21
+ font-size: var(--zd_font_size17);
22
+ font-family: var(--zd_semibold);
23
+ composes: dotted from '../../css/common.module.css';
24
+ max-width: 100% ;
25
+ margin-bottom: var(--zd_size5);
26
+ }
27
+
28
+ .imgSize {
29
+ font-size: var(--zd_font_size13);
30
+ color: var(--imlib_chat_components_attachmentPreviewHeader_size_color);
31
+ composes: dotted from '../../css/common.module.css';
32
+ max-width: var(--zd_size150);
33
+ }
34
+
35
+ .navIcon {
36
+ -webkit-box-pack: flex-end;
37
+ -ms-flex-pack: flex-end;
38
+ justify-content: flex-end;
39
+ }
40
+
41
+ [dir=ltr] .attachBtn {
42
+ margin-right: var(--zd_size10);
43
+ }
44
+
45
+ [dir=rtl] .attachBtn {
46
+ margin-left: var(--zd_size10);
47
+ }
@@ -0,0 +1 @@
1
+ export { default as AttachmentPreviewHeader } from "./AttachmentPreviewHeader";
@@ -0,0 +1,7 @@
1
+ /** ** Constants *** */
2
+ import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
3
+ const attachmentPreviewHeaderDefaultProps = {
4
+ customStyle: dummyObject,
5
+ customProps: dummyObject
6
+ };
7
+ export default attachmentPreviewHeaderDefaultProps;