dtable-ui-component 4.4.1 → 4.4.3

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/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -211,6 +211,7 @@
 .filters-list .multiple-option-name {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .filters-list .multiple-check-icon,
@@ -319,3 +320,23 @@
   color: #aaa;
   cursor: default;
 }
+
+.option.option-active .filter-header-icon .dtable-font {
+  color: #fff;
+}
+
+.filters-list .single-select-option,
+.filters-list .multiple-select-option {
+  display: block;
+  text-align: left;
+  width: min-content;
+  max-width: 150px;
+  line-height: 20px;
+  border-radius: 10px;
+  padding: 0px 10px;
+  margin: 0;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/package.json

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