@zohoim/chat-components 0.0.11 → 0.0.14

package/es/AttachmentIcon/utils/getAttachmentIconComponent.js

@@ -0,0 +1,55 @@
+/** ** Icons *** */
+import AudioIcon from '../../icons/iconSrc/attachments/Audio';
+import CodeIcon from '../../icons/iconSrc/attachments/Code';
+import ImageIcon from '../../icons/iconSrc/attachments/Image';
+import PdfIcon from '../../icons/iconSrc/attachments/Pdf';
+import TextIcon from '../../icons/iconSrc/attachments/Txt';
+import UnknownIcon from '../../icons/iconSrc/attachments/Unknown';
+import VideoIcon from '../../icons/iconSrc/attachments/Video';
+import ZipIcon from '../../icons/iconSrc/attachments/Zip';
+/** ** Constants *** */
+
+import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+const {
+  SVG,
+  IMAGE,
+  PDF,
+  AUDIO,
+  VIDEO,
+  MP3,
+  M4A,
+  MP4,
+  HTML,
+  PSD,
+  CSS,
+  TEXT,
+  PLAIN,
+  ZIP,
+  UNDEFINED
+} = attachmentFileTypes;
+export default function getAttachmentIconComponent(_ref) {
+  let {
+    fileFormat
+  } = _ref;
+  const iconMapping = {
+    [SVG]: UnknownIcon,
+    [IMAGE]: ImageIcon,
+    [PDF]: PdfIcon,
+    [AUDIO]: AudioIcon,
+    [VIDEO]: VideoIcon,
+    [MP3]: AudioIcon,
+    [M4A]: AudioIcon,
+    [MP4]: VideoIcon,
+    [HTML]: CodeIcon,
+    [PSD]: UnknownIcon,
+    [CSS]: CodeIcon,
+    [TEXT]: TextIcon,
+    [PLAIN]: UnknownIcon,
+    [ZIP]: ZipIcon,
+    [UNDEFINED]: UnknownIcon
+  };
+  const IconComponent = iconMapping[fileFormat];
+  return {
+    IconComponent
+  };
+}

package/es/Audio/Audio.js

@@ -1,59 +1,37 @@
-/* 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';
 
+import style from './css/Audio.module.css';
 export default function Audio(props) {
   const {
     customStyle,
-    controlsCustomStyle,
     fileType,
     fileURL
   } = props;
   const {
-    mediaElementRef,
-    durationTime,
-    onTogglePlay,
-    currentTime,
-    progressPercentage,
-    isMediaPlayed
+    mediaElementRef
   } = useMedia(props);
+  /* External CSS Customization */
 
-  /* 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,
+  return /*#__PURE__*/React.createElement("audio", {
     ref: mediaElementRef,
-    className: audioClass
+    className: newStyle.audio,
+    controls: true,
+    preload: "metadata"
   }, /*#__PURE__*/React.createElement("source", {
-    type: fileType,
-    "data-src": fileURL
-  })));
+    "data-src": fileURL,
+    type: fileType
+  }));
 }
 Audio.propTypes = audioPropTypes;
 Audio.defaultProps = audioDefaultProps;

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

@@ -1,7 +1,7 @@
 .audio {
-    width: 100%;
+  width: 100% ;
 }
 
 .audio::-webkit-media-controls-panel {
-    background-color: var(--dot_white);
-  }
+  background-color: var(--dot_white);
+}

package/es/Audio/props/defaultProps.js

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

package/es/Audio/props/propTypes.js

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

package/es/AudioBubble/AudioBubble.js

@@ -1,57 +1,39 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /** ** Libraries *** */
-import React from 'react';
-
-/** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-
+import React, { useCallback } from 'react';
 /** ** 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';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Components *** */
