@zohodesk/dot 1.0.0-temp-175.6 → 1.0.0-temp-181

package/es/v1/form/fields/TextEditorField/TextEditorField.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**** Libraries ****/
-import React, { PureComponent } from 'react';
+import React, { memo, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /**** Components ****/
@@ -13,166 +13,146 @@ import FieldContainer from '../FieldContainer/FieldContainer';
 /** Css */
 
 import style from '../../../../form/fields/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;
+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);
-  }
+  };
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.textEditor = el;
+  const handleGetRef = el => {
+    textEditorEleRef.current = el;
     getRef && getRef(el, id);
-  }
-
-  handleLabelClick() {
-    let {
-      isFocusOnLabelClick,
-      isDisabled,
-      isReadOnly
-    } = this.props;
+  };
 
-    if (isFocusOnLabelClick && !isDisabled && !isReadOnly && this.textEditor && this.textEditor.focus) {
-      this.textEditor.focus();
+  const handleLabelClick = () => {
+    if (isFocusOnLabelClick && !isDisabled && !isReadOnly && textEditorEleRef.current && textEditorEleRef.current.focus) {
+      textEditorEleRef.current.focus();
     }
-  }
+  };
 
-  renderEnd() {
-    let {
-      children
-    } = this.props;
+  const renderEnd = () => {
     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,
-      children,
-      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, _extends({
-      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, _extends({
-      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, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps)));
-  }
+  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, _extends({
+    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, _extends({
+    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, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps)));
+};
 
-}
 TextEditorField.propTypes = propTypes;
-TextEditorField.defaultProps = defaultProps; // if (__DOCS__) {
-//   TextEditorField.docs = {
-//     componentGroup: 'Fields'
-//   };
-// }
+TextEditorField.defaultProps = defaultProps;
+const MemoizedTextEditorField = /*#__PURE__*/memo(TextEditorField);
+MemoizedTextEditorField.propTypes = propTypes;
+MemoizedTextEditorField.defaultProps = defaultProps;
+MemoizedTextEditorField.displayName = 'TextEditorField';
+export default TextEditorField;

package/es/v1/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -1,10 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /**** Components ****/
 
+import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
 import TextEditor from '../TextEditor/TextEditor';
 import Textarea from '@zohodesk/components/es/v1/Textarea/Textarea';
 import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
@@ -12,192 +13,150 @@ import { editorContentValidate } from '../../../../utils/editorUtils';
 import style from './../../../../form/fields/TextEditorWrapper/TextEditorWrapper.module.css';
 /* eslint-disable react/no-deprecated */
 
-export default class TextEditorWrapper extends Component {
-  constructor(props) {
-    super(props);
-    let {
-      value,
-      isEditorDefaultOpen
-    } = props;
-    this.state = {
-      isEditorShow: isEditorDefaultOpen ? true : !!value
-    };
-    this.handleTextareaFocus = this.handleTextareaFocus.bind(this);
-    this.toggleEdit = this.toggleEdit.bind(this);
-    this.focusCallback = this.focusCallback.bind(this);
-  }
-
-  handleTextareaFocus() {
-    let {
-      isReadOnly,
-      isDisabled
-    } = this.props;
+const TextEditorWrapper = props => {
+  const {
+    id,
+    onChange,
+    value,
+    onAttachmentUpload,
+    needEditor,
+    dataId,
+    isReadOnly,
+    isDisabled,
+    getRef,
+    textBoxSize,
+    textBoxVariant,
+    editorMode,
+    editorSize,
+    editorBorder,
+    EDITORURL,
+    isCustomScroll,
+    initCallback,
+    loadingComponent,
+    handleAlertMessage,
+    editorCallback,
+    editorBlurCallback,
+    editorOptions,
+    changeEditorContent,
+    shouldEditorUpdateContent,
+    setInlineAttachmentInProgress,
+    handleEditorDropUpload,
+    ImgLazyLoad,
+    i18nKeys,
+    isEditorDefaultOpen,
+    needInlineAttachment,
+    customProps,
+    dataSelectorId,
+    onFocus
+  } = props;
+  const {
+    Textarea1Props = {},
+    Textarea2Props = {},
+    TextEditorProps = {}
+  } = customProps;
+  const [isEditorShow, setIsEditorShow] = useState(isEditorDefaultOpen ? true : !!value);
+  const [isEditorFocus, setIsEditorFocus] = useState(false);
+  const defaultObj = {
+    needEditorFocus: !value
+  };
+  const editorOptionsObject = Object.assign(defaultObj, editorOptions);
 
+  const handleTextareaFocus = () => {
     if (!isReadOnly && !isDisabled) {
-      this.setState({
-        isEditorShow: true
-      }, () => {
-        setTimeout(() => {
-          editor[this.props.id].squireInstance.focus();
-        }, 300);
-      });
+      setIsEditorShow(true);
+      setTimeout(() => {
+        editor[id].squireInstance.focus();
+      }, 300);
     }
-  }
+  };
 
-  toggleEdit(value) {
-    this.setState({
-      isEditorShow: value
-    });
-  }
+  const toggleEdit = value => {
+    setIsEditorShow(value);
+  };
 
-  focusCallback() {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isEditorFocus: true
-    });
+  const focusCallback = () => {
+    setIsEditorFocus(true);
     onFocus && onFocus();
-  }
-
-  componentWillReceiveProps(np) {
-    let {
-      id,
-      value
-    } = this.props;
+  };
 
-    if (np.value || typeof editor != 'undefined' && editorContentValidate(editor[id])) {
-      this.setState({
-        isEditorShow: true
-      });
+  useEffectCallOnlyAfterState(() => {
+    if (value || typeof editor !== 'undefined' && editorContentValidate(editor[id])) {
+      setIsEditorShow(true);
     } else {
-      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
-        this.setState({
-          isEditorShow: false
-        });
+      if (!isEditorFocus && !isEditorDefaultOpen) {
+        setIsEditorShow(false);
       }
-    } // if (np.value !== value && np.value == '') {
-    //   editor[id].setContent('');
-    // }
-
-  }
-
-  render() {
-    let {
-      isEditorShow
-    } = this.state;
-    let {
-      id,
-      onChange,
-      value,
-      onAttachmentUpload,
-      needEditor,
-      dataId,
-      isReadOnly,
-      isDisabled,
-      getRef,
-      textBoxSize,
-      textBoxVariant,
-      editorMode,
-      editorSize,
-      editorBorder,
-      EDITORURL,
-      isCustomScroll,
-      initCallback,
-      loadingComponent,
-      handleAlertMessage,
-      editorCallback,
-      editorBlurCallback,
-      editorOptions,
-      changeEditorContent,
-      shouldEditorUpdateContent,
-      setInlineAttachmentInProgress,
-      handleEditorDropUpload,
-      ImgLazyLoad,
-      i18nKeys,
-      isEditorDefaultOpen,
-      needInlineAttachment,
-      customProps,
-      dataSelectorId
-    } = this.props;
-    const {
-      Textarea1Props = {},
-      Textarea2Props = {},
-      TextEditorProps = {}
-    } = customProps;
-    let defaultObj = {
-      needEditorFocus: !value
-    };
-    let editorOptionsObject = Object.assign(defaultObj, editorOptions);
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
-      "data-selector-id": dataSelectorId
-    }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
-      onFocus: this.handleTextareaFocus,
-      text: value,
-      animated: !needEditor,
-      onChange: onChange,
-      dataId: dataId,
-      isReadOnly: isReadOnly,
-      isDisabled: isDisabled,
-      needEffect: !(isReadOnly || isDisabled),
-      getRef: getRef,
-      size: textBoxSize,
-      variant: textBoxVariant,
-      customClass: style.textBox
-    }, Textarea1Props)) : null, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: "slideDown",
-      runOnMount: true,
-      enterDuration: '300',
-      exitDuration: '400',
-      isActive: isEditorShow,
-      component: "div"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.textEditor
-    }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, _extends({
-      id: id,
-      value: value,
-      onChange: !isReadOnly && !isDisabled ? onChange : null,
-      editorOptions: editorOptionsObject,
-      onUpload: onAttachmentUpload,
-      editorMode: editorMode,
-      type: editorSize,
-      border: editorBorder,
-      dataId: dataId,
-      getRef: getRef,
-      plainTextSwitchCallback: !isReadOnly && !isDisabled ? onChange : null,
-      EDITORURL: EDITORURL,
-      isCustomScroll: isCustomScroll,
-      initCallback: initCallback,
-      loadingComponent: loadingComponent,
-      handleAlertMessage: handleAlertMessage,
-      toggleEdit: this.toggleEdit,
-      isEditorDefaultOpen: isEditorDefaultOpen,
-      editorCallback: editorCallback,
-      i18nKeys: i18nKeys,
-      ImgLazyLoad: ImgLazyLoad,
-      blurCallback: editorBlurCallback,
-      changeEditorContent: changeEditorContent,
-      shouldUpdateContent: shouldEditorUpdateContent,
-      setInlineAttachmentInProgress: setInlineAttachmentInProgress,
-      handleDropUpload: handleEditorDropUpload,
-      onFocus: this.focusCallback,
-      needInlineAttachment: needInlineAttachment
-    }, TextEditorProps)) : /*#__PURE__*/React.createElement(Textarea, _extends({
-      onFocus: this.handleTextareaFocus,
-      text: value,
-      animated: !needEditor,
-      onChange: onChange,
-      dataId: dataId,
-      isReadOnly: isReadOnly,
-      isDisabled: isDisabled,
-      needEffect: !(isReadOnly || isDisabled),
-      getRef: getRef,
-      size: textBoxSize,
-      variant: textBoxVariant
-    }, Textarea2Props)))));
-  }
+    }
+  }, [value, id, isEditorDefaultOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-selector-id": dataSelectorId
+  }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
+    onFocus: handleTextareaFocus,
+    text: value,
+    animated: !needEditor,
+    onChange: onChange,
+    dataId: dataId,
+    isReadOnly: isReadOnly,
+    isDisabled: isDisabled,
+    needEffect: !(isReadOnly || isDisabled),
+    getRef: getRef,
+    size: textBoxSize,
+    variant: textBoxVariant,
+    customClass: style.textBox
+  }, Textarea1Props)) : null, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: "slideDown",
+    runOnMount: true,
+    enterDuration: '300',
+    exitDuration: '400',
+    isActive: isEditorShow,
+    component: "div"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.textEditor
+  }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, _extends({
+    id: id,
+    value: value,
+    onChange: !isReadOnly && !isDisabled ? onChange : null,
+    editorOptions: editorOptionsObject,
+    onUpload: onAttachmentUpload,
+    editorMode: editorMode,
+    type: editorSize,
+    border: editorBorder,
+    dataId: dataId,
+    getRef: getRef,
+    plainTextSwitchCallback: !isReadOnly && !isDisabled ? onChange : null,
+    EDITORURL: EDITORURL,
+    isCustomScroll: isCustomScroll,
+    initCallback: initCallback,
+    loadingComponent: loadingComponent,
+    handleAlertMessage: handleAlertMessage,
+    toggleEdit: toggleEdit,
+    isEditorDefaultOpen: isEditorDefaultOpen,
+    editorCallback: editorCallback,
+    i18nKeys: i18nKeys,
+    ImgLazyLoad: ImgLazyLoad,
+    blurCallback: editorBlurCallback,
+    changeEditorContent: changeEditorContent,
+    shouldUpdateContent: shouldEditorUpdateContent,
+    setInlineAttachmentInProgress: setInlineAttachmentInProgress,
+    handleDropUpload: handleEditorDropUpload,
+    onFocus: focusCallback,
+    needInlineAttachment: needInlineAttachment
+  }, TextEditorProps)) : /*#__PURE__*/React.createElement(Textarea, _extends({
+    onFocus: handleTextareaFocus,
+    text: value,
+    animated: !needEditor,
+    onChange: onChange,
+    dataId: dataId,
+    isReadOnly: isReadOnly,
+    isDisabled: isDisabled,
+    needEffect: !(isReadOnly || isDisabled),
+    getRef: getRef,
+    size: textBoxSize,
+    variant: textBoxVariant
+  }, Textarea2Props)))));
+};
 
-}
+export default TextEditorWrapper;
 TextEditorWrapper.propTypes = propTypes;
 TextEditorWrapper.defaultProps = defaultProps;