@zohoim/chat-components 0.0.6 → 0.0.7

package/es/IMTextBubble/IMTextBubble.js

@@ -0,0 +1,53 @@
+/* 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 imTextBubbleDefaultProps from './props/defaultProps';
+import imTextBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMTextBubble.module.css';
+import TextBubble from '../TextBubble/TextBubble';
+import useIMTextBubble from '@zohoim/chat-components-hooks/es/IMTextBubble/useIMTextBubble';
+export default function IMTextBubble(props) {
+  const {
+    customStyle,
+    textBubbleCustomStyle,
+    moreText
+  } = props;
+  const {
+    onLoadFullMessage,
+    sanitizedDisplayMessage,
+    isShowSeeMore,
+    isShowQuote
+  } = useIMTextBubble(props);
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imTextBubbleWrapperClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: imTextBubbleWrapperClass
+  }, isShowQuote ? /*#__PURE__*/React.createElement("span", null, "[QuoteIcon]") : null, /*#__PURE__*/React.createElement(TextBubble, {
+    customStyle: textBubbleCustomStyle,
+    message: sanitizedDisplayMessage,
+    isShowMoreText: isShowSeeMore,
+    onClickMore: onLoadFullMessage,
+    moreText: moreText
+  }));
+}
+IMTextBubble.propTypes = imTextBubblePropTypes;
+IMTextBubble.defaultProps = imTextBubbleDefaultProps;
+IMTextBubble.displayName = 'IMTextBubble';

package/es/IMTextBubble/css/IMTextBubble.module.css

@@ -0,0 +1 @@
+

package/es/IMTextBubble/css/cssJSLogic.js

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

package/es/IMTextBubble/index.js

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

package/es/IMTextBubble/props/defaultProps.js

@@ -0,0 +1,14 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { TEXT_MESSAGE_MAX_LENGTH } from '@zohoim/chat-components-utils/es/constants/messageConstants';
+const imTextBubbleDefaultProps = {
+  customStyle: dummyObject,
+  textBubbleCustomStyle: dummyObject,
+  message: '',
+  fullMessage: '',
+  messageMaxLength: TEXT_MESSAGE_MAX_LENGTH,
+  fullContentURL: '',
+  messageId: '',
+  sessionId: ''
+};
+export default imTextBubbleDefaultProps;

package/es/IMTextBubble/props/propTypes.js

@@ -0,0 +1,15 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imTextBubblePropTypes = {
+  customStyle: PropTypes.object,
+  textBubbleCustomStyle: PropTypes.object,
+  message: PropTypes.string,
+  fullMessage: PropTypes.string,
+  messageMaxLength: PropTypes.number,
+  fullContentURL: PropTypes.string,
+  messageId: PropTypes.string,
+  sessionId: PropTypes.string,
+  onLoadFullMessage: PropTypes.func,
+  moreText: PropTypes.string
+};
+export default imTextBubblePropTypes;

package/es/IMTicketLink/IMTicketLink.js

@@ -0,0 +1,48 @@
+/* eslint-disable @zohodesk/zsecurity/no-protocol-check */
+/* 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 useIMTicketLink from '@zohoim/chat-components-hooks/es/IMTicketLink/useIMTicketLink';
+
+/** ** Constants *** */
+import imTicketLinkDefaultProps from './props/defaultProps';
+import imTicketLinkPropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+import { URLValidator } from '@zohoim/chat-components-utils/es/imUtils/security';
+
+/** ** Styles *** */
+import style from './css/IMTicketLink.module.css';
+export default function IMTicketLink(props) {
+  const {
+    customStyle
+  } = props;
+  const {
+    ticketURL,
+    onClick,
+    ticketNumber
+  } = useIMTicketLink(props);
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imTicketLinkClass
+  } = cssJSLogic(props, newStyle);
+  return ticketNumber ? /*#__PURE__*/React.createElement("a", {
+    className: imTicketLinkClass,
+    onClick: onClick,
+    href: ticketURL,
+    rel: "noopener noreferrer"
+  }, ticketNumber) : null;
+}
+IMTicketLink.propTypes = imTicketLinkPropTypes;
+IMTicketLink.defaultProps = imTicketLinkDefaultProps;
+IMTicketLink.displayName = 'IMTicketLink';

