@zohoim/chat-components 0.0.13 → 0.0.14

package/es/{im/IMAttachmentIcon/IMAttachmentIcon.js → AttachmentIcon/utils/getAttachmentIconComponent.js}

@@ -1,23 +1,3 @@
-/* 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 imAttachmentIconDefaultProps from './props/defaultProps';
-import imAttachmentIconPropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
-/** ** Styles *** */
-import style from './css/IMAttachmentIcon.module.css';
-import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
-
 /** ** Icons *** */
 import AudioIcon from '../../icons/iconSrc/attachments/Audio';
 import CodeIcon from '../../icons/iconSrc/attachments/Code';
@@ -27,6 +7,9 @@ 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,
@@ -36,7 +19,6 @@ const {
   MP3,
   M4A,
   MP4,
-  // LOCATION,
   HTML,
   PSD,
   CSS,
@@ -45,18 +27,10 @@ const {
   ZIP,
   UNDEFINED
 } = attachmentFileTypes;
-export default function IMAttachmentIcon(props) {
-  const {
-    customStyle,
+export default function getAttachmentIconComponent(_ref) {
+  let {
     fileFormat
-  } = props;
-
-  /* External customization */
-  const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    iconStyle
-  } = cssJSLogic(props, newStyle);
+  } = _ref;
   const iconMapping = {
     [SVG]: UnknownIcon,
     [IMAGE]: ImageIcon,
@@ -66,7 +40,6 @@ export default function IMAttachmentIcon(props) {
     [MP3]: AudioIcon,
     [M4A]: AudioIcon,
     [MP4]: VideoIcon,
-    // [LOCATION]: ReplyIcon,
     [HTML]: CodeIcon,
     [PSD]: UnknownIcon,
     [CSS]: CodeIcon,
@@ -76,10 +49,7 @@ export default function IMAttachmentIcon(props) {
     [UNDEFINED]: UnknownIcon
   };
   const IconComponent = iconMapping[fileFormat];
-  return IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
-    customStyle: iconStyle
-  }) : null;
-}
-IMAttachmentIcon.propTypes = imAttachmentIconPropTypes;
-IMAttachmentIcon.defaultProps = imAttachmentIconDefaultProps;
-IMAttachmentIcon.displayName = 'IMAttachmentIcon';
+  return {
+    IconComponent
+  };
+}

package/es/Audio/Audio.js

@@ -1,60 +1,38 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
-import React from "react";
-
+import React from 'react';
 /** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
-import useMedia from "@zohoim/chat-components-hooks/es/Media/useMedia";
 
+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 cssJSLogic from "./css/cssJSLogic";
 
+import audioDefaultProps from './props/defaultProps';
+import audioPropTypes from './props/propTypes';
 /** ** Styles *** */
-import style from "./css/Audio.module.css";
-
-/** ** Components *** */
-// //import MediaControls from '../MediaControls/MediaControls';
 
+import style from './css/Audio.module.css';
 export default function Audio(props) {
   const {
     customStyle,
-    /* controlsCustomStyle, */fileType,
+    fileType,
     fileURL
   } = props;
   const {
     mediaElementRef
-    // durationTime,
-    // onTogglePlay
-    // currentTime,
-    // progressPercentage,
-    // isMediaPlayed
   } = 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", {
-    className: audioClass,
+  return /*#__PURE__*/React.createElement("audio", {
+    ref: mediaElementRef,
+    className: newStyle.audio,
     controls: true,
-    preload: "metadata",
-    ref: mediaElementRef
+    preload: "metadata"
   }, /*#__PURE__*/React.createElement("source", {
     "data-src": fileURL,
     type: fileType
-  })));
+  }));
 }
 Audio.propTypes = audioPropTypes;
 Audio.defaultProps = audioDefaultProps;
-Audio.displayName = "Audio";
+Audio.displayName = 'Audio';

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,56 +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 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, {
-    controlsCustomStyle: controlsCustomStyle,
-    customStyle: audioCustomStyle,
-    fileType: fileType,
-    fileURL: fileURL
-  }));
+    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,43 +1,43 @@
-/* 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 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 cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
-import style from './css/ImageBubble.module.css';
 
+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, {
     alternate: alternate,
     customStyle: blurImageStyle,

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,29 +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 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,21 +1,15 @@
-/* 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 useLazyLoadImage from '@zohoim/chat-components-hooks/es/ImageBubble/useLazyLoadImage';
-
 /** ** Constants *** */
+
 import lazyLoadImageDefaultProps from './props/defaultProps';
 import lazyLoadImagePropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
+
 import style from './css/LazyLoadImage.module.css';
 export default function LazyLoadImage(props) {
   const {
@@ -26,19 +20,15 @@ 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,
     alt: alternate,
-    className: `lazy ${lazyLoadImageClass || ''}`,
+    className: `lazy ${newStyle.lazyLoadImage || ''}`,
     "data-src": src,
     "data-srcset": src,
-    ref: imageElementRef,
     src: ""
   });
 }