dtable-ui-component 4.3.10-alpha3 → 4.3.10-alpha5

package/lib/CollaboratorEditor/index.css

@@ -14,7 +14,6 @@
   min-height: 160px;
   max-height: 200px;
   margin: 10px 0;
-  padding: 0 10px;
   overflow: auto;
 }
 
@@ -23,7 +22,7 @@
   align-items: center;
   justify-content: space-between;
   height: 30px;
-  padding-left: 12px;
+  padding: 0 10px;
   font-size: 14px;
   cursor: pointer;
 }
@@ -45,3 +44,22 @@
   font-size: 12px;
   color: #798d99;
 }
+
+.dtable-ui-collaborator-editor .dtable-ui-collaborator-editor-container-no-btn {
+  min-height: 40px;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  transition: border-color .15s ease-in-out;
+}
+
+.dtable-ui-collaborator-editor .dtable-ui-collaborator-editor-container-no-btn .collaborators-container {
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.dtable-ui-collaborator-editor .dtable-ui-collaborator-editor-container-no-btn .collaborators-container .collaborator-item {
+  margin: 2px 10px 2px 0;
+}

package/lib/CollaboratorEditor/index.js

@@ -9,7 +9,7 @@ import './index.css';
 class CollaboratorEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.onDocumentToggle = e => {
+    this.onDocumentClick = e => {
       if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
         this.onClosePopover();
       }
@@ -56,19 +56,29 @@ class CollaboratorEditor extends React.Component {
       this.props.onCommit(updated);
     };
     this.onCollaboratorItemToggle = collaborator => {
-      let newValue = this.state.newValue.slice();
-      let collaboratorIndex = newValue.findIndex(collaboratorEmail => collaboratorEmail === collaborator.email);
-      if (collaboratorIndex !== -1) {
-        newValue.splice(collaboratorIndex, 1);
+      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);
+        });
       } else {
-        newValue.push(collaborator.email);
+        const collaboratorIndex = this.state.newValue.findIndex(collaboratorEmail => collaboratorEmail === collaborator.email);
+        const newValue = collaboratorIndex === -1 ? [collaborator.email] : [];
+        this.setState({
+          newValue
+        }, () => {
+          this.onCommit(newValue);
+          this.onClosePopover();
+        });
       }
-      this.setState({
-        newValue
-      }, () => {
-        this.onCommit(newValue);
-        this.onClosePopover();
-      });
     };
     this.onDeleteCollaborator = collaborator => {
       let newValue = this.state.newValue.slice();
@@ -110,8 +120,11 @@ class CollaboratorEditor extends React.Component {
     };
     this.onClickContainer = e => {
       e.stopPropagation();
-      if (!this.props.isShowEditButton) {
-        this.togglePopover(e);
+      if (!this.props.isShowEditButton && !this.state.isPopoverShow) {
+        this.setState({
+          isPopoverShow: true,
+          popoverPosition: this.caculatePopoverPosition()
+        });
       }
     };
     this.setEditorContainerRef = editorContainer => {
@@ -127,10 +140,10 @@ class CollaboratorEditor extends React.Component {
     };
   }
   componentDidMount() {
-    document.addEventListener('click', this.onDocumentToggle);
+    document.addEventListener('click', this.onDocumentClick);
   }
   componentWillUnmount() {
-    document.removeEventListener('click', this.onDocumentToggle);
+    document.removeEventListener('click', this.onDocumentClick);
   }
   render() {
     let {
@@ -149,13 +162,13 @@ class CollaboratorEditor extends React.Component {
       className: "dtable-ui-collaborator-editor"
     }, /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorRef,
-      className: "dtable-ui-collaborator-editor-container",
+      className: "dtable-ui-collaborator-editor-container ".concat(isShowEditButton ? '' : 'dtable-ui-collaborator-editor-container-no-btn'),
       onClick: this.onClickContainer
     }, isShowEditButton && /*#__PURE__*/React.createElement(EditEditorButton, {
       text: getLocale('Add_a_collaborator'),
       onClick: this.togglePopover
     }), selectedCollaborators.length > 0 && /*#__PURE__*/React.createElement("div", {
-      className: "collaborators-container mt-2"
+      className: "collaborators-container ".concat(isShowEditButton ? 'mt-2' : '')
     }, selectedCollaborators.map(collaborator => {
       return /*#__PURE__*/React.createElement(CollaboratorItem, {
         key: collaborator.email,
@@ -184,6 +197,7 @@ class CollaboratorEditor extends React.Component {
   }
 }
 CollaboratorEditor.defaultProps = {
+  isMultilple: true,
   isShowEditButton: true,
   isReadOnly: false,
   value: []

package/package.json

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