@zohoim/chat-components 0.0.13 → 0.0.14

package/es/LazyLoadImage/css/LazyLoadImage.module.css

@@ -1,4 +1,5 @@
 .lazyLoadImage {
   /* height: 100%;
   width: 100%; */
+  /* Use this class name for css customisation */
 }

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,66 +1,48 @@
-/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
-/* 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 useLocationBubble from '@zohoim/chat-components-hooks/es/LocationBubble/useLocationBubble';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import locationBubbleDefaultProps from './props/defaultProps';
 import locationBubblePropTypes from './props/propTypes';
+/** ** Components *** */
 
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
 import { Container, Box } from '@zohodesk/components/es/Layout';
-
 /** ** Styles *** */
+
 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, {
     align: "vertical",
     alignBox: "row",
-    className: locationBubbleClass
+    className: newStyle.locationBubble
   }, /*#__PURE__*/React.createElement(Box, {
-    className: imageWrapperClass,
+    className: newStyle.imageWrapper,
     shrink: true
   }, /*#__PURE__*/React.createElement("a", {
-    className: imageLinkClass,
-    href: locationURL,
+    href: locationUrl,
     rel: "noreferrer noopener",
     target: "_blank"
   }, /*#__PURE__*/React.createElement("div", {
-    className: imageClass
+    className: newStyle.image
   }))), /*#__PURE__*/React.createElement(Box, {
-    className: textWrapperClass,
+    className: newStyle.textWrapper,
     flexible: true
   }, /*#__PURE__*/React.createElement("a", {
-    className: textLinkClass,
-    href: locationURL,
+    className: newStyle.textLink,
+    href: locationUrl,
     rel: "noreferrer noopener",
     target: "_blank"
-  }, locationURL)));
+  }, locationUrl)));
 }
 LocationBubble.propTypes = locationBubblePropTypes;
 LocationBubble.defaultProps = locationBubbleDefaultProps;

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

@@ -1,32 +1,32 @@
 .imageWrapper {
-  width: var(--imlib_size_60);
-  height: var(--imlib_size_60);
+  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);
-  border: var(--imlib_size_1) solid var(--imlib_chat_components_locationBubble_border_color);
-  padding: var(--imlib_size_10);
-  border-radius: var(--imlib_size_3);
+  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;
-  border-radius: var(--imlib_size_3);
+  border-radius: 3px;
 }
 
 [dir=ltr] .textWrapper {
-  margin: 0 0 0 var(--imlib_size_8);
+  margin: 0 0 0 var(--zd_size8) ;
 }
 
 [dir=rtl] .textWrapper {
-  margin: 0 var(--imlib_size_8) 0 0;
+  margin: 0 var(--zd_size8) 0 0 ;
 }
 
 .textLink {

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,33 +1,31 @@
 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); }
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
 
 /** ** 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';
-import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Components *** */
+
 import MessageBubble from '../MessageBubble/MessageBubble';
 import MessageBox from '../MessageBox/MessageBox';
 import MessageAvatar from '../MessageAvatar/MessageAvatar';
 import MessageActions from '../MessageActions/MessageActions';
 import MessageStatus from '../MessageStatus/MessageStatus';
