@zohoim/chat-components 0.0.2 → 0.0.4

package/es/MessageAction/MessageAction.js

@@ -0,0 +1,42 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Components *** */
+import MoreActionItem from '../MoreActionItem/MoreActionItem';
+import ActionIcon from '../ActionIcon/ActionIcon';
+
+/** ** Constants *** */
+import messageActionsDefaultProps from './props/defaultProps';
+import messageActionsPropTypes from './props/propTypes';
+export default function MessageAction(props) {
+  const {
+    displayText,
+    id,
+    index,
+    renderIcon,
+    onClick,
+    isShowInMore,
+    iconTitle,
+    actionIconCustomStyle,
+    moreItemCustomStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isShowInMore ? /*#__PURE__*/React.createElement(MoreActionItem, {
+    displayText: displayText,
+    iconTitle: iconTitle,
+    id: id,
+    index: index,
+    customStyle: moreItemCustomStyle,
+    onClick: onClick,
+    renderIcon: renderIcon
+  }) : /*#__PURE__*/React.createElement(ActionIcon, {
+    renderIcon: renderIcon,
+    customStyle: actionIconCustomStyle,
+    onClick: onClick,
+    id: id,
+    title: iconTitle
+  }));
+}
+MessageAction.propTypes = messageActionsPropTypes;
+MessageAction.defaultProps = messageActionsDefaultProps;

package/es/MessageAction/index.js

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

package/es/MessageAction/props/defaultProps.js

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

package/es/MessageAction/props/propTypes.js

@@ -0,0 +1,14 @@
+/** ** 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,
+  iconTitle: PropTypes.string,
+  actionIconCustomStyle: PropTypes.object,
+  moreItemCustomStyle: PropTypes.object
+};
+export default messageActionPropTypes;

package/es/MessageActions/MessageActions.js

@@ -1,9 +1,11 @@
 /* eslint-disable max-len */
+
+/** ** Libraries *** */
 import React from 'react';
 
 /** ** Components *** */
 import { Container } from '@zohodesk/components/lib/Layout';
-import { MessageActionsMore } from '..';
+import MessageActionsMore from '../MessageActionsMore/MessageActionsMore';
 
 /** ** Hooks *** */
 import { useMessageAction } from '@zohoim/chat-components-hooks';
@@ -15,35 +17,56 @@ import constantProps from './props/propConstants';
 
 /** ** Methods *** */
 import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Style *** */
+import style from './css/MessageActions.module.css';
 function MessageActions(props) {
   const {
     actions,
     renderMoreIcon,
-    moreCount
+    defaultShowCount,
+    customStyle,
+    morePopupCustomStyle
   } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+  const {
+    actionsClass
+  } = cssJSLogic(props, newStyle);
   const {
     isShowMore: isShowMoreIcon,
     revampedActions = []
-  } = useMessageAction(actions, moreCount);
+  } = useMessageAction(actions, defaultShowCount);
   const {
     defaultActions = [],
     moreActions
   } = revampedActions;
   function renderRow(defaultActions, isShowMore) {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
     }, defaultActions.map(action => {
       const {
         id,
         renderFunction
       } = action;
-      return renderHandler(renderFunction)(id, false); // id, isRenderInMorePopup
+      return renderHandler(renderFunction)({
+        id,
+        isShowInMore: false,
+        action
+      }); // id, isRenderInMorePopup
     }), isShowMore ? /*#__PURE__*/React.createElement(MessageActionsMore, {
       actions: moreActions,
-      renderMoreIcon: renderMoreIcon
+      renderMoreIcon: renderMoreIcon,
+      customStyle: morePopupCustomStyle
     }) : null));
   }
-  return /*#__PURE__*/React.createElement("div", null, renderRow(defaultActions, isShowMoreIcon));
+  return /*#__PURE__*/React.createElement("div", {
+    className: actionsClass
+  }, renderRow(defaultActions, isShowMoreIcon));
 }
 MessageActions.defaultProps = messageActionsDefaultProps;
 MessageActions.propTypes = messageActionsPropTypes;

package/es/MessageActions/css/MessageActions.module.css

@@ -0,0 +1,3 @@
+.messageActions {
+  /*Use this class for message actions customization*/
+}

package/es/MessageActions/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const actionsClass = compileClassNames({
+    [style.messageActions]: true
+  });
+  return {
+    actionsClass
+  };
+}

package/es/MessageActions/index.js

@@ -1,2 +1 @@
-export { default as MessageActions } from './MessageActions';
-export { default as MessageActionsPropTypes } from './props/propTypes';
+export { default as MessageActions } from './MessageActions';

