dtable-ui-component 4.4.1 → 4.4.2

package/lib/CollaboratorEditor/index.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 import { getLocale } from '../lang';
+import ModalPortal from '../common/modal-portal';
 import CollaboratorItem from '../CollaboratorItem';
 import EditEditorButton from '../EditEditorButton';
 import PCCollaboratorEditorPopover from './pc-collaborator-editor-popover';
@@ -10,6 +11,11 @@ class CollaboratorEditor extends React.Component {
   constructor(props) {
     super(props);
     this.onMouseDown = e => {
+      if (this.state.isPopoverShow && this.editorPopoverRef) {
+        if (this.editorPopoverRef === e.target || this.editorPopoverRef.contains(e.target)) {
+          return;
+        }
+      }
       if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
         this.onClosePopover();
       }
@@ -82,6 +88,17 @@ class CollaboratorEditor extends React.Component {
       }
     };
     this.caculatePopoverPosition = () => {
+      if (this.props.isInModel) {
+        const {
+          top,
+          left
+        } = this.editor.getBoundingClientRect();
+        return {
+          top: top + 40,
+          left,
+          zIndex: 1051
+        };
+      }
       const POPOVER_MAX_HEIGHT = 200;
       let innerHeight = window.innerHeight;
       let {
@@ -122,6 +139,9 @@ class CollaboratorEditor extends React.Component {
     this.setEditorRef = editor => {
       this.editor = editor;
     };
+    this.setPopoverRef = ref => {
+      this.editorPopoverRef = ref;
+    };
     this.state = {
       newValue: Array.isArray(props.value) ? props.value : [],
       isPopoverShow: false,
@@ -167,13 +187,14 @@ class CollaboratorEditor extends React.Component {
       });
     }))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
       query: '(min-width: 768px)'
-    }, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
+    }, /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
       popoverPosition: popoverPosition,
       isReadOnly: this.props.isReadOnly,
       selectedCollaborators: selectedCollaborators,
       collaborators: collaborators,
-      onCollaboratorItemToggle: this.onCollaboratorItemToggle
-    })), /*#__PURE__*/React.createElement(MediaQuery, {
+      onCollaboratorItemToggle: this.onCollaboratorItemToggle,
+      setPopoverRef: this.setPopoverRef
+    }))), /*#__PURE__*/React.createElement(MediaQuery, {
       query: '(max-width: 767.8px)'
     }, /*#__PURE__*/React.createElement(MBCollaboratorEditorPopover, {
       isReadOnly: this.props.isReadOnly,
@@ -188,6 +209,7 @@ class CollaboratorEditor extends React.Component {
 CollaboratorEditor.defaultProps = {
   isShowEditButton: true,
   isReadOnly: false,
-  value: []
+  value: [],
+  isInModel: false
 };
 export default CollaboratorEditor;

package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js

@@ -54,7 +54,8 @@ class PCCollaboratorEditorPopover extends React.Component {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: "dtable-ui-editor-popover dtable-ui-collaborator-editor-popover",
-      style: popoverStyle
+      style: popoverStyle,
+      ref: this.props.setPopoverRef
     }, /*#__PURE__*/React.createElement("div", {
       className: "collaborator-search-container"
     }, /*#__PURE__*/React.createElement("input", {

package/package.json

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