@zohoim/chat-components 1.0.9-beta.7 → 1.0.9-beta.8

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

@@ -1,39 +0,0 @@
-/** ** Styles *** */
-.attachmentPreview {
-  position: fixed;
-  top: 0 ;
-  bottom: 0 ;
-  z-index: 2147483643;
-  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

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

package/es/AttachmentPreview/props/defaultProps.js

@@ -1,9 +0,0 @@
-/** ** 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

@@ -1,33 +0,0 @@
-/** ** 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

@@ -1,97 +0,0 @@
-/** ** 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

@@ -1,74 +0,0 @@
-/** ** 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(--imlib_chat_components_attachmentPreviewBody_editor_border_color) !important;
-}
-
-.editableDiv:hover {
-  border-color: var(
-    --imlib_chat_components_attachmentPreviewBody_editor_border_hover_color
-  ) !important;
-}
-
-.editableDiv:focus {
-  border-color: var(
-    --imlib_chat_components_attachmentPreviewBody_editor_border_active_color
-  ) !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);
-}
-
-[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

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

package/es/AttachmentPreviewBody/props/defaultProps.js

@@ -1,7 +0,0 @@
-/** ** 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

@@ -1,20 +0,0 @@
-/** ** 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

@@ -1,84 +0,0 @@
-/** ** 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

@@ -1,47 +0,0 @@
-/** ** Styles *** */
-.imgPreviewerheader {
-  position: relative;
-  background-color: var(
-    --imlib_chat_components_attachmentPreviewHeader_bg_color
-  );
-  padding: var(--zd_size15) var(--zd_size40);
-  border-bottom: var(--zd_size1) solid var(--zd_im_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_attachmentPreviewHeader_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_attachmentPreviewHeader_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

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

package/es/AttachmentPreviewHeader/props/defaultProps.js

@@ -1,7 +0,0 @@
-/** ** 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

@@ -1,16 +0,0 @@
-/** ** 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

@@ -1,72 +0,0 @@
-/* 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

@@ -1,48 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-/** ** 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

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

package/es/Emoji/props/defaultProps.js

@@ -1,8 +0,0 @@
-/** ** 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

@@ -1,16 +0,0 @@
-/** ** 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;