@zohoim/chat-components 1.0.11 → 1.1.0-beta.1

package/es/AttachmentPreview/css/AttachmentPreview.module.css

@@ -0,0 +1,39 @@
+/** ** Styles *** */
+.attachmentPreview {
+  position: fixed;
+  top: 0 ;
+  bottom: 0 ;
+  z-index: 2;
+  overflow: hidden;
+  background-color: rgba(42, 45, 54, 0.94);
+}
+[dir=ltr] .attachmentPreview {
+  animation: scaleIn 0.3s ease;
+  right: 0 ;
+  left: 0 ;
+}
+[dir=rtl] .attachmentPreview {
+  animation: scaleIn 0.3s ease;
+  left: 0 ;
+  right: 0 ;
+}
+
+@keyframes scaleIn {
+  0% {
+      -webkit-transform: scale(0.9);
+      transform: scale(0.9);
+      opacity: .7
+  }
+
+  100% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+      opacity: 1
+  }
+}
+
+.uploadPrev {
+  width: 100% ;
+  max-width: 43.75rem;
+  border-radius: 5px;
+}

package/es/AttachmentPreview/index.js

@@ -0,0 +1 @@
+export { default as AttachmentPreview } from "./AttachmentPreview";

package/es/AttachmentPreview/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const attachmentPreviewDefaultProps = {
+  customStyle: dummyObject,
+  needCloseOnEscape: true,
+  needUploadOnEnter: true,
+  needAutoZindex: true
+};
+export default attachmentPreviewDefaultProps;

package/es/AttachmentPreview/props/propTypes.js

@@ -0,0 +1,33 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentPreviewPropTypes = {
+  customStyle: PropTypes.object,
+  isDescriptionNeeded: PropTypes.bool,
+  files: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.string,
+    url: PropTypes.string
+  })).isRequired,
+  customProps: PropTypes.shape({
+    attachmentIconProps: PropTypes.object,
+    cancelButtonProps: PropTypes.object,
+    editorProps: PropTypes.object,
+    submitButtonProps: PropTypes.object
+  }),
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  texts: PropTypes.shape({
+    cancelText: PropTypes.string,
+    editText: PropTypes.string,
+    placeHolder: PropTypes.string,
+    submitText: PropTypes.string
+  }).isRequired,
+  descriptionDetails: PropTypes.object,
+  onDescriptionChange: PropTypes.func,
+  needCloseOnEscape: PropTypes.bool,
+  needUploadOnEnter: PropTypes.bool,
+  needAutoZindex: PropTypes.bool
+};
+export default attachmentPreviewPropTypes;

package/es/AttachmentPreviewBody/AttachmentPreviewBody.js

