@zohoim/chat-components 0.0.11 → 0.0.14

package/es/LazyLoadImage/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 lazyLoadImageDefaultProps = {
   customStyle: dummyObject
 };

package/es/LazyLoadImage/props/propTypes.js

@@ -1,8 +1,8 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const lazyLoadImagePropTypes = {
-  customStyle: PropTypes.object,
-  src: PropTypes.string,
-  alternate: PropTypes.string
+  src: PropTypes.string.isRequired,
+  alternate: PropTypes.string,
+  customStyle: PropTypes.object
 };
 export default lazyLoadImagePropTypes;

package/es/LocationBubble/LocationBubble.js

@@ -1,68 +1,49 @@
-/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
-/* 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 locationBubbleDefaultProps from "./props/defaultProps";
-import locationBubblePropTypes from "./props/propTypes";
 
-/** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
-import { Container, Box } from "@zohodesk/components/es/Layout";
+import locationBubbleDefaultProps from './props/defaultProps';
+import locationBubblePropTypes from './props/propTypes';
+/** ** Components *** */
 
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
-import style from "./css/LocationBubble.module.css";
-import useLocationBubble from "@zohoim/chat-components-hooks/es/LocationBubble/useLocationBubble";
+
+import style from './css/LocationBubble.module.css';
 export default function LocationBubble(props) {
   const {
-    customStyle
+    customStyle,
+    locationUrl
   } = props;
-  const {
-    locationURL
-  } = useLocationBubble(props);
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    locationBubbleClass,
-    imageWrapperClass,
-    imageClass,
-    imageLinkClass,
-    textWrapperClass,
-    textLinkClass
-  } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
     align: "vertical",
-    className: locationBubbleClass
+    alignBox: "row",
+    className: newStyle.locationBubble
   }, /*#__PURE__*/React.createElement(Box, {
-    shrink: true,
-    className: imageWrapperClass
+    className: newStyle.imageWrapper,
+    shrink: true
   }, /*#__PURE__*/React.createElement("a", {
-    target: "_blank",
+    href: locationUrl,
     rel: "noreferrer noopener",
-    href: locationURL,
-    className: imageLinkClass
+    target: "_blank"
   }, /*#__PURE__*/React.createElement("div", {
-    className: imageClass
+    className: newStyle.image
   }))), /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    className: textWrapperClass
+    className: newStyle.textWrapper,
+    flexible: true
   }, /*#__PURE__*/React.createElement("a", {
-    target: "_blank",
+    className: newStyle.textLink,
+    href: locationUrl,
     rel: "noreferrer noopener",
-    href: locationURL,
-    className: textLinkClass
-  }, locationURL)));
+    target: "_blank"
+  }, locationUrl)));
 }
 LocationBubble.propTypes = locationBubblePropTypes;
 LocationBubble.defaultProps = locationBubbleDefaultProps;
-LocationBubble.displayName = "LocationBubble";
+LocationBubble.displayName = 'LocationBubble';

package/es/LocationBubble/css/LocationBubble.module.css

@@ -1,18 +1,20 @@
 .imageWrapper {
-  width: 60px;
-  height: 60px;
+  width: var(--zd_size60) ;
+  height: var(--zd_size60) ;
 }
 
 .locationBubble {
   white-space: nowrap;
-  width: 100%;
+  width: 100% ;
   background-color: var(--imlib_chat_components_locationBubble_bg_color);
-  padding: 10px;
+  border: 1px solid var(--imlib_chat_components_locationBubble_border_color);
+  padding: var(--zd_size10) ;
+  border-radius: 3px;
 }
 
 .image {
-  width: 100%;
-  height: 100%;
+  width: 100% ;
+  height: 100% ;
   background-image: url('../images/location.png');
   background-repeat: no-repeat;
   background-size: cover;
@@ -20,11 +22,11 @@
 }
 
 [dir=ltr] .textWrapper {
-  margin: 0 0 0 8px;
+  margin: 0 0 0 var(--zd_size8) ;
 }
 
 [dir=rtl] .textWrapper {
-  margin: 0 8px 0 0;
+  margin: 0 var(--zd_size8) 0 0 ;
 }
 
 .textLink {
@@ -32,5 +34,5 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #0a73eb;
+  color: var(--imlib_chat_components_locationBubble_color);
 }

