@zohodesk/dot 1.4.9 → 1.4.11

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

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _useEffectCallOnlyAfterState = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState"));
+
 var _TextEditor = _interopRequireDefault(require("../TextEditor/TextEditor"));
 
 var _Textarea = _interopRequireDefault(require("@zohodesk/components/es/v1/Textarea/Textarea"));
@@ -31,226 +33,172 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /* eslint-disable react/no-deprecated */
-var TextEditorWrapper = /*#__PURE__*/function (_Component) {
-  _inherits(TextEditorWrapper, _Component);
-
-  var _super = _createSuper(TextEditorWrapper);
-
-  function TextEditorWrapper(props) {
-    var _this;
-
-    _classCallCheck(this, TextEditorWrapper);
-
-    _this = _super.call(this, props);
-    var value = props.value,
-        isEditorDefaultOpen = props.isEditorDefaultOpen;
-    _this.state = {
-      isEditorShow: isEditorDefaultOpen ? true : !!value
-    };
-    _this.handleTextareaFocus = _this.handleTextareaFocus.bind(_assertThisInitialized(_this));
-    _this.toggleEdit = _this.toggleEdit.bind(_assertThisInitialized(_this));
-    _this.focusCallback = _this.focusCallback.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(TextEditorWrapper, [{
-    key: "handleTextareaFocus",
-    value: function handleTextareaFocus() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          isReadOnly = _this$props.isReadOnly,
-          isDisabled = _this$props.isDisabled;
-
-      if (!isReadOnly && !isDisabled) {
-        this.setState({
-          isEditorShow: true
-        }, function () {
-          setTimeout(function () {
-            editor[_this2.props.id].squireInstance.focus();
-          }, 300);
-        });
-      }
-    }
-  }, {
-    key: "toggleEdit",
-    value: function toggleEdit(value) {
-      this.setState({
-        isEditorShow: value
-      });
-    }
-  }, {
-    key: "focusCallback",
-    value: function focusCallback() {
-      var onFocus = this.props.onFocus;
-      this.setState({
-        isEditorFocus: true
-      });
-      onFocus && onFocus();
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(np) {
-      var _this$props2 = this.props,
-          id = _this$props2.id,
-          value = _this$props2.value;
-
-      if (np.value || typeof editor != 'undefined' && (0, _editorUtils.editorContentValidate)(editor[id])) {
-        this.setState({
-          isEditorShow: true
-        });
-      } else {
-        if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
-          this.setState({
-            isEditorShow: false
-          });
-        }
-      } // if (np.value !== value && np.value == '') {
-      //   editor[id].setContent('');
-      // }
-
+var TextEditorWrapper = function TextEditorWrapper(props) {
+  var id = props.id,
+      onChange = props.onChange,
+      value = props.value,
+      onAttachmentUpload = props.onAttachmentUpload,
+      needEditor = props.needEditor,
+      dataId = props.dataId,
+      isReadOnly = props.isReadOnly,
+      isDisabled = props.isDisabled,
+      getRef = props.getRef,
+      textBoxSize = props.textBoxSize,
+      textBoxVariant = props.textBoxVariant,
+      editorMode = props.editorMode,
+      editorSize = props.editorSize,
+      editorBorder = props.editorBorder,
+      EDITORURL = props.EDITORURL,
+      isCustomScroll = props.isCustomScroll,
+      initCallback = props.initCallback,
+      loadingComponent = props.loadingComponent,
+      handleAlertMessage = props.handleAlertMessage,
+      editorCallback = props.editorCallback,
+      editorBlurCallback = props.editorBlurCallback,
+      editorOptions = props.editorOptions,
+      changeEditorContent = props.changeEditorContent,
+      shouldEditorUpdateContent = props.shouldEditorUpdateContent,
+      setInlineAttachmentInProgress = props.setInlineAttachmentInProgress,
+      handleEditorDropUpload = props.handleEditorDropUpload,
+      ImgLazyLoad = props.ImgLazyLoad,
+      i18nKeys = props.i18nKeys,
+      isEditorDefaultOpen = props.isEditorDefaultOpen,
+      needInlineAttachment = props.needInlineAttachment,
+      customProps = props.customProps,
+      dataSelectorId = props.dataSelectorId,
+      onFocus = props.onFocus;
+  var _customProps$Textarea = customProps.Textarea1Props,
+      Textarea1Props = _customProps$Textarea === void 0 ? {} : _customProps$Textarea,
+      _customProps$Textarea2 = customProps.Textarea2Props,
+      Textarea2Props = _customProps$Textarea2 === void 0 ? {} : _customProps$Textarea2,
+      _customProps$TextEdit = customProps.TextEditorProps,
+      TextEditorProps = _customProps$TextEdit === void 0 ? {} : _customProps$TextEdit;
+
+  var _useState = (0, _react.useState)(isEditorDefaultOpen ? true : !!value),
+      _useState2 = _slicedToArray(_useState, 2),
+      isEditorShow = _useState2[0],
+      setIsEditorShow = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isEditorFocus = _useState4[0],
+      setIsEditorFocus = _useState4[1];
+
+  var defaultObj = {
+    needEditorFocus: !value
+  };
+  var editorOptionsObject = Object.assign(defaultObj, editorOptions);
+
+  var handleTextareaFocus = function handleTextareaFocus() {
+    if (!isReadOnly && !isDisabled) {
+      setIsEditorShow(true);
+      setTimeout(function () {
+        editor[id].squireInstance.focus();
+      }, 300);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var isEditorShow = this.state.isEditorShow;
-      var _this$props3 = this.props,
-          id = _this$props3.id,
-          onChange = _this$props3.onChange,
-          value = _this$props3.value,
-          onAttachmentUpload = _this$props3.onAttachmentUpload,
-          needEditor = _this$props3.needEditor,
-          dataId = _this$props3.dataId,
-          isReadOnly = _this$props3.isReadOnly,
-          isDisabled = _this$props3.isDisabled,
-          getRef = _this$props3.getRef,
-          textBoxSize = _this$props3.textBoxSize,
-          textBoxVariant = _this$props3.textBoxVariant,
-          editorMode = _this$props3.editorMode,
-          editorSize = _this$props3.editorSize,
-          editorBorder = _this$props3.editorBorder,
-          EDITORURL = _this$props3.EDITORURL,
-          isCustomScroll = _this$props3.isCustomScroll,
-          initCallback = _this$props3.initCallback,
-          loadingComponent = _this$props3.loadingComponent,
-          handleAlertMessage = _this$props3.handleAlertMessage,
-          editorCallback = _this$props3.editorCallback,
-          editorBlurCallback = _this$props3.editorBlurCallback,
-          editorOptions = _this$props3.editorOptions,
-          changeEditorContent = _this$props3.changeEditorContent,
-          shouldEditorUpdateContent = _this$props3.shouldEditorUpdateContent,
-          setInlineAttachmentInProgress = _this$props3.setInlineAttachmentInProgress,
-          handleEditorDropUpload = _this$props3.handleEditorDropUpload,
-          ImgLazyLoad = _this$props3.ImgLazyLoad,
-          i18nKeys = _this$props3.i18nKeys,
-          isEditorDefaultOpen = _this$props3.isEditorDefaultOpen,
-          needInlineAttachment = _this$props3.needInlineAttachment,
-          customProps = _this$props3.customProps,
-          dataSelectorId = _this$props3.dataSelectorId;
-      var _customProps$Textarea = customProps.Textarea1Props,
-          Textarea1Props = _customProps$Textarea === void 0 ? {} : _customProps$Textarea,
-          _customProps$Textarea2 = customProps.Textarea2Props,
-          Textarea2Props = _customProps$Textarea2 === void 0 ? {} : _customProps$Textarea2,
-          _customProps$TextEdit = customProps.TextEditorProps,
-          TextEditorProps = _customProps$TextEdit === void 0 ? {} : _customProps$TextEdit;
-      var defaultObj = {
-        needEditorFocus: !value
-      };
-      var editorOptionsObject = Object.assign(defaultObj, editorOptions);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorWrapperModule["default"].container,
-        "data-selector-id": dataSelectorId
-      }, !isEditorShow ? /*#__PURE__*/_react["default"].createElement(_Textarea["default"], _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: _TextEditorWrapperModule["default"].textBox
-      }, Textarea1Props)) : null, /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
-        name: "slideDown",
-        runOnMount: true,
-        enterDuration: '300',
-        exitDuration: '400',
-        isActive: isEditorShow,
-        component: "div"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TextEditorWrapperModule["default"].textEditor
-      }, isEditorShow && needEditor ? /*#__PURE__*/_react["default"].createElement(_TextEditor["default"], _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["default"].createElement(_Textarea["default"], _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)))));
+  };
+
+  var toggleEdit = function toggleEdit(value) {
+    setIsEditorShow(value);
+  };
+
+  var focusCallback = function focusCallback() {
+    setIsEditorFocus(true);
+    onFocus && onFocus();
+  };
+
+  (0, _useEffectCallOnlyAfterState["default"])(function () {
+    if (value || typeof editor !== 'undefined' && (0, _editorUtils.editorContentValidate)(editor[id])) {
+      setIsEditorShow(true);
+    } else {
+      if (!isEditorFocus && !isEditorDefaultOpen) {
+        setIsEditorShow(false);
+      }
     }
-  }]);
-
-  return TextEditorWrapper;
-}(_react.Component);
-
-exports["default"] = TextEditorWrapper;
+  }, [value, id, isEditorDefaultOpen]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _TextEditorWrapperModule["default"].container,
+    "data-selector-id": dataSelectorId
+  }, !isEditorShow ? /*#__PURE__*/_react["default"].createElement(_Textarea["default"], _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: _TextEditorWrapperModule["default"].textBox
+  }, Textarea1Props)) : null, /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
+    name: "slideDown",
+    runOnMount: true,
+    enterDuration: '300',
+    exitDuration: '400',
+    isActive: isEditorShow,
+    component: "div"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _TextEditorWrapperModule["default"].textEditor
+  }, isEditorShow && needEditor ? /*#__PURE__*/_react["default"].createElement(_TextEditor["default"], _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["default"].createElement(_Textarea["default"], _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)))));
+};
+
+var _default = TextEditorWrapper;
+exports["default"] = _default;
 TextEditorWrapper.propTypes = _propTypes.propTypes;
 TextEditorWrapper.defaultProps = _defaultProps.defaultProps;