@zohoim/chat-components 0.0.6 → 0.0.7

package/es/ActionIcon/ActionIcon.js

@@ -6,31 +6,33 @@ import React from 'react';
 
 /** ** Hooks *** */
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useActionIcon from '@zohoim/chat-components-hooks/es/ActionIcon/useActionIcon';
 
 /** ** Constants *** */
 import actionIconDefaultProps from './props/defaultProps';
 import actionIconPropTypes from './props/propTypes';
 
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/renderHandler';
 import cssJSLogic from './css/cssJSLogic';
 
 /** ** Styles *** */
 import style from './css/ActionIcon.module.css';
 export default function ActionIcon(props) {
   const {
-    renderIcon,
+    renderIcon: propRenderIcon,
     customStyle,
-    onClick,
+    onClick: propOnClick,
     id,
     title
   } = props;
-  function handleClick(e) {
-    onClick && onClick({
-      e,
-      id
-    });
-  }
+  const {
+    onClick,
+    renderIcon
+  } = useActionIcon({
+    renderIcon: propRenderIcon,
+    onClick: propOnClick,
+    id
+  });
 
   /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
@@ -41,11 +43,11 @@ export default function ActionIcon(props) {
   } = cssJSLogic(props, newStyle);
 
   /* Render Icon */
-  const icon = renderHandler(renderIcon)({
+  const icon = renderIcon({
     id
   });
   return icon ? /*#__PURE__*/React.createElement("div", {
-    onClick: handleClick,
+    onClick: onClick,
     className: actionIconClass,
     "data-title": title
   }, icon) : null;

package/es/ArticleBubble/ArticleBubble.js

@@ -0,0 +1,60 @@
+/* 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 articleBubbleDefaultProps from './props/defaultProps';
+import articleBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/ArticleBubble.module.css';
+import ArticleIcon from '../icons/iconSrc/actions/ConvertTicket';
+export default function ArticleBubble(props) {
+  const {
+    customStyle,
+    bubbleInfo,
+    title,
+    summary,
+    articleURL
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    articleBubbleClass,
+    headerClass,
+    iconClass,
+    headerTextClass,
+    articleWrapperClass,
+    titleClass,
+    summaryClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: articleBubbleClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: headerClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: iconClass
+  }, /*#__PURE__*/React.createElement(ArticleIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: headerTextClass
+  }, bubbleInfo)), /*#__PURE__*/React.createElement("div", {
+    className: articleWrapperClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: titleClass
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: summaryClass
+  }, summary)));
+}
+ArticleBubble.propTypes = articleBubblePropTypes;
+ArticleBubble.defaultProps = articleBubbleDefaultProps;
+ArticleBubble.displayName = 'ArticleBubble';

package/es/ArticleBubble/css/ArticleBubble.module.css

@@ -0,0 +1 @@
+

package/es/ArticleBubble/css/cssJSLogic.js

@@ -0,0 +1,34 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const articleBubbleClass = compileClassNames({
+    [style.articleBubble]: true
+  });
+  const headerClass = compileClassNames({
+    [style.header]: true
+  });
+  const iconClass = compileClassNames({
+    [style.icon]: true
+  });
+  const headerTextClass = compileClassNames({
+    [style.headerText]: true
+  });
+  const articleWrapperClass = compileClassNames({
+    [style.articleWrapper]: true
+  });
+  const titleClass = compileClassNames({
+    [style.title]: true
+  });
+  const summaryClass = compileClassNames({
+    [style.summary]: true
+  });
+  return {
+    articleBubbleClass,
+    headerClass,
+    iconClass,
+    headerTextClass,
+    articleWrapperClass,
+    titleClass,
+    summaryClass
+  };
+}

package/es/ArticleBubble/index.js

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

package/es/ArticleBubble/props/defaultProps.js

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

package/es/ArticleBubble/props/propTypes.js

@@ -0,0 +1,10 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const articleBubblePropTypes = {
+  customStyle: PropTypes.object,
+  bubbleInfo: PropTypes.string,
+  title: PropTypes.string,
+  summary: PropTypes.string,
+  articleURL: PropTypes.string
+};
+export default articleBubblePropTypes;

