@zohoim/chat-components 0.0.2 → 0.0.4

package/es/ActionIcon/ActionIcon.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-bind */
 /* eslint-disable max-len */
 
 /** ** Libraries *** */
@@ -21,25 +22,34 @@ export default function ActionIcon(props) {
     renderIcon,
     customStyle,
     onClick,
-    id
+    id,
+    title
   } = props;
-  function handleClick() {
-    onClick && onClick(id);
+  function handleClick(e) {
+    onClick && onClick({
+      e,
+      id
+    });
   }
 
-  /* external customization */
+  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* css classnames added based on logic */
+
+  /* CSS classnames added based on logic */
   const {
     actionIconClass
   } = cssJSLogic(props, newStyle);
-  const icon = renderHandler(renderIcon)();
+
+  /* Render Icon */
+  const icon = renderHandler(renderIcon)({
+    id
+  });
   return icon ? /*#__PURE__*/React.createElement("div", {
     onClick: handleClick,
-    className: actionIconClass
+    className: actionIconClass,
+    "data-title": title
   }, icon) : null;
 }
 ActionIcon.propTypes = actionIconPropTypes;
 ActionIcon.defaultProps = actionIconDefaultProps;
-ActionIcon.displayName = 'ActionIcon';
-// ActionIcons.constantProps = constantProps;
+ActionIcon.displayName = 'ActionIcon';

package/es/ActionIcon/css/cssJSLogic.js

@@ -1,3 +1,4 @@
+/** ** Methods *** */
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
   const actionIconClass = compileClassNames({

package/es/ActionIcon/props/defaultProps.js

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

package/es/ActionIcon/props/propTypes.js

@@ -1,8 +1,10 @@
+/** ** Libraries *** */
 import PropTypes from 'prop-types';
 const actionIconPropTypes = {
   customStyle: PropTypes.object,
-  renderIcon: PropTypes.func,
+  renderIcon: PropTypes.func.isRequired,
   onClick: PropTypes.func,
-  id: PropTypes.string
+  id: PropTypes.string,
+  title: PropTypes.string
 };
 export default actionIconPropTypes;

package/es/IMIntegrationIcon/IMIntegrationIcon.js

@@ -0,0 +1,90 @@
+/* eslint-disable react/jsx-no-bind */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Icons *** */
+import WhatsappIcon from '../icons/iconSrc/integrations/ChWhatsApp';
+import TelegramIcon from '../icons/iconSrc/integrations/TtTelegram';
+import InstagramIcon from '../icons/iconSrc/integrations/ChInstagram';
+import ASAPIcon from '../icons/iconSrc/integrations/TtASAP';
+import WeChatIcon from '../icons/iconSrc/integrations/TtWechat';
+import TwillioIcon from '../icons/iconSrc/integrations/TtTwillio';
+import LineIcon from '../icons/iconSrc/integrations/TtTwitter';
+// import TwitterIcon from '../icons/iconSrc/integrations/TtTwitter';
+
+/** ** CSS *** */
+import style from './css/IMIntegrationIcon.module.css';
+
+/** ** Methods *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Constants *** */
+import imIntegrationIconDefaultProps from './props/defaultProps';
+import imIntegrationIconPropTypes from './props/propTypes';
+import constantProps from './props/propConstants';
+import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  ASAP,
+  WECHAT,
+  TWILLIO,
+  LINE
+} = integrationConstants;
+const integrationIconMapping = {
+  [WHATSAPP]: WhatsappIcon,
+  [TELEGRAM]: TelegramIcon,
+  [INSTAGRAM]: InstagramIcon,
+  [ASAP]: ASAPIcon,
+  [WECHAT]: WeChatIcon,
+  [TWILLIO]: TwillioIcon,
+  [LINE]: LineIcon
+  // [TWITTER]: TwitterIcon
+};
+
+export default function IMIntegrationIcon(props) {
+  const {
+    customStyle,
+    isCustom,
+    renderIcon,
+    title
+  } = props;
+
+  /* external customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+  const {
+    iconWrapperClass,
+    iconStyle
+  } = cssJSLogic(props, newStyle);
+  function handleClick(e) {
+    const {
+      id,
+      onClick
+    } = props;
+    onClick && onClick({
+      id,
+      e
+    });
+  }
+  function renderDefaultIcon() {
+    const {
+      integrationName
+    } = props;
+    const IntegrationIcon = integrationIconMapping[integrationName] || null;
+    return IntegrationIcon ? /*#__PURE__*/React.createElement("div", {
+      className: iconWrapperClass,
+      "data-title": title,
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(IntegrationIcon, {
+      customStyle: iconStyle
+    })) : null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isCustom ? renderIcon() : renderDefaultIcon());
+}
+IMIntegrationIcon.defaultProps = imIntegrationIconDefaultProps;
+IMIntegrationIcon.propTypes = imIntegrationIconPropTypes;
+IMIntegrationIcon.constantProps = constantProps;

package/es/IMIntegrationIcon/css/IMIntegrationIcon.module.css

@@ -0,0 +1,98 @@
+.varClass {
+  --integrationIcon-small_height: var(--imlib_size_22);
+  --integrationIcon-small_width: var(--imlib_size_22);
+  --integrationIcon-medium_height: var(--imlib_size_26);
+  --integrationIcon-medium_width: var(--imlib_size_26);
+}
+
+.integrationIcon {
+  composes: varClass;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 50%;
+}
+
+.integrationIcon :global(.path-0),
+.twillioIcon :global(.cls-1),
+.asapIcon :global(.cls-1),
+.weChatIcon :global(.cls-1),
+.weChatIcon :global(.path-0),
+.lineIcon :global(.cls-1){
+  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
+}
+
+.integrationIcon :global(.path-1),
+.twillioIcon :global(.path-0),
+.twillioIcon :global(.path-1),
+.twillioIcon :global(.path-2),
+.twillioIcon :global(.path-3),
+.twillioIcon :global(.path-4),
+.asapIcon :global(.path-0),
+.asapIcon :global(.path-1),
+.asapIcon :global(.path-2),
+.weChatIcon :global(.cls-2),
+.weChatIcon :global(.path-2),
+.weChatIcon :global(.path-3),
+.weChatIcon :global(.path-4),
+.lineIcon :global(.cls-2),
+.lineIcon :global(.path-0),
+.lineIcon :global(.path-1),
+.lineIcon :global(.path-2),
+.lineIcon :global(.path-3) {
+  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
+}
+
+.small {
+  width: var(--integrationIcon-small_height);
+  height: var(--integrationIcon-small_width);
+}
+
+.medium {
+  width: var(--integrationIcon-medium_height);
+  height: var(--integrationIcon-medium_width);
+}
+
+.whatsappIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_whatsapp_color
+  );
+}
+
+.telegramIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_telegram_color
+  );
+}
+
+.weChatIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_wechat_color);
+}
+
+.lineIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_line_color);
+}
+
+.twillioIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_twillio_color
+  );
+}
+
+
+.instagramIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_instagram_color
+  );
+}
+
+.asapIcon {
+  background-color: var(--imlib_chat_components_imIntegrationIcon_asap_color);
+}
+
+/* .twitterIcon {
+  background-color: var(
+    --imlib_chat_components_imIntegrationIcon_twitter_color
+  );
+} */

