dtable-ui-component 4.3.10-alpha5 → 4.3.10-alpha6

package/lib/CollaboratorEditor/index.css

@@ -17,6 +17,11 @@
   overflow: auto;
 }
 
+.dtable-ui-collaborator-editor-popover .collaborator-list-container .search-option-null {
+  opacity: 0.5;
+  padding-left: 10px;
+}
+
 .dtable-ui-collaborator-editor-popover .collaborator-list-container .collaborator-item-container {
   display: flex;
   align-items: center;

package/lib/CollaboratorEditor/index.js

@@ -9,7 +9,7 @@ import './index.css';
 class CollaboratorEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.onDocumentClick = e => {
+    this.onDocumentMouseDown = e => {
       if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
         this.onClosePopover();
       }
@@ -56,29 +56,18 @@ class CollaboratorEditor extends React.Component {
       this.props.onCommit(updated);
     };
     this.onCollaboratorItemToggle = collaborator => {
-      if (this.props.isMultilple) {
-        let newValue = this.state.newValue.slice();
-        let collaboratorIndex = newValue.findIndex(collaboratorEmail => collaboratorEmail === collaborator.email);
-        if (collaboratorIndex !== -1) {
-          newValue.splice(collaboratorIndex, 1);
-        } else {
-          newValue.push(collaborator.email);
-        }
-        this.setState({
-          newValue
-        }, () => {
-          this.onCommit(newValue);
-        });
+      let newValue = this.state.newValue.slice();
+      let collaboratorIndex = newValue.findIndex(collaboratorEmail => collaboratorEmail === collaborator.email);
+      if (collaboratorIndex !== -1) {
+        newValue.splice(collaboratorIndex, 1);
       } else {
-        const collaboratorIndex = this.state.newValue.findIndex(collaboratorEmail => collaboratorEmail === collaborator.email);
-        const newValue = collaboratorIndex === -1 ? [collaborator.email] : [];
-        this.setState({
-          newValue
-        }, () => {
-          this.onCommit(newValue);
-          this.onClosePopover();
-        });
+        newValue.push(collaborator.email);
       }
+      this.setState({
+        newValue
+      }, () => {
+        this.onCommit(newValue);
+      });
     };
     this.onDeleteCollaborator = collaborator => {
       let newValue = this.state.newValue.slice();
@@ -140,10 +129,10 @@ class CollaboratorEditor extends React.Component {
     };
   }
   componentDidMount() {
-    document.addEventListener('click', this.onDocumentClick);
+    document.addEventListener('mousedown', this.onDocumentMouseDown);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.onDocumentClick);
+    document.removeEventListener('mousedown', this.onDocumentMouseDown);
   }
   render() {
     let {
@@ -197,7 +186,6 @@ class CollaboratorEditor extends React.Component {
   }
 }
 CollaboratorEditor.defaultProps = {
-  isMultilple: true,
   isShowEditButton: true,
   isReadOnly: false,
   value: []

package/lib/LinkEditor/index.js

@@ -11,7 +11,7 @@ import './index.css';
 class LinkEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.onDocumentToggle = e => {
+    this.onMouseDown = e => {
       if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
         this.onClosePopover();
       }
@@ -197,10 +197,10 @@ class LinkEditor extends React.Component {
     };
   }
   componentDidMount() {
-    document.addEventListener('click', this.onDocumentToggle);
+    document.addEventListener('mousedown', this.onMouseDown);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.onDocumentToggle);
+    document.removeEventListener('mousedown', this.onMouseDown);
   }
   render() {
     let {

package/lib/MultipleSelectEditor/index.js

@@ -7,7 +7,7 @@ import './index.css';
 class MultipleSelectEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.onDocumentToggle = e => {
+    this.onMouseDown = e => {
       if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
         this.onClosePopover();
       }
@@ -121,10 +121,10 @@ class MultipleSelectEditor extends React.Component {
     this.options = _column.data && (_column.data.options || []);
   }
   componentDidMount() {
-    document.addEventListener('click', this.onDocumentToggle);
+    document.addEventListener('mousedown', this.onMouseDown);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.onDocumentToggle);
+    document.removeEventListener('mousedown', this.onMouseDown);
   }
   render() {
     let {

package/lib/NotificationPopover/index.js

@@ -4,9 +4,9 @@ import './index.css';
 export default class NotificationPopover extends React.Component {
   constructor() {
     super(...arguments);
-    this.handleOutsideClick = e => {
+    this.onMouseDown = e => {
       if (!this.notificationContainerRef.contains(e.target)) {
-        document.removeEventListener('mousedown', this.handleOutsideClick);
+        document.removeEventListener('mousedown', this.onMouseDown);
         if (e.target.className === 'tool notification' || e.target.parentNode.className === 'tool notification') {
           return;
         }
@@ -28,10 +28,10 @@ export default class NotificationPopover extends React.Component {
     };
   }
   componentDidMount() {
-    document.addEventListener('mousedown', this.handleOutsideClick);
+    document.addEventListener('mousedown', this.onMouseDown);
   }
   componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleOutsideClick);
+    document.removeEventListener('mousedown', this.onMouseDown);
   }
   render() {
     const {

package/lib/SingleSelectEditor/index.js

@@ -7,7 +7,7 @@ import './index.css';
 class SingleSelectEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.onDocumentToggle = e => {
+    this.onMouseDown = e => {
       if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
         this.onClosePopover();
       }
@@ -102,10 +102,10 @@ class SingleSelectEditor extends React.Component {
     this.options = _column.data && (_column.data.options || []);
   }
   componentDidMount() {
-    document.addEventListener('click', this.onDocumentToggle);
+    document.addEventListener('mousedown', this.onMouseDown);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.onDocumentToggle);
+    document.removeEventListener('mousedown', this.onMouseDown);
   }
   render() {
     let {

package/lib/common/delete-tip.js

@@ -5,17 +5,17 @@ import './delete-tip.css';
 export default class DeleteTip extends React.Component {
   constructor() {
     super(...arguments);
-    this.handleOutsideClick = e => {
+    this.onMouseDown = e => {
       if (this.tipContainer && !this.tipContainer.contains(e.target)) {
         this.props.toggle();
       }
     };
   }
   componentDidMount() {
-    document.addEventListener('click', this.handleOutsideClick);
+    document.addEventListener('mousedown', this.onMouseDown);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleOutsideClick);
+    document.removeEventListener('mousedown', this.onMouseDown);
   }
   render() {
     const {

package/package.json

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