package/es/LocationBubble/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 locationBubbleDefaultProps = {
   customStyle: dummyObject
 };

package/es/LocationBubble/props/propTypes.js

@@ -1,7 +1,7 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const locationBubblePropTypes = {
-  customStyle: PropTypes.object,
-  locationURL: PropTypes.string
+  locationUrl: PropTypes.string.isRequired,
+  customStyle: PropTypes.object
 };
 export default locationBubblePropTypes;

package/es/MediaBubbleWrapper/MediaBubbleWrapper.js

@@ -0,0 +1,59 @@
+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, { useMemo } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useAttachmentBubble from '@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble';
+/** ** Constants *** */
+
+import mediaBubbleWrapperDefaultProps from './props/defaultProps';
+import mediaBubbleWrapperPropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/MediaBubbleWrapper.module.css';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Components *** */
+
+import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+export default function MediaBubbleWrapper(props) {
+  const {
+    customStyle,
+    mediaDetails,
+    customProps,
+    renderMedia
+  } = props;
+  const {
+    attachmentBubbleInfoProps = dummyObject
+  } = customProps;
+  /* External css customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const bubbleInfoCustomStyle = useMemo(() => ({
+    attachmentBubbleInfo: newStyle.header
+  }), [newStyle.header]);
+  const {
+    attachmentURL: fileURL,
+    formattedFileSize: fileSize,
+    fileName,
+    attachmentType: fileType
+  } = useAttachmentBubble({
+    attachmentDetails: mediaDetails
+  });
+  const mediaComponent = renderHandler(renderMedia)({
+    fileURL,
+    fileType
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, _extends({
+    customStyle: bubbleInfoCustomStyle,
+    fileName: fileName,
+    fileSize: fileSize
+  }, attachmentBubbleInfoProps)), mediaComponent);
+}
+MediaBubbleWrapper.propTypes = mediaBubbleWrapperPropTypes;
+MediaBubbleWrapper.defaultProps = mediaBubbleWrapperDefaultProps;
+MediaBubbleWrapper.displayName = 'MediaBubbleWrapper';

package/es/MediaBubbleWrapper/css/MediaBubbleWrapper.module.css

@@ -0,0 +1,3 @@
+.header {
+  margin-bottom: var(--zd_size5) ;
+}

package/es/MediaBubbleWrapper/index.js

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

package/es/MediaBubbleWrapper/props/defaultProps.js

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

package/es/MediaBubbleWrapper/props/propTypes.js

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const mediaBubbleWrapperPropTypes = {
+  mediaDetails: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    size: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }).isRequired,
+  renderMedia: PropTypes.func.isRequired,
+  customProps: PropTypes.shape({
+    attachmentBubbleInfoProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object
+};
+export default mediaBubbleWrapperPropTypes;

package/es/Message/Message.js

@@ -1,135 +1,122 @@
-/* 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, { useCallback } from 'react';
 /** ** Constants *** */
+
 import messageDefaultProps from './props/defaultProps';
 import messagePropTypes from './props/propTypes';
-import { direction as directionConstants } from '@zohoim/chat-components-utils/es/constants/messageConstants';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Components *** */
+
 import MessageBubble from '../MessageBubble/MessageBubble';
 import MessageBox from '../MessageBox/MessageBox';
-import IMMessageAvatar from '../im/IMMessageAvatar/IMMessageAvatar';
-import IMMessageActions from '../im/IMMessageActions/IMMessageActions';
-import IMMessageStatus from '../im/IMMessageStatus/IMMessageStatus';
+import MessageAvatar from '../MessageAvatar/MessageAvatar';
+import MessageActions from '../MessageActions/MessageActions';
+import MessageStatus from '../MessageStatus/MessageStatus';
+/** ** Methods *** */
+
+import getMessageStatus from '@zohoim/chat-components-utils/es/getMessageStatus';
+import getMessageDirectionType from '@zohoim/chat-components-utils/es/getMessageDirectionType';
 export default function Message(props) {
   const {
-    customStyle,
     direction,
     isActive,
-    needMessageActions,
-    renderMessageBoxFooter,
-    /* Avatar Related Props Start */
-    needSender,
     isShowSender,
-    senderSrc,
-    senderAlternateSrc,
-    senderTitle,
-    senderAvatarSize,
-    senderName,
-    avatarCustomStyle,
-    senderIntegrationIcon,
-    senderIntegrationIconSize,
-    senderIntegrationIconCustomStyle,
-    isCustomIntegrationIcon,
-    isCustomSenderAvatar,
-    renderCustomIntegrationIcon,
-    renderCustomSenderAvatar,
-    /*Avatar Related Props  End*/
+    needSender,
+    ownerDetails,
+    renderOwnerStatusIcon,
+    status,
+    statusTooltip,
+    actions,
+    renderSecondaryActions,
+    onSelectAction,
+    renderContent,
+    customProps
+  } = props;
+  const {
+    messageBubbleProps = dummyObject,
+    messageOwnerProps = dummyObject,
+    messageBoxProps = dummyObject,
+    messageStatusProps = dummyObject,
+    messageActionsProps = dummyObject
+  } = customProps;
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
+  const {
+    isFailedMessage: isFailed
+  } = getMessageStatus({
+    messageDetails: {
+      status
+    }
+  });
+  /** ** Render Message Owner *** */
 
-    /* MessageBox Props Start */
-    isFailedMessage,
-    needMessageBox,
-    renderMessage,
-    renderMessageFooter,
-    renderMessageHeader,
-    messageBoxCustomStyle,
-    /*MessageBox Props End */
+  const handleRenderMessageOwner = useCallback(() => {
+    if (isShowSender) {
+      const {
+        src,
+        alternateSrc,
+        name
+      } = ownerDetails || dummyObject;
+      const props = {
+        src,
+        alternateSrc,
+        title: name,
+        renderIcon: renderOwnerStatusIcon
+      };
+      return /*#__PURE__*/React.createElement(MessageAvatar, _extends({}, props, messageOwnerProps));
+    }
 
-    /* MessageAction Props Start */
-    messageActions,
-    actionsDefaultShowCount,
-    actionIconCustomStyle,
-    moreActionItemCustomStyle,
-    onSelectAction,
-    messageActionCustomStyle,
-    moreActionPopupCustomStyle,
-    renderSecondaryActions,
-    /* MessageAction Props End */
+    return null;
+  }, [ownerDetails, messageOwnerProps, renderOwnerStatusIcon, isShowSender]);
+  /** ** Render Message Status *** */
 
-    /*MessageStatus Props Start */
-    messageStatus,
-    messageStatusCustomStyle,
-    statusTitle
-    /*MessageStatus Props End */
-  } = props;
-  function handleRenderMessageStatus() {
+  const handleRenderMessageStatus = useCallback(() => {
     const props = {
-      messageStatus,
-      customStyle: messageStatusCustomStyle,
-      title: statusTitle
+      messageStatus: status,
+      title: statusTooltip
     };
-    return messageStatus ? /*#__PURE__*/React.createElement(IMMessageStatus, props) : null;
-  }
-  function handleRenderMessageBox() {
+    return status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
+  }, [status, statusTooltip, messageStatusProps]);
+  /** ** Render MessageBox *** */
+
+  const handleRenderMessageBox = useCallback(() => {
     const props = {
-      renderMessageFooter,
-      renderMessageHeader,
       renderMessageStatus: handleRenderMessageStatus,
-      renderMessage,
-      customStyle: messageBoxCustomStyle,
-      isFailed: isFailedMessage,
-      isIncoming: direction === directionConstants.IN,
-      isOutgoing: direction === directionConstants.OUT
-    };
-    return /*#__PURE__*/React.createElement(MessageBox, props);
-  }
-  function handleRenderMessageOwner() {
-    const props = {
-      src: senderSrc,
-      alternateSrc: senderAlternateSrc,
-      title: senderTitle,
-      avatarSize: senderAvatarSize,
-      name: senderName,
-      customStyle: avatarCustomStyle,
-      integrationName: senderIntegrationIcon,
-      iconSize: senderIntegrationIconSize,
-      iconCustomStyle: senderIntegrationIconCustomStyle,
-      isCustomIcon: isCustomIntegrationIcon,
-      renderCustomIcon: renderCustomIntegrationIcon,
-      isCustomAvatar: isCustomSenderAvatar,
-      renderCustomAvatar: renderCustomSenderAvatar
+      renderMessage: renderContent,
+      isFailed,
+      isIncoming,
+      isOutgoing
     };
-    return isShowSender ? /*#__PURE__*/React.createElement(IMMessageAvatar, props) : null;
-  }
-  function handleRenderMessageActions() {
+    return /*#__PURE__*/React.createElement(MessageBox, _extends({}, props, messageBoxProps));
+  }, [handleRenderMessageStatus, renderContent, messageBoxProps, isFailed, isIncoming, isOutgoing]);
+  /** ** Render Message Actions *** */
+
+  const handleRenderMessageActions = useCallback(() => {
     const props = {
-      actions: messageActions,
-      renderSecondaryActions: renderSecondaryActions,
-      defaultShowCount: actionsDefaultShowCount,
-      actionIconCustomStyle: actionIconCustomStyle,
-      moreItemCustomStyle: moreActionItemCustomStyle,
+      actions,
       onSelect: onSelectAction,
-      customStyle: messageActionCustomStyle,
-      morePopupCustomStyle: moreActionPopupCustomStyle
+      renderSecondaryActions
     };
-    return /*#__PURE__*/React.createElement(IMMessageActions, props);
-  }
-  return /*#__PURE__*/React.createElement(MessageBubble, {
+    return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
+  }, [actions, onSelectAction, renderSecondaryActions, messageActionsProps]);
+  const needMessageActions = !!actions.length;
+  return /*#__PURE__*/React.createElement(MessageBubble, _extends({
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
-    renderMessageBox: handleRenderMessageBox,
-    renderMessageBoxFooter: renderMessageBoxFooter,
-    renderMessageOwner: handleRenderMessageOwner,
-    renderMessageActions: handleRenderMessageActions,
-    customStyle: customStyle,
     needSender: needSender,
-    isShowSender: isShowSender
-  });
+    renderMessageActions: handleRenderMessageActions,
+    renderMessageBox: handleRenderMessageBox,
+    renderMessageOwner: handleRenderMessageOwner
+  }, messageBubbleProps));
 }
 Message.propTypes = messagePropTypes;
 Message.defaultProps = messageDefaultProps;

