dtable-ui-component 7.0.5-pal.16 → 7.0.5-pal.18
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.
|
@@ -9,8 +9,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
|
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
|
|
12
|
-
var _utils = require("../utils/utils");
|
|
13
|
-
var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
|
|
14
12
|
var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
|
|
15
13
|
var _userItem = _interopRequireDefault(require("./user-item"));
|
|
16
14
|
var _lang = require("../lang");
|
|
@@ -71,13 +69,6 @@ const AsyncUserSelect = _ref => {
|
|
|
71
69
|
setSearchValue('');
|
|
72
70
|
setHighlightIndex(-1);
|
|
73
71
|
}, []);
|
|
74
|
-
const onClickOutside = (0, _react.useCallback)(e => {
|
|
75
|
-
console.log(111);
|
|
76
|
-
if (isPopoverOpen && (!selectorRef.current || !selectorRef.current.contains(e.target))) {
|
|
77
|
-
setIsPopoverOpen(false);
|
|
78
|
-
clearStatus();
|
|
79
|
-
}
|
|
80
|
-
}, [isPopoverOpen, clearStatus]);
|
|
81
72
|
const searchUsers = (0, _react.useCallback)(function () {
|
|
82
73
|
let searchValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
83
74
|
const trimmedSearchValue = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim()) || '';
|
|
@@ -209,6 +200,24 @@ const AsyncUserSelect = _ref => {
|
|
|
209
200
|
document.removeEventListener('keydown', onHotKey, true);
|
|
210
201
|
};
|
|
211
202
|
}, [onHotKey]);
|
|
203
|
+
(0, _react.useEffect)(() => {
|
|
204
|
+
if (!isPopoverOpen) return;
|
|
205
|
+
const isInside = target => {
|
|
206
|
+
if (!target) return false;
|
|
207
|
+
if (selectorRef.current && selectorRef.current.contains(target)) return true;
|
|
208
|
+
if (userSelectContainerRef.current && userSelectContainerRef.current.contains(target)) return true;
|
|
209
|
+
return false;
|
|
210
|
+
};
|
|
211
|
+
const handleDocumentMouseDown = e => {
|
|
212
|
+
if (isInside(e.target)) return;
|
|
213
|
+
setIsPopoverOpen(false);
|
|
214
|
+
clearStatus();
|
|
215
|
+
};
|
|
216
|
+
document.addEventListener('mousedown', handleDocumentMouseDown, true);
|
|
217
|
+
return () => {
|
|
218
|
+
document.removeEventListener('mousedown', handleDocumentMouseDown, true);
|
|
219
|
+
};
|
|
220
|
+
}, [isPopoverOpen, clearStatus]);
|
|
212
221
|
const getSelectorRect = () => {
|
|
213
222
|
if (!selectorRef.current) return null;
|
|
214
223
|
return selectorRef.current.getBoundingClientRect();
|
|
@@ -228,79 +237,76 @@ const AsyncUserSelect = _ref => {
|
|
|
228
237
|
});
|
|
229
238
|
}, [isPopoverOpen, selectedUsers]);
|
|
230
239
|
const popoverStyle = popoverPosition;
|
|
231
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
children:
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
children:
|
|
265
|
-
className: "
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
className: "dtable-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
className: "no-user-search-result",
|
|
298
|
-
children: searchValue ? (0, _lang.getLocale)('User_not_found') : (0, _lang.getLocale)('Enter_characters_to_start_searching')
|
|
299
|
-
})]
|
|
240
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
241
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
242
|
+
className: (0, _classnames.default)('dtable-ui-selected-users-container form-control d-flex align-items-center', className, {
|
|
243
|
+
'focus': isPopoverOpen
|
|
244
|
+
}),
|
|
245
|
+
onClick: onTogglePopover,
|
|
246
|
+
ref: selectorRef,
|
|
247
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
248
|
+
className: "dtable-ui-users-input",
|
|
249
|
+
children: [selectedUsers.map((user, index) => {
|
|
250
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
|
|
251
|
+
user: user,
|
|
252
|
+
deleteUser: deselectUser
|
|
253
|
+
}, "dtable-ui-user-selector-selected-user-".concat(index));
|
|
254
|
+
}), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
255
|
+
className: "dtable-ui-user-select-placeholder",
|
|
256
|
+
children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
|
|
257
|
+
}), !showDeptBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
258
|
+
className: "select-dropdown-indicator d-inline-flex align-items-center",
|
|
259
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
|
|
260
|
+
symbol: "down",
|
|
261
|
+
color: "var(--bs-icon-color)"
|
|
262
|
+
})
|
|
263
|
+
})]
|
|
264
|
+
})
|
|
265
|
+
}), isPopoverOpen && popoverStyle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
|
|
266
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
267
|
+
className: "dtable-ui-user-select-popover dtable-ui-user-select-container",
|
|
268
|
+
ref: userSelectContainerRef,
|
|
269
|
+
style: popoverStyle,
|
|
270
|
+
onMouseDown: e => e.stopPropagation(),
|
|
271
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
272
|
+
className: "seatable-select-search",
|
|
273
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
|
|
274
|
+
className: "option-search-control",
|
|
275
|
+
placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
|
|
276
|
+
onChange: onSearchValueChanged,
|
|
277
|
+
clearValue: () => onSearchValueChanged(''),
|
|
278
|
+
autoFocus: true,
|
|
279
|
+
isClearable: true,
|
|
280
|
+
value: searchValue
|
|
281
|
+
})
|
|
282
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
283
|
+
className: "dtable-ui-user-list-container",
|
|
284
|
+
ref: userListContainerRef,
|
|
285
|
+
children: [searchedUsers.length > 0 && searchedUsers.map((user, index) => {
|
|
286
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
287
|
+
className: (0, _classnames.default)('dtable-ui-user-item-container', {
|
|
288
|
+
'dtable-ui-user-item-container-highlight': index === highlightIndex
|
|
289
|
+
}),
|
|
290
|
+
ref: index === 0 ? userItemContainerRef : null,
|
|
291
|
+
onClick: () => onUserClick(user),
|
|
292
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
|
|
293
|
+
user: user,
|
|
294
|
+
enableShowIDInOrgWhenSearchUser: enableShowIDInOrgWhenSearchUser
|
|
295
|
+
}, "dtable-ui-user-selector-searched-user-".concat(index)), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
296
|
+
className: "dtable-ui-collaborator-check-icon",
|
|
297
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
298
|
+
className: "dtable-font dtable-icon-check",
|
|
299
|
+
"aria-hidden": "true"
|
|
300
|
+
})
|
|
301
|
+
})]
|
|
302
|
+
}, user.email);
|
|
303
|
+
}), searchedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
304
|
+
className: "no-user-search-result",
|
|
305
|
+
children: searchValue ? (0, _lang.getLocale)('User_not_found') : (0, _lang.getLocale)('Enter_characters_to_start_searching')
|
|
300
306
|
})]
|
|
301
|
-
})
|
|
302
|
-
})
|
|
303
|
-
})
|
|
307
|
+
})]
|
|
308
|
+
})
|
|
309
|
+
})]
|
|
304
310
|
});
|
|
305
311
|
};
|
|
306
312
|
var _default = exports.default = AsyncUserSelect;
|