-import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+
+import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
 import Audio from '../Audio/Audio';
 export default function AudioBubble(props) {
   const {
-    customStyle,
-    // headerCustomStyle,
-    audioCustomStyle,
-    controlsCustomStyle,
-    fileName,
-    fileSize,
-    fileURL,
-    fileType
+    audioDetails,
+    customProps
   } = 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
-  }));
+    audioProps = dummyObject,
+    mediaBubbleWrapperProps = dummyObject
+  } = customProps;
+  const renderMedia = useCallback(_ref => {
+    let {
+      fileURL,
+      fileType
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Audio, _extends({
+      fileType: fileType,
+      fileURL: fileURL
+    }, audioProps));
+  }, [audioProps]);
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
+    mediaDetails: audioDetails,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps));
 }
 AudioBubble.propTypes = audioBubblePropTypes;
 AudioBubble.defaultProps = audioBubbleDefaultProps;

package/es/AudioBubble/props/defaultProps.js

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

package/es/AudioBubble/props/propTypes.js

@@ -1,12 +1,15 @@
 /** ** 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
+  audioDetails: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    size: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }).isRequired,
+  customProps: PropTypes.shape({
+    audioProps: PropTypes.object,
+    mediaBubbleWrapperProps: PropTypes.object
+  })
 };
 export default audioBubblePropTypes;

package/es/Fonts/puviFont.module.css

@@ -1,61 +1,62 @@
-/*$Id$*/
+/* $Id$ */
+
 @font-face {
-    font-family: "ZohoPuviLight";
-    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.woff2")
-      format("woff2");
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-    font-display: swap;
-  }
+  font-family: 'ZohoPuviLight';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
   
