@rc-component/trigger 2.2.6 → 3.1.0
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/Popup/Arrow.js +23 -20
- package/es/Popup/Mask.d.ts +1 -1
- package/es/Popup/Mask.js +17 -16
- package/es/Popup/PopupContent.js +3 -6
- package/es/Popup/index.d.ts +1 -1
- package/es/Popup/index.js +83 -78
- package/es/TriggerWrapper.js +9 -7
- package/es/context.js +1 -1
- package/es/hooks/useAction.js +5 -5
- package/es/hooks/useAlign.js +205 -215
- package/es/hooks/useWatch.js +11 -12
- package/es/hooks/useWinClick.js +14 -16
- package/es/index.d.ts +2 -14
- package/es/index.js +167 -244
- package/es/interface.d.ts +1 -1
- package/es/mock.js +10 -13
- package/es/util.d.ts +1 -4
- package/es/util.js +57 -75
- package/lib/Popup/Arrow.js +26 -22
- package/lib/Popup/Mask.d.ts +1 -1
- package/lib/Popup/Mask.js +21 -19
- package/lib/Popup/PopupContent.js +5 -7
- package/lib/Popup/index.d.ts +1 -1
- package/lib/Popup/index.js +89 -83
- package/lib/TriggerWrapper.js +11 -8
- package/lib/context.js +3 -2
- package/lib/hooks/useAction.js +7 -6
- package/lib/hooks/useAlign.js +208 -217
- package/lib/hooks/useWatch.js +12 -13
- package/lib/hooks/useWinClick.js +16 -17
- package/lib/index.d.ts +2 -14
- package/lib/index.js +172 -248
- package/lib/interface.d.ts +1 -1
- package/lib/mock.js +12 -15
- package/lib/util.d.ts +1 -4
- package/lib/util.js +57 -77
- package/package.json +11 -12
package/es/Popup/Arrow.js
CHANGED
|
@@ -1,35 +1,38 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export default function Arrow(props) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
const {
|
|
5
|
+
prefixCls,
|
|
6
|
+
align,
|
|
7
|
+
arrow,
|
|
8
|
+
arrowPos
|
|
9
|
+
} = props;
|
|
10
|
+
const {
|
|
11
|
+
className,
|
|
12
|
+
content
|
|
13
|
+
} = arrow || {};
|
|
14
|
+
const {
|
|
15
|
+
x = 0,
|
|
16
|
+
y = 0
|
|
17
|
+
} = arrowPos;
|
|
18
|
+
const arrowRef = React.useRef();
|
|
16
19
|
|
|
17
20
|
// Skip if no align
|
|
18
21
|
if (!align || !align.points) {
|
|
19
22
|
return null;
|
|
20
23
|
}
|
|
21
|
-
|
|
24
|
+
const alignStyle = {
|
|
22
25
|
position: 'absolute'
|
|
23
26
|
};
|
|
24
27
|
|
|
25
28
|
// Skip if no need to align
|
|
26
29
|
if (align.autoArrow !== false) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
const popupPoints = align.points[0];
|
|
31
|
+
const targetPoints = align.points[1];
|
|
32
|
+
const popupTB = popupPoints[0];
|
|
33
|
+
const popupLR = popupPoints[1];
|
|
34
|
+
const targetTB = targetPoints[0];
|
|
35
|
+
const targetLR = targetPoints[1];
|
|
33
36
|
|
|
34
37
|
// Top & Bottom
|
|
35
38
|
if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
|
|
@@ -51,7 +54,7 @@ export default function Arrow(props) {
|
|
|
51
54
|
}
|
|
52
55
|
return /*#__PURE__*/React.createElement("div", {
|
|
53
56
|
ref: arrowRef,
|
|
54
|
-
className: classNames(
|
|
57
|
+
className: classNames(`${prefixCls}-arrow`, className),
|
|
55
58
|
style: alignStyle
|
|
56
59
|
}, content);
|
|
57
60
|
}
|
package/es/Popup/Mask.d.ts
CHANGED
package/es/Popup/Mask.js
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import CSSMotion from 'rc-motion';
|
|
3
|
+
import CSSMotion from '@rc-component/motion';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
export default function Mask(props) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
const {
|
|
7
|
+
prefixCls,
|
|
8
|
+
open,
|
|
9
|
+
zIndex,
|
|
10
|
+
mask,
|
|
11
|
+
motion
|
|
12
|
+
} = props;
|
|
11
13
|
if (!mask) {
|
|
12
14
|
return null;
|
|
13
15
|
}
|
|
@@ -15,13 +17,12 @@ export default function Mask(props) {
|
|
|
15
17
|
motionAppear: true,
|
|
16
18
|
visible: open,
|
|
17
19
|
removeOnLeave: true
|
|
18
|
-
}),
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
});
|
|
20
|
+
}), ({
|
|
21
|
+
className
|
|
22
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
style: {
|
|
24
|
+
zIndex
|
|
25
|
+
},
|
|
26
|
+
className: classNames(`${prefixCls}-mask`, className)
|
|
27
|
+
}));
|
|
27
28
|
}
|
package/es/Popup/PopupContent.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}, function (_, next) {
|
|
6
|
-
return next.cache;
|
|
7
|
-
});
|
|
2
|
+
const PopupContent = /*#__PURE__*/React.memo(({
|
|
3
|
+
children
|
|
4
|
+
}) => children, (_, next) => next.cache);
|
|
8
5
|
if (process.env.NODE_ENV !== 'production') {
|
|
9
6
|
PopupContent.displayName = 'PopupContent';
|
|
10
7
|
}
|
package/es/Popup/index.d.ts
CHANGED
package/es/Popup/index.js
CHANGED
|
@@ -1,65 +1,68 @@
|
|
|
1
|
-
|
|
2
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
2
|
import classNames from 'classnames';
|
|
5
|
-
import CSSMotion from 'rc-motion';
|
|
6
|
-
import ResizeObserver from 'rc-resize-observer';
|
|
7
|
-
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
|
|
8
|
-
import { composeRef } from "rc-util/es/ref";
|
|
3
|
+
import CSSMotion from '@rc-component/motion';
|
|
4
|
+
import ResizeObserver from '@rc-component/resize-observer';
|
|
5
|
+
import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
|
|
6
|
+
import { composeRef } from "@rc-component/util/es/ref";
|
|
9
7
|
import * as React from 'react';
|
|
10
8
|
import Arrow from "./Arrow";
|
|
11
9
|
import Mask from "./Mask";
|
|
12
10
|
import PopupContent from "./PopupContent";
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
11
|
+
const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
12
|
+
const {
|
|
13
|
+
popup,
|
|
14
|
+
className,
|
|
15
|
+
prefixCls,
|
|
16
|
+
style,
|
|
17
|
+
target,
|
|
18
|
+
onVisibleChanged,
|
|
19
|
+
// Open
|
|
20
|
+
open,
|
|
21
|
+
keepDom,
|
|
22
|
+
fresh,
|
|
23
|
+
// Click
|
|
24
|
+
onClick,
|
|
25
|
+
// Mask
|
|
26
|
+
mask,
|
|
27
|
+
// Arrow
|
|
28
|
+
arrow,
|
|
29
|
+
arrowPos,
|
|
30
|
+
align,
|
|
31
|
+
// Motion
|
|
32
|
+
motion,
|
|
33
|
+
maskMotion,
|
|
34
|
+
// Portal
|
|
35
|
+
forceRender,
|
|
36
|
+
getPopupContainer,
|
|
37
|
+
autoDestroy,
|
|
38
|
+
portal: Portal,
|
|
39
|
+
zIndex,
|
|
40
|
+
onMouseEnter,
|
|
41
|
+
onMouseLeave,
|
|
42
|
+
onPointerEnter,
|
|
43
|
+
onPointerDownCapture,
|
|
44
|
+
ready,
|
|
45
|
+
offsetX,
|
|
46
|
+
offsetY,
|
|
47
|
+
offsetR,
|
|
48
|
+
offsetB,
|
|
49
|
+
onAlign,
|
|
50
|
+
onPrepare,
|
|
51
|
+
stretch,
|
|
52
|
+
targetWidth,
|
|
53
|
+
targetHeight
|
|
54
|
+
} = props;
|
|
55
|
+
const childNode = typeof popup === 'function' ? popup() : popup;
|
|
50
56
|
|
|
51
57
|
// We can not remove holder only when motion finished.
|
|
52
|
-
|
|
58
|
+
const isNodeVisible = open || keepDom;
|
|
53
59
|
|
|
54
60
|
// ======================= Container ========================
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
58
|
-
show = _React$useState2[0],
|
|
59
|
-
setShow = _React$useState2[1];
|
|
61
|
+
const getPopupContainerNeedParams = getPopupContainer?.length > 0;
|
|
62
|
+
const [show, setShow] = React.useState(!getPopupContainer || !getPopupContainerNeedParams);
|
|
60
63
|
|
|
61
64
|
// Delay to show since `getPopupContainer` need target element
|
|
62
|
-
useLayoutEffect(
|
|
65
|
+
useLayoutEffect(() => {
|
|
63
66
|
if (!show && getPopupContainerNeedParams && target) {
|
|
64
67
|
setShow(true);
|
|
65
68
|
}
|
|
@@ -71,8 +74,8 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
71
74
|
}
|
|
72
75
|
|
|
73
76
|
// >>>>> Offset
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
const AUTO = 'auto';
|
|
78
|
+
const offsetStyle = {
|
|
76
79
|
left: '-1000vw',
|
|
77
80
|
top: '-1000vh',
|
|
78
81
|
right: AUTO,
|
|
@@ -81,11 +84,12 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
81
84
|
|
|
82
85
|
// Set align style
|
|
83
86
|
if (ready || !open) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
const {
|
|
88
|
+
points
|
|
89
|
+
} = align;
|
|
90
|
+
const dynamicInset = align.dynamicInset || align._experimental?.dynamicInset;
|
|
91
|
+
const alignRight = dynamicInset && points[0][1] === 'r';
|
|
92
|
+
const alignBottom = dynamicInset && points[0][0] === 'b';
|
|
89
93
|
if (alignRight) {
|
|
90
94
|
offsetStyle.right = offsetR;
|
|
91
95
|
offsetStyle.left = AUTO;
|
|
@@ -103,7 +107,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
103
107
|
}
|
|
104
108
|
|
|
105
109
|
// >>>>> Misc
|
|
106
|
-
|
|
110
|
+
const miscStyle = {};
|
|
107
111
|
if (stretch) {
|
|
108
112
|
if (stretch.includes('height') && targetHeight) {
|
|
109
113
|
miscStyle.height = targetHeight;
|
|
@@ -121,9 +125,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
121
125
|
}
|
|
122
126
|
return /*#__PURE__*/React.createElement(Portal, {
|
|
123
127
|
open: forceRender || isNodeVisible,
|
|
124
|
-
getContainer: getPopupContainer &&
|
|
125
|
-
return getPopupContainer(target);
|
|
126
|
-
},
|
|
128
|
+
getContainer: getPopupContainer && (() => getPopupContainer(target)),
|
|
127
129
|
autoDestroy: autoDestroy
|
|
128
130
|
}, /*#__PURE__*/React.createElement(Mask, {
|
|
129
131
|
prefixCls: prefixCls,
|
|
@@ -134,37 +136,40 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
134
136
|
}), /*#__PURE__*/React.createElement(ResizeObserver, {
|
|
135
137
|
onResize: onAlign,
|
|
136
138
|
disabled: !open
|
|
137
|
-
},
|
|
139
|
+
}, resizeObserverRef => {
|
|
138
140
|
return /*#__PURE__*/React.createElement(CSSMotion, _extends({
|
|
139
141
|
motionAppear: true,
|
|
140
142
|
motionEnter: true,
|
|
141
143
|
motionLeave: true,
|
|
142
144
|
removeOnLeave: false,
|
|
143
145
|
forceRender: forceRender,
|
|
144
|
-
leavedClassName:
|
|
146
|
+
leavedClassName: `${prefixCls}-hidden`
|
|
145
147
|
}, motion, {
|
|
146
148
|
onAppearPrepare: onPrepare,
|
|
147
149
|
onEnterPrepare: onPrepare,
|
|
148
150
|
visible: open,
|
|
149
|
-
onVisibleChanged:
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
_onVisibleChanged(nextVisible);
|
|
151
|
+
onVisibleChanged: nextVisible => {
|
|
152
|
+
motion?.onVisibleChanged?.(nextVisible);
|
|
153
|
+
onVisibleChanged(nextVisible);
|
|
153
154
|
}
|
|
154
|
-
}),
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
}), ({
|
|
156
|
+
className: motionClassName,
|
|
157
|
+
style: motionStyle
|
|
158
|
+
}, motionRef) => {
|
|
159
|
+
const cls = classNames(prefixCls, motionClassName, className);
|
|
158
160
|
return /*#__PURE__*/React.createElement("div", {
|
|
159
161
|
ref: composeRef(resizeObserverRef, ref, motionRef),
|
|
160
162
|
className: cls,
|
|
161
|
-
style:
|
|
162
|
-
'--arrow-x':
|
|
163
|
-
'--arrow-y':
|
|
164
|
-
|
|
163
|
+
style: {
|
|
164
|
+
'--arrow-x': `${arrowPos.x || 0}px`,
|
|
165
|
+
'--arrow-y': `${arrowPos.y || 0}px`,
|
|
166
|
+
...offsetStyle,
|
|
167
|
+
...miscStyle,
|
|
168
|
+
...motionStyle,
|
|
165
169
|
boxSizing: 'border-box',
|
|
166
|
-
zIndex
|
|
167
|
-
|
|
170
|
+
zIndex,
|
|
171
|
+
...style
|
|
172
|
+
},
|
|
168
173
|
onMouseEnter: onMouseEnter,
|
|
169
174
|
onMouseLeave: onMouseLeave,
|
|
170
175
|
onPointerEnter: onPointerEnter,
|
package/es/TriggerWrapper.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import { fillRef, getNodeRef, supportRef, useComposeRef } from "rc-util/es/ref";
|
|
1
|
+
import { fillRef, getNodeRef, supportRef, useComposeRef } from "@rc-component/util/es/ref";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
const TriggerWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
4
|
+
const {
|
|
5
|
+
children,
|
|
6
|
+
getTriggerDOMNode
|
|
7
|
+
} = props;
|
|
8
|
+
const canUseRef = supportRef(children);
|
|
7
9
|
|
|
8
10
|
// When use `getTriggerDOMNode`, we should do additional work to get the real dom
|
|
9
|
-
|
|
11
|
+
const setRef = React.useCallback(node => {
|
|
10
12
|
fillRef(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
|
|
11
13
|
}, [getTriggerDOMNode]);
|
|
12
|
-
|
|
14
|
+
const mergedRef = useComposeRef(setRef, getNodeRef(children));
|
|
13
15
|
return canUseRef ? /*#__PURE__*/React.cloneElement(children, {
|
|
14
16
|
ref: mergedRef
|
|
15
17
|
}) : children;
|
package/es/context.js
CHANGED
package/es/hooks/useAction.js
CHANGED
|
@@ -3,11 +3,11 @@ function toArray(val) {
|
|
|
3
3
|
return val ? Array.isArray(val) ? val : [val] : [];
|
|
4
4
|
}
|
|
5
5
|
export default function useAction(mobile, action, showAction, hideAction) {
|
|
6
|
-
return React.useMemo(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
return React.useMemo(() => {
|
|
7
|
+
const mergedShowAction = toArray(showAction ?? action);
|
|
8
|
+
const mergedHideAction = toArray(hideAction ?? action);
|
|
9
|
+
const showActionSet = new Set(mergedShowAction);
|
|
10
|
+
const hideActionSet = new Set(mergedHideAction);
|
|
11
11
|
if (mobile) {
|
|
12
12
|
if (showActionSet.has('hover')) {
|
|
13
13
|
showActionSet.delete('hover');
|