@zohoim/chat-components 0.0.1-cx

package/es/AttachmentIcon/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const attachmentIconDefaultProps = {
+  isDisabled: false,
+  isValidAttachment: true,
+  customStyle: dummyObject
+};
+export default attachmentIconDefaultProps;

package/es/AttachmentIcon/props/propTypes.js

@@ -0,0 +1,21 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+const {
+  AUDIO,
+  VIDEO,
+  IMAGE
+} = attachmentFileTypes; // Docs - Playground Component Render Issue Fix
+
+const fileFormats = JSON.parse(JSON.stringify(Object.values(attachmentFileTypes)));
+const attachmentIconPropTypes = {
+  fileFormat: PropTypes.oneOf(fileFormats).isRequired,
+  mediaType: PropTypes.oneOf([AUDIO, VIDEO, IMAGE]).isRequired,
+  isDisabled: PropTypes.bool,
+  customStyle: PropTypes.object,
+  renderCustomIcon: PropTypes.func,
+  isValidAttachment: PropTypes.bool
+};
+export default attachmentIconPropTypes;

package/es/AttachmentIcon/utils/getAttachmentIconComponent.js

@@ -0,0 +1,81 @@
+/** ** 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/Text';
+import UnknownIcon from '../../icons/iconSrc/attachments/Unknown';
+import VideoIcon from '../../icons/iconSrc/attachments/Video';
+import ZipIcon from '../../icons/iconSrc/attachments/Zip';
+import AlertIcon from '../../icons/iconSrc/common/AlertTriangle';
+import XlsIcon from '../../icons/iconSrc/attachments/Xls';
+import PptIcon from '../../icons/iconSrc/attachments/Ppt';
+/** ** Constants *** */
+
+import attachmentFileTypes from '@zohoim/chat-components-utils/es/constants/attachmentFileTypes';
+const {
+  SVG,
+  IMAGE,
+  PDF,
+  AUDIO,
+  VIDEO,
+  MP3,
+  MPEG,
+  VORBIS,
+  OGG,
+  M4A,
+  MP4,
+  HTML,
+  PSD,
+  CSS,
+  TEXT,
+  PLAIN,
+  XLS,
+  PPT,
+  ZIP,
+  UNDEFINED,
+  INVALID
+} = attachmentFileTypes;
+export default function getAttachmentIconComponent(_ref) {
+  let {
+    fileFormat,
+    mediaType,
+    isValidAttachment
+  } = _ref;
+  const iconMapping = {
+    [SVG]: CodeIcon,
+    [IMAGE]: ImageIcon,
+    [PDF]: PdfIcon,
+    [AUDIO]: AudioIcon,
+    [VIDEO]: VideoIcon,
+    [MP3]: AudioIcon,
+    [MPEG]: AudioIcon,
+    [VORBIS]: AudioIcon,
+    [OGG]: AudioIcon,
+    [M4A]: AudioIcon,
+    [MP4]: VideoIcon,
+    [HTML]: CodeIcon,
+    [PSD]: UnknownIcon,
+    [CSS]: CodeIcon,
+    [TEXT]: TextIcon,
+    [PLAIN]: TextIcon,
+    [XLS]: XlsIcon,
+    [PPT]: PptIcon,
+    [ZIP]: ZipIcon,
+    [UNDEFINED]: UnknownIcon,
+    [INVALID]: AlertIcon
+  };
+  let IconComponent;
+
+  if (!isValidAttachment) {
+    IconComponent = iconMapping[INVALID];
+  } else if (attachmentFileTypes[mediaType]) {
+    IconComponent = iconMapping[attachmentFileTypes[mediaType]];
+  } else {
+    IconComponent = iconMapping[fileFormat] || iconMapping[UNDEFINED];
+  }
+
+  return {
+    IconComponent
+  };
+}

package/es/Audio/Audio.js

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

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

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

package/es/Audio/index.js

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

package/es/Audio/props/defaultProps.js

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

package/es/Audio/props/propTypes.js

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

package/es/AudioBubble/AudioBubble.js

@@ -0,0 +1,56 @@
+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, { useCallback } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import audioBubbleDefaultProps from './props/defaultProps';
+import audioBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/AudioBubble.module.css';
+/** ** Components *** */
+
+import { Box } from '@zohodesk/components/es/Layout';
+import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
+import Audio from '../Audio/Audio';
+export default function AudioBubble(props) {
+  const {
+    customStyle,
+    audioDetails,
+    customProps,
+    isFailed
+  } = props;
+  const {
+    audioProps = dummyObject,
+    mediaBubbleWrapperProps = dummyObject
+  } = customProps;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const renderMedia = useCallback(_ref => {
+    let {
+      fileURL,
+      fileType
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.audioBubble
+    }, /*#__PURE__*/React.createElement(Audio, _extends({
+      fileType: fileType,
+      fileURL: fileURL
+    }, audioProps)));
+  }, [audioProps, newStyle.audioBubble]);
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
+    mediaDetails: audioDetails,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps, {
+    isFailed: isFailed
+  }));
+}
+AudioBubble.propTypes = audioBubblePropTypes;
+AudioBubble.defaultProps = audioBubbleDefaultProps;
+AudioBubble.displayName = 'AudioBubble';

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

@@ -0,0 +1,4 @@
+.audioBubble{
+    width: var(--zd_size360) ;
+    max-width: 100% ;
+}

package/es/AudioBubble/index.js

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

package/es/AudioBubble/props/defaultProps.js

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

package/es/AudioBubble/props/propTypes.js

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const audioBubblePropTypes = {
+  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
+  }),
+  isFailed: PropTypes.bool
+};
+export default audioBubblePropTypes;

package/es/Fonts/puviFont.module.css