package/es/MessageActions/props/defaultProps.js

@@ -1,7 +1,10 @@
+/** ** Constants *** */
+import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
 import propConstants from './propConstants';
 const messageActionsDefaultProps = {
-  actions: [],
-  customStyle: {},
-  moreCount: propConstants.actions.moreCount
+  actions: dummyArray,
+  customStyle: dummyObject,
+  morePopupCustomStyle: dummyObject,
+  defaultShowCount: propConstants.actions.defaultShowCount
 };
 export default messageActionsDefaultProps;

package/es/MessageActions/props/propConstants.js

@@ -1,5 +1,7 @@
+/** ** Constants *** */
+import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
 export default {
   actions: {
-    moreCount: 2
+    defaultShowCount: actionsDefaultShowCount
   }
 };

package/es/MessageActions/props/propTypes.js

@@ -1,8 +1,12 @@
+/** ** Libraries *** */
 import PropTypes from 'prop-types';
 const messageActionsPropTypes = {
   renderMoreIcon: PropTypes.func,
-  actions: PropTypes.arrayOf(PropTypes.object),
-  moreCount: PropTypes.number,
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    renderFunction: PropTypes.func
+  })).isRequired,
+  defaultShowCount: PropTypes.number,
   customStyle: PropTypes.object
 };
 export default messageActionsPropTypes;

package/es/MessageActionsMore/MessageActionsMore.js

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
@@ -16,6 +14,10 @@ import { MSG_ACTION_POPUP_PORTAL } from '../constants';
 
 /** ** Methods *** */
 import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import cssJSLogic from './css/cssJsLogic';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
 /** ** Styles *** */
 import style from './css/MessageActionsMore.module.css';
@@ -24,6 +26,7 @@ function MessageActionsMoreComp(props) {
     actions,
     renderMoreIcon,
     customStyle,
+    popupSize,
     /**** Popup Props ****/
     getTargetRef,
     getContainerRef,
@@ -36,8 +39,16 @@ function MessageActionsMoreComp(props) {
     positionsOffset
   } = props;
   const moreIcon = renderHandler(renderMoreIcon)();
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    popupClass,
+    morePopupContainerClass
+  } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("span", {
-    className: style.container
+    className: morePopupContainerClass
   }, moreIcon ? /*#__PURE__*/React.createElement("div", {
     onClick: togglePopup,
     ref: getTargetRef
@@ -52,19 +63,26 @@ function MessageActionsMoreComp(props) {
     positionMapping: positionsOffset,
     positionsOffset: positionsOffset,
     portalId: MSG_ACTION_POPUP_PORTAL,
-    size: "small"
+    size: popupSize,
+    customClass: popupClass
     // isModel
   }, actions.map(action => {
     const {
       id,
       renderFunction
     } = action;
-    return renderHandler(renderFunction)(id, true); // id, isRenderInMorePopup
+    return renderHandler(renderFunction)({
+      id,
+      isShowInMore: true,
+      action
+    }); // id, isRenderInMorePopup
   })) : null);
 }
 const MessageActionsMore = Popup(MessageActionsMoreComp, '', '', {
   isAbsolutePositioningNeeded: false
 });
+MessageActionsMoreComp.defaultProps = messageActionsMoreDefaultProps;
+MessageActionsMoreComp.propTypes = messageActionsMorePropTypes;
 MessageActionsMore.defaultProps = messageActionsMoreDefaultProps;
 MessageActionsMore.propTypes = messageActionsMorePropTypes;
 MessageActionsMore.displayName = 'MessageActionsMore';

package/es/MessageActionsMore/css/MessageActionsMore.module.css

@@ -1,3 +1,19 @@
 .container {
   display: inline-block;
 }
+
+.popup {
+  /* use this class name for popup customization*/
+}
+
+.popupWrapper {
+  /* use this class name for popup wrapper customization*/
+}
+
+.mobilePopup {
+  /* use this class name for mobile popup customization*/
+}
+
+.mobilePopupWrapper {
+  /* use this class name for mobile popup wrapper customization*/
+}

package/es/MessageActionsMore/css/cssJsLogic.js

@@ -0,0 +1,28 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const popupClass = compileClassNames({
+    [style.popup]: true
+  });
+  const morePopupContainerClass = compileClassNames({
+    [style.container]: true
+  });
+  const popupWrapperClass = compileClassNames({
+    [style.container]: true
+  });
+  const mobilePopupClass = compileClassNames({
+    [style.container]: true
+  });
+  const mobilePopupWrapperClass = compileClassNames({
+    [style.container]: true
+  });
+  return {
+    popupClass: {
+      customDropBox: popupClass,
+      customMobileDropBox: mobilePopupClass,
+      customDropBoxWrap: popupWrapperClass,
+      customMobileDropBoxWrap: mobilePopupWrapperClass
+    },
+    morePopupContainerClass
+  };
+}