-const {
-  FAILED
-} = messageStatusConstants;
+/** ** 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 {
     direction,
     isActive,
     isShowSender,
+    needSender,
     ownerDetails,
-    renderOwnerOverlay,
+    renderOwnerStatusIcon,
     status,
     statusTooltip,
     actions,
@@ -43,31 +41,53 @@ export default function Message(props) {
     messageStatusProps = dummyObject,
     messageActionsProps = dummyObject
   } = customProps;
-  const isIncoming = direction === directionConstants.IN;
-  const isOutgoing = direction === directionConstants.OUT;
-  const isFailed = status === FAILED;
-  function handleRenderMessageOwner() {
-    const {
-      src,
-      alternateSrc,
-      name
-    } = ownerDetails || dummyObject;
-    const props = {
-      src,
-      alternateSrc,
-      title: name,
-      renderIcon: renderOwnerOverlay
-    };
-    return ownerDetails ? /*#__PURE__*/React.createElement(MessageAvatar, _extends({}, props, messageOwnerProps)) : null;
-  }
-  function handleRenderMessageStatus() {
+  const {
+    isIncoming,
+    isOutgoing
+  } = getMessageDirectionType({
+    messageDetails: {
+      direction
+    }
+  });
+  const {
+    isFailedMessage: isFailed
+  } = getMessageStatus({
+    messageDetails: {
+      status
+    }
+  });
+  /** ** Render Message Owner *** */
+
+  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));
+    }
+
+    return null;
+  }, [ownerDetails, messageOwnerProps, renderOwnerStatusIcon, isShowSender]);
+  /** ** Render Message Status *** */
+
+  const handleRenderMessageStatus = useCallback(() => {
     const props = {
       messageStatus: status,
       title: statusTooltip
     };
     return status ? /*#__PURE__*/React.createElement(MessageStatus, _extends({}, props, messageStatusProps)) : null;
-  }
-  function handleRenderMessageBox() {
+  }, [status, statusTooltip, messageStatusProps]);
+  /** ** Render MessageBox *** */
+
+  const handleRenderMessageBox = useCallback(() => {
     const props = {
       renderMessageStatus: handleRenderMessageStatus,
       renderMessage: renderContent,
@@ -76,21 +96,23 @@ export default function Message(props) {
       isOutgoing
     };
     return /*#__PURE__*/React.createElement(MessageBox, _extends({}, props, messageBoxProps));
-  }
-  function handleRenderMessageActions() {
+  }, [handleRenderMessageStatus, renderContent, messageBoxProps, isFailed, isIncoming, isOutgoing]);
+  /** ** Render Message Actions *** */
+
+  const handleRenderMessageActions = useCallback(() => {
     const props = {
       actions,
       onSelect: onSelectAction,
       renderSecondaryActions
     };
     return /*#__PURE__*/React.createElement(MessageActions, _extends({}, props, messageActionsProps));
-  }
-  const needMessageActions = !!actions;
+  }, [actions, onSelectAction, renderSecondaryActions, messageActionsProps]);
+  const needMessageActions = !!actions.length;
   return /*#__PURE__*/React.createElement(MessageBubble, _extends({
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
-    needSender: isShowSender,
+    needSender: needSender,
     renderMessageActions: handleRenderMessageActions,
     renderMessageBox: handleRenderMessageBox,
     renderMessageOwner: handleRenderMessageOwner

package/es/Message/props/defaultProps.js

@@ -1,11 +1,11 @@
 /** ** Constants *** */
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const messageDefaultProps = {
   direction: direction.IN,
   isActive: false,
   isShowSender: true,
-  customProps: {}
-  // renderContent: () => <div>Test</div>
+  customProps: dummyObject,
+  actions: dummyArray
 };
-
 export default messageDefaultProps;

package/es/Message/props/propTypes.js

@@ -1,60 +1,39 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
-
 /** ** Constants *** */
+
 import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
 import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
-const {
-  REPLY,
-  COPY,
-  DOWNLOAD,
-  CREATE_TICKET,
-  RESEND,
-  DELETE,
-  FORWARD
-} = defaultMessageActions;
-const {
-  SENT,
-  SAVED,
-  QUEUED,
-  DELIVERED,
-  READ,
-  UNSENT,
-  FAILED,
-  OUTGOING
-} = messageStatusConstants;
-const {
-  IN,
-  OUT
-} = direction;
 const messagePropTypes = {
-  direction: PropTypes.oneOf([IN, OUT]).isRequired,
+  direction: PropTypes.oneOf(Object.values(direction)).isRequired,
+  renderContent: PropTypes.func.isRequired,
   isActive: PropTypes.bool,
   isShowSender: PropTypes.bool,
+  needSender: PropTypes.bool,
   ownerDetails: PropTypes.shape({
-    src: PropTypes.string,
     alternateSrc: PropTypes.string,
-    name: PropTypes.string
+    name: PropTypes.string,
+    src: PropTypes.string
   }),
-  renderOwnerOverlay: PropTypes.func,
-  status: PropTypes.oneOf([SENT, SAVED, QUEUED, DELIVERED, READ, UNSENT, FAILED, OUTGOING]),
+  renderOwnerStatusIcon: PropTypes.func,
+  status: PropTypes.oneOf(Object.values(messageStatusConstants)),
   statusTooltip: PropTypes.string,
   actions: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([REPLY, COPY, DOWNLOAD, CREATE_TICKET, RESEND, DELETE, FORWARD])]).isRequired,
-    displayText: PropTypes.string,
-    renderFunction: PropTypes.func,
-    iconTitle: PropTypes.string
+    displayText: PropTypes.string.isRequired,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(Object.values(defaultMessageActions))]).isRequired,
+    iconTitle: PropTypes.string,
+    isDisabled: PropTypes.bool,
+    renderFunction: PropTypes.func
   })),