package/es/IMIntegrationIcon/css/cssJSLogic.js

@@ -0,0 +1,56 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+
+/** ** Constants *** */
+import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+import constantProps from '../props/propConstants';
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  ASAP,
+  WECHAT,
+  TWILLIO,
+  LINE
+} = integrationConstants;
+export default function cssJSLogic(props, style) {
+  const {
+    integrationName,
+    size
+  } = props;
+  const isWhatsAppIcon = integrationName === WHATSAPP;
+  const isTelegramIcon = integrationName === TELEGRAM;
+  const isInstagramIcon = integrationName === INSTAGRAM;
+  const isASAPIcon = integrationName === ASAP;
+  const isWeChatIcon = integrationName === WECHAT;
+  const isTwillioIcon = integrationName === TWILLIO;
+  const isLineIcon = integrationName === LINE;
+  // const isTwitterIcon = integrationName === TWITTER;
+
+  const isSmall = size === constantProps.SIZE.SMALL;
+  const isMedium = size === constantProps.SIZE.MEDIUM;
+  const iconWrapperClass = compileClassNames({
+    [style.integrationIcon]: true,
+    [style.small]: isSmall,
+    [style.medium]: isMedium,
+    [style.whatsappIcon]: isWhatsAppIcon,
+    [style.telegramIcon]: isTelegramIcon,
+    [style.instagramIcon]: isInstagramIcon,
+    [style.asapIcon]: isASAPIcon,
+    [style.weChatIcon]: isWeChatIcon,
+    [style.twillioIcon]: isTwillioIcon,
+    [style.lineIcon]: isLineIcon
+    // [style.twitterIcon]: isTwitterIcon
+  });
+
+  const iconClass = compileClassNames({
+    [style.small]: isSmall,
+    [style.medium]: isMedium
+  });
+  return {
+    iconWrapperClass,
+    iconStyle: {
+      base: iconClass
+    }
+  };
+}

package/es/IMIntegrationIcon/index.js

@@ -0,0 +1,2 @@
+export { default as IMIntegrationIcon } from './IMIntegrationIcon';
+export { default as IMIntegrationIconPropTypes } from './props/propTypes';

package/es/IMIntegrationIcon/props/defaultProps.js

@@ -0,0 +1,9 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import constantProps from './propConstants';
+const imIntegrationIconDefaultProps = {
+  customStyle: dummyObject,
+  size: constantProps.SIZE.SMALL,
+  isCustom: false
+};
+export default imIntegrationIconDefaultProps;

package/es/IMIntegrationIcon/props/propConstants.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
+export default {
+  SIZE: {
+    SMALL: sizes.SMALL,
+    MEDIUM: sizes.MEDIUM
+  }
+};

package/es/IMIntegrationIcon/props/propTypes.js

