@zohoim/chat-components 0.0.11 → 0.0.14

package/es/ReplyBubbleHeader/css/cssJSLogic.js

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

package/es/TextBubble/css/cssJSLogic.js

@@ -1,18 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const textBubbleClass = compileClassNames({
-    [style.textBubble]: true
-  });
-  const textBubbleWrapperClass = compileClassNames({
-    [style.textBubbleWrapper]: true
-  });
-  const moreTextClass = compileClassNames({
-    [style.moreText]: true
-  });
-  return {
-    textBubbleClass,
-    moreTextClass,
-    textBubbleWrapperClass
-  };
-}

package/es/TextMessage/DefaultActions.js

@@ -1,60 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-import React from 'react';
-import { ActionIcon, MessageActions } 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';
-import MoreIcon from '@zohodesk/icon/es/general/More';
-function DefaultActions(props) {
-  const {
-    customActions,
-    moreCount,
-    onClick
-  } = props;
-  function renderMoreIcon() {
-    return /*#__PURE__*/React.createElement(ActionIcon, {
-      renderIcon: () => /*#__PURE__*/React.createElement("div", {
-        className: style.moreIcon
-      }, /*#__PURE__*/React.createElement(MoreIcon, null))
-    });
-  }
-  function handleIconClick(id) {
-    onClick(id);
-  }
-  function renderReply() {
-    return /*#__PURE__*/React.createElement(ActionIcon, {
-      onClick: handleIconClick,
-      renderIcon: () => /*#__PURE__*/React.createElement(ReplyIcon, null)
-    });
-  }
-  function renderCopy() {
-    return /*#__PURE__*/React.createElement(ActionIcon, {
-      onClick: handleIconClick,
-      renderIcon: () => /*#__PURE__*/React.createElement(CopyIcon, null)
-    });
-  }
-  function renderDownload() {
-    return /*#__PURE__*/React.createElement(ActionIcon, {
-      onClick: handleIconClick,
-      renderIcon: () => /*#__PURE__*/React.createElement(DownloadIcon, null)
-    });
-  }
-  return /*#__PURE__*/React.createElement(MessageActions, {
-    actions: [{
-      id: 'Reply',
-      renderFunction: renderReply
-    }, {
-      id: 'Copy',
-      renderFunction: renderCopy
-    }, {
-      id: 'Download',
-      renderFunction: renderDownload
-    }, ...customActions]
-    // actions={actions}
-    ,
-    renderMoreIcon: renderMoreIcon,
-    moreCount: moreCount
-  });
-}
-export default DefaultActions;

package/es/TextMessage/TextMessage.js

@@ -1,67 +0,0 @@
-/* eslint-disable max-len */
-/** ** Libraries *** */
-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';
-
-/** ** Constants *** */
-import textMessageDefaultProps from './props/defaultProps';
-import textMessagePropTypes from './props/propTypes';
-
-/** ** Styles *** */
-import style from './css/TextMessage.module.css';
-export default function TextMessage(props) {
-  const {
-    direction,
-    isActive,
-    needMessageActions,
-    renderMessage,
-    renderMessageHeader,
-    renderMessageFooter,
-    renderMessageBoxFooter,
-    needAvatar,
-    avatarProps,
-    messageActions,
-    renderMoreIcon,
-    actionsCount,
-    renderStatus
-  } = props;
-  function renderMessageBox() {
-    return /*#__PURE__*/React.createElement(MessageBox, {
-      renderMessage: renderMessage,
-      renderMessageHeader: renderMessageHeader,
-      renderMessageFooter: renderMessageFooter,
-      renderMessageStatus: renderStatus
-    });
-  }
-  function renderMessageOwner() {
-    return null; //
-  }
-
-  function renderMessageActions() {
-    return /*#__PURE__*/React.createElement(MessageActions, {
-      actions: messageActions,
-      renderMoreIcon: renderMoreIcon,
-      moreCount: actionsCount
-    });
-  }
-  return /*#__PURE__*/React.createElement(MessageBubble, {
-    direction: direction,
-    isActive: isActive,
-    needMessageActions: needMessageActions,
-    renderMessageBox: renderMessageBox
-    // renderMessageBoxHeader={() => null}
-    ,
-    renderMessageBoxFooter: renderMessageBoxFooter,
-    renderMessageOwner: renderMessageOwner,
-    renderMessageActions: renderMessageActions
-  });
-}
-TextMessage.displayName = 'TextMessage';
-TextMessage.propTypes = textMessagePropTypes;
-TextMessage.defaultProps = textMessageDefaultProps;
-// ActionIcons.constantProps = constantProps;