package/es/AttachmentBubble/AttachmentBubble.js

@@ -0,0 +1,55 @@
+/* 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 attachmentBubbleDefaultProps from './props/defaultProps';
+import attachmentBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/AttachmentBubble.module.css';
+import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+export default function AttachmentBubble(props) {
+  const {
+    customStyle,
+    renderFileTypeIcon,
+    fileName,
+    fileSize,
+    bubbleInfoCustomStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    attachmentBubbleClass,
+    attachmentBubbleIconClass,
+    attachmentBubbleContentClass
+  } = cssJSLogic(props, newStyle);
+  const fileIcon = renderHandler(renderFileTypeIcon)();
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: attachmentBubbleClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: attachmentBubbleIconClass
+  }, fileIcon), /*#__PURE__*/React.createElement("div", {
+    className: attachmentBubbleContentClass
+  }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
+    customStyle: bubbleInfoCustomStyle,
+    fileName: fileName,
+    fileSize: fileSize
+  })));
+}
+AttachmentBubble.propTypes = attachmentBubblePropTypes;
+AttachmentBubble.defaultProps = attachmentBubbleDefaultProps;
+AttachmentBubble.displayName = 'AttachmentBubble';

package/es/AttachmentBubble/css/AttachmentBubble.module.css

@@ -0,0 +1,17 @@
+.attachmentBubble {
+    background-color: #fff;
+    border-radius: 3px;
+    border: 1px solid #ebf0f5;
+}
+
+[dir=ltr] .attachmentBubbleIcon{
+    border-right: 1px solid #ebf0f5;
+}
+
+[dir=rtl] .attachmentBubbleIcon{
+    border-left: 1px solid #ebf0f5;
+}
+
+.attachmentBubbleIcon, .attachmentBubbleContent{
+    padding: 10px;
+}

package/es/AttachmentBubble/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+/** ** Methods *** */
+import { compileClassNames } from "@zohodesk/utils";
+export default function cssJSLogic(props, style) {
+  const attachmentBubbleClass = compileClassNames({
+    [style.attachmentBubble]: true
+  });
+  const attachmentBubbleIconClass = compileClassNames({
+    [style.attachmentBubbleIcon]: true
+  });
+  const attachmentBubbleContentClass = compileClassNames({
+    [style.attachmentBubbleContent]: true
+  });
+  return {
+    attachmentBubbleClass,
+    attachmentBubbleIconClass,
+    attachmentBubbleContentClass
+  };
+}

package/es/AttachmentBubble/index.js

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

package/es/AttachmentBubble/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const attachmentBubbleDefaultProps = {
+  customStyle: dummyObject,
+  bubbleInfoCustomStyle: dummyObject
+};
+export default attachmentBubbleDefaultProps;

package/es/AttachmentBubble/props/propTypes.js

@@ -0,0 +1,10 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentBubblePropTypes = {
+  customStyle: PropTypes.object,
+  bubbleInfoCustomStyle: PropTypes.object,
+  renderFileTypeIcon: PropTypes.func,
+  fileName: PropTypes.string,
+  fileSize: PropTypes.string
+};
+export default attachmentBubblePropTypes;

package/es/AttachmentBubbleInfo/AttachmentBubbleInfo.js

@@ -0,0 +1,45 @@
+/* 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 attachmentBubbleInfoDefaultProps from './props/defaultProps';
+import attachmentBubbleInfoPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/AttachmentBubbleInfo.module.css';
+export default function AttachmentBubbleInfo(props) {
+  const {
+    customStyle,
+    fileName,
+    fileSize
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    attachmentBubbleInfoClass,
+    fileNameClass,
+    fileSizeClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: attachmentBubbleInfoClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: fileNameClass
+  }, fileName), /*#__PURE__*/React.createElement("div", {
+    className: fileSizeClass
+  }, fileSize));
+}
+AttachmentBubbleInfo.propTypes = attachmentBubbleInfoPropTypes;
+AttachmentBubbleInfo.defaultProps = attachmentBubbleInfoDefaultProps;
+AttachmentBubbleInfo.displayName = 'AttachmentBubbleInfo';