package/es/Message/props/defaultProps.js

@@ -1,43 +1,11 @@
 /** ** Constants *** */
-import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
-import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
-import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const messageDefaultProps = {
-  customStyle: dummyObject,
   direction: direction.IN,
   isActive: false,
-  needMessageActions: true,
-  needSender: true,
   isShowSender: true,
-  senderSrc: '',
-  senderAlternateSrc: '',
-  senderTitle: '',
-  //'RAVI KUMAR',
-  senderAvatarSize: 'medium',
-  senderName: '',
-  //'Ravi kumar',
-  avatarCustomStyle: dummyObject,
-  senderIntegrationIcon: '',
-  //WHATSAPP
-  senderIntegrationIconSize: sizes.SMALL,
-  senderIntegrationIconCustomStyle: dummyObject,
-  isCustomIntegrationIcon: false,
-  isCustomSenderAvatar: false,
-  needMessageBox: true,
-  isFailedMessage: false,
-  messageBoxCustomStyle: dummyObject,
-  messageActions: dummyArray,
-  actionsDefaultShowCount: actionsDefaultShowCount,
-  actionIconCustomStyle: dummyObject,
-  moreActionItemCustomStyle: dummyObject,
-  messageActionCustomStyle: dummyObject,
-  moreActionPopupCustomStyle: dummyObject,
-  messageStatus: '',
-  // READ,
-  messageStatusCustomStyle: dummyObject,
-  statusTitle: '' // READ,
-  // renderMessage: () => <div>Test</div>
+  customProps: dummyObject,
+  actions: dummyArray
 };
-
 export default messageDefaultProps;