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

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

@@ -0,0 +1,28 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import integrationConstants from '@zohoim/chat-components-utils/es/imUtils/constants/integrationConstants';
+const {
+  WHATSAPP,
+  TELEGRAM,
+  INSTAGRAM,
+  WECHAT,
+  TWILLIO,
+  LINE,
+  IM_TALK,
+  FACEBOOKMESSENGER
+} = integrationConstants;
+const imAttachmentHandlerPropTypes = {
+  customStyle: PropTypes.object,
+  iconName: PropTypes.string.isRequired,
+  iconSize: PropTypes.string,
+  iconTitle: PropTypes.string,
+  renderCustomIcon: PropTypes.func,
+  isMultiAttachment: PropTypes.bool,
+  onAttach: PropTypes.func,
+  customProps: PropTypes.object,
+  attachmentType: PropTypes.oneOf(['image', 'document', 'documentAndImage']),
+  integrationService: PropTypes.oneOf([WHATSAPP, TELEGRAM, INSTAGRAM, WECHAT, TWILLIO, LINE, IM_TALK, FACEBOOKMESSENGER])
+};
+export default imAttachmentHandlerPropTypes;

package/es/im/ReplyComposer/ReplyComposer.js

@@ -0,0 +1,153 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import ReplyEditor from "../ReplyEditor/ReplyEditor";
+import ReplyComposerFooter from "../ReplyComposerFooter/ReplyComposerFooter";
+import ReplyEditorSuggestions from "../ReplyEditorSuggestions/ReplyEditorSuggestions";
+import AttachmentPreview from "../../AttachmentPreview/AttachmentPreview";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyComposer from '@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposer';
+import useReplyComposerSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposerSuggestions';
+/** ** Constants *** */
+
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import replyComposerDefaultProps from "./props/defaultProps";
+import replyComposerPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from "./css/cssJSLogic";
+/** ** Styles *** */
+
+import style from "./css/ReplyComposer.module.css";
+export default function ReplyComposer(props) {
+  const {
+    customStyle,
+    id,
+    content,
+    EDITORURL,
+    placeHolder,
+    features,
+    formats,
+    suggestions,
+    isHTMLContent,
+    onChange,
+    onKeyDown: propOnKeyDown,
+    onPaste,
+    customProps = dummyObject,
+    extensions,
+    files = dummyArray,
+    filesDescription,
+    onChangeFileDescription,
+    onFileCancel: propOnFileCancel,
+    onFileSubmit: propOnFileSubmit,
+    attachmentPreviewTexts,
+    renderHeader,
+    renderFooter,
+    renderStencils,
+    getEditorState: propGetEditorState,
+    needFooter
+  } = props;
+  const {
+    replyEditorSuggestionsProps = dummyObject,
+    replyComposerFooterProps = dummyObject
+  } = customProps;
+  const {
+    features: allFeatures,
+    suggestionsMapping,
+    suggestionDetails,
+    isShowSuggestion,
+    getSuggetPopupMethods,
+    onHideSuggestions,
+    onSuggestPopupKeyDown,
+    onSelectSuggestion
+  } = useReplyComposerSuggestions({
+    features,
+    suggestions,
+    isHTMLContent
+  });
+  const {
+    getEditorState,
+    editor,
+    onKeyDown,
+    attachmentPreviewCustomProps,
+    replyEditorCustomProps,
+    onFileCancel,
+    onFileSubmit,
+    isLoading,
+    isLoaded
+  } = useReplyComposer({
+    onKeyDown: propOnKeyDown,
+    isShowSuggestion,
+    onSuggestPopupKeyDown,
+    EDITORURL,
+    onPaste,
+    customProps,
+    onFileCancel: propOnFileCancel,
+    onFileSubmit: propOnFileSubmit,
+    getEditorState: propGetEditorState
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    replEditorWrapperClass
+  } = cssJSLogic({
+    isLoaded
+  }, newStyle);
+  const headerElement = useMemo(() => renderHandler(renderHeader)(), [renderHeader]);
+  const stencilsElement = useMemo(() => isLoading ? renderHandler(renderStencils)({
+    needFooter
+  }) : null, [renderStencils, needFooter, isLoading]);
+  return /*#__PURE__*/React.createElement(Container, {
+    className: newStyle.replyComposer,
+    isCover: false
+  }, isShowSuggestion ? /*#__PURE__*/React.createElement(ReplyEditorSuggestions, {
+    getMethods: getSuggetPopupMethods,
+    onClose: onHideSuggestions,
+    onSelect: onSelectSuggestion,
+    suggestionDetails: suggestionDetails,
+    suggestionsMapping: suggestionsMapping,
+    ...replyEditorSuggestionsProps
+  }) : null, files.length > 0 ? /*#__PURE__*/React.createElement(AttachmentPreview, {
+    descriptionDetails: filesDescription,
+    files: files,
+    isDescriptionNeeded: true,
+    needEditImage: false,
+    onCancel: onFileCancel,
+    onDescriptionChange: onChangeFileDescription,
+    onSubmit: onFileSubmit,
+    texts: attachmentPreviewTexts,
+    ...attachmentPreviewCustomProps
+  }) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
+    className: replEditorWrapperClass
+  }, /*#__PURE__*/React.createElement(ReplyEditor, {
+    content: content,
+    EDITORURL: EDITORURL,
+    features: allFeatures,
+    formats: formats,
+    getEditorState: getEditorState,
+    id: id,
+    isHTMLContent: isHTMLContent,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    placeHolder: placeHolder,
+    ...replyEditorCustomProps
+  })), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
+    editor: editor,
+    extensions: extensions,
+    isHTMLContent: isHTMLContent,
+    renderButtons: renderFooter,
+    ...replyComposerFooterProps
+  }) : null);
+}
+ReplyComposer.propTypes = replyComposerPropTypes;
+ReplyComposer.defaultProps = replyComposerDefaultProps;
+ReplyComposer.displayName = 'ReplyComposer';

