dtable-ui-component 4.4.30-beta2 → 4.4.30

package/lib/SimpleLongTextFormatter/index.js

@@ -63,22 +63,20 @@ class SimpleLongTextFormatter extends _react.default.Component {
       }
       return {};
     };
-    this.clearOpenPreviewTimer = () => {
-      if (!this.openPreviewTimer) return;
-      clearTimeout(this.openPreviewTimer);
-      this.openPreviewTimer = null;
-    };
-    this.clearClosePreviewTimer = () => {
-      if (!this.closePreviewTimer) return;
-      clearTimeout(this.closePreviewTimer);
-      this.closePreviewTimer = null;
+    this.clearTimer = () => {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
     };
     this.onMouseEnter = () => {
       // in case that there is no `modal-wrapper`
-      if (!document.getElementById('modal-wrapper')) return;
-      this.clearOpenPreviewTimer();
+      if (!document.getElementById('modal-wrapper')) {
+        return;
+      }
+      this.clearTimer();
       if (this.props.value) {
-        this.openPreviewTimer = setTimeout(() => {
+        this.timer = setTimeout(() => {
           const style = this.ref.getBoundingClientRect();
           this.formatterStyle = style;
           this.setState({
@@ -88,23 +86,7 @@ class SimpleLongTextFormatter extends _react.default.Component {
       }
     };
     this.onMouseLeave = () => {
-      this.clearOpenPreviewTimer();
-
-      // Case 1: The mouse moves out of the cell and is not in the preview component, close the preview component after 2S
-      this.closePreviewTimer = setTimeout(() => {
-        if (this.state.isPreview) {
-          this.setState({
-            isPreview: false
-          });
-        }
-      }, 2000);
-    };
-    // Case 2: The mouse moves out of the cell and into the preview component, do not close the preview component
-    this.onPreviewMouseEnter = () => {
-      this.clearClosePreviewTimer();
-    };
-    // Case 2: The mouse move out of the preview component, close the preview component
-    this.onPreviewMouseLeave = () => {
+      this.clearTimer();
       if (this.state.isPreview) {
         this.setState({
           isPreview: false
@@ -117,8 +99,7 @@ class SimpleLongTextFormatter extends _react.default.Component {
     };
   }
   componentWillUnmount() {
-    this.clearOpenPreviewTimer();
-    this.clearClosePreviewTimer();
+    this.clearTimer();
   }
   render() {
     const {
@@ -138,9 +119,7 @@ class SimpleLongTextFormatter extends _react.default.Component {
     }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value), isPreview && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_LongTextPreview.default, {
       className: previewClassName,
       value: value,
-      formatterStyle: this.formatterStyle,
-      onMouseEnter: this.onPreviewMouseEnter,
-      onMouseLeave: this.onPreviewMouseLeave
+      formatterStyle: this.formatterStyle
     })));
   }
 }

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -20,11 +20,8 @@ class LongTextPreview extends _react.default.PureComponent {
         left,
         top
       } = formatterStyle;
-      const {
-        height,
-        opacity
-      } = this.state;
       const width = 520;
+      const height = this.state.height;
       const padding = 6;
       left = left - width > 0 ? left - width - 12 : 0;
       top = top - padding;
@@ -34,15 +31,9 @@ class LongTextPreview extends _react.default.PureComponent {
       return {
         left,
         top,
-        opacity
+        opacity: this.state.opacity
       };
     };
-    this.onMouseEnter = e => {
-      this.props.onMouseEnter && this.props.onMouseEnter(e);
-    };
-    this.onMouseLeave = e => {
-      this.props.onMouseLeave && this.props.onMouseLeave(e);
-    };
     this.state = {
       height: 450,
       opacity: 0
@@ -50,22 +41,13 @@ class LongTextPreview extends _react.default.PureComponent {
   }
   componentDidMount() {
     setTimeout(() => {
-      var _value$images;
       if (!this.ref) return;
-      const {
-        value
-      } = this.props;
-      // If image is included, sets the preview height to the maximum height
-      const hasImage = (value === null || value === void 0 ? void 0 : (_value$images = value.images) === null || _value$images === void 0 ? void 0 : _value$images.length) >= 2 ? true : false;
-      let {
-        height: domHeight
-      } = this.ref.getBoundingClientRect();
-      domHeight = hasImage ? 450 : domHeight;
+      const domHeight = this.ref.offsetHeight;
       this.setState({
         height: domHeight,
         opacity: 1
       });
-    }, 10);
+    }, 0);
   }
   render() {
     const {
@@ -76,9 +58,7 @@ class LongTextPreview extends _react.default.PureComponent {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)('longtext-modal-dialog longtext-preview', className),
       style: this.getStyle(),
-      ref: ref => this.ref = ref,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave
+      ref: ref => this.ref = ref
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "longtext-container longtext-container-scroll"
     }, /*#__PURE__*/_react.default.createElement(_dtableMarkdownViewer.default, {

package/lib/SimpleLongTextFormatter/widgets/longTextEditor.css

@@ -339,12 +339,10 @@
 
 .longtext-preview .sf-slate-viewer-scroll-container .sf-slate-viewer-article-container {
   width: 100%;
-  margin: 0;
 }
 
 .longtext-preview .longtext-container .article {
   padding: 10px 16px;
-  border: unset;
 }
 
 .row-height-128 .longtext-formatter .article {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.4.30beta2",
+  "version": "4.4.30",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",