@rc-component/util 1.0.0 → 1.0.1
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.
- package/es/Children/toArray.js +3 -4
- package/es/Dom/contains.js +1 -1
- package/es/Dom/dynamicCSS.js +50 -60
- package/es/Dom/findDOMNode.js +3 -5
- package/es/Dom/focus.js +13 -21
- package/es/Dom/isVisible.js +10 -8
- package/es/Dom/scrollLocker.js +63 -89
- package/es/Dom/shadow.js +1 -2
- package/es/Dom/styleChecker.js +9 -9
- package/es/KeyCode.js +4 -2
- package/es/Portal.js +15 -16
- package/es/PortalWrapper.js +150 -175
- package/es/React/isFragment.js +4 -5
- package/es/React/render.js +32 -63
- package/es/composeProps.js +9 -16
- package/es/getScrollBarSize.js +19 -15
- package/es/hooks/useEffect.js +3 -5
- package/es/hooks/useEvent.js +2 -8
- package/es/hooks/useId.js +10 -23
- package/es/hooks/useLayoutEffect.js +8 -8
- package/es/hooks/useMemo.js +1 -1
- package/es/hooks/useMergedState.js +23 -34
- package/es/hooks/useMobile.js +3 -12
- package/es/hooks/useState.js +4 -13
- package/es/hooks/useSyncState.js +4 -14
- package/es/isEqual.js +9 -14
- package/es/isMobile.js +3 -3
- package/es/omit.js +2 -2
- package/es/pickAttrs.js +29 -17
- package/es/proxyObject.js +2 -2
- package/es/raf.js +12 -23
- package/es/ref.js +16 -30
- package/es/setStyle.js +8 -8
- package/es/test/domHook.js +19 -25
- package/es/utils/get.js +2 -2
- package/es/utils/set.js +19 -38
- package/es/warning.js +7 -11
- package/lib/Children/toArray.js +3 -4
- package/lib/Dom/contains.js +1 -1
- package/lib/Dom/dynamicCSS.js +50 -60
- package/lib/Dom/findDOMNode.js +3 -5
- package/lib/Dom/focus.js +13 -21
- package/lib/Dom/isVisible.js +12 -9
- package/lib/Dom/scrollLocker.js +64 -88
- package/lib/Dom/shadow.js +1 -2
- package/lib/Dom/styleChecker.js +9 -9
- package/lib/KeyCode.js +4 -2
- package/lib/Portal.js +15 -16
- package/lib/PortalWrapper.js +154 -177
- package/lib/React/isFragment.js +4 -5
- package/lib/React/render.js +34 -65
- package/lib/composeProps.js +9 -16
- package/lib/getScrollBarSize.js +19 -15
- package/lib/hooks/useEffect.js +5 -8
- package/lib/hooks/useEvent.js +4 -11
- package/lib/hooks/useId.js +12 -25
- package/lib/hooks/useLayoutEffect.js +11 -11
- package/lib/hooks/useMemo.js +3 -4
- package/lib/hooks/useMergedState.js +24 -35
- package/lib/hooks/useMobile.js +3 -12
- package/lib/hooks/useState.js +6 -16
- package/lib/hooks/useSyncState.js +6 -17
- package/lib/index.js +8 -8
- package/lib/isEqual.js +9 -14
- package/lib/isMobile.js +5 -4
- package/lib/omit.js +2 -2
- package/lib/pickAttrs.js +29 -17
- package/lib/proxyObject.js +2 -2
- package/lib/raf.js +12 -23
- package/lib/ref.js +23 -31
- package/lib/setStyle.js +8 -8
- package/lib/test/domHook.js +19 -25
- package/lib/utils/get.js +2 -2
- package/lib/utils/set.js +19 -38
- package/lib/warning.js +8 -11
- package/package.json +3 -3
package/lib/Dom/focus.js
CHANGED
|
@@ -10,17 +10,10 @@ exports.limitTabRange = limitTabRange;
|
|
|
10
10
|
exports.saveLastFocusNode = saveLastFocusNode;
|
|
11
11
|
var _isVisible = _interopRequireDefault(require("./isVisible"));
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
function
|
|
14
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
15
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
16
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
17
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
18
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
19
|
-
function focusable(node) {
|
|
20
|
-
var includePositive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
13
|
+
function focusable(node, includePositive = false) {
|
|
21
14
|
if ((0, _isVisible.default)(node)) {
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
const nodeName = node.nodeName.toLowerCase();
|
|
16
|
+
const isFocusableElement =
|
|
24
17
|
// Focusable element
|
|
25
18
|
['input', 'select', 'textarea', 'button'].includes(nodeName) ||
|
|
26
19
|
// Editable element
|
|
@@ -29,11 +22,11 @@ function focusable(node) {
|
|
|
29
22
|
nodeName === 'a' && !!node.getAttribute('href');
|
|
30
23
|
|
|
31
24
|
// Get tabIndex
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
const tabIndexAttr = node.getAttribute('tabindex');
|
|
26
|
+
const tabIndexNum = Number(tabIndexAttr);
|
|
34
27
|
|
|
35
28
|
// Parse as number if validate
|
|
36
|
-
|
|
29
|
+
let tabIndex = null;
|
|
37
30
|
if (tabIndexAttr && !Number.isNaN(tabIndexNum)) {
|
|
38
31
|
tabIndex = tabIndexNum;
|
|
39
32
|
} else if (isFocusableElement && tabIndex === null) {
|
|
@@ -48,9 +41,8 @@ function focusable(node) {
|
|
|
48
41
|
}
|
|
49
42
|
return false;
|
|
50
43
|
}
|
|
51
|
-
function getFocusNodeList(node) {
|
|
52
|
-
|
|
53
|
-
var res = _toConsumableArray(node.querySelectorAll('*')).filter(function (child) {
|
|
44
|
+
function getFocusNodeList(node, includePositive = false) {
|
|
45
|
+
const res = [...node.querySelectorAll('*')].filter(child => {
|
|
54
46
|
return focusable(child, includePositive);
|
|
55
47
|
});
|
|
56
48
|
if (focusable(node, includePositive)) {
|
|
@@ -58,7 +50,7 @@ function getFocusNodeList(node) {
|
|
|
58
50
|
}
|
|
59
51
|
return res;
|
|
60
52
|
}
|
|
61
|
-
|
|
53
|
+
let lastFocusElement = null;
|
|
62
54
|
|
|
63
55
|
/** @deprecated Do not use since this may failed when used in async */
|
|
64
56
|
function saveLastFocusNode() {
|
|
@@ -86,11 +78,11 @@ function backLastFocusNode() {
|
|
|
86
78
|
}
|
|
87
79
|
function limitTabRange(node, e) {
|
|
88
80
|
if (e.keyCode === 9) {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
81
|
+
const tabNodeList = getFocusNodeList(node);
|
|
82
|
+
const lastTabNode = tabNodeList[e.shiftKey ? 0 : tabNodeList.length - 1];
|
|
83
|
+
const leavingTab = lastTabNode === document.activeElement || node === document.activeElement;
|
|
92
84
|
if (leavingTab) {
|
|
93
|
-
|
|
85
|
+
const target = tabNodeList[e.shiftKey ? tabNodeList.length - 1 : 0];
|
|
94
86
|
target.focus();
|
|
95
87
|
e.preventDefault();
|
|
96
88
|
}
|
package/lib/Dom/isVisible.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _default =
|
|
7
|
+
var _default = element => {
|
|
8
8
|
if (!element) {
|
|
9
9
|
return false;
|
|
10
10
|
}
|
|
@@ -13,21 +13,24 @@ var _default = exports.default = function _default(element) {
|
|
|
13
13
|
return true;
|
|
14
14
|
}
|
|
15
15
|
if (element.getBBox) {
|
|
16
|
-
|
|
17
|
-
width
|
|
18
|
-
height
|
|
16
|
+
const {
|
|
17
|
+
width,
|
|
18
|
+
height
|
|
19
|
+
} = element.getBBox();
|
|
19
20
|
if (width || height) {
|
|
20
21
|
return true;
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
if (element.getBoundingClientRect) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
const {
|
|
26
|
+
width,
|
|
27
|
+
height
|
|
28
|
+
} = element.getBoundingClientRect();
|
|
29
|
+
if (width || height) {
|
|
28
30
|
return true;
|
|
29
31
|
}
|
|
30
32
|
}
|
|
31
33
|
}
|
|
32
34
|
return false;
|
|
33
|
-
};
|
|
35
|
+
};
|
|
36
|
+
exports.default = _default;
|
package/lib/Dom/scrollLocker.js
CHANGED
|
@@ -7,88 +7,71 @@ exports.default = void 0;
|
|
|
7
7
|
var _getScrollBarSize = _interopRequireDefault(require("../getScrollBarSize"));
|
|
8
8
|
var _setStyle = _interopRequireDefault(require("../setStyle"));
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
15
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
16
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
17
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
18
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
19
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
20
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
22
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
23
|
-
var uuid = 0;
|
|
24
|
-
var locks = [];
|
|
25
|
-
var scrollingEffectClassName = 'ant-scrolling-effect';
|
|
26
|
-
var scrollingEffectClassNameReg = new RegExp("".concat(scrollingEffectClassName), 'g');
|
|
10
|
+
let uuid = 0;
|
|
11
|
+
let locks = [];
|
|
12
|
+
const scrollingEffectClassName = 'ant-scrolling-effect';
|
|
13
|
+
const scrollingEffectClassNameReg = new RegExp(`${scrollingEffectClassName}`, 'g');
|
|
27
14
|
|
|
28
15
|
// https://github.com/ant-design/ant-design/issues/19340
|
|
29
16
|
// https://github.com/ant-design/ant-design/issues/19332
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
17
|
+
const cacheStyle = new Map();
|
|
18
|
+
class ScrollLocker {
|
|
19
|
+
lockTarget;
|
|
20
|
+
options;
|
|
21
|
+
constructor(options) {
|
|
22
|
+
// eslint-disable-next-line no-plusplus
|
|
23
|
+
this.lockTarget = uuid++;
|
|
24
|
+
this.options = options;
|
|
25
|
+
}
|
|
26
|
+
getContainer = () => {
|
|
27
|
+
return this.options?.container;
|
|
28
|
+
};
|
|
29
|
+
|
|
40
30
|
// if options change...
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
});
|
|
31
|
+
reLock = options => {
|
|
32
|
+
const findLock = locks.find(({
|
|
33
|
+
target
|
|
34
|
+
}) => target === this.lockTarget);
|
|
46
35
|
if (findLock) {
|
|
47
|
-
|
|
36
|
+
this.unLock();
|
|
48
37
|
}
|
|
49
|
-
|
|
38
|
+
this.options = options;
|
|
50
39
|
if (findLock) {
|
|
51
40
|
findLock.options = options;
|
|
52
|
-
|
|
41
|
+
this.lock();
|
|
53
42
|
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
var _this$options3;
|
|
43
|
+
};
|
|
44
|
+
lock = () => {
|
|
57
45
|
// If lockTarget exist return
|
|
58
|
-
if (locks.some(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
})) {
|
|
46
|
+
if (locks.some(({
|
|
47
|
+
target
|
|
48
|
+
}) => target === this.lockTarget)) {
|
|
62
49
|
return;
|
|
63
50
|
}
|
|
64
51
|
|
|
65
52
|
// If same container effect, return
|
|
66
|
-
if (locks.some(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
options: _this.options
|
|
74
|
-
}]);
|
|
53
|
+
if (locks.some(({
|
|
54
|
+
options
|
|
55
|
+
}) => options?.container === this.options?.container)) {
|
|
56
|
+
locks = [...locks, {
|
|
57
|
+
target: this.lockTarget,
|
|
58
|
+
options: this.options
|
|
59
|
+
}];
|
|
75
60
|
return;
|
|
76
61
|
}
|
|
77
|
-
|
|
78
|
-
|
|
62
|
+
let scrollBarSize = 0;
|
|
63
|
+
const container = this.options?.container || document.body;
|
|
79
64
|
if (container === document.body && window.innerWidth - document.documentElement.clientWidth > 0 || container.scrollHeight > container.clientHeight) {
|
|
80
65
|
if (getComputedStyle(container).overflow !== 'hidden') {
|
|
81
66
|
scrollBarSize = (0, _getScrollBarSize.default)();
|
|
82
67
|
}
|
|
83
68
|
}
|
|
84
|
-
|
|
85
|
-
if (locks.filter(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
return (options === null || options === void 0 ? void 0 : options.container) === ((_this$options4 = _this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.container);
|
|
89
|
-
}).length === 0) {
|
|
69
|
+
const containerClassName = container.className;
|
|
70
|
+
if (locks.filter(({
|
|
71
|
+
options
|
|
72
|
+
}) => options?.container === this.options?.container).length === 0) {
|
|
90
73
|
cacheStyle.set(container, (0, _setStyle.default)({
|
|
91
|
-
width: scrollBarSize !== 0 ?
|
|
74
|
+
width: scrollBarSize !== 0 ? `calc(100% - ${scrollBarSize}px)` : undefined,
|
|
92
75
|
overflow: 'hidden',
|
|
93
76
|
overflowX: 'hidden',
|
|
94
77
|
overflowY: 'hidden'
|
|
@@ -99,43 +82,36 @@ var ScrollLocker = exports.default = /*#__PURE__*/_createClass(function ScrollLo
|
|
|
99
82
|
|
|
100
83
|
// https://github.com/ant-design/ant-design/issues/19729
|
|
101
84
|
if (!scrollingEffectClassNameReg.test(containerClassName)) {
|
|
102
|
-
|
|
85
|
+
const addClassName = `${containerClassName} ${scrollingEffectClassName}`;
|
|
103
86
|
container.className = addClassName.trim();
|
|
104
87
|
}
|
|
105
|
-
locks = [
|
|
106
|
-
target:
|
|
107
|
-
options:
|
|
108
|
-
}]
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
})
|
|
120
|
-
if (!findLock || locks.some(function (_ref7) {
|
|
121
|
-
var _findLock$options;
|
|
122
|
-
var options = _ref7.options;
|
|
123
|
-
return (options === null || options === void 0 ? void 0 : options.container) === ((_findLock$options = findLock.options) === null || _findLock$options === void 0 ? void 0 : _findLock$options.container);
|
|
124
|
-
})) {
|
|
88
|
+
locks = [...locks, {
|
|
89
|
+
target: this.lockTarget,
|
|
90
|
+
options: this.options
|
|
91
|
+
}];
|
|
92
|
+
};
|
|
93
|
+
unLock = () => {
|
|
94
|
+
const findLock = locks.find(({
|
|
95
|
+
target
|
|
96
|
+
}) => target === this.lockTarget);
|
|
97
|
+
locks = locks.filter(({
|
|
98
|
+
target
|
|
99
|
+
}) => target !== this.lockTarget);
|
|
100
|
+
if (!findLock || locks.some(({
|
|
101
|
+
options
|
|
102
|
+
}) => options?.container === findLock.options?.container)) {
|
|
125
103
|
return;
|
|
126
104
|
}
|
|
127
105
|
|
|
128
106
|
// Remove Effect
|
|
129
|
-
|
|
130
|
-
|
|
107
|
+
const container = this.options?.container || document.body;
|
|
108
|
+
const containerClassName = container.className;
|
|
131
109
|
if (!scrollingEffectClassNameReg.test(containerClassName)) return;
|
|
132
110
|
(0, _setStyle.default)(cacheStyle.get(container), {
|
|
133
111
|
element: container
|
|
134
112
|
});
|
|
135
113
|
cacheStyle.delete(container);
|
|
136
114
|
container.className = container.className.replace(scrollingEffectClassNameReg, '').trim();
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
this.options = _options;
|
|
141
|
-
});
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
exports.default = ScrollLocker;
|
package/lib/Dom/shadow.js
CHANGED
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.getShadowRoot = getShadowRoot;
|
|
7
7
|
exports.inShadow = inShadow;
|
|
8
8
|
function getRoot(ele) {
|
|
9
|
-
|
|
10
|
-
return ele === null || ele === void 0 || (_ele$getRootNode = ele.getRootNode) === null || _ele$getRootNode === void 0 ? void 0 : _ele$getRootNode.call(ele);
|
|
9
|
+
return ele?.getRootNode?.();
|
|
11
10
|
}
|
|
12
11
|
|
|
13
12
|
/**
|
package/lib/Dom/styleChecker.js
CHANGED
|
@@ -6,22 +6,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.isStyleSupport = isStyleSupport;
|
|
7
7
|
var _canUseDom = _interopRequireDefault(require("./canUseDom"));
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
-
|
|
9
|
+
const isStyleNameSupport = styleName => {
|
|
10
10
|
if ((0, _canUseDom.default)() && window.document.documentElement) {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
|
|
12
|
+
const {
|
|
13
|
+
documentElement
|
|
14
|
+
} = window.document;
|
|
15
|
+
return styleNameList.some(name => name in documentElement.style);
|
|
16
16
|
}
|
|
17
17
|
return false;
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
const isStyleValueSupport = (styleName, value) => {
|
|
20
20
|
if (!isStyleNameSupport(styleName)) {
|
|
21
21
|
return false;
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
const ele = document.createElement('div');
|
|
24
|
+
const origin = ele.style[styleName];
|
|
25
25
|
ele.style[styleName] = value;
|
|
26
26
|
return ele.style[styleName] !== origin;
|
|
27
27
|
};
|
package/lib/KeyCode.js
CHANGED
|
@@ -10,7 +10,7 @@ exports.default = void 0;
|
|
|
10
10
|
* @author yiminghe@gmail.com
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
const KeyCode = {
|
|
14
14
|
/**
|
|
15
15
|
* MAC_ENTER
|
|
16
16
|
*/
|
|
@@ -461,7 +461,9 @@ var KeyCode = {
|
|
|
461
461
|
* whether text and modified key is entered at the same time.
|
|
462
462
|
*/
|
|
463
463
|
isTextModifyingKeyEvent: function isTextModifyingKeyEvent(e) {
|
|
464
|
-
|
|
464
|
+
const {
|
|
465
|
+
keyCode
|
|
466
|
+
} = e;
|
|
465
467
|
if (e.altKey && !e.ctrlKey || e.metaKey ||
|
|
466
468
|
// Function keys don't generate text
|
|
467
469
|
keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) {
|
package/lib/Portal.js
CHANGED
|
@@ -8,20 +8,20 @@ var _react = require("react");
|
|
|
8
8
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
9
9
|
var _canUseDom = _interopRequireDefault(require("./Dom/canUseDom"));
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
const Portal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
12
|
+
const {
|
|
13
|
+
didUpdate,
|
|
14
|
+
getContainer,
|
|
15
|
+
children
|
|
16
|
+
} = props;
|
|
17
|
+
const parentRef = (0, _react.useRef)();
|
|
18
|
+
const containerRef = (0, _react.useRef)();
|
|
17
19
|
|
|
18
20
|
// Ref return nothing, only for wrapper check exist
|
|
19
|
-
(0, _react.useImperativeHandle)(ref,
|
|
20
|
-
return {};
|
|
21
|
-
});
|
|
21
|
+
(0, _react.useImperativeHandle)(ref, () => ({}));
|
|
22
22
|
|
|
23
23
|
// Create container in client side with sync to avoid useEffect not get ref
|
|
24
|
-
|
|
24
|
+
const initRef = (0, _react.useRef)(false);
|
|
25
25
|
if (!initRef.current && (0, _canUseDom.default)()) {
|
|
26
26
|
containerRef.current = getContainer();
|
|
27
27
|
parentRef.current = containerRef.current.parentNode;
|
|
@@ -29,21 +29,20 @@ var Portal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
// [Legacy] Used by `rc-trigger`
|
|
32
|
-
(0, _react.useEffect)(
|
|
33
|
-
didUpdate
|
|
32
|
+
(0, _react.useEffect)(() => {
|
|
33
|
+
didUpdate?.(props);
|
|
34
34
|
});
|
|
35
|
-
(0, _react.useEffect)(
|
|
35
|
+
(0, _react.useEffect)(() => {
|
|
36
36
|
// Restore container to original place
|
|
37
37
|
// React 18 StrictMode will unmount first and mount back for effect test:
|
|
38
38
|
// https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors
|
|
39
39
|
if (containerRef.current.parentNode === null && parentRef.current !== null) {
|
|
40
40
|
parentRef.current.appendChild(containerRef.current);
|
|
41
41
|
}
|
|
42
|
-
return
|
|
43
|
-
var _containerRef$current;
|
|
42
|
+
return () => {
|
|
44
43
|
// [Legacy] This should not be handle by Portal but parent PortalWrapper instead.
|
|
45
44
|
// Since some component use `Portal` directly, we have to keep the logic here.
|
|
46
|
-
|
|
45
|
+
containerRef.current?.parentNode?.removeChild(containerRef.current);
|
|
47
46
|
};
|
|
48
47
|
}, []);
|
|
49
48
|
return containerRef.current ? /*#__PURE__*/_reactDom.default.createPortal(children, containerRef.current) : null;
|