package/es/im/ReplyComposer/css/ReplyComposer.module.css

@@ -0,0 +1,10 @@
+/** ** Styles *** */
+
+.replyComposer {
+  /** ** Use this class for css customisation *** */
+}
+
+.hidden {
+  visibility: hidden;
+  height: 0 ;
+}

package/es/im/ReplyComposer/css/cssJSLogic.js

@@ -0,0 +1,13 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isLoaded
+  } = props;
+  const replEditorWrapperClass = compileClassNames({
+    [style.hidden]: !isLoaded
+  });
+  return {
+    replEditorWrapperClass
+  };
+}

package/es/im/ReplyComposer/index.js

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

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

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

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

@@ -0,0 +1,60 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { features, formats } from "../../../constants/propConstants/editorPropConstants";
+const replyComposerPropTypes = {
+  customStyle: PropTypes.object,
+  id: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  EDITORURL: PropTypes.string,
+  placeHolder: PropTypes.string,
+  features: PropTypes.arrayOf(PropTypes.oneOf(features)),
+  formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
+  suggestions: PropTypes.arrayOf(PropTypes.shape({
+    allowSpace: PropTypes.bool,
+    componentProps: PropTypes.object,
+    popupProps: PropTypes.object,
+    renderItem: PropTypes.func,
+    trigger: PropTypes.string
+  })),
+  isHTMLContent: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func,
+  onPaste: PropTypes.func,
+  customProps: PropTypes.shape({
+    attachmentPreviewProps: PropTypes.object,
+    replyComposerFooterProps: PropTypes.object,
+    replyEditorProps: PropTypes.object,
+    replyEditorSuggestionsProps: PropTypes.object
+  }),
+  extensions: PropTypes.shape({
+    details: PropTypes.objectOf(PropTypes.shape({
+      componentProps: PropTypes.object,
+      id: PropTypes.string,
+      renderItem: PropTypes.func
+    })),
+    order: PropTypes.array
+  }),
+  files: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    size: PropTypes.string,
+    type: PropTypes.string,
+    url: PropTypes.string
+  })),
+  filesDescription: PropTypes.object,
+  onChangeFileDescription: PropTypes.func,
+  onFileCancel: PropTypes.func,
+  onFileSubmit: PropTypes.func,
+  attachmentPreviewTexts: PropTypes.shape({
+    cancelText: PropTypes.string,
+    editText: PropTypes.string,
+    placeHolder: PropTypes.string,
+    submitText: PropTypes.string
+  }),
+  renderHeader: PropTypes.func,
+  renderFooter: PropTypes.func,
+  getEditorState: PropTypes.func
+};
+export default replyComposerPropTypes;