package/es/AttachmentBubbleInfo/css/AttachmentBubbleInfo.module.css

@@ -0,0 +1,18 @@
+.varClass{
+    --attachmentBubbleInfo-fileName_font_size: var(--imlib_size_15);
+    --attachmentBubbleInfo-fileName_font_family: var(--zd_semibold);
+    --attachmentBubbleInfo-fileSize_font_size: var(--imlib_size_13);
+}
+
+.fileName {
+    composes: varClass;
+    font-size: var(--attachmentBubbleInfo-fileName_font_size);
+    font-family: var(--attachmentBubbleInfo-fileName_font_family);
+    color: #000;
+    margin-bottom: var(--imlib_size_5);
+}
+
+.fileSize {
+    font-size: var(--attachmentBubbleInfo-fileSize_font_size);
+    color: #5a616f;
+}

package/es/AttachmentBubbleInfo/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+/** ** Methods *** */
+import { compileClassNames } from "@zohodesk/utils";
+export default function cssJSLogic(props, style) {
+  const attachmentBubbleInfoClass = compileClassNames({
+    [style.attachmentBubbleInfo]: true
+  });
+  const fileNameClass = compileClassNames({
+    [style.fileName]: true
+  });
+  const fileSizeClass = compileClassNames({
+    [style.fileSize]: true
+  });
+  return {
+    attachmentBubbleInfoClass,
+    fileNameClass,
+    fileSizeClass
+  };
+}

package/es/AttachmentBubbleInfo/index.js

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

package/es/AttachmentBubbleInfo/props/defaultProps.js

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

package/es/AttachmentBubbleInfo/props/propTypes.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const attachmentBubbleInfoPropTypes = {
+  customStyle: PropTypes.object,
+  fileName: PropTypes.string,
+  fileSize: PropTypes.string
+};
+export default attachmentBubbleInfoPropTypes;

package/es/Audio/Audio.js

@@ -0,0 +1,60 @@
+/* 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 useMedia from '@zohoim/chat-components-hooks/es/Media/useMedia';
+
+/** ** Constants *** */
+import audioDefaultProps from './props/defaultProps';
+import audioPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/Audio.module.css';
+// import MediaControls from '../MediaControls/MediaControls';
+
+export default function Audio(props) {
+  const {
+    customStyle,
+    controlsCustomStyle,
+    fileType,
+    fileURL
+  } = props;
+  const {
+    mediaElementRef,
+    durationTime,
+    onTogglePlay,
+    currentTime,
+    progressPercentage,
+    isMediaPlayed
+  } = useMedia(props);
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    audioClass,
+    audioWrapperClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: audioWrapperClass
+  }, /*#__PURE__*/React.createElement("audio", {
+    preload: "metadata",
+    controls: true,
+    ref: mediaElementRef,
+    className: audioClass
+  }, /*#__PURE__*/React.createElement("source", {
+    type: fileType,
+    "data-src": fileURL
+  })));
+}
+Audio.propTypes = audioPropTypes;
+Audio.defaultProps = audioDefaultProps;
+Audio.displayName = 'Audio';

package/es/Audio/css/Audio.module.css

@@ -0,0 +1,3 @@
+.audio {
+    width: 100%;
+}

package/es/Audio/css/cssJSLogic.js

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

package/es/Audio/index.js

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

package/es/Audio/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const audioDefaultProps = {
+  customStyle: dummyObject,
+  controlsCustomStyle: dummyObject
+};
+export default audioDefaultProps;

package/es/Audio/props/propTypes.js

@@ -0,0 +1,9 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const audioPropTypes = {
+  customStyle: PropTypes.object,
+  controlsCustomStyle: PropTypes.object,
+  fileType: PropTypes.string,
+  fileURL: PropTypes.string
+};
+export default audioPropTypes;

