dtable-ui-component 4.4.30 → 4.4.31

package/lib/SimpleLongTextFormatter/index.js

@@ -63,20 +63,22 @@ class SimpleLongTextFormatter extends _react.default.Component {
       }
       return {};
     };
-    this.clearTimer = () => {
-      if (this.timer) {
-        clearTimeout(this.timer);
-        this.timer = null;
-      }
+    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.onMouseEnter = () => {
       // in case that there is no `modal-wrapper`
-      if (!document.getElementById('modal-wrapper')) {
-        return;
-      }
-      this.clearTimer();
+      if (!document.getElementById('modal-wrapper')) return;
+      this.clearOpenPreviewTimer();
       if (this.props.value) {
-        this.timer = setTimeout(() => {
+        this.openPreviewTimer = setTimeout(() => {
           const style = this.ref.getBoundingClientRect();
           this.formatterStyle = style;
           this.setState({
@@ -86,7 +88,23 @@ class SimpleLongTextFormatter extends _react.default.Component {
       }
     };
     this.onMouseLeave = () => {
-      this.clearTimer();
+      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 = () => {
       if (this.state.isPreview) {
         this.setState({
           isPreview: false
@@ -99,7 +117,8 @@ class SimpleLongTextFormatter extends _react.default.Component {
     };
   }
   componentWillUnmount() {
-    this.clearTimer();
+    this.clearOpenPreviewTimer();
+    this.clearClosePreviewTimer();
   }
   render() {
     const {
@@ -119,7 +138,9 @@ 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
+      formatterStyle: this.formatterStyle,
+      onMouseEnter: this.onPreviewMouseEnter,
+      onMouseLeave: this.onPreviewMouseLeave
     })));
   }
 }

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -20,8 +20,11 @@ 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;
@@ -31,9 +34,15 @@ class LongTextPreview extends _react.default.PureComponent {
       return {
         left,
         top,
-        opacity: this.state.opacity
+        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
@@ -41,13 +50,23 @@ class LongTextPreview extends _react.default.PureComponent {
   }
   componentDidMount() {
     setTimeout(() => {
+      var _value$images;
       if (!this.ref) return;
-      const domHeight = this.ref.offsetHeight;
+      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;
       this.setState({
-        height: domHeight,
+        height: Math.min(domHeight, 450),
         opacity: 1
       });
-    }, 0);
+    }, 10);
   }
   render() {
     const {
@@ -58,7 +77,9 @@ 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
+      ref: ref => this.ref = ref,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "longtext-container longtext-container-scroll"
     }, /*#__PURE__*/_react.default.createElement(_dtableMarkdownViewer.default, {

package/lib/SimpleLongTextFormatter/widgets/longTextEditor.css

@@ -339,10 +339,12 @@
 
 .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.30",
+  "version": "4.4.31",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",