package/es/im/ReplyComposerFooter/ReplyComposerFooter.js

@@ -0,0 +1,41 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import ReplyEditorExtensions from "../ReplyEditorExtensions/ReplyEditorExtensions";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import replyComposerFooterDefaultProps from "./props/defaultProps";
+import replyComposerFooterPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+/** ** Styles *** */
+
+import style from "./css/ReplyComposerFooter.module.css";
+export default function ReplyComposerFooter(props) {
+  const {
+    customStyle,
+    editor,
+    isHTMLContent,
+    extensions,
+    renderButtons
+  } = props;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const footerButtons = useMemo(() => renderHandler(renderButtons)(), [renderButtons]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.replyComposerFooter
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReplyEditorExtensions, {
+    editor: editor,
+    extensions: extensions,
+    isHTMLContent: isHTMLContent
+  })), footerButtons || null);
+}
+ReplyComposerFooter.propTypes = replyComposerFooterPropTypes;
+ReplyComposerFooter.defaultProps = replyComposerFooterDefaultProps;
+ReplyComposerFooter.displayName = 'ReplyComposerFooter';

package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css

@@ -0,0 +1,10 @@
+/** ** Styles *** */
+.replyComposerFooter {
+  display: flex;
+}
+[dir=ltr] .replyComposerFooter {
+  padding: 0 0 0 var(--zd_size16) ;
+}
+[dir=rtl] .replyComposerFooter {
+  padding: 0 var(--zd_size16) 0 0 ;
+}

package/es/im/ReplyComposerFooter/index.js

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

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

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

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

@@ -0,0 +1,17 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyComposerFooterPropTypes = {
+  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,
+  renderButtons: PropTypes.func
+};
+export default replyComposerFooterPropTypes;

package/es/im/ReplyEditor/ReplyEditor.js

