@zohoim/chat-components 1.0.11 → 1.1.0-beta.1

package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css

@@ -0,0 +1,5 @@
+/** ** Styles *** */
+
+.replyEditorExtensions {
+  /** ** Use this class for css customisation *** */
+}

package/es/im/ReplyEditorExtensions/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";

package/es/im/ReplyEditorExtensions/props/defaultProps.js

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

package/es/im/ReplyEditorExtensions/props/propTypes.js

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyEditorExtensionsPropTypes = {
+  customStyle: PropTypes.object,
+  editor: PropTypes.object.isRequired,
+  isHTMLContent: PropTypes.bool,
+  extensions: PropTypes.shape({
+    details: PropTypes.objectOf(PropTypes.shape({
+      componentProps: PropTypes.object,
+      id: PropTypes.string,
+      renderItem: PropTypes.func
+    })),
+    order: PropTypes.array
+  }).isRequired
+};
+export default replyEditorExtensionsPropTypes;

package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js

@@ -0,0 +1,95 @@
+/** ** Libraries *** */
+import React, { useMemo, useCallback } from 'react';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import Emojis from "../../Emojis/Emojis";
+import ReplyEditorSuggestionsPopup from "../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup";
+/** ** Hooks *** */
+
+import useReplyEditorSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
+import replyEditorSuggestionsPropTypes from "./props/propTypes";
+import { emojiRegex } from '@zohoim/chat-components-utils/es/constants/regexConstants';
+/** ** Styles *** */
+
+import style from "./css/ReplyEditorSuggestions.module.css";
+export default function ReplyEditorSuggestions(props) {
+  const {
+    customStyle,
+    suggestionDetails = dummyObject,
+    suggestionsMapping,
+    onSelect,
+    customProps,
+    getMethods,
+    onClose
+  } = props;
+  const {
+    position = dummyObject
+  } = suggestionDetails;
+  const {
+    replyEditorSuggestionsPopupProps = dummyObject
+  } = customProps || dummyObject;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const handleRenderEmoji = useCallback(function () {
+    let {
+      onSelect,
+      searchText = '',
+      componentProps,
+      getMethods
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      searchTextLenForShow = 2
+    } = componentProps || {}; // (-1) -> ':' string is not valid for count.
+
+    const isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
+    return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
+      emojisRowType: "single",
+      getMethods: getMethods,
+      isShowGroupBasedList: false,
+      isShowOnlyContent: true,
+      isShowSearchBox: false,
+      needAutoFocus: false,
+      onSelect: value => {
+        onSelect && onSelect({
+          content: value
+        });
+      },
+      searchString: searchText,
+      ...componentProps
+    }) : null;
+  }, []);
+  const defaultRenderMethod = useMemo(() => ({
+    ':': handleRenderEmoji,
+    [emojiRegex]: handleRenderEmoji
+  }), [handleRenderEmoji]);
+  const {
+    suggestionElement,
+    popupProps = dummyObject
+  } = useReplyEditorSuggestions({
+    defaultRenderMethod,
+    suggestionDetails,
+    suggestionsMapping,
+    onSelect,
+    getMethods,
+    onClose
+  });
+  return /*#__PURE__*/React.createElement(Container, {
+    className: newStyle.suggestionPopup
+  }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
+    onClose: onClose,
+    suggestionElement: suggestionElement,
+    targetPosition: position,
+    ...replyEditorSuggestionsPopupProps,
+    ...popupProps
+  }));
+}
+ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
+ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
+ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';

package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css

@@ -0,0 +1,8 @@
+/** ** Styles *** */
+
+.suggestionPopup {
+  /** ** Use this class name for css customisation *** */
+  bottom: 100% ;
+  height: auto ;
+  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.13);
+}

package/es/im/ReplyEditorSuggestions/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";

package/es/im/ReplyEditorSuggestions/props/defaultProps.js

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

package/es/im/ReplyEditorSuggestions/props/propTypes.js

@@ -0,0 +1,21 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyEditorSuggestionsPropTypes = {
+  customStyle: PropTypes.object,
+  suggestionDetails: PropTypes.shape({
+    editor: PropTypes.object,
+    searchText: PropTypes.string,
+    triggerDetails: PropTypes.shape({
+      trigger: PropTypes.string
+    })
+  }).isRequired,
+  suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
+    componentProps: PropTypes.object,
+    popupProps: PropTypes.object,
+    renderItem: PropTypes.func
+  })).isRequired,
+  onSelect: PropTypes.func,
+  getMethods: PropTypes.func,
+  onClose: PropTypes.func
+};
+export default replyEditorSuggestionsPropTypes;

package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