@@ -0,0 +1,25 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+
+/** ** Constants *** */
+import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  ASAP,
+  WECHAT,
+  TWILLIO,
+  LINE
+} = integrationConstants;
+const imIntegrationIconPropTypes = {
+  integrationName: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, ASAP, WECHAT, TWILLIO, LINE]),
+  customStyle: PropTypes.object,
+  isCustom: PropTypes.bool,
+  renderIcon: PropTypes.func,
+  size: PropTypes.oneOf([sizes.SMALL, sizes.MEDIUM]),
+  id: PropTypes.string,
+  onClick: PropTypes.func
+};
+export default imIntegrationIconPropTypes;

package/es/IMMessage/IMMessage.js

@@ -0,0 +1,143 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+// import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import imMessageDefaultProps from './props/defaultProps';
+import imMessagePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+// import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
+// import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+// import style from './css/IMMessage.module.css';
+
+/** ** Components *** */
+import MessageBubble from '../MessageBubble/MessageBubble';
+import MessageBox from '../MessageBox/MessageBox';
+import IMMessageAvatar from '../IMMessageAvatar/IMMessageAvatar';
+import IMMessageActions from '../IMMessageActions/IMMessageActions';
+import IMMessageStatus from '../IMMessageStatus/IMMessageStatus';
+export default function IMMessage(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*/
+
+    /* MessageBox Props Start */
+    isFailedMessage,
+    needMessageBox,
+    renderMessage,
+    renderMessageFooter,
+    renderMessageHeader,
+    messageBoxCustomStyle,
+    /*MessageBox Props End */
+
+    /* MessageAction Props Start */
+    messageActions,
+    actionsDefaultShowCount,
+    actionIconCustomStyle,
+    moreActionItemCustomStyle,
+    onSelectAction,
+    messageActionCustomStyle,
+    moreActionPopupCustomStyle,
+    renderSecondaryActions,
+    /* MessageAction Props End */
+
+    /*MessageStatus Props Start */
+    messageStatus,
+    messageStatusCustomStyle,
+    statusTitle
+    /*MessageStatus Props End */
+  } = props;
+  function handleRenderMessageStatus() {
+    const props = {
+      messageStatus,
+      customStyle: messageStatusCustomStyle,
+      title: statusTitle
+    };
+    return /*#__PURE__*/React.createElement(IMMessageStatus, props);
+  }
+  function handleRenderMessageBox() {
+    const props = {
+      renderMessageFooter,
+      renderMessageHeader,
+      renderMessageStatus: handleRenderMessageStatus,
+      renderMessage,
+      customStyle: messageBoxCustomStyle,
+      isFailed: isFailedMessage
+    };
+    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
+    };
+    return isShowSender ? /*#__PURE__*/React.createElement(IMMessageAvatar, props) : null;
+  }
+  function handleRenderMessageActions() {
+    const props = {
+      actions: messageActions,
+      renderSecondaryActions: renderSecondaryActions,
+      defaultShowCount: actionsDefaultShowCount,
+      actionIconCustomStyle: actionIconCustomStyle,
+      moreItemCustomStyle: moreActionItemCustomStyle,
+      onSelect: onSelectAction,
+      customStyle: messageActionCustomStyle,
+      morePopupCustomStyle: moreActionPopupCustomStyle
+    };
+    return /*#__PURE__*/React.createElement(IMMessageActions, props);
+  }
+  return /*#__PURE__*/React.createElement(MessageBubble, {
+    direction: direction,
+    isActive: isActive,
+    needMessageActions: needMessageActions,
+    renderMessageBox: handleRenderMessageBox,
+    renderMessageBoxFooter: renderMessageBoxFooter,
+    renderMessageOwner: handleRenderMessageOwner,
+    renderMessageActions: handleRenderMessageActions,
+    customStyle: customStyle,
+    needSender: needSender,
+    isShowSender: isShowSender
+  });
+}
+IMMessage.propTypes = imMessagePropTypes;
+IMMessage.defaultProps = imMessageDefaultProps;
+IMMessage.displayName = 'IMMessage';

package/es/IMMessage/css/cssJSLogic.js

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

package/es/IMMessage/index.js

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

package/es/IMMessage/props/defaultProps.js

@@ -0,0 +1,51 @@
+// import React from 'react';
+
+/** ** Constants *** */
+import { dummyObject, dummyArray } from '@zohoim/chat-components-utils/es/constants';
+import { direction } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+// import integrationConstants from '@zohoim/chat-components-utils/es/constants/integrationConstants';
+import sizes from '@zohoim/chat-components-utils/es/constants/sizes';
+import { actionsDefaultShowCount } from '@zohoim/chat-components-utils/es/constants/messageActionConstants';
+// import messageStatusConstants from '@zohoim/chat-components-utils/es/constants/messageStatusConstants';
+
+// const { WHATSAPP } = integrationConstants;
+// const { READ } = messageStatusConstants;
+
+const imMessageDefaultProps = {
+  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>
+};
+
+export default imMessageDefaultProps;