dtable-ui-component 4.3.10 → 4.3.11-alpha1

package/lib/CTimeFormatter/index.js

@@ -15,7 +15,7 @@ class CTimeFormatter extends React.Component {
       containerClassName
     } = this.props;
     let classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
-    if (date !== '') {
+    if (date) {
       date = this.formatDate(date);
     }
     return /*#__PURE__*/React.createElement("div", {

package/lib/CollaboratorEditor/index.css

@@ -14,16 +14,20 @@
   min-height: 160px;
   max-height: 200px;
   margin: 10px 0;
-  padding: 0 10px;
   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;
   justify-content: space-between;
   height: 30px;
-  padding-left: 12px;
+  padding: 0 10px;
   font-size: 14px;
   cursor: pointer;
 }
@@ -45,3 +49,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.onMouseDown = e => {
       if (this.editorContainer !== e.target && !this.editorContainer.contains(e.target)) {
         this.onClosePopover();
       }
@@ -28,7 +28,7 @@ class CollaboratorEditor extends React.Component {
       }
       return [];
     };
-    this.onAddOptionToggle = event => {
+    this.togglePopover = event => {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
       if (this.props.isReadOnly) {
@@ -67,7 +67,6 @@ class CollaboratorEditor extends React.Component {
         newValue
       }, () => {
         this.onCommit(newValue);
-        this.onClosePopover();
       });
     };
     this.onDeleteCollaborator = collaborator => {
@@ -108,6 +107,15 @@ class CollaboratorEditor extends React.Component {
         isPopoverShow: false
       });
     };
+    this.onClickContainer = e => {
+      e.stopPropagation();
+      if (!this.props.isShowEditButton && !this.state.isPopoverShow) {
+        this.setState({
+          isPopoverShow: true,
+          popoverPosition: this.caculatePopoverPosition()
+        });
+      }
+    };
     this.setEditorContainerRef = editorContainer => {
       this.editorContainer = editorContainer;
     };
@@ -121,15 +129,16 @@ class CollaboratorEditor 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 {
       collaborators,
-      isReadOnly
+      isReadOnly,
+      isShowEditButton
     } = this.props;
     let {
       isPopoverShow,
@@ -142,12 +151,13 @@ class CollaboratorEditor extends React.Component {
       className: "dtable-ui-collaborator-editor"
     }, /*#__PURE__*/React.createElement("div", {
       ref: this.setEditorRef,
-      className: "dtable-ui-collaborator-editor-container"
-    }, /*#__PURE__*/React.createElement(EditEditorButton, {
+      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.onAddOptionToggle
+      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,
@@ -176,6 +186,7 @@ class CollaboratorEditor extends React.Component {
   }
 }
 CollaboratorEditor.defaultProps = {
+  isShowEditButton: true,
   isReadOnly: false,
   value: []
 };

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

@@ -33,6 +33,10 @@ class PCCollaboratorEditorPopover extends React.Component {
     this.state = {
       searchValue: ''
     };
+    this.editorInputRef = React.createRef();
+  }
+  componentDidMount() {
+    this.editorInputRef.current.focus();
   }
   render() {
     let {
@@ -58,7 +62,8 @@ class PCCollaboratorEditorPopover extends React.Component {
       value: searchValue,
       onChange: this.onValueChanged,
       onClick: this.onInputClick,
-      placeholder: getLocale('Find_a_collaborator')
+      placeholder: getLocale('Find_a_collaborator'),
+      ref: this.editorInputRef
     })), /*#__PURE__*/React.createElement("div", {
       className: "collaborator-list-container"
     }, collaborators.length > 0 && collaborators.map((collaborator, index) => {

package/lib/DateEditor/index.js

@@ -4,6 +4,8 @@ import dayjs from 'dayjs';
 import { getDateDisplayString } from 'dtable-utils';
 import PCDateEditorPopover from './pc-date-editor-popover';
 import MBDateEditorPopover from './mb-date-editor-popover';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en-gb';
 import './index.css';
 class DateEditor extends React.Component {
   constructor(props) {
@@ -33,6 +35,9 @@ class DateEditor extends React.Component {
           newValue: value
         });
         this.onCommit(value);
+        if (!this.state.showHourAndMinute) {
+          this.onClosePopover();
+        }
       }
     };
     this.onCommit = newValue => {

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/MTimeFormatter/index.js

@@ -15,7 +15,7 @@ class MTimeFormatter extends React.Component {
       containerClassName
     } = this.props;
     let classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
-    if (date !== '') {
+    if (date) {
       date = this.formatDate(date);
     }
     return /*#__PURE__*/React.createElement("div", {

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/ClickOutside.js

@@ -8,7 +8,7 @@ export default class ClickOutside extends React.Component {
         this.isClickedInside = false;
         return;
       }
-      this.props.onClickOutside(e);
+      this.props.onClickOutside && this.props.onClickOutside(e);
     };
     this.handleMouseDown = () => {
       this.isClickedInside = true;

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/lib/toaster/index.css

@@ -1,7 +1,7 @@
 .dtable-toast-manager {
   position: fixed;
   margin: 0 auto;
-  max-width: 560;
+  max-width: 560px;
   top: 0;
   left: 0;
   right: 0;

package/package.json

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