@zohoim/chat-components 0.0.10 → 0.0.13

package/es/im/IMTextBubble/IMTextBubble.js

@@ -12,7 +12,6 @@ import imTextBubbleDefaultProps from './props/defaultProps';
 import imTextBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -43,10 +42,10 @@ export default function IMTextBubble(props) {
     className: imTextBubbleWrapperClass
   }, isShowQuote ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(QuoteIcon, null)) : null, /*#__PURE__*/React.createElement(TextBubble, {
     customStyle: textBubbleCustomStyle,
-    message: sanitizedDisplayMessage,
     isShowMoreText: isShowSeeMore,
-    onClickMore: onLoadFullMessage,
-    moreText: moreText
+    message: sanitizedDisplayMessage,
+    moreText: moreText,
+    onClickMore: onLoadFullMessage
   }));
 }
 IMTextBubble.propTypes = imTextBubblePropTypes;

package/es/im/IMTicketLink/IMTicketLink.js

@@ -14,9 +14,7 @@ import imTicketLinkDefaultProps from './props/defaultProps';
 import imTicketLinkPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
-import { URLValidator } from '@zohoim/chat-components-utils/es/imUtils/security';
 
 /** ** Styles *** */
 import style from './css/IMTicketLink.module.css';
@@ -38,8 +36,8 @@ export default function IMTicketLink(props) {
   } = cssJSLogic(props, newStyle);
   return ticketNumber ? /*#__PURE__*/React.createElement("a", {
     className: imTicketLinkClass,
-    onClick: onClick,
     href: ticketURL,
+    onClick: onClick,
     rel: "noopener noreferrer"
   }, ticketNumber) : null;
 }

package/es/im/IMVideoBubble/IMVideoBubble.js

@@ -12,7 +12,6 @@ import imVideoBubbleDefaultProps from './props/defaultProps';
 import imVideoBubblePropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
@@ -47,14 +46,14 @@ export default function IMVideoBubble(props) {
   return isShow ? /*#__PURE__*/React.createElement("div", {
     className: imVideoBubbleClass
   }, /*#__PURE__*/React.createElement(VideoBubble, {
-    customStyle: videoBubbleCustomStyle,
-    headerCustomStyle: headerCustomStyle,
     audioCustomStyle: videoCustomStyle,
     controlsCustomStyle: controlsCustomStyle,
+    customStyle: videoBubbleCustomStyle,
     fileName: fileName,
     fileSize: fileSize,
+    fileType: fileType,
     fileURL: fileURL,
-    fileType: fileType
+    headerCustomStyle: headerCustomStyle
   })) : null;
 }
 IMVideoBubble.propTypes = imVideoBubblePropTypes;

package/es/im/index.js

@@ -1,7 +1,5 @@
 export * from './IMIntegrationIcon';
-export * from './IMMessageActions';
 export * from './IMMessageAvatar';
-export * from './IMMessageStatus';
 export * from './IMMessage';
 export * from './IMDateTime';
 export * from './IMTicketLink';

package/es/index.js

@@ -1,37 +1,35 @@
-export * from "./MessageBubble";
+export * from './MessageBubble';
 
 // export * from './AvatarSpace';
-export * from "./MessageActions";
-export * from "./MessageBox";
-export * from "./MessageBoxHeader";
-export * from "./MessageBoxFooter";
-export * from "./ActionIcon";
-export * from "./MessageActionsMore";
-export * from "./TextMessage";
-export * from "./MessageAvatar";
-export * from "./MoreActionItem";
-export * from "./MessageAction";
-export * from "./Theme";
-export * from "./MessageWrapper";
-export * from "./Message";
-export * from "./AudioBubble";
-export * from "./AttachmentBubble";
-export * from "./VideoBubble";
-export * from "./ImageBubble";
-export * from "./TextBubble";
-export * from "./ArticleBubble";
-export * from "./LocationBubble";
-export * from "./InfoBubble";
-export * from "./AttachmentBubbleInfo";
-export * from "./Audio";
-export * from "./Video";
-export * from "./ReplyBubble";
-export * from "./ReplyBubbleHeader";
-export * from "./LazyLoadImage";
+export * from './MessageActionsWrapper';
+export * from './MessageActions';
+export * from './MessageBox';
+export * from './ActionIcon';
+export * from './MessageActionsMore';
+export * from './MessageAvatar';
+export * from './MoreActionItem';
+export * from './MessageAction';
+export * from './Theme';
+export * from './Message';
+export * from './AudioBubble';
+export * from './AttachmentBubble';
+export * from './VideoBubble';
+export * from './ImageBubble';
+export * from './TextBubble';
+export * from './ArticleBubble';
+export * from './LocationBubble';
+export * from './InfoBubble';
+export * from './AttachmentBubbleInfo';
+export * from './Audio';
+export * from './Video';
+export * from './ReplyBubble';
+export * from './ReplyBubbleHeader';
+export * from './LazyLoadImage';
 export * from './ReplyBubbleContent';
