@nutui/nutui-react-taro 3.0.19-cpp-beta.2 → 3.0.19-cpp-beta.3
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/dist/cjs/packages/actionsheet/style/style.harmony.css +3 -0
- package/dist/cjs/packages/address/style/style.harmony.css +3 -0
- package/dist/cjs/packages/calendar/style/style.harmony.css +3 -0
- package/dist/cjs/packages/cascader/style/style.harmony.css +3 -0
- package/dist/cjs/packages/datepicker/style/style.harmony.css +3 -0
- package/dist/cjs/packages/imagepreview/style/style.harmony.css +3 -0
- package/dist/cjs/packages/numberkeyboard/style/style.harmony.css +3 -0
- package/dist/cjs/packages/picker/style/style.harmony.css +3 -0
- package/dist/cjs/packages/popover/style/style.harmony.css +3 -0
- package/dist/cjs/packages/popup/popup.js +49 -1
- package/dist/cjs/packages/popup/style/popup.scss +4 -0
- package/dist/cjs/packages/popup/style/style.css +3 -0
- package/dist/cjs/packages/popup/style/style.harmony.css +3 -0
- package/dist/cjs/packages/popup/style-jmapp/popup.scss +4 -0
- package/dist/cjs/packages/popup/style-jmapp/style.css +3 -0
- package/dist/cjs/packages/popup/style-jrkf/popup.scss +4 -0
- package/dist/cjs/packages/popup/style-jrkf/style.css +3 -0
- package/dist/cjs/packages/shortpassword/style/style.harmony.css +3 -0
- package/dist/cjs/packages/timeselect/style/style.harmony.css +3 -0
- package/dist/cjs/packages/tour/style/style.harmony.css +3 -0
- package/dist/es/packages/actionsheet/style/style.harmony.css +3 -0
- package/dist/es/packages/address/style/style.harmony.css +3 -0
- package/dist/es/packages/calendar/style/style.harmony.css +3 -0
- package/dist/es/packages/cascader/style/style.harmony.css +3 -0
- package/dist/es/packages/datepicker/style/style.harmony.css +3 -0
- package/dist/es/packages/imagepreview/style/style.harmony.css +3 -0
- package/dist/es/packages/numberkeyboard/style/style.harmony.css +3 -0
- package/dist/es/packages/picker/style/style.harmony.css +3 -0
- package/dist/es/packages/popover/style/style.harmony.css +3 -0
- package/dist/es/packages/popup/popup.js +49 -1
- package/dist/es/packages/popup/style/popup.scss +4 -0
- package/dist/es/packages/popup/style/style.css +3 -0
- package/dist/es/packages/popup/style/style.harmony.css +3 -0
- package/dist/es/packages/popup/style-jmapp/popup.scss +4 -0
- package/dist/es/packages/popup/style-jmapp/style.css +3 -0
- package/dist/es/packages/popup/style-jrkf/popup.scss +4 -0
- package/dist/es/packages/popup/style-jrkf/style.css +3 -0
- package/dist/es/packages/shortpassword/style/style.harmony.css +3 -0
- package/dist/es/packages/timeselect/style/style.harmony.css +3 -0
- package/dist/es/packages/tour/style/style.harmony.css +3 -0
- package/dist/nutui.react.umd.js +48 -1
- package/dist/style-jmapp.css +1 -1
- package/dist/style-jmapp.scss +29 -29
- package/dist/style-jrkf.css +1 -1
- package/dist/style-jrkf.scss +25 -25
- package/dist/style.css +1 -1
- package/dist/style.scss +32 -32
- package/package.json +1 -1
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -285,6 +285,9 @@
|
|
|
285
285
|
.nut-popup-bottom.nut-popup-round {
|
|
286
286
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
287
287
|
}
|
|
288
|
+
.nut-popup-bottom-top {
|
|
289
|
+
position: absolute;
|
|
290
|
+
}
|
|
288
291
|
.nut-popup-right {
|
|
289
292
|
top: 0;
|
|
290
293
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -17,6 +17,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
|
17
17
|
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
18
18
|
var _ts_generator = require("@swc/helpers/_/_ts_generator");
|
|
19
19
|
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
20
|
+
var _taro = require("@tarojs/taro");
|
|
20
21
|
var _reactdom = require("react-dom");
|
|
21
22
|
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
|
|
22
23
|
var _iconsreacttaro = require("@nutui/icons-react-taro");
|
|
@@ -63,6 +64,7 @@ var Popup = function Popup(props) {
|
|
|
63
64
|
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
|
|
64
65
|
var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
|
|
65
66
|
var nodeRef = (0, _uselockscoll.useLockScrollTaro)(innerVisible && lockScroll);
|
|
67
|
+
var topNodeRef = _react.default.useRef(null);
|
|
66
68
|
var rootRect = (0, _react.useRef)(null);
|
|
67
69
|
var touchStartRef = (0, _react.useRef)(0);
|
|
68
70
|
var touchMoveDistanceRef = (0, _react.useRef)(0);
|
|
@@ -80,6 +82,7 @@ var Popup = function Popup(props) {
|
|
|
80
82
|
var _obj;
|
|
81
83
|
var popClassName = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
|
|
82
84
|
var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), popupHeight = _useState4[0], setPopupHeight = _useState4[1];
|
|
85
|
+
var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), topBottom = _useState5[0], setTopBottom = _useState5[1];
|
|
83
86
|
var resizeStyles = function resizeStyles() {
|
|
84
87
|
if (popupHeight !== '') {
|
|
85
88
|
return {
|
|
@@ -101,6 +104,41 @@ var Popup = function Popup(props) {
|
|
|
101
104
|
}
|
|
102
105
|
onOpen && onOpen();
|
|
103
106
|
};
|
|
107
|
+
var getPopupHeight = /*#__PURE__*/ function() {
|
|
108
|
+
var _ref = (0, _async_to_generator._)(function() {
|
|
109
|
+
var _nodeRef_current, rect, height;
|
|
110
|
+
return (0, _ts_generator._)(this, function(_state) {
|
|
111
|
+
switch(_state.label){
|
|
112
|
+
case 0:
|
|
113
|
+
return [
|
|
114
|
+
4,
|
|
115
|
+
(0, _getrect.getRectInMultiPlatformWithoutCache)(nodeRef.current)
|
|
116
|
+
];
|
|
117
|
+
case 1:
|
|
118
|
+
rect = _state.sent();
|
|
119
|
+
height = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || (rect === null || rect === void 0 ? void 0 : rect.height);
|
|
120
|
+
setTopBottom((0, _pxtransform.pxTransform)(height));
|
|
121
|
+
return [
|
|
122
|
+
2
|
|
123
|
+
];
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
return function getPopupHeight() {
|
|
128
|
+
return _ref.apply(this, arguments);
|
|
129
|
+
};
|
|
130
|
+
}();
|
|
131
|
+
(0, _react.useEffect)(function() {
|
|
132
|
+
if (innerVisible && topNodeRef.current && nodeRef.current) {
|
|
133
|
+
(0, _taro.nextTick)(function() {
|
|
134
|
+
(0, _taro.nextTick)(function() {
|
|
135
|
+
getPopupHeight();
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}, [
|
|
140
|
+
innerVisible
|
|
141
|
+
]);
|
|
104
142
|
var close = function close() {
|
|
105
143
|
if (innerVisible) {
|
|
106
144
|
setInnerVisible(false);
|
|
@@ -128,6 +166,16 @@ var Popup = function Popup(props) {
|
|
|
128
166
|
onClick: handleCloseIconClick
|
|
129
167
|
}, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null)));
|
|
130
168
|
};
|
|
169
|
+
var renderTop = function renderTop() {
|
|
170
|
+
if (!top) return null;
|
|
171
|
+
return /*#__PURE__*/ _react.default.createElement(_components.View, {
|
|
172
|
+
className: "".concat(classPrefix, "-bottom-top"),
|
|
173
|
+
ref: topNodeRef,
|
|
174
|
+
style: {
|
|
175
|
+
bottom: topBottom
|
|
176
|
+
}
|
|
177
|
+
}, top);
|
|
178
|
+
};
|
|
131
179
|
var renderTitle = function renderTitle() {
|
|
132
180
|
if (left || title || description) {
|
|
133
181
|
return /*#__PURE__*/ _react.default.createElement(_components.View, {
|
|
@@ -221,7 +269,7 @@ var Popup = function Popup(props) {
|
|
|
221
269
|
onTouchMove: handleTouchMove,
|
|
222
270
|
onTouchEnd: handleTouchEnd,
|
|
223
271
|
onTouchCancel: handleTouchEnd
|
|
224
|
-
},
|
|
272
|
+
}, renderTop(), renderTitle(), showChildren ? children : null);
|
|
225
273
|
};
|
|
226
274
|
// const renderPop = () => {
|
|
227
275
|
// return (
|
|
@@ -88,6 +88,9 @@
|
|
|
88
88
|
.nut-popup-bottom.nut-popup-round {
|
|
89
89
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
90
90
|
}
|
|
91
|
+
.nut-popup-bottom-top {
|
|
92
|
+
position: absolute;
|
|
93
|
+
}
|
|
91
94
|
.nut-popup-right {
|
|
92
95
|
top: 0;
|
|
93
96
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -285,6 +285,9 @@
|
|
|
285
285
|
.nut-popup-bottom.nut-popup-round {
|
|
286
286
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
287
287
|
}
|
|
288
|
+
.nut-popup-bottom-top {
|
|
289
|
+
position: absolute;
|
|
290
|
+
}
|
|
288
291
|
.nut-popup-right {
|
|
289
292
|
top: 0;
|
|
290
293
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -5,6 +5,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
|
5
5
|
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
6
6
|
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
|
|
7
7
|
import React, { useState, useEffect, useRef } from "react";
|
|
8
|
+
import { nextTick } from "@tarojs/taro";
|
|
8
9
|
import { createPortal } from "react-dom";
|
|
9
10
|
// import { CSSTransition } from 'react-transition-group'
|
|
10
11
|
import classNames from "classnames";
|
|
@@ -52,6 +53,7 @@ export var Popup = function(props) {
|
|
|
52
53
|
var _useState2 = _sliced_to_array(useState(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
|
|
53
54
|
var _useState3 = _sliced_to_array(useState(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
|
|
54
55
|
var nodeRef = useLockScrollTaro(innerVisible && lockScroll);
|
|
56
|
+
var topNodeRef = React.useRef(null);
|
|
55
57
|
var rootRect = useRef(null);
|
|
56
58
|
var touchStartRef = useRef(0);
|
|
57
59
|
var touchMoveDistanceRef = useRef(0);
|
|
@@ -69,6 +71,7 @@ export var Popup = function(props) {
|
|
|
69
71
|
var _obj;
|
|
70
72
|
var popClassName = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), _define_property(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
|
|
71
73
|
var _useState4 = _sliced_to_array(useState(''), 2), popupHeight = _useState4[0], setPopupHeight = _useState4[1];
|
|
74
|
+
var _useState5 = _sliced_to_array(useState(''), 2), topBottom = _useState5[0], setTopBottom = _useState5[1];
|
|
72
75
|
var resizeStyles = function() {
|
|
73
76
|
if (popupHeight !== '') {
|
|
74
77
|
return {
|
|
@@ -90,6 +93,41 @@ export var Popup = function(props) {
|
|
|
90
93
|
}
|
|
91
94
|
onOpen && onOpen();
|
|
92
95
|
};
|
|
96
|
+
var getPopupHeight = /*#__PURE__*/ function() {
|
|
97
|
+
var _ref = _async_to_generator(function() {
|
|
98
|
+
var _nodeRef_current, rect, height;
|
|
99
|
+
return _ts_generator(this, function(_state) {
|
|
100
|
+
switch(_state.label){
|
|
101
|
+
case 0:
|
|
102
|
+
return [
|
|
103
|
+
4,
|
|
104
|
+
getRectInMultiPlatformWithoutCache(nodeRef.current)
|
|
105
|
+
];
|
|
106
|
+
case 1:
|
|
107
|
+
rect = _state.sent();
|
|
108
|
+
height = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || (rect === null || rect === void 0 ? void 0 : rect.height);
|
|
109
|
+
setTopBottom(pxTransform(height));
|
|
110
|
+
return [
|
|
111
|
+
2
|
|
112
|
+
];
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
return function getPopupHeight() {
|
|
117
|
+
return _ref.apply(this, arguments);
|
|
118
|
+
};
|
|
119
|
+
}();
|
|
120
|
+
useEffect(function() {
|
|
121
|
+
if (innerVisible && topNodeRef.current && nodeRef.current) {
|
|
122
|
+
nextTick(function() {
|
|
123
|
+
nextTick(function() {
|
|
124
|
+
getPopupHeight();
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
}, [
|
|
129
|
+
innerVisible
|
|
130
|
+
]);
|
|
93
131
|
var close = function() {
|
|
94
132
|
if (innerVisible) {
|
|
95
133
|
setInnerVisible(false);
|
|
@@ -117,6 +155,16 @@ export var Popup = function(props) {
|
|
|
117
155
|
onClick: handleCloseIconClick
|
|
118
156
|
}, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ React.createElement(Close, null)));
|
|
119
157
|
};
|
|
158
|
+
var renderTop = function() {
|
|
159
|
+
if (!top) return null;
|
|
160
|
+
return /*#__PURE__*/ React.createElement(View, {
|
|
161
|
+
className: "".concat(classPrefix, "-bottom-top"),
|
|
162
|
+
ref: topNodeRef,
|
|
163
|
+
style: {
|
|
164
|
+
bottom: topBottom
|
|
165
|
+
}
|
|
166
|
+
}, top);
|
|
167
|
+
};
|
|
120
168
|
var renderTitle = function() {
|
|
121
169
|
if (left || title || description) {
|
|
122
170
|
return /*#__PURE__*/ React.createElement(View, {
|
|
@@ -210,7 +258,7 @@ export var Popup = function(props) {
|
|
|
210
258
|
onTouchMove: handleTouchMove,
|
|
211
259
|
onTouchEnd: handleTouchEnd,
|
|
212
260
|
onTouchCancel: handleTouchEnd
|
|
213
|
-
},
|
|
261
|
+
}, renderTop(), renderTitle(), showChildren ? children : null);
|
|
214
262
|
};
|
|
215
263
|
// const renderPop = () => {
|
|
216
264
|
// return (
|
|
@@ -88,6 +88,9 @@
|
|
|
88
88
|
.nut-popup-bottom.nut-popup-round {
|
|
89
89
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
90
90
|
}
|
|
91
|
+
.nut-popup-bottom-top {
|
|
92
|
+
position: absolute;
|
|
93
|
+
}
|
|
91
94
|
.nut-popup-right {
|
|
92
95
|
top: 0;
|
|
93
96
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|
|
@@ -142,6 +142,9 @@
|
|
|
142
142
|
.nut-popup-bottom.nut-popup-round {
|
|
143
143
|
border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
|
|
144
144
|
}
|
|
145
|
+
.nut-popup-bottom-top {
|
|
146
|
+
position: absolute;
|
|
147
|
+
}
|
|
145
148
|
.nut-popup-right {
|
|
146
149
|
top: 0;
|
|
147
150
|
right: 0;
|