dtable-ui-component 4.4.29 → 4.4.30-beta1

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,14 +117,16 @@ class SimpleLongTextFormatter extends _react.default.Component {
     };
   }
   componentWillUnmount() {
-    this.clearTimer();
+    this.clearOpenPreviewTimer();
+    this.clearClosePreviewTimer();
   }
   render() {
     const {
       isPreview
     } = this.state;
     const {
-      containerClassName
+      containerClassName,
+      previewClassName
     } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     const value = this.translateValue();
@@ -116,8 +136,11 @@ class SimpleLongTextFormatter extends _react.default.Component {
       onMouseLeave: this.onMouseLeave,
       ref: ref => this.ref = ref
     }, 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/normalize-long-text-value.js

@@ -53,7 +53,8 @@ const getPreviewContent = markdownContent => {
     return {
       preview,
       images,
-      links
+      links,
+      text: markdownContent
     };
   }
   return {

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableMarkdownViewer = _interopRequireDefault(require("./dtable-markdown-viewer"));
 require("./longTextEditor.css");
 class LongTextPreview extends _react.default.PureComponent {
@@ -33,6 +34,12 @@ class LongTextPreview extends _react.default.PureComponent {
         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
@@ -49,11 +56,17 @@ class LongTextPreview extends _react.default.PureComponent {
     }, 0);
   }
   render() {
-    let markdownContent = this.props.value ? this.props.value.text : '';
+    const {
+      className,
+      value
+    } = this.props;
+    const markdownContent = value ? value.text : '';
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "longtext-modal-dialog longtext-preview",
+      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

@@ -325,13 +325,22 @@
   height: fit-content;
   max-height: 450px;
   margin-left: 0;
-  z-index: 100;
+  z-index: 10000;
   top: 0;
   box-shadow: 0 0 5px #ccc;
   border: 1px solid rgba(0, 40, 100, 0.12);
   transform: none;
 }
 
+.longtext-preview .sf-slate-viewer-scroll-container {
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.longtext-preview .sf-slate-viewer-scroll-container .sf-slate-viewer-article-container {
+  width: 100%;
+}
+
 .longtext-preview .longtext-container .article {
   padding: 10px 16px;
 }

package/package.json

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