-  @font-face {
-    font-family: "ZohoPuviRegular";
-    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2")
-      format("woff2");
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-    font-display: swap;
-  }
+@font-face {
+  font-family: 'ZohoPuviRegular';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
   
-  @font-face {
-    font-family: "ZohoPuviSemiBold";
-    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2")
-      format("woff2");
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-    font-display: swap;
-  }
+@font-face {
+  font-family: 'ZohoPuviSemiBold';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
   
-  @font-face {
-    font-family: "ZohoPuviBold";
-    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.woff2")
-      format("woff2");
-    font-style: normal;
-    font-weight: bold;
-    text-rendering: optimizeLegibility;
-    font-display: swap;
-  }
+@font-face {
+  font-family: 'ZohoPuviBold';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: bold;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
   
-  @font-face {
-    font-family: "ZohoPuviExtBd";
-    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrabold.woff2")
-      format("woff2");
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-    font-display: swap;
-  }
+@font-face {
+  font-family: 'ZohoPuviExtBd';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrabold.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
   
-  @font-face {
-    font-family: "ZohoPuviMedium";
-    src: url("https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2")
-      format("woff2");
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-    font-display: swap;
-  }
+@font-face {
+  font-family: 'ZohoPuviMedium';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
   

package/es/ImageBubble/ImageBubble.js

@@ -1,50 +1,51 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useMemo } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import { Container, Box } from '@zohodesk/components/es/Layout';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useAttachmentBubble from '@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble';
 /** ** Constants *** */
+
 import imageBubbleDefaultProps from './props/defaultProps';
 import imageBubblePropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/ImageBubble.module.css';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
 import LazyLoadImage from '../LazyLoadImage/LazyLoadImage';
 export default function ImageBubble(props) {
   const {
     customStyle,
-    src,
-    alternate
+    imageDetails
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
+  const imageStyle = useMemo(() => ({
+    lazyLoadImage: newStyle.image
+  }), [newStyle.image]);
+  const blurImageStyle = useMemo(() => ({
+    lazyLoadImage: newStyle.blurImage
+  }), [newStyle.blurImage]);
   const {
-    imageBubbleWrapperClass,
-    blurImageStyle,
-    imageStyle
-  } = cssJSLogic(props, newStyle);
+    attachmentURL: src,
+    fileName: alternate
+  } = useAttachmentBubble({
+    attachmentDetails: imageDetails
+  });
   return /*#__PURE__*/React.createElement(Container, {
     align: "both",
-    className: imageBubbleWrapperClass
+    className: newStyle.imageBubbleWrapper
   }, /*#__PURE__*/React.createElement(LazyLoadImage, {
-    src: src,
+    alternate: alternate,
     customStyle: blurImageStyle,
-    alternate: alternate
+    src: src
   }), /*#__PURE__*/React.createElement(LazyLoadImage, {
-    src: src,
+    alternate: alternate,
     customStyle: imageStyle,
-    alternate: alternate
+    src: src
   }));
 }
 ImageBubble.propTypes = imageBubblePropTypes;

package/es/ImageBubble/css/ImageBubble.module.css

@@ -1,19 +1,16 @@
 .varClass {
-  --imageBubble-wrapper_height: var(--imlib_size_200);
+  --imageBubble-wrapper_height: var(--zd_size200);
   --imageBubble-wrapper_width: 23.75rem;
   --imageBubble-wrapper_max_width: 100%;
-
   --imageBubble-blur_img_width: 100%;
   --imageBubble-blur_img_height: 100%;
   /* --imageBubble-blur_img_blurpx: 90px; */
-
   --imageBubble-img_max_width: 100%;
   --imageBubble-img_max_height: 100%;
 }
 
 .imageBubbleWrapper {
   composes: varClass;
-
   width: var(--imageBubble-wrapper_width);
   max-width: var(--imageBubble-wrapper_max_width);
   height: var(--imageBubble-wrapper_height);
@@ -21,7 +18,7 @@
   position: relative;
   cursor: pointer;
   background-color: var(--imlib_chat_components_imageBubble_bg_color);
-  border-radius: var(--imlib_size_3);
+  border-radius: 3px;
 }
 
 .blurImage {
@@ -29,20 +26,20 @@
   -webkit-filter: blur(90px);
   filter: blur(90px);
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   width: var(--imageBubble-blur_img_width);
   height: var(--imageBubble-blur_img_height);
 }
 
 [dir=ltr] .blurImage {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 
 [dir=rtl] .blurImage {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 
 .image {

package/es/ImageBubble/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imageBubbleDefaultProps = {
   customStyle: dummyObject
 };

package/es/ImageBubble/props/propTypes.js

@@ -1,8 +1,10 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const imageBubblePropTypes = {
-  customStyle: PropTypes.object,
-  src: PropTypes.string,
-  alternate: PropTypes.string
+  imageDetails: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    name: PropTypes.string
+  }).isRequired,
+  customStyle: PropTypes.object
 };
 export default imageBubblePropTypes;

package/es/InfoBubble/InfoBubble.js

@@ -1,30 +1,27 @@
-/* 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 useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import infoBubbleDefaultProps from './props/defaultProps';
 import infoBubblePropTypes from './props/propTypes';
-
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
 
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
+
 import style from './css/InfoBubble.module.css';
 export default function InfoBubble(props) {
   const {
     customStyle
   } = props;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
+
   const {
     infoBubbleClass
   } = cssJSLogic(props, newStyle);

package/es/InfoBubble/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const infoBubbleDefaultProps = {
   customStyle: dummyObject
 };

package/es/LazyLoadImage/LazyLoadImage.js

@@ -1,23 +1,16 @@
-/* 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 useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useLazyLoadImage from '@zohoim/chat-components-hooks/es/ImageBubble/useLazyLoadImage';
 /** ** Constants *** */
+
 import lazyLoadImageDefaultProps from './props/defaultProps';
 import lazyLoadImagePropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/LazyLoadImage.module.css';
-import useLazyLoadImage from '@zohoim/chat-components-hooks/es/ImageBubble/useLazyLoadImage';
 export default function LazyLoadImage(props) {
   const {
     customStyle,
@@ -27,20 +20,16 @@ export default function LazyLoadImage(props) {
   const {
     imageElementRef
   } = useLazyLoadImage();
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    lazyLoadImageClass
-  } = cssJSLogic(props, newStyle);
   return /*#__PURE__*/React.createElement("img", {
     ref: imageElementRef,
-    src: "",
+    alt: alternate,
+    className: `lazy ${newStyle.lazyLoadImage || ''}`,
     "data-src": src,
     "data-srcset": src,
-    className: `lazy ${lazyLoadImageClass || ''}`,
-    alt: alternate
+    src: ""
   });
 }
 LazyLoadImage.propTypes = lazyLoadImagePropTypes;

package/es/LazyLoadImage/css/LazyLoadImage.module.css

@@ -1,4 +1,5 @@
 .lazyLoadImage {
   /* height: 100%;
   width: 100%; */
+  /* Use this class name for css customisation */
 }