package/es/IMTicketLink/css/IMTicketLink.module.css

@@ -0,0 +1,24 @@
+.varClass {
+  --imTicketLink-top_gap: var(--imlib_size_5);
+  --imTicketLink-font_size: var(--imlib_size_12);
+  --imTicketLink-max_width: var(--imlib_size_150);
+}
+
+.ticketNumber {
+  composes: varClass;
+  font-size: var(--imTicketLink-font_size);
+  max-width: var(--imTicketLink-max_width);
+  color: var(--imlib_chat_components_imTicketLink_color);
+  display: inline-block;
+
+  margin-top: var(--imTicketLink-top_gap);
+  cursor: pointer;
+}
+
+.disabled {
+  pointer-events: none;
+}
+
+a.ticketNumber:hover {
+  text-decoration: underline;
+}

package/es/IMTicketLink/css/cssJSLogic.js

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

package/es/IMTicketLink/index.js

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

package/es/IMTicketLink/props/defaultProps.js

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

package/es/IMTicketLink/props/propTypes.js

@@ -0,0 +1,10 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imTicketLinkPropTypes = {
+  customStyle: PropTypes.object,
+  ticketURL: PropTypes.string,
+  onClick: PropTypes.func,
+  ticketNumber: PropTypes.string,
+  ticketId: PropTypes.string
+};
+export default imTicketLinkPropTypes;

package/es/IMVideoBubble/IMVideoBubble.js

@@ -0,0 +1,62 @@
+/* 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 imVideoBubbleDefaultProps from './props/defaultProps';
+import imVideoBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/IMVideoBubble.module.css';
+import VideoBubble from '../VideoBubble/VideoBubble';
+import useIMVideoBubble from '@zohoim/chat-components-hooks/src/IMVideoBubble/useIMVideoBubble';
+export default function IMVideoBubble(props) {
+  const {
+    attachmentDetails,
+    customStyle,
+    videoBubbleCustomStyle,
+    headerCustomStyle,
+    videoCustomStyle,
+    controlsCustomStyle
+  } = props;
+  const {
+    isShow,
+    fileName,
+    formattedFileSize: fileSize,
+    attachmentURL: fileURL,
+    attachmentType: fileType
+  } = useIMVideoBubble({
+    attachmentDetails
+  });
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imVideoBubbleClass
+  } = cssJSLogic(props, newStyle);
+  return isShow ? /*#__PURE__*/React.createElement("div", {
+    className: imVideoBubbleClass
+  }, /*#__PURE__*/React.createElement(VideoBubble, {
+    customStyle: videoBubbleCustomStyle,
+    headerCustomStyle: headerCustomStyle,
+    audioCustomStyle: videoCustomStyle,
+    controlsCustomStyle: controlsCustomStyle,
+    fileName: fileName,
+    fileSize: fileSize,
+    fileURL: fileURL,
+    fileType: fileType
+  })) : null;
+}
+IMVideoBubble.propTypes = imVideoBubblePropTypes;
+IMVideoBubble.defaultProps = imVideoBubbleDefaultProps;
+IMVideoBubble.displayName = 'IMVideoBubble';

package/es/IMVideoBubble/css/IMVideoBubble.module.css

@@ -0,0 +1 @@
+

package/es/IMVideoBubble/css/cssJSLogic.js

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

package/es/IMVideoBubble/index.js

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

package/es/IMVideoBubble/props/defaultProps.js

@@ -0,0 +1,11 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const imVideoBubbleDefaultProps = {
+  customStyle: dummyObject,
+  videoBubbleCustomStyle: dummyObject,
+  headerCustomStyle: dummyObject,
+  videoCustomStyle: dummyObject,
+  controlsCustomStyle: dummyObject,
+  attachmentDetails: dummyObject
+};
+export default imVideoBubbleDefaultProps;

package/es/IMVideoBubble/props/propTypes.js

@@ -0,0 +1,17 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const imVideoBubblePropTypes = {
+  attachmentDetails: PropTypes.shape({
+    name: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.string,
+    url: PropTypes.string,
+    id: PropTypes.string
+  }),
+  customStyle: PropTypes.object,
+  videoBubbleCustomStyle: PropTypes.object,
+  headerCustomStyle: PropTypes.object,
+  videoCustomStyle: PropTypes.object,
+  controlsCustomStyle: PropTypes.object
+};
+export default imVideoBubblePropTypes;