package/es/TextMessage/TextMessage1.js

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

package/es/TextMessage/css/TextMessage.module.css

@@ -1,5 +0,0 @@
-[dir=ltr] .moreIcon svg {
-  transform: rotate(90deg);
-}[dir=rtl] .moreIcon svg {
-  transform: rotate(-90deg);
-}

package/es/TextMessage/index.js

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

package/es/TextMessage/props/defaultProps.js

@@ -1,4 +0,0 @@
-const textMessageDefaultProps = {
-  customStyle: {}
-};
-export default textMessageDefaultProps;

package/es/TextMessage/props/propConstants.js

@@ -1,3 +0,0 @@
-export default {
-  test: 'test'
-};

package/es/TextMessage/props/propTypes.js

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-export const textMessagePropTypes = {
-  direction: PropTypes.string,
-  isActive: PropTypes.bool,
-  needMessageActions: PropTypes.bool,
-  renderMessage: PropTypes.func,
-  renderMessageHeader: PropTypes.func,
-  renderMessageFooter: PropTypes.func,
-  renderMessageBoxFooter: PropTypes.func,
-  needAvatar: PropTypes.bool,
-  avatarProps: PropTypes.object,
-  messageActions: PropTypes.arrayOf(PropTypes.object),
-  renderMoreIcon: PropTypes.func,
-  actionsCount: PropTypes.number,
-  renderStatus: PropTypes.func
-};
-export default textMessagePropTypes;

package/es/Theme/css/cssJSLogic.js

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

package/es/Theme/darkTheme.js

@@ -1,9 +0,0 @@
-export default {
-  library: 'chat_components',
-  variables: {
-    messageBubble: {
-      box_bg_color: '#788190',
-      bubble_active: '#333'
-    }
-  }
-};

package/es/Theme/defaultTheme.js

@@ -1,33 +0,0 @@
-/* eslint-disable camelcase */
-
-export default {
-  library: 'chat_components',
-  variables: {
-    messageBubble: {
-      active_bg_color: '#fdffe3',
-      messageBox_footer_text_color: '#5a616f'
-    },
-    messageBox: {
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: '#000'
-    },
-    actionIcon: {
-      color: '#000',
-      bg_color: '#f1f7fe',
-      border_color: '#b7d1f0'
-    },
-    imIntegrationIcon: {
-      path0_color: '#ffffff40',
-      path1_color: '#fff',
-      whatsapp_color: '#24d366',
-      telegram_color: '#4fa7d8',
-      wechat_color: '#2dc100',
-      line_color: '#01b901',
-      twillio_color: '#f22f46',
-      instagram_color: 'red',
-      asap_color: '#0a73eb'
-      // twitter_color: 'red'
-    }
-  }
-};

package/es/Theme/desk/commonDeskColorVariable.js

@@ -1,14 +0,0 @@
-export const imIntegrationIcon = {
-  path0_color: "#ffffff40",
-  path1_color: "#fff",
-  whatsapp_color: "#24d366",
-  telegram_color: "#4fa7d8",
-  wechat_color: "#2dc100",
-  line_color: "#01b901",
-  twillio_color: "#f22f46",
-  instagram_color: "red",
-  asap_color: "#0a73eb"
-  // twitter_color: 'red'
-};
-
-export const messagetextColor = "#e2e4e6";

package/es/Theme/desk/dark/blueTheme.js

@@ -1,42 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
-export default {
-  library: "chat_components",
-  variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#2c3b4d",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
-      text_color: messagetextColor,
-      failed_text_color: "#000"
-    },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: "#2c3b4d",
-      border_color: "#3f536b"
-    },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: "#479dff",
-      failed_color: messageStatusFailedColor
-    },
-    attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
-    },
-    attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
-    },
-    imTicketLink: {
-      color: "#479dff"
-    }
-  }
-};

package/es/Theme/desk/dark/commonColorVariable.js

@@ -1,5 +0,0 @@
-export const incomingBubbleBgColor = "#232b38";
-export const bubbleActiveBgColor = "#1b2e33";
-export const actionIconColor = "#e2e4e6";
-export const messageStatusSendColor = "#61667a";
-export const messageStatusFailedColor = "#de3535";

package/es/Theme/desk/dark/greenTheme.js

