dtable-ui-component 4.3.12 → 4.4.0-alpha2

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

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Popover } from 'reactstrap';
+import { searchCollaborators } from 'dtable-utils';
 import SelectOptionGroup from '../SelectOptionGroup';
-import { searchCollaborators } from './utils';
 import './index.css';
 class CollaboratorSelect extends Component {
   constructor(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "4.3.12",
+  "version": "4.4.0-alpha2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",
@@ -11,7 +11,7 @@
     "classnames": "^2.3.2",
     "dayjs": "1.10.7",
     "deepmerge": "^2.1.0",
-    "dtable-utils": "~4.3.5",
+    "dtable-utils": "4.4.0",
     "hast-util-sanitize": "^1.1.2",
     "hast-util-to-html": "3.1.0",
     "is-hotkey": "0.2.0",
@@ -118,6 +118,9 @@
     "file-loader": "4.3.0",
     "fs-extra": "^8.1.0",
     "html-webpack-plugin": "4.0.0-beta.11",
+    "i18next": "22.4.9",
+    "i18next-browser-languagedetector": "7.0.1",
+    "i18next-xhr-backend": "3.2.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "24.9.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
@@ -133,6 +136,7 @@
     "postcss-safe-parser": "4.0.1",
     "react-dev-utils": "^12.0.1",
     "react-element-to-jsx-string": "^14.3.1",
+    "react-i18next": "12.1.4",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.5",
     "sass-loader": "8.0.2",
@@ -142,10 +146,6 @@
     "ts-pnp": "1.1.5",
     "url-loader": "2.3.0",
     "webpack": "4.41.5",
-    "i18next": "22.4.9",
-    "i18next-browser-languagedetector": "7.0.1",
-    "i18next-xhr-backend": "3.2.2",
-    "react-i18next": "12.1.4",
     "webpack-dev-server": "3.11.3",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "4.3.1"

package/lib/DTableCustomizeCollaboratorSelect/utils.js

@@ -1,24 +0,0 @@
-export const searchCollaborators = (collaborators, searchValue) => {
-  const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
-  const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
-  if (!validSearchValue) return validCollaborators;
-  return validCollaborators.filter(collaborator => {
-    const {
-      name,
-      name_pinyin = ''
-    } = collaborator;
-    if (name.toString().toLowerCase().indexOf(validSearchValue) > -1) return true;
-    if (!name_pinyin) return false;
-    const validNamePinyin = name_pinyin.toString().toLowerCase();
-    const validSearchPinyinValue = validSearchValue.replace(/ |'/g, '');
-
-    // complete
-    if (validNamePinyin.indexOf(validSearchPinyinValue) > -1) return true;
-    if (validNamePinyin.replace(/'/g, '').indexOf(validSearchPinyinValue) > -1) return true;
-    const validNamePinyinList = validNamePinyin.split('\'');
-    // acronym
-    const namePinyinAcronym = validNamePinyinList.map(item => item && item.trim() ? item.trim().slice(0, 1) : '');
-    if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
-    return false;
-  });
-};