@zohoim/chat-components 0.0.13 → 0.0.15

package/es/MessageStatus/css/cssJSLogic.js

@@ -1,16 +1,20 @@
 /** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
-
 /** ** Constants *** */
-import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
-const {
-  READ,
-  UNSENT,
-  FAILED
-} = messageStatusConstants;
+
+import getMessageStatus from '@zohoim/chat-components-utils/es/getMessageStatus';
 export default function cssJSLogic(props, style) {
-  const isRead = props.messageStatus === READ;
-  const isFailed = props.messageStatus === FAILED || props.messageStatus === UNSENT;
+  const {
+    messageStatus
+  } = props;
+  const {
+    isFailedMessage: isFailed,
+    isRead
+  } = getMessageStatus({
+    messageDetails: {
+      status: messageStatus
+    }
+  });
   const statusClass = compileClassNames({
     [style.messageStatus]: !(isRead || isFailed),
     [style.readStatus]: isRead,

package/es/MessageStatus/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const messageStatusDefaultProps = {
   customStyle: dummyObject
 };

package/es/MessageStatus/props/propTypes.js

@@ -1,22 +1,12 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-
 /** ** Constants *** */
+
 import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
-const {
-  SENT,
-  SAVED,
-  QUEUED,
-  DELIVERED,
-  READ,
-  UNSENT,
-  FAILED,
-  OUTGOING
-} = messageStatusConstants;
 const messageStatusPropTypes = {
-  messageStatus: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]).isRequired,
+  messageStatus: PropTypes.oneOf(Object.values(messageStatusConstants)).isRequired,
   customStyle: PropTypes.object,
-  title: PropTypes.string,
-  renderCustomIcon: PropTypes.func
+  renderCustomIcon: PropTypes.func,
+  title: PropTypes.string
 };
 export default messageStatusPropTypes;

package/es/MoreActionItem/MoreActionItem.js

@@ -1,74 +1,62 @@
-/* eslint-disable react/forbid-component-props */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useCallback } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import moreActionItemDefaultProps from './props/defaultProps';
 import moreActionItemPropTypes from './props/propTypes';
-
 /** ** Styles *** */
-import style from './css/MoreActionItem.module.css';
 
+import style from './css/MoreActionItem.module.css';
 /** ** Components *** */
+
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import ListContainer from '@zohodesk/components/es/ListItem/ListContainer';
-
 /** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
+
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 export default function MoreActionItem(props) {
   const {
     displayText,
-    iconTitle,
+    title,
     id,
-    index,
     customStyle,
     renderIcon,
-    needIcon
+    needIcon,
+    onClick,
+    closePopup,
+    isDisabled
   } = props;
-  function handleClick(e) {
-    const {
-      onClick,
-      closePopup
-    } = props;
+  const handleClick = useCallback(e => {
     closePopup && closePopup(e);
-    onClick && onClick({
+    !isDisabled && onClick && onClick({
       e,
       id
     });
-  }
+  }, [closePopup, onClick, id, isDisabled]);
+  /* External CSS Customization */
 
-  /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* css classnames added based on logic */
-  const {
-    customListItemClass,
-    iconClass,
-    textClass
-  } = cssJSLogic(props, newStyle);
   const icon = renderHandler(renderIcon)({
     id
   });
   return /*#__PURE__*/React.createElement(ListContainer, {
     autoHover: true,
-    customClass: customListItemClass,
+    customClass: newStyle.listItem,
+    disableTitle: title,
     id: id,
-    index: index,
+    isDisabled: isDisabled,
     onClick: handleClick,
-    title: iconTitle
+    title: title
   }, /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row"
   }, needIcon ? /*#__PURE__*/React.createElement(Box, {
-    className: iconClass
+    className: newStyle.iconWrapper
   }, icon) : null, /*#__PURE__*/React.createElement(Box, {
-    className: textClass,
+    className: newStyle.text,
     flexible: true
   }, displayText)));
 }

package/es/MoreActionItem/css/MoreActionItem.module.css

