@zohodesk/dot/es/v1/form/fields/TextEditorField/TextEditorField.js

In this Library, we Provide Some Basic Components to Build Your Application

/**** Libraries ****/
import React, { memo, useRef } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/

import Label from '@zohodesk/components/es/v1/Label/Label';
import ValidationMessage from "../ValidationMessage/ValidationMessage";
import TextEditorWrapper from "../TextEditorWrapper/TextEditorWrapper";
import FieldContainer from "../FieldContainer/FieldContainer";
/** Css */

import style from "../../../../form/fields/Fields.module.css";

const TextEditorField = props => {
  const {
    labelName,
    id,
    isMandatory,
    value,
    validationMessage,
    validationPalette,
    isReadOnly,
    onAttachmentUpload,
    needEditor,
    dataId,
    dataSelectorId,
    isDisabled,
    fieldSize,
    textBoxSize,
    textBoxVariant,
    labelPalette,
    labelCustomClass,
    infoText,
    isLocked,
    lockedInfoText,
    errorType,
    EDITORURL,
    editorMode,
    isCustomScroll,
    initCallback,
    loadingComponent,
    handleAlertMessage,
    editorCallback,
    editorBlurCallback,
    editorOptions,
    onFocus,
    isEditorDefaultOpen,
    changeEditorContent,
    shouldEditorUpdateContent,
    setInlineAttachmentInProgress,
    handleEditorDropUpload,
    ImgLazyLoad,
    needInlineAttachment,
    i18nKeys,
    className,
    children,
    ePhiData,
    customProps,
    onChange,
    getRef,
    isFocusOnLabelClick
  } = props;
  const textEditorEleRef = useRef(null);
  const {
    LabelProps = {},
    TextEditorWrapperProps = {},
    ValidationMessageProps = {}
  } = customProps;

  const handleChange = value => {
    onChange && onChange(id, value);
  };

  const handleGetRef = el => {
    textEditorEleRef.current = el;
    getRef && getRef(el, id);
  };

  const handleLabelClick = () => {
    if (isFocusOnLabelClick && !isDisabled && !isReadOnly && textEditorEleRef.current && textEditorEleRef.current.focus) {
      textEditorEleRef.current.focus();
    }
  };

  const renderEnd = () => {
    return children ? children : null;
  };

  return /*#__PURE__*/React.createElement("div", {
    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`,
    "data-selector-id": dataSelectorId
  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
    infoText: infoText,
    isLocked: isLocked,
    lockedInfoText: lockedInfoText,
    ePhiData: ePhiData,
    dataId: dataId,
    renderProps: {
      end: renderEnd
    }
  }, /*#__PURE__*/React.createElement(Label, {
    text: labelName,
    size: fieldSize === 'small' ? 'small' : 'medium',
    htmlFor: !isReadOnly && !isDisabled ? id : undefined,
    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
    onClick: handleLabelClick,
    customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
    ...LabelProps
  })), /*#__PURE__*/React.createElement("div", {
    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
  }, /*#__PURE__*/React.createElement(TextEditorWrapper, {
    needEditor: needEditor,
    onChange: handleChange,
    id: id,
    value: value,
    isReadOnly: isReadOnly,
    getRef: handleGetRef,
    onAttachmentUpload: onAttachmentUpload,
    dataId: dataId,
    isDisabled: isDisabled,
    textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
    textBoxVariant: textBoxVariant,
    EDITORURL: EDITORURL,
    editorMode: editorMode,
    isCustomScroll: isCustomScroll,
    initCallback: initCallback,
    loadingComponent: loadingComponent,
    handleAlertMessage: handleAlertMessage,
    editorCallback: editorCallback,
    i18nKeys: i18nKeys,
    ImgLazyLoad: ImgLazyLoad,
    editorOptions: editorOptions,
    editorBlurCallback: editorBlurCallback,
    onFocus: onFocus,
    isEditorDefaultOpen: isEditorDefaultOpen,
    changeEditorContent: changeEditorContent,
    shouldEditorUpdateContent: shouldEditorUpdateContent,
    setInlineAttachmentInProgress: setInlineAttachmentInProgress,
    handleEditorDropUpload: handleEditorDropUpload,
    needInlineAttachment: needInlineAttachment,
    ...TextEditorWrapperProps
  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
    text: validationMessage,
    palette: validationPalette,
    type: errorType,
    dataId: `${dataId}_ValidationMessage`,
    ...ValidationMessageProps
  }));
};

TextEditorField.propTypes = propTypes;
TextEditorField.defaultProps = defaultProps;
const MemoizedTextEditorField = /*#__PURE__*/memo(TextEditorField);
MemoizedTextEditorField.propTypes = propTypes;
MemoizedTextEditorField.defaultProps = defaultProps;
MemoizedTextEditorField.displayName = 'TextEditorField';
export default TextEditorField;