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

package/es/AttachmentPreview/props/propTypes.js

@@ -1,31 +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
-};
-export default attachmentPreviewPropTypes;

package/es/AttachmentPreviewBody/AttachmentPreviewBody.js

@@ -1,81 +0,0 @@
-/** ** Libraries *** */
-import React, { useMemo } from 'react';
-/** ** Components *** */
-
-import { Container } from '@zohodesk/components/es/Layout';
-import ReplyEditor from "../im/ReplyEditor/ReplyEditor";
-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 editorCustomStyle = useMemo(() => ({
-    editorWrapper: newStyle.editorWrapper,
-    editableDiv: newStyle.editableDiv
-  }), [newStyle.editorWrapper, newStyle.editableDiv]);
-  const editorCustomProps = useMemo(() => ({
-    editorProps: {
-      needAutoFocus: true,
-      ...editorProps
-    }
-  }), [editorProps]);
-  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(ReplyEditor, {
-    content: description,
-    customProps: editorCustomProps,
-    customStyle: editorCustomStyle,
-    id: `${attachmentId}_Attach_Editor`,
-    onChange: onDescriptionChange,
-    onKeyDown: onEditorKeyDown,
-    placeHolder: placeHolder
-  }) : null);
-}
-AttachmentPreviewBody.propTypes = attachmentPreviewBodyPropTypes;
-AttachmentPreviewBody.defaultProps = attachmentPreviewBodyDefaultProps;
-AttachmentPreviewBody.displayName = 'AttachmentPreviewBody';

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

@@ -1,70 +0,0 @@
-/** ** Styles *** */
-.attachmentIcon {
-  width: var(--zd_size60)  !important;
-  height: var(--zd_size60)  !important;
-}
-
-.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;

package/es/EmojiPopup/EmojiPopup.js

@@ -1,116 +0,0 @@
-/** ** Libraries *** */
-import React, { useMemo } from 'react';
-/** ** Components *** */
-
-import Popup from '@zohodesk/components/es/Popup/Popup';
-import DropBox from '@zohodesk/components/es/DropBox/DropBox';
-import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
-import { Container } from '@zohodesk/components/es/Layout';
-import Emojis from "../Emojis/Emojis";
-/** ** Hooks *** */
-
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useEmojiPopup from '@zohoim/chat-components-hooks/es/EmojiPopup/useEmojiPopup';
-/** ** Constants *** */
-
-import emojiPopupDefaultProps from "./props/defaultProps";
-import emojiPopupPropTypes from "./props/propTypes";
-import { EDITOR_POPUP_PORTAL } from "../constants";
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
-/** ** Styles *** */
-
-import style from "./css/EmojiPopup.module.css";
-
-function EmojiPopupComp(props) {
-  const {
-    customStyle,
-    customProps,
-    popupSize,
-    defaultPopupPosition,
-    tooltip,
-    onSelect: propOnSelect,
-    needCloseOnSelect,
-    onPopupOpen,
-    onPopupClose,
-
-    /** ** Popup Props *** */
-    getTargetRef,
-    getContainerRef,
-    position,
-    togglePopup,
-    isPopupReady,
-    isPopupOpen,
-    removeClose,
-    closePopupOnly,
-    isAbsolutePositioningNeeded,
-    positionsOffset
-  } = props;
-  const {
-    iconProps = dummyObject,
-    dropBoxProps = dummyObject,
-    emojisProps = dummyObject
-  } = customProps || dummyObject;
-  const {
-    onSelect,
-    onTogglePopup
-  } = useEmojiPopup({
-    togglePopup,
-    defaultPopupPosition,
-    needCloseOnSelect,
-    closePopupOnly,
-    onSelect: propOnSelect,
-    isPopupOpen,
-    onPopupOpen,
-    onPopupClose
-  });
-  /* External customization */
-
-  const newStyle = useMergeStyle(style, customStyle);
-  const popupClass = useMemo(() => ({
-    customDropBox: newStyle.popup,
-    customMobileDropBox: newStyle.mobilePopup,
-    customDropBoxWrap: newStyle.popupWrapper,
-    customMobileDropBoxWrap: newStyle.mobilePopupWrapper
-  }), [newStyle.popup, newStyle.mobilePopup, newStyle.popupWrapper, newStyle.mobilePopupWrapper]);
-  return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "column"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    className: newStyle.iconWrapper,
-    eleRef: getTargetRef,
-    iconClass: newStyle.icon,
-    iconName: "ZD-TT-happiness",
-    iconSize: "14",
-    isActive: isPopupOpen,
-    onClick: onTogglePopup,
-    title: tooltip,
-    ...iconProps
-  }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
-    boxPosition: position,
-    customClass: popupClass,
-    customStyle: dummyObject,
-    getRef: getContainerRef,
-    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-    isActive: isPopupReady,
-    isAnimate: true,
-    isArrow: false,
-    isRestrictScroll: true,
-    onClick: removeClose,
-    portalId: EDITOR_POPUP_PORTAL,
-    positionsOffset: positionsOffset,
-    size: popupSize,
-    ...dropBoxProps
-  }, /*#__PURE__*/React.createElement(Emojis, {
-    onSelect: onSelect,
-    ...emojisProps
-  })) : null);
-}
-
-const EmojiPopup = Popup(EmojiPopupComp, undefined, undefined, {
-  isAbsolutePositioningNeeded: false
-});
-EmojiPopupComp.defaultProps = emojiPopupDefaultProps;
-EmojiPopupComp.propTypes = emojiPopupPropTypes;
-EmojiPopup.defaultProps = emojiPopupDefaultProps;
-EmojiPopup.propTypes = emojiPopupPropTypes;
-EmojiPopup.displayName = 'EmojiPopup';
-export default EmojiPopup;