@@ -1,29 +1,21 @@
 .varClass {
-  --moreActionItem-content_padding: var(--imlib_size_10);
-  --moreActionItem-content_size: var(--imlib_size_14);
+  --moreActionItem-content_padding: var(--zd_size10);
+  --moreActionItem-content_size: var(--zd_font_size14);
 }
 
 .listItem {
-  /*Use this class name for list item customization */
+  /* Use this class name for list item customization */
 }
 
-/* 
-.listItemIcon {
-  Use this class name for list item tick icon customization 
-} 
-**/
-
-.icon {
-  /*Use this class name for list item icon customization */
+.iconWrapper {
+  /* Use this class name for list item icon customization */
   display: flex;
 }
 
 .text {
   composes: varClass;
   font-size: var(--moreActionItem-content_size);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  composes: dotted from "../../css/common.module.css";
 }
 
 [dir=ltr] .text {

package/es/MoreActionItem/props/defaultProps.js

@@ -1,10 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const moreActionItemDefaultProps = {
-  displayText: '',
-  title: '',
-  id: '',
-  index: 0,
   customStyle: dummyObject,
   needIcon: true
 };

package/es/MoreActionItem/props/propTypes.js

@@ -1,12 +1,13 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const moreActionItemPropTypes = {
-  displayText: PropTypes.string,
-  title: PropTypes.string,
-  id: PropTypes.string,
-  index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  displayText: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  closePopup: PropTypes.func,
   customStyle: PropTypes.object,
+  id: PropTypes.string,
+  needIcon: PropTypes.bool,
   renderIcon: PropTypes.func,
-  needIcon: PropTypes.bool
+  title: PropTypes.string
 };
 export default moreActionItemPropTypes;

package/es/ReplyBubble/ReplyBubble.js

@@ -1,57 +1,87 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+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); }
 
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useMemo, useCallback } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import replyBubbleDefaultProps from './props/defaultProps';
 import replyBubblePropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Styles *** */
-import style from './css/ReplyBubble.module.css';
 
+import style from './css/ReplyBubble.module.css';
 /** ** Components *** */
+
 import ReplyBubbleHeader from '../ReplyBubbleHeader/ReplyBubbleHeader';
 import ReplyBubbleContent from '../ReplyBubbleContent/ReplyBubbleContent';
+import AttachmentIcon from '../AttachmentIcon/AttachmentIcon';
 export default function ReplyBubble(props) {
   const {
     customStyle,
-    headerCustomStyle,
     senderName,
     time,
     replyText,
-    timeCustomStyle,
-    contentCustomStyle,
-    renderIcon,
-    renderMessage
+    message,
+    attachmentDetails,
+    onClick,
+    customProps
   } = props;
+  const {
+    headerProps = dummyObject,
+    contentProps = dummyObject,
+    iconProps = dummyObject
+  } = customProps;
+  const {
+    fileName,
+    fileURL,
+    fileFormat
+  } = attachmentDetails || dummyObject;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    replyBubbleClass
-  } = cssJSLogic(props, newStyle);
+  const iconStyle = useMemo(() => ({
+    $icon: newStyle.attachmentIcon
+  }), [newStyle.attachmentIcon]);
+  const renderMessage = useCallback( // eslint-disable-next-line no-confusing-arrow
+  () => // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+  message ? /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }) : null, [message]);
+  const renderIcon = useCallback(() => {
+    if (fileURL) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: newStyle.imageWrapper
+      }, /*#__PURE__*/React.createElement("img", {
+        alt: fileName,
+        className: newStyle.image,
+        src: fileURL
+      }));
+    }
+
+    if (fileFormat) {
+      return /*#__PURE__*/React.createElement(AttachmentIcon, _extends({
+        customStyle: iconStyle,
+        fileFormat: fileFormat
+      }, iconProps));
+    }
+
+    return null;
+  }, [fileURL, fileName, fileFormat, iconStyle, iconProps, newStyle.imageWrapper, newStyle.image]);
   return /*#__PURE__*/React.createElement("div", {
-    className: replyBubbleClass
-  }, /*#__PURE__*/React.createElement(ReplyBubbleHeader, {
-    customStyle: headerCustomStyle,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(ReplyBubbleHeader, _extends({
     replyText: replyText,
-    time: time,
-    timeCustomStyle: timeCustomStyle
-  }), /*#__PURE__*/React.createElement(ReplyBubbleContent, {
-    customStyle: contentCustomStyle,
+    time: time
+  }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
     renderIcon: renderIcon,
     renderMessage: renderMessage,
     senderName: senderName
-  }));
+  }, contentProps)));
 }
 ReplyBubble.propTypes = replyBubblePropTypes;
 ReplyBubble.defaultProps = replyBubbleDefaultProps;