@@ -0,0 +1,97 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import ReplyComposer from "../im/ReplyComposer/ReplyComposer";
+import AttachmentIcon from "../AttachmentIcon/AttachmentIcon";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import attachmentPreviewBodyDefaultProps from "./props/defaultProps";
+import attachmentPreviewBodyPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/AttachmentPreviewBody.module.css";
+export default function AttachmentPreviewBody(props) {
+  const {
+    customStyle,
+    customProps,
+    isImageFile,
+    attachmentURL,
+    fileFormat,
+    mediaType,
+    isDescriptionNeeded,
+    description,
+    attachmentId,
+    onDescriptionChange,
+    onEditorKeyDown,
+    placeHolder,
+    editorProps
+  } = props;
+  const {
+    attachmentIconProps = dummyObject
+  } = customProps || {};
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const iconCustomStyle = useMemo(() => ({
+    icon: newStyle.attachmentIcon
+  }), [newStyle.attachmentIcon]);
+  const modifiedEditorProps = useMemo(() => {
+    const {
+      customProps,
+      customStyle: replyComposerCustomStyle
+    } = editorProps || dummyObject;
+    const {
+      replyEditorProps
+    } = customProps || dummyObject;
+    const {
+      customStyle = dummyObject
+    } = replyEditorProps || dummyObject;
+    return { ...editorProps,
+      customStyle: {
+        replyComposer: newStyle.replyComposer,
+        ...replyComposerCustomStyle
+      },
+      customProps: { ...customProps,
+        replyEditorProps: { ...replyEditorProps,
+          customStyle: {
+            editorWrapper: newStyle.editorWrapper,
+            editableDiv: newStyle.editableDiv,
+            ...customStyle
+          }
+        }
+      }
+    };
+  }, [editorProps, newStyle.replyComposer, newStyle.editorWrapper, newStyle.editableDiv]);
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    alignBox: "column",
+    className: `${newStyle.zoomContent} ${newStyle.imgContent}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.fileContainer
+  }, isImageFile ? /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: newStyle.imgZoomOut,
+    src: attachmentURL
+  }) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AttachmentIcon, {
+    customStyle: iconCustomStyle,
+    fileFormat: fileFormat,
+    mediaType: mediaType,
+    ...attachmentIconProps
+  }))), isDescriptionNeeded ? /*#__PURE__*/React.createElement(ReplyComposer, {
+    content: description,
+    id: `${attachmentId}_Attach_Editor`,
+    onChange: onDescriptionChange,
+    onKeyDown: onEditorKeyDown,
+    placeHolder: placeHolder,
+    ...modifiedEditorProps
+  }) : null);
+}
+AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;
+AttachmentPreviewBody.defaultProps = attachmentPreviewBodyDefaultProps;
+AttachmentPreviewBody.displayName = 'AttachmentPreviewBody';

package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css

@@ -0,0 +1,71 @@
+/** ** Styles *** */
+.attachmentIcon {
+  width: var(--zd_size60)  !important;
+  height: var(--zd_size60)  !important;
+}
+
+.replyComposer {
+  width: 100% ;
+}
+
+.editorWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100% ;
+  width: 100% ;
+  padding: 0 ;
+  margin-top: var(--zd_size40) ;
+}
+
+.editableDiv {
+  min-height: var(--zd_size48)  !important;
+  max-height: var(--zd_size48)  !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  border-bottom: 1px solid var(--zdt_textarea_default_border) !important;
+  padding: 0  !important;
+}
+
+.editableDiv:hover {
+  border-color: var(--zdt_textarea_hover_border) !important;
+}
+
+.editableDiv:focus {
+  border-color: var(--zdt_textarea_focus_border) !important;
+}
+
+.imgContent,
+.zoomContent {
+  overflow: auto;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.imgContent, .zoomContent {
+  background-color: var(--imlib_chat_components_attachmentPreviewBody_bg_color);
+  padding: var(--zd_size40);
+  background-color: var(--imlib_chat_components_attachmentPreview_body_bg_color);
+}
+
+[dir=ltr] .imgContent, [dir=ltr] .zoomContent {
+  border-bottom-left-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+
+[dir=rtl] .imgContent, [dir=rtl] .zoomContent {
+  border-bottom-right-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+
+.fileContainer {
+  height: var(--zd_size225);
+  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
+  composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
+  composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
+}
+
+.imgZoomOut {
+  width: auto ;
+  max-width: 100% ;
+  max-height: 100% ;
+}

package/es/AttachmentPreviewBody/index.js

@@ -0,0 +1 @@
+export { default as AttachmentPreviewBody } from "./AttachmentPreviewBody";

package/es/AttachmentPreviewBody/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const attachmentPreviewBodyDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject
+};
+export default attachmentPreviewBodyDefaultProps;

package/es/AttachmentPreviewBody/props/propTypes.js

@@ -0,0 +1,20 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentPreviewBodyPropTypes = {
+  customStyle: PropTypes.object,
+  customProps: PropTypes.shape({
+    attachmentIconProps: PropTypes.object
+  }),
+  isImageFile: PropTypes.bool,
+  attachmentURL: PropTypes.string,
+  fileFormat: PropTypes.string,
+  mediaType: PropTypes.string,
+  isDescriptionNeeded: PropTypes.bool,
+  description: PropTypes.string,
+  attachmentId: PropTypes.string,
+  onDescriptionChange: PropTypes.func,
+  onEditorKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  editorProps: PropTypes.object
+};
+export default attachmentPreviewBodyPropTypes;

package/es/AttachmentPreviewHeader/AttachmentPreviewHeader.js

@@ -0,0 +1,84 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Button from '@zohodesk/components/es/Button/Button';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import attachmentPreviewHeaderDefaultProps from "./props/defaultProps";
+import attachmentPreviewHeaderPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/AttachmentPreviewHeader.module.css";
+export default function AttachmentPreviewHeader(props) {
+  const {
+    customStyle,
+    fileName,
+    fileSize,
+    submitText,
+    cancelText,
+    onSubmit,
+    onCancel,
+    customProps
+  } = props;
+  const {
+    submitButtonProps = dummyObject,
+    cancelButtonProps = dummyObject
+  } = customProps || {};
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: newStyle.imgPreviewerheader,
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.imgName,
+    title: fileName
+  }, fileName), /*#__PURE__*/React.createElement("div", {
+    className: newStyle.imgSize
+  }, fileSize)))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: newStyle.navIcon,
+    isCover: false
+  }, /*#__PURE__*/React.createElement("span", {
+    className: newStyle.attachBtn
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: false,
+    isBold: true,
+    onClick: onSubmit,
+    palette: "primaryFilled",
+    rounded: false,
+    size: "medium",
+    status: "none",
+    text: submitText,
+    ...submitButtonProps
+  })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
+    disabled: false,
+    isBold: true,
+    onClick: onCancel,
+    palette: "secondary",
+    rounded: false,
+    size: "medium",
+    status: "none",
+    text: cancelText,
+    ...cancelButtonProps
+  })))));
+}
+AttachmentPreviewHeader.propTypes = attachmentPreviewHeaderPropTypes;
+AttachmentPreviewHeader.defaultProps = attachmentPreviewHeaderDefaultProps;
+AttachmentPreviewHeader.displayName = 'AttachmentPreviewHeader';

package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css

@@ -0,0 +1,47 @@
+/** ** Styles *** */
+.imgPreviewerheader {
+  position: relative;
+  background-color: var(
+    --imlib_chat_components_attachmentPreview_bg_color
+  );
+  padding: var(--zd_size15) var(--zd_size40);
+  border-bottom: var(--zd_size1) solid var(--imlib_chat_components_common_border);
+}
+[dir=ltr] .imgPreviewerheader {
+  border-top-left-radius: var(--zd_size5);
+  border-top-right-radius: var(--zd_size5);
+}
+[dir=rtl] .imgPreviewerheader {
+  border-top-right-radius: var(--zd_size5);
+  border-top-left-radius: var(--zd_size5);
+}
+
+.imgName {
+  color: var(--imlib_chat_components_attachmentPreview_name_color);
+  font-size: var(--zd_font_size17);
+  font-family: var(--zd_semibold);
+  composes: dotted from '../../css/common.module.css';
+  max-width: 100% ;
+  margin-bottom: var(--zd_size5);
+}
+
+.imgSize {
+  font-size: var(--zd_font_size13);
+  color: var(--imlib_chat_components_attachmentPreview_size_color);
+  composes: dotted from '../../css/common.module.css';
+  max-width: var(--zd_size150);
+}
+
+.navIcon {
+  -webkit-box-pack: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+}
+
+[dir=ltr] .attachBtn {
+  margin-right: var(--zd_size10);
+}
+
+[dir=rtl] .attachBtn {
+  margin-left: var(--zd_size10);
+}

package/es/AttachmentPreviewHeader/index.js

@@ -0,0 +1 @@
+export { default as AttachmentPreviewHeader } from "./AttachmentPreviewHeader";

package/es/AttachmentPreviewHeader/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const attachmentPreviewHeaderDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject
+};
+export default attachmentPreviewHeaderDefaultProps;

package/es/AttachmentPreviewHeader/props/propTypes.js

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentPreviewHeaderPropTypes = {
+  customStyle: PropTypes.object,
+  fileName: PropTypes.string.isRequired,
+  fileSize: PropTypes.string.isRequired,
+  submitText: PropTypes.string.isRequired,
+  cancelText: PropTypes.string.isRequired,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  customProps: PropTypes.shape({
+    cancelButtonProps: PropTypes.object,
+    submitButtonProps: PropTypes.object
+  })
+};
+export default attachmentPreviewHeaderPropTypes;

package/es/Emoji/Emoji.js

@@ -0,0 +1,72 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useEmoji from '@zohoim/chat-components-hooks/es/Emoji/useEmoji';
+/** ** Constants *** */
+
+import emojiDefaultProps from "./props/defaultProps";
+import emojiPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import cssJSLogic from "./css/cssJSLogic";
+/** ** Styles *** */
+
+import style from "./css/Emoji.module.css";
+export default function Emoji(props) {
+  const {
+    customStyle,
+    id,
+    emoji,
+    emojiName,
+    isActive,
+    isHighlight,
+    onSelect: propOnSelect,
+    autoHover,
+    eleRef: propEleRef,
+    needTitle,
+    customTitle
+  } = props;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    emojiClass
+  } = cssJSLogic({
+    isActive,
+    isHighlight,
+    autoHover
+  }, newStyle);
+  const {
+    onSelect,
+    unicode,
+    title,
+    eleRef
+  } = useEmoji({
+    onSelect: propOnSelect,
+    emoji,
+    emojiName,
+    eleRef: propEleRef,
+    id,
+    needTitle,
+    customTitle
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    ref: eleRef,
+    className: emojiClass,
+    onClick: onSelect
+  }, /*#__PURE__*/React.createElement("span", {
+    className: newStyle.emojiContent,
+    "data-smiley": emojiName,
+    "data-title": title,
+    "data-unicode": emoji
+  }, unicode));
+}
+Emoji.propTypes = emojiPropTypes;
+Emoji.defaultProps = emojiDefaultProps;
+Emoji.displayName = 'Emoji';

package/es/Emoji/css/Emoji.module.css

@@ -0,0 +1,48 @@
+.varClass {
+  --emoji-height: var(--zd_size32);
+  --emoji-width: var(--zd_size32);
+  --emoji-font_size: var(--zd_font_size20);
+  --emoji-margin: var(--zd_size5);
+}
+
+.emoji {
+  composes: varClass;
+  width: var(--emoji-height);
+  height: var(--emoji-width);
+  overflow: hidden;
+  font-size: 0 ;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 var(--emoji-margin);
+  text-align: center;
+}
+
+.emojiContent {
+  font-size: var(--emoji-font_size);
+  display: block;
+}
+
+.emojiHighlight .emojiContent,
+.emojiHover:hover .emojiContent {
+  transition: transform 60ms ease-out 60ms;
+}
+
+.emojiHighlight .emojiContent, .emojiHover:hover .emojiContent {
+  transform: scale(1.2);
+}
+
+.emojiHighlight {
+  background-color: var(--imlib_chat_components_emoji_hover_bg_color);
+}
+
+/* .emojiHover:hover */
+
+.emojiActive {
+  transform: scale(1.2);
+  
+}
+
+
+/* background-color: var(--imlib_chat_components_emoji_active_bg_color); */

package/es/Emoji/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isActive,
+    isHighlight,
+    autoHover
+  } = props;
+  const emojiClass = compileClassNames({
+    [style.emoji]: true,
+    [style.emojiHover]: autoHover,
+    [style.emojiHighlight]: isHighlight,
+    [style.emojiActive]: isActive
+  });
+  return {
+    emojiClass
+  };
+}

package/es/Emoji/index.js

@@ -0,0 +1 @@
+export { default as Emoji } from "./Emoji";

package/es/Emoji/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const emojiDefaultProps = {
+  customStyle: dummyObject,
+  autoHover: true,
+  needTitle: true
+};
+export default emojiDefaultProps;

package/es/Emoji/props/propTypes.js

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const emojiPropTypes = {
+  customStyle: PropTypes.object,
+  emoji: PropTypes.string.isRequired,
+  emojiName: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  isHighlight: PropTypes.bool,
+  onSelect: PropTypes.func,
+  autoHover: PropTypes.bool,
+  id: PropTypes.string,
+  eleRef: PropTypes.func,
+  needTitle: PropTypes.bool,
+  customTitle: PropTypes.string
+};
+export default emojiPropTypes;