package/es/AudioBubble/AudioBubble.js

@@ -0,0 +1,58 @@
+/* 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 audioBubbleDefaultProps from './props/defaultProps';
+import audioBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/AudioBubble.module.css';
+
+/** ** Components *** */
+import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+import Audio from '../Audio/Audio';
+export default function AudioBubble(props) {
+  const {
+    customStyle,
+    // headerCustomStyle,
+    audioCustomStyle,
+    controlsCustomStyle,
+    fileName,
+    fileSize,
+    fileURL,
+    fileType
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    audioBubbleClass,
+    headerCustomStyle
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: audioBubbleClass
+  }, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
+    customStyle: headerCustomStyle,
+    fileName: fileName,
+    fileSize: fileSize
+  }), /*#__PURE__*/React.createElement(Audio, {
+    customStyle: audioCustomStyle,
+    fileURL: fileURL,
+    fileType: fileType,
+    controlsCustomStyle: controlsCustomStyle
+  }));
+}
+AudioBubble.propTypes = audioBubblePropTypes;
+AudioBubble.defaultProps = audioBubbleDefaultProps;
+AudioBubble.displayName = 'AudioBubble';

package/es/AudioBubble/css/AudioBubble.module.css

@@ -0,0 +1,3 @@
+.header{
+    margin-bottom: 5px;
+}

package/es/AudioBubble/css/cssJSLogic.js

@@ -0,0 +1,20 @@
+/** ** Methods *** */
+import { compileClassNames } from "@zohodesk/utils";
+export default function cssJSLogic(props, style) {
+  let {
+    headerCustomStyle: propHeaderCustomStyle
+  } = props;
+  const audioBubbleClass = compileClassNames({
+    [style.audioBubble]: true
+  });
+  const headerCustomStyle = compileClassNames({
+    [style.header]: true
+  });
+  return {
+    audioBubbleClass,
+    headerCustomStyle: {
+      attachmentBubbleInfo: headerCustomStyle,
+      ...propHeaderCustomStyle
+    }
+  };
+}

package/es/AudioBubble/index.js

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

package/es/AudioBubble/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const audioBubbleDefaultProps = {
+  customStyle: dummyObject,
+  headerCustomStyle: dummyObject,
+  audioCustomStyle: dummyObject
+};
+export default audioBubbleDefaultProps;

package/es/AudioBubble/props/propTypes.js

@@ -0,0 +1,12 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const audioBubblePropTypes = {
+  customStyle: PropTypes.object,
+  headerCustomStyle: PropTypes.object,
+  audioCustomStyle: PropTypes.object,
+  fileName: PropTypes.string,
+  fileSize: PropTypes.string,
+  fileURL: PropTypes.string,
+  fileType: PropTypes.string
+};
+export default audioBubblePropTypes;

package/es/IMArticleBubble/IMArticleBubble.js

@@ -0,0 +1,55 @@
+/* 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 imArticleBubbleDefaultProps from './props/defaultProps';
+import imArticleBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMArticleBubble.module.css';
+import useIMArticleBubble from '../../../chat-components-hooks/src/IMArticleBubble/useIMArticleBubble';
+import ArticleBubble from '../ArticleBubble/ArticleBubble';
+export default function IMArticleBubble(props) {
+  const {
+    customStyle,
+    articleCustomStyle,
+    articleDetails,
+    articleShareI18N
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imArticleBubbleClass
+  } = cssJSLogic(props, newStyle);
+  const {
+    articleURL,
+    summary,
+    title
+  } = useIMArticleBubble({
+    articleDetails
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: imArticleBubbleClass
+  }, /*#__PURE__*/React.createElement(ArticleBubble, {
+    bubbleInfo: articleShareI18N,
+    customStyle: articleCustomStyle,
+    articleURL: articleURL,
+    summary: summary,
+    title: title
+  }));
+}
+IMArticleBubble.propTypes = imArticleBubblePropTypes;
+IMArticleBubble.defaultProps = imArticleBubbleDefaultProps;
+IMArticleBubble.displayName = 'IMArticleBubble';