@@ -0,0 +1,103 @@
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import Editor from "../../rte/Editor/Editor";
+import { Container } from '@zohodesk/components/es/Layout';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyEditor from '@zohoim/chat-components-hooks/es/im/ReplyEditor/useReplyEditor';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import replyEditorDefaultProps from "./props/defaultProps";
+import replyEditorPropTypes from "./props/propTypes";
+/** ** Methods *** */
+
+import cssJSLogic from "./css/cssJSLogic";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditor.module.css";
+export default function ReplyEditor(props) {
+  const {
+    id,
+    content,
+    EDITORURL,
+    placeHolder,
+    features,
+    formats,
+    isHTMLContent,
+    onChange,
+    onKeyDown,
+    onPaste,
+    onEnter,
+    onErrorCallback: propOnErrorCallback,
+    onReadyCallback: propOnReadyCallback,
+    customStyle,
+    customProps = dummyObject,
+    getEditorState,
+    themeVariables
+  } = props;
+  const {
+    editorProps = dummyObject
+  } = customProps;
+  const {
+    customStyle: editorCustomStyle = dummyObject
+  } = editorProps;
+  const {
+    onReadyCallback,
+    onErrorCallback,
+    isRenderEditor,
+    isShowEditor,
+    appearance,
+    isRTL
+  } = useReplyEditor({
+    onErrorCallback: propOnErrorCallback,
+    onReadyCallback: propOnReadyCallback,
+    getEditorState,
+    onEnter,
+    themeVariables
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    editorClass
+  } = cssJSLogic(props, newStyle, {
+    isShowEditor
+  });
+  const editorNewCustomStyle = useMemo(() => ({
+    editorWrapper: newStyle.editorWrapper,
+    editor: newStyle.editor,
+    $editableDiv: newStyle.editableDiv,
+    ...editorCustomStyle
+  }), [newStyle, editorCustomStyle]);
+  return /*#__PURE__*/React.createElement(Container, {
+    className: newStyle.replyEditor
+  }, isRenderEditor ? /*#__PURE__*/React.createElement(Container, {
+    className: editorClass
+  }, /*#__PURE__*/React.createElement(Editor, {
+    appearance: appearance,
+    content: content,
+    customStyle: editorNewCustomStyle,
+    EDITORURL: EDITORURL,
+    features: features,
+    formats: formats,
+    id: id,
+    isHTMLContent: isHTMLContent,
+    isRTL: isRTL,
+    onChange: onChange,
+    onErrorCallback: onErrorCallback,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    onReadyCallback: onReadyCallback,
+    placeHolder: placeHolder,
+    ...editorProps
+  })) : null);
+}
+ReplyEditor.propTypes = replyEditorPropTypes;
+ReplyEditor.defaultProps = replyEditorDefaultProps;
+ReplyEditor.displayName = 'ReplyEditor';

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -0,0 +1,50 @@
+/** ** Styles *** */
+
+.replyEditor {
+  /** ** Use this class for css customisations *** */
+}
+
+.hiddenEditor {
+  /** ** Use this class for css customisations *** */
+  /* display: none; */
+  /* visibility: hidden; */
+}
+
+.editableDiv {
+  --zd_fallback_font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+  --zd_regular: var(--zd_base_font_regular), var(--zd_fallback_font) !important;
+  --zd_light: var(--zd_base_font_light), var(--zd_fallback_font) !important;
+  --zd_semibold: var(--zd_base_font_semibold), var(--zd_fallback_font) !important;
+  --zd_bold: var(--zd_base_font_bold), var(--zd_fallback_font) !important;
+  max-height: var(--zd_size250)  !important;
+  min-height: var(--zd_size80)  !important;
+  overflow: auto !important;
+  font-size: var(--zd_font_size14)  !important;
+  font-family: var(--zd_regular) !important;
+  line-height: 22px !important;
+
+  --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
+  --rte-placeholder-color: var(
+    --imlib_chat_components_replyEditor_placeholder
+  ) !important;
+  --rte-link-text-color: var(
+    --imlib_chat_components_replyEditor_color
+  ) !important;
+
+  padding: var(--zd_size16)  !important;
+  cursor: text !important;
+}
+
+.editorWrapper {
+  /** ** Use this class for css customisations *** */
+}
+
+.editor {
+  /** ** Use this class for css customisations *** */
+}
+
+.replyEditor :global(.prosemirror-suggestion) {
+  text-decoration: none !important;
+}

package/es/im/ReplyEditor/css/cssJSLogic.js

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

package/es/im/ReplyEditor/index.js

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

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

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

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

@@ -0,0 +1,27 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { features, formats } from "../../../constants/propConstants/editorPropConstants";
+const replyEditorPropTypes = {
+  customStyle: PropTypes.object,
+  id: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  EDITORURL: PropTypes.string,
+  placeHolder: PropTypes.string,
+  features: PropTypes.arrayOf(PropTypes.oneOf(features)),
+  formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
+  isHTMLContent: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func,
+  onPaste: PropTypes.func,
+  onEnter: PropTypes.func,
+  onErrorCallback: PropTypes.func,
+  onReadyCallback: PropTypes.func,
+  themeVariables: PropTypes.object,
+  customProps: PropTypes.shape({
+    editorProps: PropTypes.object
+  }),
+  getEditorState: PropTypes.func
+};
+export default replyEditorPropTypes;