package/es/ReplyBubble/css/ReplyBubble.module.css

@@ -0,0 +1,17 @@
+.attachmentIcon {
+  height: var(--zd_size40)  !important;
+  width: var(--zd_size40)  !important;
+}
+
+.imageWrapper {
+  height: var(--zd_size60) ;
+  width: var(--zd_size60) ;
+  overflow: hidden;
+}
+
+.image {
+  width: 100% ;
+  height: 100% ;
+  object-fit: cover;
+  border-radius: 3px;
+}

package/es/ReplyBubble/props/defaultProps.js

@@ -1,9 +1,8 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const replyBubbleDefaultProps = {
   customStyle: dummyObject,
-  headerCustomStyle: dummyObject,
-  timeCustomStyle: dummyObject,
-  contentCustomStyle: dummyObject
+  customProps: dummyObject,
+  attachmentDetails: dummyObject
 };
 export default replyBubbleDefaultProps;

package/es/ReplyBubble/props/propTypes.js

@@ -1,14 +1,21 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const replyBubblePropTypes = {
+  message: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  replyText: PropTypes.string.isRequired,
+  senderName: PropTypes.string.isRequired,
+  attachmentDetails: PropTypes.shape({
+    fileFormat: PropTypes.string,
+    fileName: PropTypes.string,
+    fileURL: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    contentProps: PropTypes.object,
+    headerProps: PropTypes.object,
+    iconProps: PropTypes.object
+  }),
   customStyle: PropTypes.object,
-  headerCustomStyle: PropTypes.object,
-  timeCustomStyle: PropTypes.object,
-  contentCustomStyle: PropTypes.object,
-  senderName: PropTypes.string,
-  time: PropTypes.string,
-  replyText: PropTypes.string,
-  renderIcon: PropTypes.func,
-  renderMessage: PropTypes.func
+  time: PropTypes.string
 };
 export default replyBubblePropTypes;

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -1,24 +1,20 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import replyBubbleContentDefaultProps from './props/defaultProps';
 import replyBubbleContentPropTypes from './props/propTypes';
-
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
 
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 /** ** Styles *** */
-import style from './css/ReplyBubbleContent.module.css';
 
+import style from './css/ReplyBubbleContent.module.css';
 /** ** Components *** */
+
 import { Container, Box } from '@zohodesk/components/es/Layout';
 export default function ReplyBubbleContent(props) {
   const {
@@ -27,33 +23,27 @@ export default function ReplyBubbleContent(props) {
     renderIcon,
     renderMessage
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    replyBubbleContentClass,
-    nameClass,
-    iconWrapperClass,
-    messageWrapperClass
-  } = cssJSLogic(props, newStyle);
   const icon = renderHandler(renderIcon)();
   const messageContent = renderHandler(renderMessage)();
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
-    className: replyBubbleContentClass
+    className: newStyle.replyBubbleContent,
+    isCover: false
   }, icon ? /*#__PURE__*/React.createElement(Box, {
-    className: iconWrapperClass
+    className: newStyle.iconWrapper
   }, /*#__PURE__*/React.createElement(Container, {
     align: "both"
-  }, icon)) : '', /*#__PURE__*/React.createElement(Box, {
+  }, icon)) : null, /*#__PURE__*/React.createElement(Box, {
     flexible: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: nameClass
-  }, senderName), /*#__PURE__*/React.createElement("div", {
-    className: messageWrapperClass
-  }, messageContent)));
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.name
+  }, senderName), messageContent ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageWrapper
+  }, messageContent) : null));
 }
 ReplyBubbleContent.propTypes = replyBubbleContentPropTypes;
 ReplyBubbleContent.defaultProps = replyBubbleContentDefaultProps;

package/es/ReplyBubbleContent/css/ReplyBubbleContent.module.css