@@ -0,0 +1,93 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import DropBox from '@zohodesk/components/es/DropBox/DropBox';
+import Modal from '@zohodesk/components/es/Modal/Modal';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
+/** ** Constants *** */
+
+import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
+import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../../constants";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditorSuggestionsPopup.module.css";
+export function ReplyEditorSuggestionsPopupComp(props) {
+  const {
+    customStyle,
+    targetPosition = dummyObject,
+    onClose,
+    popupSize,
+    customProps,
+    suggestionElement,
+    needPositionUpdate,
+    defaultPosition,
+
+    /** ** Popup Props *** */
+    getTargetRef,
+    getContainerRef,
+    position,
+    togglePopup,
+    isPopupReady,
+    isPopupOpen,
+    removeClose,
+    openPopupOnly,
+    closePopupOnly,
+    isAbsolutePositioningNeeded,
+    positionsOffset
+  } = props;
+  const {
+    dropBoxProps = dummyObject
+  } = customProps || dummyObject;
+  const {
+    targetElementStyle
+  } = useReplyEditorSuggestionsPopup({
+    suggestionElement,
+    targetPosition,
+    needPositionUpdate,
+    defaultPosition,
+    onClose,
+    openPopupOnly,
+    closePopupOnly,
+    isPopupOpen,
+    togglePopup
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+    portalId: EDITOR_POPUP_TARGET_PORTAL
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: getTargetRef,
+    className: newStyle.hiddenTarget,
+    style: targetElementStyle
+  }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    boxPosition: position,
+    customStyle: dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: EDITOR_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize,
+    ...dropBoxProps
+  }, suggestionElement) : null);
+}
+const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: false
+});
+ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
+ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
+ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
+ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
+ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
+export default ReplyEditorSuggestionsPopup;

package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css

@@ -0,0 +1,7 @@
+/** ** Styles *** */
+.hiddenTarget {
+  height: var(--zd_size15) ;
+  width: var(--zd_size25) ;
+  visibility: hidden;
+  position: fixed;
+}

package/es/im/ReplyEditorSuggestionsPopup/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorSuggestionsPopup } from "./ReplyEditorSuggestionsPopup";

package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyEditorSuggestionsPopupDefaultProps = {
+  customStyle: dummyObject,
+  popupSize: 'xxlarge',
+  defaultPosition: 'bottomCenterToRight',
+  needPositionUpdate: true,
+  customOrder: ['bottomCenterToRight', 'bottomLeftToRight', 'topLeftToRight', 'topCenterToRight', 'rightTopToBottom', 'rightCenterToBottom', 'rightBottomToTop', 'rightCenterToTop', 'rightBottom', 'bottomRight', 'topRight', 'rightTop', 'bottomRightToLeft', 'bottomCenterToLeft', 'topRightToLeft', 'topCenterToLeft', 'rightCenter', 'bottomLeft', 'topLeft', 'bottomCenter', 'topCenter', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'leftBottom', 'leftTop']
+};
+export default replyEditorSuggestionsPopupDefaultProps;

package/es/im/ReplyEditorSuggestionsPopup/props/propTypes.js

@@ -0,0 +1,21 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { popupSize, popupPosition } from "../../../constants/propConstants/popupPropConstants";
+const replyEditorSuggestionsPopupPropTypes = {
+  customStyle: PropTypes.object,
+  targetPosition: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  }).isRequired,
+  onClose: PropTypes.func,
+  popupSize: PropTypes.oneOf(popupSize),
+  customProps: PropTypes.shape({
+    dropBoxProps: PropTypes.object
+  }),
+  suggestionElement: PropTypes.element.isRequired,
+  needPositionUpdate: PropTypes.bool,
+  defaultPosition: PropTypes.oneOf(popupPosition)
+};
+export default replyEditorSuggestionsPopupPropTypes;

package/es/im/index.js

@@ -6,4 +6,11 @@ export * from "./IMMessageMetaInfo";
 export * from "./IMMessageContent";
 export * from "./IMTextBubble";
 export * from "./IMReplyBubble";
-export * from "./ArticleBubble";
+export * from "./ArticleBubble";
+export * from "./IMAttachmentHandler";
+export * from "./ReplyComposer";
+export * from "./ReplyEditor";
+export * from "./ReplyEditorSuggestions";
+export * from "./ReplyEditorExtensions";
+export * from "./ReplyComposerFooter";
+export * from "./ReplyEditorSuggestionsPopup";

package/es/index.js

@@ -25,8 +25,19 @@ export * from "./ReplyBubbleHeader";
 export * from "./LazyLoadImage";
 export * from "./ReplyBubbleContent";
 export * from "./MessageStatus";
-export * from "./im"; // ... export other components
-
+export * from "./im";
+export * from "./Emojis";
+export * from "./EmojisList";
+export * from "./Emoji";
+export * from "./EmojiPopup";
+export * from "./EmojisHeader";
+export * from "./EmojisFooter";
+export * from "./EmojisEmptyState";
+export * from "./rte";
+export * from "./AttachmentHandler";
+export * from "./AttachmentPreview";
+export * from "./AttachmentPreviewHeader";
+export * from "./AttachmentPreviewBody";
 /** * CONSTANTS ** */
 
 export * from "./constants";

package/es/rte/Editor/Editor.js

