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

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

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

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

import style from "../Fields.module.css";
export default class TextEditorField extends PureComponent {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleGetRef = this.handleGetRef.bind(this);
    this.handleLabelClick = this.handleLabelClick.bind(this);
    this.renderEnd = this.renderEnd.bind(this);
  }

  handleChange(value) {
    let {
      id,
      onChange
    } = this.props;
    onChange && onChange(id, value);
  }

  handleGetRef(el) {
    let {
      getRef,
      id
    } = this.props;
    this.textEditor = el;
    getRef && getRef(el, id);
  }

  handleLabelClick() {
    let {
      isFocusOnLabelClick,
      isDisabled,
      isReadOnly
    } = this.props;

    if (isFocusOnLabelClick && !isDisabled && !isReadOnly && this.textEditor && this.textEditor.focus) {
      this.textEditor.focus();
    }
  }

  renderEnd() {
    let {
      children
    } = this.props;
    return children ? children : null;
  }

  render() {
    let {
      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,
      ePhiData,
      customProps
    } = this.props;
    const {
      LabelProps = {},
      TextEditorWrapperProps = {},
      ValidationMessageProps = {}
    } = customProps;
    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: this.renderEnd
      }
    }, /*#__PURE__*/React.createElement(Label, {
      text: labelName,
      size: fieldSize === 'small' ? 'small' : 'medium',
      htmlFor: !isReadOnly && !isDisabled ? id : undefined,
      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
      onClick: this.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: this.handleChange,
      id: id,
      value: value,
      isReadOnly: isReadOnly,
      getRef: this.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; // if (__DOCS__) {
//   TextEditorField.docs = {
//     componentGroup: 'Fields'
//   };
// }