@@ -0,0 +1,62 @@
+/* $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-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: '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: '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

@@ -0,0 +1,70 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Hooks *** */
+
+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';
+/** ** Styles *** */
+
+import style from './css/ImageBubble.module.css';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import LazyLoadImage from '../LazyLoadImage/LazyLoadImage';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+export default function ImageBubble(props) {
+  const {
+    customStyle,
+    imageDetails,
+    isFailed,
+    isSending,
+    onClick: propOnClick
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    imageBubbleClass
+  } = cssJSLogic({
+    isFailed,
+    isSending
+  }, newStyle);
+  const imageStyle = useMemo(() => ({
+    lazyLoadImage: newStyle.image
+  }), [newStyle.image]);
+  const blurImageStyle = useMemo(() => ({
+    lazyLoadImage: newStyle.blurImage
+  }), [newStyle.blurImage]);
+  const {
+    attachmentURL: src,
+    fileName: alternate,
+    onClick
+  } = useAttachmentBubble({
+    attachmentDetails: imageDetails,
+    onClick: propOnClick
+  });
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: imageBubbleClass,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(LazyLoadImage, {
+    alternate: alternate,
+    customStyle: blurImageStyle,
+    src: src
+  }), /*#__PURE__*/React.createElement(LazyLoadImage, {
+    alternate: alternate,
+    customStyle: imageStyle,
+    src: src
+  }));
+}
+ImageBubble.propTypes = imageBubblePropTypes;
+ImageBubble.defaultProps = imageBubbleDefaultProps;
+ImageBubble.displayName = 'ImageBubble';

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

@@ -0,0 +1,63 @@
+.varClass {
+  --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) !important;
+  max-width: var(--imageBubble-wrapper_max_width);
+  height: var(--imageBubble-wrapper_height) !important;
+  color: var(--imlib_chat_components_imageBubble_alt_text_color);
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  background-color: var(--imlib_chat_components_imageBubble_bg_color);
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_imageBubble_border_color);
+}
+
+.failedImageBubble {
+  color: var(--imlib_chat_components_imageBubble_alt_text_color_failed);
+  background-color: var(--imlib_chat_components_imageBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_imageBubble_border_color_failed);
+}
+
+.blurImage {
+  object-fit: cover;
+  -webkit-filter: blur(90px);
+  filter: blur(90px);
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--imageBubble-blur_img_width);
+  height: var(--imageBubble-blur_img_height);
+}
+
+[dir=ltr] .blurImage {
+  right: 0 ;
+  left: 0 ;
+}
+
+[dir=rtl] .blurImage {
+  left: 0 ;
+  right: 0 ;
+}
+
+.image {
+  max-width: var(--imageBubble-img_max_width);
+  max-height: var(--imageBubble-img_max_height);
+  object-fit: contain;
+  position: relative;
+}
+
+.sendingImageBubble {
+  opacity: 0.1;
+  cursor: default;
+}

package/es/ImageBubble/css/cssJSLogic.js

@@ -0,0 +1,15 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed,
+    isSending
+  } = props;
+  const imageBubbleClass = compileClassNames({
+    [style.imageBubbleWrapper]: true,
+    [style.failedImageBubble]: isFailed,
+    [style.sendingImageBubble]: isSending
+  });
+  return {
+    imageBubbleClass
+  };
+}

package/es/ImageBubble/index.js

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

package/es/ImageBubble/props/defaultProps.js

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

package/es/ImageBubble/props/propTypes.js

@@ -0,0 +1,13 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imageBubblePropTypes = {
+  imageDetails: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    name: PropTypes.string
+  }).isRequired,
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool,
+  isSending: PropTypes.bool,
+  onClick: PropTypes.func
+};
+export default imageBubblePropTypes;

package/es/LazyLoadImage/LazyLoadImage.js

@@ -0,0 +1,37 @@
+/** ** 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';
+/** ** Styles *** */
+
+import style from './css/LazyLoadImage.module.css';
+export default function LazyLoadImage(props) {
+  const {
+    customStyle,
+    src,
+    alternate
+  } = props;
+  const {
+    imageElementRef
+  } = useLazyLoadImage();
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement("img", {
+    ref: imageElementRef,
+    alt: alternate,
+    className: `lazy ${newStyle.lazyLoadImage || ''}`,
+    "data-src": src,
+    "data-srcset": src,
+    src: ""
+  });
+}
+LazyLoadImage.propTypes = lazyLoadImagePropTypes;
+LazyLoadImage.defaultProps = lazyLoadImageDefaultProps;
+LazyLoadImage.displayName = 'LazyLoadImage';

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

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

package/es/LazyLoadImage/index.js

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

package/es/LazyLoadImage/props/defaultProps.js

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

package/es/LazyLoadImage/props/propTypes.js

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

package/es/LocationBubble/LocationBubble.js

@@ -0,0 +1,62 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import locationBubbleDefaultProps from './props/defaultProps';
+import locationBubblePropTypes from './props/propTypes';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+/** ** Styles *** */
+
+import style from './css/LocationBubble.module.css';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+export default function LocationBubble(props) {
+  const {
+    customStyle,
+    locationUrl,
+    isFailed
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    locationBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  return /*#__PURE__*/React.createElement("a", {
+    className: newStyle.container,
+    href: locationUrl,
+    rel: "noreferrer noopener",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: locationBubbleClass,
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.imageWrapper,
+    shrink: true
+  }), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.textWrapper,
+    flexible: true
+  }, /*#__PURE__*/React.createElement("a", {
+    className: newStyle.textLink,
+    "data-title": locationUrl
+  }, locationUrl))));
+}
+LocationBubble.propTypes = locationBubblePropTypes;
+LocationBubble.defaultProps = locationBubbleDefaultProps;
+LocationBubble.displayName = 'LocationBubble';