package/es/MessageActionsMore/props/defaultProps.js

@@ -1,4 +1,8 @@
-export default {
-  customStyle: {},
-  actions: []
-};
+/** ** Constants *** */
+import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
+const messageActionsMoreDefaultProps = {
+  customStyle: dummyObject,
+  actions: dummyArray,
+  popupSize: 'small'
+};
+export default messageActionsMoreDefaultProps;

package/es/MessageActionsMore/props/propTypes.js

@@ -1,6 +1,12 @@
+/** ** Libraries *** */
 import PropTypes from 'prop-types';
-export default {
+const messageActionsMorePropTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    renderFunction: PropTypes.func
+  })).isRequired,
   renderMoreIcon: PropTypes.func,
   customStyle: PropTypes.object,
-  actions: PropTypes.arrayOf(PropTypes.object)
-};
+  popupSize: PropTypes.string
+};
+export default messageActionsMorePropTypes;

package/es/MessageAvatar/MessageAvatar.js

@@ -0,0 +1,56 @@
+/** ** Libraries *** */
+import React from "react";
+
+/** ** Components *** */
+import Avatar from "@zohodesk/components/es/Avatar/Avatar";
+import { Container, Box } from "@zohodesk/components/es/Layout";
+
+/** ** CSS *** */
+import style from "./css/MessageAvatar.module.css";
+
+/** ** Methods *** */
+import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
+import renderHandler from "@zohoim/chat-components-utils/es/renderHandler";
+import cssJSLogic from "./css/cssJSLogic";
+
+/** ** Constants *** */
+import messageAvatarDefaultProps from "./props/defaultProps";
+import messageAvatarPropTypes from "./props/propTypes";
+export default function MessageAvatar(props) {
+  const {
+    src,
+    alternateSrc,
+    title,
+    size,
+    name,
+    customStyle,
+    iconTitle,
+    renderIcon
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  const icon = renderHandler(renderIcon)();
+
+  /* css classnames added based on logic */
+  const {
+    avatarWrapperClass,
+    iconClass,
+    avatarClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: avatarWrapperClass
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    src: src,
+    alternateSrc: alternateSrc,
+    title: title,
+    size: size,
+    name: name,
+    customClass: avatarClass
+  }), /*#__PURE__*/React.createElement("span", {
+    className: iconClass,
+    "data-title": iconTitle
+  }, icon));
+}
+MessageAvatar.defaultProps = messageAvatarDefaultProps;
+MessageAvatar.propTypes = messageAvatarPropTypes;

package/es/MessageAvatar/css/MessageAvatar.module.css

@@ -0,0 +1,21 @@
+.msgAvatar {
+  position: relative;
+  display: inline-flex;
+}
+
+.icon {
+  position: absolute;
+  bottom: -6px;
+}
+
+[dir=ltr] .icon {
+  right: -7px;
+}
+
+[dir=rtl] .icon {
+  left: -7px;
+}
+
+.avatar {
+  /* Use this class name for external customization  */
+}

package/es/MessageAvatar/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const iconClass = compileClassNames({
+    [style.icon]: true
+  });
+  const avatarWrapperClass = compileClassNames({
+    [style.msgAvatar]: true
+  });
+  const avatarClass = compileClassNames({
+    [style.avatar]: true
+  });
+  return {
+    iconClass,
+    avatarWrapperClass,
+    avatarClass
+  };
+}

package/es/MessageAvatar/index.js

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

package/es/MessageAvatar/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const messageAvatarDefaultProps = {
+  customStyle: dummyObject,
+  name: 'RAVI KUMAR',
+  size: 'small',
+  iconTitle: 'RK'
+};
+export default messageAvatarDefaultProps;

package/es/MessageAvatar/props/propTypes.js

@@ -0,0 +1,13 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const messageAvatarPropTypes = {
+  src: PropTypes.string,
+  alternateSrc: PropTypes.string,
+  title: PropTypes.string,
+  size: PropTypes.string,
+  name: PropTypes.string,
+  iconTitle: PropTypes.string,
+  renderIcon: PropTypes.func,
+  customStyle: PropTypes.object
+};
+export default messageAvatarPropTypes;

package/es/MessageBox/css/MessageBox.module.css