-  onSelectAction: PropTypes.func,
+  onSelectAction: PropTypes.func.isRequired,
   renderSecondaryActions: PropTypes.func,
-  renderContent: PropTypes.func.isRequired,
   customProps: PropTypes.shape({
+    messageActionsProps: PropTypes.object,
+    messageBoxProps: PropTypes.object,
     messageBubbleProps: PropTypes.object,
     messageOwnerProps: PropTypes.object,
-    messageBoxProps: PropTypes.object,
-    messageStatusProps: PropTypes.object,
-    messageActionsProps: PropTypes.object
+    messageStatusProps: PropTypes.object
   })
 };
 export default messagePropTypes;

package/es/MessageAction/MessageAction.js

@@ -1,44 +1,57 @@
-/* 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';
 /** ** Components *** */
+
 import MoreActionItem from '../MoreActionItem/MoreActionItem';
 import ActionIcon from '../ActionIcon/ActionIcon';
-
 /** ** Constants *** */
+
 import messageActionsDefaultProps from './props/defaultProps';
 import messageActionsPropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 export default function MessageAction(props) {
   const {
     displayText,
     id,
-    index,
-    renderIcon,
     onClick,
     isShowInMore,
     iconTitle,
-    actionIconCustomStyle,
-    moreItemCustomStyle,
-    closePopup
+    customProps,
+    closePopup,
+    isDisabled,
+    needMoreActionItemIcon
   } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, {
+  const {
+    moreActionItemProps = dummyObject,
+    actionIconProps = dummyObject
+  } = customProps;
+  const renderIcon = useCallback( // eslint-disable-next-line no-confusing-arrow
+  function () {
+    let {
+      id
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return needMoreActionItemIcon ? /*#__PURE__*/React.createElement(ActionIcon, _extends({
+      id: id,
+      needIconOnly: true
+    }, actionIconProps)) : null;
+  }, [actionIconProps, needMoreActionItemIcon]);
+  return isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, _extends({
     closePopup: closePopup,
-    customStyle: moreItemCustomStyle,
     displayText: displayText,
-    iconTitle: iconTitle,
     id: id,
-    index: index,
+    isDisabled: isDisabled,
+    needIcon: needMoreActionItemIcon,
     onClick: onClick,
-    renderIcon: renderIcon
-  }) : /*#__PURE__*/React.createElement(ActionIcon, {
-    customStyle: actionIconCustomStyle,
+    renderIcon: renderIcon,
+    title: iconTitle
+  }, moreActionItemProps)) : /*#__PURE__*/React.createElement(ActionIcon, _extends({
     id: id,
+    isDisabled: isDisabled,
     onClick: onClick,
-    renderIcon: renderIcon,
     title: iconTitle
-  }));
+  }, actionIconProps));
 }
 MessageAction.propTypes = messageActionsPropTypes;
 MessageAction.defaultProps = messageActionsDefaultProps;

package/es/MessageAction/props/defaultProps.js

@@ -1,8 +1,8 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const messageActionDefaultProps = {
-  actionIconCustomStyle: dummyObject,
-  moreItemCustomStyle: dummyObject,
-  isShowInMore: false
+  customProps: dummyObject,
+  isShowInMore: false,
+  needMoreActionItemIcon: true
 };
 export default messageActionDefaultProps;

package/es/MessageAction/props/propTypes.js

@@ -1,14 +1,17 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const messageActionPropTypes = {
-  displayText: PropTypes.string,
-  id: PropTypes.string,
-  index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  renderIcon: PropTypes.func,
-  onClick: PropTypes.func,
-  isShowInMore: PropTypes.bool,
+  displayText: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  closePopup: PropTypes.func,
+  customProps: PropTypes.shape({
+    actionIconProps: PropTypes.object,
+    moreActionItemProps: PropTypes.object
+  }),
   iconTitle: PropTypes.string,
-  actionIconCustomStyle: PropTypes.object,
-  moreItemCustomStyle: PropTypes.object
+  isDisabled: PropTypes.bool,
+  isShowInMore: PropTypes.bool,
+  needMoreActionItemIcon: PropTypes.bool
 };
 export default messageActionPropTypes;