@@ -1,60 +1,57 @@
 .replyBubbleContent {
-    position: relative;
-    background-color: var(--imlib_chat_components_ReplyBubbleContent_bg_color);
-    border: var(--imlib_size_1) solid var(--imlib_chat_components_ReplyBubbleContent_border_color);
-    border-radius: var(--imlib_size_3);
-    margin: var(--imlib_size_5) 0;
+  position: relative;
+  background-color: var(--imlib_chat_components_replyBubbleContent_bg_color);
+  border: 1px solid var(--imlib_chat_components_replyBubbleContent_border_color);
+  border-radius: 3px;
+  margin: var(--zd_size5) 0 ;
 }[dir=ltr] .replyBubbleContent {
-    padding: var(--imlib_size_10) var(--imlib_size_10) var(--imlib_size_10) var(--imlib_size_20);
+  padding: var(--zd_size10) var(--zd_size10) var(--zd_size10) var(--zd_size20) ;
 }[dir=rtl] .replyBubbleContent {
-    padding: var(--imlib_size_10) var(--imlib_size_20) var(--imlib_size_10) var(--imlib_size_10);
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size10) ;
 }
 
-.replyBubbleContent::after{
-    content: "";
-    width: var(--imlib_size_2);
-    display: block;
-    position: absolute;
-    top: var(--imlib_size_10);
-    bottom: var(--imlib_size_10);
-    background-color: var(--imlib_chat_components_ReplyBubbleContent_line_color);
-    border-radius: var(--imlib_size_30);
+.replyBubbleContent::after {
+  content: '';
+  width: var(--zd_size2) ;
+  display: block;
+  position: absolute;
+  top: var(--zd_size10) ;
+  bottom: var(--zd_size10) ;
+  background-color: var(--imlib_chat_components_replyBubbleContent_line_color);
+  border-radius: 30px;
 }
 
-[dir=ltr] .replyBubbleContent::after{
-    left: var(--imlib_size_10);
+[dir=ltr] .replyBubbleContent::after {
+  left: var(--zd_size10) ;
 }
 
-[dir=rtl] .replyBubbleContent::after{
-    right: var(--imlib_size_10);
+[dir=rtl] .replyBubbleContent::after {
+  right: var(--zd_size10) ;
 }
 
 .name {
-    color: var(--imlib_chat_components_ReplyBubbleContent_color);
-    font-size: var(--imlib_size_15);
-    line-height: 1.5;
-    overflow: hidden;
-    white-space: nowrap;
-    word-wrap: normal;
-    text-overflow: ellipsis;
+  color: var(--imlib_chat_components_replyBubbleContent_color);
+  font-size: var(--zd_font_size15) ;
+  line-height: 1.5;
+  composes: dotted from "../../css/common.module.css";
 }
 
 [dir=ltr] .iconWrapper {
-    margin-right: var(--imlib_size_10);
+  margin-right: var(--zd_size10) ;
 }
 
 [dir=rtl] .iconWrapper {
-    margin-left: var(--imlib_size_10);
+  margin-left: var(--zd_size10) ;
 }
 
 .messageWrapper {
-    color: var(--imlib_chat_components_ReplyBubbleContent_color);
-    font-size: var(--imlib_size_13);
-    line-height: 1.5;
-    max-height: var(--imlib_size_40);
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    word-break: break-word;
-    overflow: hidden;
+  color: var(--imlib_chat_components_replyBubbleContent_color);
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.5;
+  max-height: var(--zd_size40) ;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
 }

package/es/ReplyBubbleContent/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const replyBubbleContentDefaultProps = {
   customStyle: dummyObject
 };

package/es/ReplyBubbleContent/props/propTypes.js

@@ -1,9 +1,9 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const replyBubbleContentPropTypes = {
-  customStyle: PropTypes.object,
-  senderName: PropTypes.string,
-  renderIcon: PropTypes.func,
-  renderMessage: PropTypes.func
+  renderIcon: PropTypes.func.isRequired,
+  renderMessage: PropTypes.func.isRequired,
+  senderName: PropTypes.string.isRequired,
+  customStyle: PropTypes.object
 };
 export default replyBubbleContentPropTypes;