@@ -1,5 +1,6 @@
 .varClass {
   --messageBox-content_padding: var(--imlib_size_14);
+  --messageBox-content_size: var(--imlib_size_14);
   --messageBox-border_radius: var(--imlib_size_9);
   --messageBox-message_status_gap: var(--imlib_size_12);
   --messageBox-message_header_gap: var(--imlib_size_1);
@@ -13,14 +14,20 @@
   display: inline-flex;
   flex-direction: row;
   align-items: flex-end;
+  color: var(--imlib_chat_components_messageBox_text_color);
   /* max-width: var(--messageBox-max_width); */
   word-wrap: break-word;
+  font-size: var(--messageBox-content_size);
 
   background-color: var(--imlib_chat_components_messageBox_bg_color);
   padding: var(--messageBox-content_padding);
   border-radius: var(--messageBox-border_radius);
 }
 
+.messageContentWrapper {
+  /*Use this class for message content customization*/
+}
+
 .messageHeaderWrapper {
   margin-bottom: var(--messageBox-message_header_gap);
 }
@@ -36,3 +43,7 @@
 [dir=rtl] .messageStatusWrapper {
   margin-right: var(--messageBox-message_status_gap);
 }
+
+.failedMessageBox {
+  background-color: var(--imlib_chat_components_messageBox_failed_bg_color);
+}

package/es/MessageBox/css/cssJSLogic.js

@@ -1,7 +1,9 @@
+/** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
   const messageBoxClass = compileClassNames({
-    [style.messageBoxContainer]: true
+    [style.messageBoxContainer]: true,
+    [style.failedMessageBox]: props.isFailed === true
   });
   const messageContentWrapperClass = compileClassNames({
     [style.messageContentWrapper]: true

package/es/MessageBox/index.js

@@ -1,2 +1 @@
-export { default as MessageBox } from './MessageBox';
-export { default as MessageBoxPropTypes } from './props/propTypes';
+export { default as MessageBox } from './MessageBox';

package/es/MessageBox/props/defaultProps.js

@@ -1,3 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 export default {
-  customStyle: {}
+  customStyle: dummyObject,
+  isFailed: false
 };

package/es/MessageBox/props/propTypes.js

@@ -1,8 +1,10 @@
+/** ** Libraries *** */
 import PropTypes from 'prop-types';
 export default {
-  renderMessageBox: PropTypes.func,
-  renderMessageBoxFooter: PropTypes.func,
-  renderMessageBoxHeader: PropTypes.func,
+  renderMessageFooter: PropTypes.func,
+  renderMessageHeader: PropTypes.func,
   renderMessageStatus: PropTypes.func,
-  customStyle: PropTypes.object
+  renderMessage: PropTypes.func.isRequired,
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
 };

package/es/MessageBoxFooter/MessageBoxFooter.js

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+
 /** ** Libraries *** */
 import React from 'react';
 
@@ -14,17 +15,23 @@ import style from './css/MessageBoxFooter.module.css';
 
 /** ** Methods *** */
 import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
 function MessageBoxFooter(props) {
   const {
     renderFooter,
     customStyle
   } = props;
+  const footer = renderHandler(renderFooter)();
 
   /* external customization */
   const newStyle = useMergeStyle(style, customStyle);
-  return /*#__PURE__*/React.createElement("div", {
-    className: newStyle.footer
-  }, renderHandler(renderFooter)());
+  /* CSS classnames added based on logic */
+  const {
+    footerClass
+  } = cssJSLogic(props, newStyle);
+  return footer ? /*#__PURE__*/React.createElement("div", {
+    className: footerClass
+  }, footer) : null;
 }
 MessageBoxFooter.propTypes = messageBoxFooterPropTypes;
 MessageBoxFooter.defaultProps = messageBoxFooterDefaultProps;

package/es/MessageBoxFooter/css/MessageBoxFooter.module.css

@@ -1 +1,3 @@
-
+.footer {
+  /*Use this class name for footer customization*/
+}

package/es/MessageBoxFooter/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const footerClass = compileClassNames({
+    [style.footer]: true
+  });
+  return {
+    footerClass
+  };
+}

package/es/MessageBoxFooter/index.js

@@ -1,2 +1 @@
-export { default as MessageBoxFooter } from './MessageBoxFooter';
-export { default as MessageBoxFooterPropTypes } from './props/propTypes';
+export { default as MessageBoxFooter } from './MessageBoxFooter';

package/es/MessageBoxFooter/props/defaultProps.js

@@ -1,3 +1,5 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 export default {
-  customStyle: {}
+  customStyle: dummyObject
 };

package/es/MessageBoxFooter/props/propTypes.js

@@ -1,3 +1,4 @@
+/** ** Libraries *** */
 import PropTypes from 'prop-types';
 export default {
   renderFooter: PropTypes.func,