package/es/ImageBubble/ImageBubble.js

@@ -0,0 +1,52 @@
+/* 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 { Container, Box } from '@zohodesk/components/es/Layout';
+
+/** ** 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';
+import LazyLoadImage from '../LazyLoadImage/LazyLoadImage';
+export default function ImageBubble(props) {
+  const {
+    customStyle,
+    src,
+    alternate
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    imageBubbleWrapperClass,
+    blurImageStyle,
+    imageStyle
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: imageBubbleWrapperClass
+  }, /*#__PURE__*/React.createElement(LazyLoadImage, {
+    src: src,
+    customStyle: blurImageStyle,
+    alternate: alternate
+  }), /*#__PURE__*/React.createElement(LazyLoadImage, {
+    src: src,
+    customStyle: imageStyle,
+    alternate: alternate
+  }));
+}
+ImageBubble.propTypes = imageBubblePropTypes;
+ImageBubble.defaultProps = imageBubbleDefaultProps;
+ImageBubble.displayName = 'ImageBubble';

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

@@ -0,0 +1,53 @@
+.varClass {
+  --imageBubble-wrapper_height: var(--imlib_size_200);
+  --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);
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  background-color: var(--imlib_chat_components_imageBubble_bg_color);
+  border-radius: var(--imlib_size_3);
+}
+
+.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;
+}

package/es/ImageBubble/css/cssJSLogic.js

@@ -0,0 +1,22 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const imageBubbleWrapperClass = compileClassNames({
+    [style.imageBubbleWrapper]: true
+  });
+  const imageClass = compileClassNames({
+    [style.image]: true
+  });
+  const blurImageClass = compileClassNames({
+    [style.blurImage]: true
+  });
+  return {
+    imageBubbleWrapperClass,
+    blurImageStyle: {
+      lazyLoadImage: blurImageClass
+    },
+    imageStyle: {
+      lazyLoadImage: imageClass
+    }
+  };
+}

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';
+const imageBubbleDefaultProps = {
+  customStyle: dummyObject
+};
+export default imageBubbleDefaultProps;

package/es/ImageBubble/props/propTypes.js

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

package/es/InfoBubble/InfoBubble.js

@@ -0,0 +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';
+
+/** ** 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';
+
+/** ** Styles *** */
+import style from './css/InfoBubble.module.css';
+export default function InfoBubble(props) {
+  const {
+    customStyle
+  } = props;
+
+  /* External customization */
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+  const {
+    infoBubbleClass
+  } = cssJSLogic(props, newStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: infoBubbleClass
+  }, "Working On this...");
+}
+InfoBubble.propTypes = infoBubblePropTypes;
+InfoBubble.defaultProps = infoBubbleDefaultProps;
+InfoBubble.displayName = 'InfoBubble';

package/es/InfoBubble/css/cssJSLogic.js

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

package/es/InfoBubble/index.js

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

package/es/InfoBubble/props/defaultProps.js

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

package/es/InfoBubble/props/propTypes.js

@@ -0,0 +1,6 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const infoBubblePropTypes = {
+  customStyle: PropTypes.object
+};
+export default infoBubblePropTypes;

package/es/LazyLoadImage/LazyLoadImage.js

@@ -0,0 +1,48 @@
+/* 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 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,
+    src,
+    alternate
+  } = props;
+  const {
+    imageElementRef
+  } = useLazyLoadImage();
+
+  /* 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: "",
+    "data-src": src,
+    "data-srcset": src,
+    className: `lazy ${lazyLoadImageClass || ''}`,
+    alt: alternate
+  });
+}
+LazyLoadImage.propTypes = lazyLoadImagePropTypes;
+LazyLoadImage.defaultProps = lazyLoadImageDefaultProps;
+LazyLoadImage.displayName = 'LazyLoadImage';

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

@@ -0,0 +1,4 @@
+.lazyLoadImage {
+  /* height: 100%;
+  width: 100%; */
+}

package/es/LazyLoadImage/css/cssJSLogic.js

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

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';
+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 = {
+  customStyle: PropTypes.object,
+  src: PropTypes.string,
+  alternate: PropTypes.string
+};
+export default lazyLoadImagePropTypes;