@@ -1,41 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
-export default {
-  library: "chat_components",
-  variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#26373b",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
-      text_color: messagetextColor
-    },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: "#26373b",
-      border_color: "#2d4e42"
-    },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: "#45a159",
-      failed_color: messageStatusFailedColor
-    },
-    attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
-    },
-    attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
-    },
-    imTicketLink: {
-      color: "#45a159"
-    }
-  }
-};

package/es/Theme/desk/dark/orangeTheme.js

@@ -1,41 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
-export default {
-  library: 'chat_components',
-  variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: '#5a616f'
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: '#323136',
-      bg_color: '#f1f7fe',
-      failed_bg_color: '#fcebeb',
-      text_color: messagetextColor
-    },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: '#323136',
-      border_color: '#4f3c33'
-    },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: '#ff801f',
-      failed_color: messageStatusFailedColor
-    },
-    attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
-    },
-    attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
-    },
-    imTicketLink: {
-      color: "#ff801f"
-    }
-  }
-};

package/es/Theme/desk/dark/redTheme.js

@@ -1,41 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
-export default {
-  library: "chat_components",
-  variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#312d3a",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
-      text_color: messagetextColor
-    },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: "#312d3a",
-      border_color: "#4b323d"
-    },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: "#e94f4f",
-      failed_color: messageStatusFailedColor
-    },
-    attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
-    },
-    attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
-    },
-    imTicketLink: {
-      color: "#e94f4f"
-    }
-  }
-};

package/es/Theme/desk/dark/yellowTheme.js

@@ -1,41 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from "./commonColorVariable.js";
-import { imIntegrationIcon, messagetextColor } from "../commonDeskColorVariable.js";
-export default {
-  library: "chat_components",
-  variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#303338",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
-      text_color: messagetextColor
-    },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: "#303338",
-      border_color: "#474137"
-    },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: "#d79835",
-      failed_color: messageStatusFailedColor
-    },
-    attachmentBubbleInfo: {
-      fileName_color: "#e2e4e6",
-      fileSize_color: "#788190"
-    },
-    attachmentBubble: {
-      bg_color: "#232b38",
-      border_color: "#2d3748"
-    },
-    imTicketLink: {
-      color: "#d79835"
-    }
-  }
-};

package/es/Theme/desk/light/blueTheme.js

@@ -1,46 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor } from "./commonColorVariable.js";
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
-export default {
-  library: "chat_components",
-  variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#f1f7fe",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
-      text_color: messagetextColor
-    },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: "#f1f7fe",
-      border_color: "#b7d1f0"
-    },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: "#0a73eb",
-      failed_color: messageStatusFailedColor
-    },
-    imTicketLink: {
-      color: "#0a73eb"
-    },
-    attachmentBubble: {
-      bg_color: "#fff",
-      border_color: "#ebf0f5"
-    },
-    imageBubble: {
-      bg_color: "#fff"
-    },
-    locationBubble: {
-      bg_color: "#fff"
-    },
-    articleBubble: {
-      bg_color: "#fff"
-    }
-  }
-};

package/es/Theme/desk/light/commonColorVariable.js

@@ -1,6 +0,0 @@
-export const incomingBubbleBgColor = '#f1f4f9';
-export const bubbleActiveBgColor = '#fdffe3';
-export const actionIconColor = '#000';
-export const messageStatusSendColor = '#61667a';
-export const messageStatusFailedColor = '#de3535';
-export const messagetextColor = "#000";

package/es/Theme/desk/light/greenTheme.js

@@ -1,37 +0,0 @@
-/* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor } from "./commonColorVariable.js";
-import { imIntegrationIcon } from "../commonDeskColorVariable.js";
-export default {
-  library: "chat_components",
-  variables: {
-    messageBubble: {
-      active_bg_color: bubbleActiveBgColor,
-      messageBox_footer_text_color: "#5a616f"
-    },
-    messageBox: {
-      incoming_bg_color: incomingBubbleBgColor,
-      outgoing_bg_color: "#f2faf5",
-      bg_color: "#f1f7fe",
-      failed_bg_color: "#fcebeb",
-      text_color: messagetextColor
-    },
-    actionIcon: {
-      color: actionIconColor,
-      bg_color: "#f2faf5",
-      border_color: "#bee5c6"
-    },
-    imIntegrationIcon,
-    messageStatus: {
-      send_color: messageStatusSendColor,
-      read_color: "#26a942",
-      failed_color: messageStatusFailedColor
-    },
-    attachmentBubble: {
-      bg_color: "#fff",
-      border_color: "#ebf0f5"
-    },
-    imTicketLink: {
-      color: "#26a942"
-    }
-  }
-};