@@ -0,0 +1,80 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useEditor from '@zohoim/chat-components-hooks/es/rte/Editor/useEditor';
+/** ** Constants *** */
+
+import editorDefaultProps from "./props/defaultProps";
+import editorPropTypes from "./props/propTypes";
+import { defaultEditorURL } from "../../constants";
+/** ** Styles *** */
+
+import style from "./css/Editor.module.css";
+export default function Editor(props) {
+  const {
+    customStyle,
+    id,
+    EDITORURL = defaultEditorURL,
+    content,
+    placeHolder,
+    isHTMLContent,
+    menuBarProps,
+    formats,
+    features,
+    needAutoFocus,
+    isReadOnly,
+    insertContentDetails,
+    customOptions,
+    onReadyCallback,
+    onErrorCallback,
+    onChange,
+    onKeyDown,
+    onPaste,
+    langCode,
+    appearance,
+    isRTL,
+    handlers,
+    domId: propDomId
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const {
+    domId
+  } = useEditor({
+    id,
+    EDITORURL,
+    content,
+    placeHolder,
+    isHTMLContent,
+    menuBarProps,
+    formats,
+    className: newStyle.editableDiv,
+    features,
+    needAutoFocus,
+    isReadOnly,
+    insertContentDetails,
+    customOptions,
+    onReadyCallback,
+    onErrorCallback,
+    onChange,
+    onKeyDown,
+    onPaste,
+    langCode,
+    appearance,
+    isRTL,
+    handlers,
+    domId: propDomId
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.editorWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.editor,
+    id: domId
+  }));
+}
+Editor.propTypes = editorPropTypes;
+Editor.defaultProps = editorDefaultProps;
+Editor.displayName = 'Editor';

package/es/rte/Editor/css/Editor.module.css

@@ -0,0 +1,17 @@
+.editorWrapper {
+  /* Use this class for css customisation */
+}
+
+.editor {
+  /* Use this class for css customisation */
+}
+
+.editableDiv {
+  /* Use this class for css customisation */
+  min-height: var(--zd_size120)  !important;
+  max-height: var(--zd_size120)  !important;
+  overflow: auto !important;
+  font-size: var(--zd_font_size14)  !important;
+  font-family: var(--zd_regular) !important;
+  padding: 0  !important;
+}

package/es/rte/Editor/index.js

@@ -0,0 +1 @@
+export { default as Editor } from "./Editor";

package/es/rte/Editor/props/defaultProps.js

@@ -0,0 +1,21 @@
+/** ** Constants *** */
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const editorDefaultProps = {
+  customStyle: dummyObject,
+  id: 'Editor',
+  placeHolder: ' ',
+  isHTMLContent: false,
+  needAutoFocus: true,
+  isReadOnly: false,
+  isRTL: false,
+  langCode: 'en_US',
+  menuBarProps: dummyObject,
+  appearance: dummyObject,
+  features: dummyArray,
+  formats: dummyArray,
+  handlers: {
+    needIDReRender: true,
+    needContentUpdate: true
+  }
+};
+export default editorDefaultProps;

package/es/rte/Editor/props/propTypes.js

@@ -0,0 +1,52 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { modeConstants } from '@zohoim/chat-components-utils/es/constants/themeConstants';
+import { features, formats, langCode } from "../../../constants/propConstants/editorPropConstants";
+const editorPropTypes = {
+  id: PropTypes.string.isRequired,
+  domId: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  EDITORURL: PropTypes.string.isRequired,
+  placeHolder: PropTypes.string,
+  customStyle: PropTypes.object,
+  isHTMLContent: PropTypes.bool,
+  appearance: PropTypes.shape({
+    mode: PropTypes.oneOf([modeConstants.LIGHT, modeConstants.DARK, modeConstants.PURE_DARK]).isRequired,
+    themeVariables: PropTypes.object
+  }),
+  // Editor Options - Refer the learn document (Override the options)
+  customOptions: PropTypes.object,
+  menuBarProps: PropTypes.shape({
+    isShow: PropTypes.bool.isRequired,
+    groupLength: PropTypes.number,
+    order: PropTypes.arrayOf(PropTypes.oneOf([...formats, ...features])),
+    position: PropTypes.oneOf(['top', 'bottom']),
+    responsive: PropTypes.bool,
+    tooltip: PropTypes.bool
+  }),
+  features: PropTypes.arrayOf(PropTypes.oneOf(features)),
+  formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
+  needAutoFocus: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRTL: PropTypes.bool,
+  langCode: PropTypes.oneOf(langCode),
+  insertContentDetails: PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    range: PropTypes.shape({
+      from: PropTypes.number,
+      to: PropTypes.number
+    })
+  }),
+  onChange: PropTypes.func,
+  onPaste: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onReadyCallback: PropTypes.func,
+  onErrorCallback: PropTypes.func,
+  handlers: PropTypes.shape({
+    needContentUpdate: PropTypes.bool,
+    needIDReRender: PropTypes.bool
+  })
+};
+export default editorPropTypes;

package/es/rte/index.js

@@ -0,0 +1 @@
+export * from "./Editor";