+export * from './MessageStatus';
 export * from './im';
 
 // ... export other components
 
-/*** CONSTANTS ***/
-export * from "./constants";
+/** * CONSTANTS ** */
+export * from './constants';

package/es/{MessageWrapper → unused/MessageWrapper}/MessageWrapper.js

@@ -12,7 +12,6 @@ import messageWrapperDefaultProps from './props/defaultProps';
 import messageWrapperPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */

package/es/{TextMessage → unused/TextMessage}/DefaultActions.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable max-len */
 import React from 'react';
-import { ActionIcon, MessageActions } from '..';
+import { ActionIcon, MessageActionsWrapper } from '../..';
 import ReplyIcon from '@zohodesk/icon/es/general/Reply';
 import CopyIcon from '@zohodesk/icon/es/general/Copy';
 import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
@@ -40,7 +40,7 @@ function DefaultActions(props) {
       renderIcon: () => /*#__PURE__*/React.createElement(DownloadIcon, null)
     });
   }
-  return /*#__PURE__*/React.createElement(MessageActions, {
+  return /*#__PURE__*/React.createElement(MessageActionsWrapper, {
     actions: [{
       id: 'Reply',
       renderFunction: renderReply
@@ -53,8 +53,8 @@ function DefaultActions(props) {
     }, ...customActions]
     // actions={actions}
     ,
-    renderMoreIcon: renderMoreIcon,
-    moreCount: moreCount
+    moreCount: moreCount,
+    renderMoreIcon: renderMoreIcon
   });
 }
 export default DefaultActions;

package/es/{TextMessage → unused/TextMessage}/TextMessage.js

@@ -3,17 +3,17 @@
 import React from 'react';
 
 /** ** Components *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import MessageBubble from '../MessageBubble/MessageBubble';
-import MessageBox from '../MessageBox/MessageBox';
-import MessageActions from '../MessageActions/MessageActions';
+import MessageBubble from '../../MessageBubble/MessageBubble';
+import MessageBox from '../../MessageBox/MessageBox';
+import MessageActionsWrapper from '../../MessageActionsWrapper/MessageActionsWrapper';
 
 /** ** Constants *** */
 import textMessageDefaultProps from './props/defaultProps';
 import textMessagePropTypes from './props/propTypes';
 
 /** ** Styles *** */
-import style from './css/TextMessage.module.css';
+// import style from './css/TextMessage.module.css';
+
 export default function TextMessage(props) {
   const {
     direction,
@@ -23,8 +23,8 @@ export default function TextMessage(props) {
     renderMessageHeader,
     renderMessageFooter,
     renderMessageBoxFooter,
-    needAvatar,
-    avatarProps,
+    // needAvatar,
+    // avatarProps,
     messageActions,
     renderMoreIcon,
     actionsCount,
@@ -33,8 +33,8 @@ export default function TextMessage(props) {
   function renderMessageBox() {
     return /*#__PURE__*/React.createElement(MessageBox, {
       renderMessage: renderMessage,
-      renderMessageHeader: renderMessageHeader,
       renderMessageFooter: renderMessageFooter,
+      renderMessageHeader: renderMessageHeader,
       renderMessageStatus: renderStatus
     });
   }
@@ -43,22 +43,22 @@ export default function TextMessage(props) {
   }
 
   function renderMessageActions() {
-    return /*#__PURE__*/React.createElement(MessageActions, {
+    return /*#__PURE__*/React.createElement(MessageActionsWrapper, {
       actions: messageActions,
-      renderMoreIcon: renderMoreIcon,
-      moreCount: actionsCount
+      moreCount: actionsCount,
+      renderMoreIcon: renderMoreIcon
     });
   }
   return /*#__PURE__*/React.createElement(MessageBubble, {
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
-    renderMessageBox: renderMessageBox
+    renderMessageActions: renderMessageActions
     // renderMessageBoxHeader={() => null}
     ,
+    renderMessageBox: renderMessageBox,
     renderMessageBoxFooter: renderMessageBoxFooter,
-    renderMessageOwner: renderMessageOwner,
-    renderMessageActions: renderMessageActions
+    renderMessageOwner: renderMessageOwner
   });
 }
 TextMessage.displayName = 'TextMessage';

package/es/{TextMessage → unused/TextMessage}/TextMessage1.js

@@ -3,31 +3,31 @@
 import React from 'react';
 
 /** ** Components *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import { MessageBubble, AvatarSpace, MessageBox, MessageActions } from '..';
+import { MessageBubble, MessageBox, MessageActionsWrapper } from '../..';
 
 /** ** Constants *** */
 import textMessageDefaultProps from './props/defaultProps';
 import textMessagePropTypes from './props/propTypes';
 
 /** ** Styles *** */
-import style from './css/TextMessage.module.css';
+// import style from './css/TextMessage.module.css';
+
 export default function TextMessage(props) {
   const {
     direction,
     isActive,
     needMessageActions,
     message,
-    renderMessage,
+    // renderMessage,
     renderMessageHeader,
     renderMessageFooter,
     renderMessageBoxFooter,
-    needAvatar,
-    avatarProps,
+    // needAvatar,
+    // avatarProps,
     messageActions,
     renderMoreIcon,
-    actionsCount,
-    customStyle
+    actionsCount
+    // customStyle
   } = props;
   function renderMessageText() {
     /*#__PURE__*/React.createElement("div", null, message);
@@ -35,33 +35,30 @@ export default function TextMessage(props) {
   function renderMessageBox() {
     return /*#__PURE__*/React.createElement(MessageBox, {
       renderMessage: renderMessageText,
-      renderMessageHeader: renderMessageHeader,
-      renderMessageFooter: renderMessageFooter
+      renderMessageFooter: renderMessageFooter,
+      renderMessageHeader: renderMessageHeader
     });
   }
   function renderAvatarSpace() {
-    return /*#__PURE__*/React.createElement(AvatarSpace, {
-      needAvatar: needAvatar,
-      avatarProps: avatarProps
-    });
+    return null;
   }
   function renderMessageActions() {
-    return /*#__PURE__*/React.createElement(MessageActions, {
+    return /*#__PURE__*/React.createElement(MessageActionsWrapper, {
       actions: messageActions,
-      renderMoreIcon: renderMoreIcon,
-      moreCount: actionsCount
+      moreCount: actionsCount,
+      renderMoreIcon: renderMoreIcon
     });
   }
   return /*#__PURE__*/React.createElement(MessageBubble, {
     direction: direction,
     isActive: isActive,
     needMessageActions: needMessageActions,
-    renderMessageBox: renderMessageBox
+    renderAvatarSpace: renderAvatarSpace
     // renderMessageBoxHeader={() => null}
     ,
-    renderMessageBoxFooter: renderMessageBoxFooter,
-    renderAvatarSpace: renderAvatarSpace,
-    renderMessageActions: renderMessageActions
+    renderMessageActions: renderMessageActions,
+    renderMessageBox: renderMessageBox,
+    renderMessageBoxFooter: renderMessageBoxFooter
   });
 }
 TextMessage.propTypes = textMessageDefaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -36,12 +36,12 @@
     "@zohodesk/utils": "1.3.9",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "^0.0.8",
-    "@zohoim/chat-components-utils": "^0.0.7"
+    "@zohoim/chat-components-hooks": "^0.0.11",
+    "@zohoim/chat-components-utils": "^0.0.10"
   },
   "devDependencies": {
     "html-to-react": "^1.4.8",
     "react-to-jsx": "^1.3.2"
   },
-  "gitHead": "b860a835a61b65c3776568990f0c00ade3904269"
+  "gitHead": "a17ea9881b19b8533d05d1ea4334b47d6aa86797"
 }

package/es/im/IMMessage/renderChild/renderMessage.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
-export default function renderMessageBoxFooter(props) {
-  return /*#__PURE__*/React.createElement(IMMessageStatus, null);
-}

package/es/im/IMMessage/renderChild/renderMessageActions.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import IMMessageActions from '../../IMMessageActions/IMMessageActions';
-export default function renderMessageBoxFooter(props) {
-  return /*#__PURE__*/React.createElement(IMMessageActions, null);
-}

package/es/im/IMMessage/renderChild/renderMessageBox.js

@@ -1,15 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import MessageBox from '../../MessageBox/MessageBox';
-export default function renderMessageBox(props) {
-  const {
-    renderMessageFooter,
-    renderMessageHeader,
-    renderMessageStatus,
-    renderMessage,
-    customStyle
-  } = props;
-  return /*#__PURE__*/React.createElement(MessageBox, props);
-}

package/es/im/IMMessage/renderChild/renderMessageBoxFooter.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import MessageBoxFooter from '../../MessageBoxFooter/MessageBoxFooter';
-export default function renderMessageBoxFooter(props) {
-  return /*#__PURE__*/React.createElement(MessageBoxFooter, null);
-}

package/es/im/IMMessage/renderChild/renderMessageFooter.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
-export default function renderMessageBoxFooter(props) {
-  return /*#__PURE__*/React.createElement(IMMessageStatus, null);
-}

package/es/im/IMMessage/renderChild/renderMessageHeader.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
-export default function renderMessageBoxFooter(props) {
-  return /*#__PURE__*/React.createElement(IMMessageStatus, null);
-}

package/es/im/IMMessage/renderChild/renderMessageOwner.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import IMMessageAvatar from '../../IMMessageAvatar/IMMessageAvatar';
-export default function renderMessageBoxFooter(props) {
-  return /*#__PURE__*/React.createElement(IMMessageAvatar, null);
-}

package/es/im/IMMessage/renderChild/renderMessageStatus.js

@@ -1,8 +0,0 @@
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import IMMessageStatus from '../../IMMessageStatus/IMMessageStatus';
-export default function renderMessageBoxFooter(props) {
-  return /*#__PURE__*/React.createElement(IMMessageStatus, props);
-}

package/es/im/IMMessageActions/IMMessageActions.js

@@ -1,150 +0,0 @@
-/* eslint-disable no-use-before-define */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-/* eslint-disable arrow-parens */
-
-/** ** Libraries *** */
-import React from 'react';
-
-/** ** Components *** */
-import ActionIcon from '../../ActionIcon/ActionIcon';
-import MessageActions from '../../MessageActions/MessageActions';
-import MessageAction from '../../MessageAction/MessageAction';
-
-/** ** Icons *** */
-import ReplyIcon from '@zohodesk/icon/es/general/Reply';
-import ReloadIcon from '@zohodesk/icon/es/general/Reload';
-import CopyIcon from '@zohodesk/icon/es/general/Copy';
-import DownloadIcon from '@zohodesk/icon/es/general/Cloud';
-import DeleteIcon from '@zohodesk/icon/es/general/Delete';
-import ForwardIcon from '@zohodesk/icon/es/channels/EmailForward';
-import MoreIcon from '@zohodesk/icon/es/general/More';
-import ConvertTicket from '../../icons/iconSrc/actions/ConvertTicket';
-
-/** ** Hooks *** */
-import useIMMessageActions from '@zohoim/chat-components-hooks/es/im/IMMessageActions/useIMMessageActions';
-
-/** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import cssJSLogic from './css/cssJSLogic';
-
-/** ** Constants *** */
-import imMessageActionsDefaultProps from './props/defaultProps';
-import imMessageActionsPropTypes from './props/propTypes';
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-import { defaultMessageActions } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
-
-/** ** CSS *** */
-import style from './css/IMMessageActions.module.css';
-const {
-  REPLY,
-  COPY,
-  DOWNLOAD,
-  CREATE_TICKET,
-  RESEND,
-  DELETE,
-  FORWARD
-} = defaultMessageActions;
-export default function IMMessageActions(props) {
-  const {
-    actions,
-    defaultShowCount,
-    actionIconCustomStyle,
-    moreItemCustomStyle,
-    onSelect,
-    customStyle,
-    morePopupCustomStyle,
-    renderSecondaryActions
-  } = props;
-
-  /* external customization */
-  const newStyle = useMergeStyle(style, customStyle);
-  /* css classnames added based on logic */
-  const {
-    moreIconClass,
-    secondaryActionsClass,
-    iconStyle
-  } = cssJSLogic(props, newStyle);
-  const {
-    actionDetails
-  } = useIMMessageActions({
-    actions,
-    defaultRenderFunction: renderAction
-  });
-  const {
-    allActions
-  } = actionDetails;
-  function handleClickAction(_ref) {
-    let {
-      id,
-      e
-    } = _ref;
-    onSelect && onSelect({
-      id,
-      e
-    });
-  }
-  function renderIcon(_ref2) {
-    let {
-      id
-    } = _ref2;
-    const iconMapping = {
-      [REPLY]: ReplyIcon,
-      [COPY]: CopyIcon,
-      [DOWNLOAD]: DownloadIcon,
-      [CREATE_TICKET]: ConvertTicket,
-      [RESEND]: ReloadIcon,
-      [DELETE]: DeleteIcon,
-      [FORWARD]: ForwardIcon
-    };
-    const IconComponent = iconMapping[id];
-    return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
-      customStyle: iconStyle
-    }) : null;
-  }
-  function renderAction() {
-    let {
-      id,
-      isShowInMore,
-      action,
-      closePopup
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const {
-      displayText,
-      iconTitle
-    } = action || dummyObject;
-    return /*#__PURE__*/React.createElement(MessageAction, {
-      displayText: displayText,
-      id: id,
-      index: id,
-      key: id,
-      renderIcon: renderIcon,
-      onClick: handleClickAction,
-      isShowInMore: isShowInMore,
-      iconTitle: iconTitle,
-      actionIconCustomStyle: actionIconCustomStyle,
-      moreItemCustomStyle: moreItemCustomStyle,
-      closePopup: closePopup
-    });
-  }
-  function renderMoreIcon() {
-    return /*#__PURE__*/React.createElement(ActionIcon, {
-      renderIcon: () => /*#__PURE__*/React.createElement("div", {
-        className: moreIconClass
-      }, /*#__PURE__*/React.createElement(MoreIcon, null)),
-      customStyle: actionIconCustomStyle
-    });
-  }
-  const secondaryActions = renderHandler(renderSecondaryActions)();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MessageActions, {
-    actions: allActions,
-    renderMoreIcon: renderMoreIcon,
-    defaultShowCount: defaultShowCount,
-    morePopupCustomStyle: morePopupCustomStyle
-  }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
-    className: secondaryActionsClass
-  }, secondaryActions) : null);
-}
-IMMessageActions.propTypes = imMessageActionsPropTypes;
-IMMessageActions.defaultProps = imMessageActionsDefaultProps;

package/es/im/IMMessageActions/css/IMMessageActions.module.css

@@ -1,31 +0,0 @@
-.varClass {
-  /* --imMessageActions-secondaryActions_margin: var(--imlib_size_5); */
-  --imMessageActions-action_icon_size: var(--imlib_size_15);
-}
-
-[dir=ltr] .moreIcon svg {
-  transform: rotate(90deg);
-}
-
-[dir=rtl] .moreIcon svg {
-  transform: rotate(-90deg);
-}
-
-.secondaryActions {
-  composes: varClass;
-  /* margin-top: var(--imMessageActions-secondaryActions_margin); */
-}
-
-[dir=ltr] .secondaryActions {
-  text-align: left;
-}
-
-[dir=rtl] .secondaryActions {
-  text-align: right;
-}
-
-.icon {
-  composes: varClass;
-  width: var(--imMessageActions-action_icon_size);
-  height: var(--imMessageActions-action_icon_size);
-}

package/es/im/IMMessageActions/css/cssJSLogic.js

@@ -1,20 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const moreIconClass = compileClassNames({
-    [style.moreIcon]: true
-  });
-  const secondaryActionsClass = compileClassNames({
-    [style.secondaryActions]: true
-  });
-  const iconClass = compileClassNames({
-    [style.icon]: true
-  });
-  return {
-    moreIconClass,
-    secondaryActionsClass,
-    iconStyle: {
-      base: iconClass
-    }
-  };
-}

package/es/im/IMMessageActions/index.js

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