npm - dtable-ui-component - Versions diffs - 7.0.5-pal.17 → 7.0.5-pal.19 - Mend

dtable-ui-component 7.0.5-pal.17 → 7.0.5-pal.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/lib/AsyncUserSelect/index.js +87 -79
package/lib/DTableCustomizeSelect/index.js +13 -0
package/lib/SelectOptionGroup/index.css +3 -0
package/package.json +1 -1

package/lib/AsyncUserSelect/index.js CHANGED Viewed

@@ -9,8 +9,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
-var _utils = require("../utils/utils");
-var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _userItem = _interopRequireDefault(require("./user-item"));
 var _lang = require("../lang");
@@ -71,11 +69,6 @@ const AsyncUserSelect = _ref => {
     setSearchValue('');
     setHighlightIndex(-1);
   }, []);
-  const onClickOutside = (0, _react.useCallback)(e => {
-    console.log(111);
-    setIsPopoverOpen(false);
-    clearStatus();
-  }, [clearStatus]);
   const searchUsers = (0, _react.useCallback)(function () {
     let searchValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     const trimmedSearchValue = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim()) || '';
@@ -207,6 +200,24 @@ const AsyncUserSelect = _ref => {
       document.removeEventListener('keydown', onHotKey, true);
     };
   }, [onHotKey]);
+  (0, _react.useEffect)(() => {
+    if (!isPopoverOpen) return;
+    const isInside = target => {
+      if (!target) return false;
+      if (selectorRef.current && selectorRef.current.contains(target)) return true;
+      if (userSelectContainerRef.current && userSelectContainerRef.current.contains(target)) return true;
+      return false;
+    };
+    const handleDocumentMouseDown = e => {
+      if (isInside(e.target)) return;
+      setIsPopoverOpen(false);
+      clearStatus();
+    };
+    document.addEventListener('mousedown', handleDocumentMouseDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentMouseDown, true);
+    };
+  }, [isPopoverOpen, clearStatus]);
   const getSelectorRect = () => {
     if (!selectorRef.current) return null;
     return selectorRef.current.getBoundingClientRect();
@@ -226,79 +237,76 @@ const AsyncUserSelect = _ref => {
     });
   }, [isPopoverOpen, selectedUsers]);
   const popoverStyle = popoverPosition;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
-    onClickOutside: onClickOutside,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)('dtable-ui-selected-users-container form-control d-flex align-items-center', className, {
-          'focus': isPopoverOpen
-        }),
-        onClick: onTogglePopover,
-        ref: selectorRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "dtable-ui-users-input",
-          children: [selectedUsers.map((user, index) => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
-              user: user,
-              deleteUser: deselectUser
-            }, "dtable-ui-user-selector-selected-user-".concat(index));
-          }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-user-select-placeholder",
-            children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
-          }), !showDeptBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "select-dropdown-indicator d-inline-flex align-items-center",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-              symbol: "down",
-              color: "var(--bs-icon-color)"
-            })
-          })]
-        })
-      }), isPopoverOpen && popoverStyle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "dtable-ui-user-select-popover dtable-ui-user-select-container",
-          ref: userSelectContainerRef,
-          style: popoverStyle,
-          onMouseDown: e => e.stopPropagation(),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "seatable-select-search",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
-              className: "option-search-control",
-              placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
-              onChange: onSearchValueChanged,
-              clearValue: () => onSearchValueChanged(''),
-              autoFocus: true,
-              isClearable: true,
-              value: searchValue
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "dtable-ui-user-list-container",
-            ref: userListContainerRef,
-            children: [searchedUsers.length > 0 && searchedUsers.map((user, index) => {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames.default)('dtable-ui-user-item-container', {
-                  'dtable-ui-user-item-container-highlight': index === highlightIndex
-                }),
-                ref: index === 0 ? userItemContainerRef : null,
-                onClick: () => onUserClick(user),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
-                  user: user,
-                  enableShowIDInOrgWhenSearchUser: enableShowIDInOrgWhenSearchUser
-                }, "dtable-ui-user-selector-searched-user-".concat(index)), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "dtable-ui-collaborator-check-icon",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                    className: "dtable-font dtable-icon-check",
-                    "aria-hidden": "true"
-                  })
-                })]
-              }, user.email);
-            }), searchedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "no-user-search-result",
-              children: searchValue ? (0, _lang.getLocale)('User_not_found') : (0, _lang.getLocale)('Enter_characters_to_start_searching')
-            })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('dtable-ui-selected-users-container form-control d-flex align-items-center', className, {
+        'focus': isPopoverOpen
+      }),
+      onClick: onTogglePopover,
+      ref: selectorRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-users-input",
+        children: [selectedUsers.map((user, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+            user: user,
+            deleteUser: deselectUser
+          }, "dtable-ui-user-selector-selected-user-".concat(index));
+        }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-user-select-placeholder",
+          children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
+        }), !showDeptBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-dropdown-indicator d-inline-flex align-items-center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+            symbol: "down",
+            color: "var(--bs-icon-color)"
+          })
+        })]
+      })
+    }), isPopoverOpen && popoverStyle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-user-select-popover dtable-ui-user-select-container",
+        ref: userSelectContainerRef,
+        style: popoverStyle,
+        onMouseDown: e => e.stopPropagation(),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "seatable-select-search",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+            className: "option-search-control",
+            placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
+            onChange: onSearchValueChanged,
+            clearValue: () => onSearchValueChanged(''),
+            autoFocus: true,
+            isClearable: true,
+            value: searchValue
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-user-list-container",
+          ref: userListContainerRef,
+          children: [searchedUsers.length > 0 && searchedUsers.map((user, index) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _classnames.default)('dtable-ui-user-item-container', {
+                'dtable-ui-user-item-container-highlight': index === highlightIndex
+              }),
+              ref: index === 0 ? userItemContainerRef : null,
+              onClick: () => onUserClick(user),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+                user: user,
+                enableShowIDInOrgWhenSearchUser: enableShowIDInOrgWhenSearchUser
+              }, "dtable-ui-user-selector-searched-user-".concat(index)), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "dtable-ui-collaborator-check-icon",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                  className: "dtable-font dtable-icon-check",
+                  "aria-hidden": "true"
+                })
+              })]
+            }, user.email);
+          }), searchedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "no-user-search-result",
+            children: searchValue ? (0, _lang.getLocale)('User_not_found') : (0, _lang.getLocale)('Enter_characters_to_start_searching')
           })]
-        })
-      })]
-    })
+        })]
+      })
+    })]
   });
 };
 var _default = exports.default = AsyncUserSelect;

package/lib/DTableCustomizeSelect/index.js CHANGED Viewed

@@ -45,6 +45,13 @@ class DTableCustomizeSelect extends _react.Component {
         isShowSelectOptions: false
       });
     };
+    this.handleDocumentMouseDown = event => {
+      if (!this.state.isShowSelectOptions) return;
+      const target = event.target;
+      if (this.selector && this.selector.contains(target)) return;
+      if (target && target.closest && target.closest('.seatable-option-group')) return;
+      this.closeSelect();
+    };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
       const _this$selector$getBou = this.selector.getBoundingClientRect(),
@@ -80,6 +87,12 @@ class DTableCustomizeSelect extends _react.Component {
       isShowSelectOptions: false
     };
   }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
+  }
   render() {
     let _this$props2 = this.props,
       className = _this$props2.className,

package/lib/SelectOptionGroup/index.css CHANGED Viewed

@@ -66,6 +66,9 @@
 .select-label {
   width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .seatable-option-group-selector-multiple-select .select-label,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.5pal.17",
+  "version": "7.0.5pal.19",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",