@zohoim/chat-components 0.0.11 → 0.0.14

package/es/MessageBubble/props/propTypes.js

@@ -1,17 +1,17 @@
 /** ** Libraries *** */
-import PropTypes from "prop-types";
-
+import PropTypes from 'prop-types';
 /** ** Constants *** */
-import { direction } from "@zohoim/chat-components-utils/es/constants/messageConstants";
+
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const messageBubblePropTypes = {
-  direction: PropTypes.oneOf([direction.IN, direction.OUT]),
+  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
+  renderMessageBox: PropTypes.func.isRequired,
+  customStyle: PropTypes.object,
   isActive: PropTypes.bool,
   needMessageActions: PropTypes.bool,
-  renderMessageBox: PropTypes.func,
-  renderMessageBoxFooter: PropTypes.func,
-  renderMessageOwner: PropTypes.func,
+  needSender: PropTypes.bool,
   renderMessageActions: PropTypes.func,
-  customStyle: PropTypes.object,
-  needSender: PropTypes.bool
+  renderMessageBoxFooter: PropTypes.func,
+  renderMessageOwner: PropTypes.func
 };
 export default messageBubblePropTypes;

package/es/MessageStatus/MessageStatus.js

@@ -0,0 +1,72 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import messageStatusDefaultProps from './props/defaultProps';
+import messageStatusPropTypes from './props/propTypes';
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from './css/MessageStatus.module.css';
+/** ** Icons *** */
+
+import DoubleTickIcon from '../icons/iconSrc/messageStatus/DoubleTick';
+import TickIcon from '../icons/iconSrc/messageStatus/Tick';
+import ClockIcon from '../icons/iconSrc/messageStatus/Clock';
+import FailedIcon from '../icons/iconSrc/messageStatus/Failed';
+const {
+  SENT,
+  SAVED,
+  QUEUED,
+  DELIVERED,
+  READ,
+  UNSENT,
+  FAILED,
+  OUTGOING
+} = messageStatusConstants;
+const messageStatusIconMapping = {
+  [OUTGOING]: ClockIcon,
+  [SAVED]: TickIcon,
+  [QUEUED]: TickIcon,
+  [SENT]: DoubleTickIcon,
+  [DELIVERED]: DoubleTickIcon,
+  [READ]: DoubleTickIcon,
+  [UNSENT]: FailedIcon,
+  [FAILED]: FailedIcon
+};
+export default function MessageStatus(props) {
+  const {
+    messageStatus,
+    customStyle,
+    title,
+    renderCustomIcon
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    statusClass
+  } = cssJSLogic({
+    messageStatus
+  }, newStyle);
+  /* Custom Icon */
+
+  const customIcon = renderHandler(renderCustomIcon)();
+  const IconComponent = messageStatusIconMapping[messageStatus];
+  return IconComponent || customIcon ? /*#__PURE__*/React.createElement("div", {
+    className: statusClass,
+    "data-title": title
+  }, customIcon || /*#__PURE__*/React.createElement(IconComponent, null)) : null;
+}
+MessageStatus.propTypes = messageStatusPropTypes;
+MessageStatus.defaultProps = messageStatusDefaultProps;
+MessageStatus.displayName = 'MessageStatus';

package/es/{im/IMMessageStatus/css/IMMessageStatus.module.css → MessageStatus/css/MessageStatus.module.css}

@@ -1,5 +1,5 @@
 .messageStatus {
-  /*USe this class name status customization*/
+  /* USe this class name status customization */
   /* color: #61667a; */
   color: var(--imlib_chat_components_messageStatus_send_color);
 }

package/es/MessageStatus/css/cssJSLogic.js

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

package/es/MessageStatus/index.js

@@ -0,0 +1 @@
+export { default as MessageStatus } from './MessageStatus';

package/es/{im/IMAttachmentIcon → MessageStatus}/props/defaultProps.js

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

package/es/MessageStatus/props/propTypes.js

@@ -0,0 +1,12 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+const messageStatusPropTypes = {
+  messageStatus: PropTypes.oneOf(Object.values(messageStatusConstants)).isRequired,
+  customStyle: PropTypes.object,
+  renderCustomIcon: PropTypes.func,
+  title: PropTypes.string
+};
+export default messageStatusPropTypes;

package/es/MoreActionItem/MoreActionItem.js

@@ -1,75 +1,63 @@
-/* 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, {
-    id: id,
-    index: index,
-    title: iconTitle,
     autoHover: true,
+    customClass: newStyle.listItem,
+    disableTitle: title,
+    id: id,
+    isDisabled: isDisabled,
     onClick: handleClick,
-    customClass: customListItemClass
+    title: title
   }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "vertical"
+    align: "vertical",
+    alignBox: "row"
   }, needIcon ? /*#__PURE__*/React.createElement(Box, {
-    className: iconClass
+    className: newStyle.iconWrapper
   }, icon) : null, /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: textClass
+    className: newStyle.text,
+    flexible: true
   }, displayText)));
 }
 MoreActionItem.propTypes = moreActionItemPropTypes;

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

@@ -1,20 +1,14 @@
 .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;
 }
 

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,56 +1,88 @@
-/* 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 renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Styles *** */
+
 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(() =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+  React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }), [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,
-    senderName: senderName,
+    time: time
+  }, headerProps)), /*#__PURE__*/React.createElement(ReplyBubbleContent, _extends({
     renderIcon: renderIcon,
-    renderMessage: renderMessage
-  }));
+    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) ;
+  width: var(--zd_size40) ;
+}
+
+.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,23 +1,21 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
-import React from "react";
-
+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";
 
+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 { Container, Box } from "@zohodesk/components/es/Layout";
+
+import style from './css/ReplyBubbleContent.module.css';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
 export default function ReplyBubbleContent(props) {
   const {
     customStyle,
@@ -25,32 +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, {
-    alignBox: "row",
     align: "vertical",
-    className: replyBubbleContentClass
-  }, icon ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
-    className: iconWrapperClass
-  }, icon)) : "", /*#__PURE__*/React.createElement(Box, {
+    alignBox: "row",
+    className: newStyle.replyBubbleContent
+  }, icon ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.iconWrapper
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, icon)) : null, /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement("div", {
-    className: nameClass
+    className: newStyle.name
   }, senderName), /*#__PURE__*/React.createElement("div", {
-    className: messageWrapperClass
+    className: newStyle.messageWrapper
   }, messageContent)));
 }
 ReplyBubbleContent.propTypes = replyBubbleContentPropTypes;
 ReplyBubbleContent.defaultProps = replyBubbleContentDefaultProps;
-ReplyBubbleContent.displayName = "ReplyBubbleContent";
+ReplyBubbleContent.displayName = 'ReplyBubbleContent';