@nutui/nutui-react-taro 3.0.18 → 3.0.19-cpp-beta.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.
Files changed (61) hide show
  1. package/CHANGELOG.md +9 -10
  2. package/dist/cjs/packages/actionsheet/style/style.harmony.css +0 -3
  3. package/dist/cjs/packages/address/style/style.harmony.css +0 -3
  4. package/dist/cjs/packages/calendar/style/style.harmony.css +0 -3
  5. package/dist/cjs/packages/cascader/style/style.harmony.css +0 -3
  6. package/dist/cjs/packages/datepicker/style/style.harmony.css +0 -3
  7. package/dist/cjs/packages/dialog/dialog.js +12 -10
  8. package/dist/cjs/packages/imagepreview/style/style.harmony.css +0 -3
  9. package/dist/cjs/packages/input/input.js +14 -5
  10. package/dist/cjs/packages/numberkeyboard/style/style.harmony.css +0 -3
  11. package/dist/cjs/packages/overlay/overlay.js +17 -11
  12. package/dist/cjs/packages/picker/style/style.harmony.css +0 -3
  13. package/dist/cjs/packages/popover/style/style.harmony.css +0 -3
  14. package/dist/cjs/packages/popup/popup.d.ts +1 -1
  15. package/dist/cjs/packages/popup/popup.js +122 -23
  16. package/dist/cjs/packages/popup/style/popup.scss +0 -5
  17. package/dist/cjs/packages/popup/style/style.css +0 -3
  18. package/dist/cjs/packages/popup/style/style.harmony.css +0 -3
  19. package/dist/cjs/packages/popup/style-jmapp/popup.scss +0 -5
  20. package/dist/cjs/packages/popup/style-jmapp/style.css +0 -3
  21. package/dist/cjs/packages/popup/style-jrkf/popup.scss +0 -5
  22. package/dist/cjs/packages/popup/style-jrkf/style.css +0 -3
  23. package/dist/cjs/packages/shortpassword/style/style.harmony.css +0 -3
  24. package/dist/cjs/packages/swiper/swiper.js +1 -2
  25. package/dist/cjs/packages/timeselect/style/style.harmony.css +0 -3
  26. package/dist/cjs/packages/tour/style/style.harmony.css +0 -3
  27. package/dist/cjs/types/spec/popup/base.d.ts +6 -0
  28. package/dist/es/packages/actionsheet/style/style.harmony.css +0 -3
  29. package/dist/es/packages/address/style/style.harmony.css +0 -3
  30. package/dist/es/packages/calendar/style/style.harmony.css +0 -3
  31. package/dist/es/packages/cascader/style/style.harmony.css +0 -3
  32. package/dist/es/packages/datepicker/style/style.harmony.css +0 -3
  33. package/dist/es/packages/dialog/dialog.js +23 -19
  34. package/dist/es/packages/imagepreview/style/style.harmony.css +0 -3
  35. package/dist/es/packages/input/input.js +14 -5
  36. package/dist/es/packages/numberkeyboard/style/style.harmony.css +0 -3
  37. package/dist/es/packages/overlay/overlay.js +17 -11
  38. package/dist/es/packages/picker/style/style.harmony.css +0 -3
  39. package/dist/es/packages/popover/style/style.harmony.css +0 -3
  40. package/dist/es/packages/popup/popup.d.ts +1 -1
  41. package/dist/es/packages/popup/popup.js +124 -24
  42. package/dist/es/packages/popup/style/popup.scss +0 -5
  43. package/dist/es/packages/popup/style/style.css +0 -3
  44. package/dist/es/packages/popup/style/style.harmony.css +0 -3
  45. package/dist/es/packages/popup/style-jmapp/popup.scss +0 -5
  46. package/dist/es/packages/popup/style-jmapp/style.css +0 -3
  47. package/dist/es/packages/popup/style-jrkf/popup.scss +0 -5
  48. package/dist/es/packages/popup/style-jrkf/style.css +0 -3
  49. package/dist/es/packages/shortpassword/style/style.harmony.css +0 -3
  50. package/dist/es/packages/swiper/swiper.js +1 -2
  51. package/dist/es/packages/timeselect/style/style.harmony.css +0 -3
  52. package/dist/es/packages/tour/style/style.harmony.css +0 -3
  53. package/dist/es/types/spec/popup/base.d.ts +24 -0
  54. package/dist/nutui.react.umd.js +9794 -9703
  55. package/dist/style-jmapp.css +1 -1
  56. package/dist/style-jmapp.scss +24 -24
  57. package/dist/style-jrkf.css +1 -1
  58. package/dist/style-jrkf.scss +30 -30
  59. package/dist/style.css +1 -1
  60. package/dist/style.scss +34 -34
  61. package/package.json +1 -1
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -6,7 +6,6 @@ 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 } from "react";
8
8
  import classNames from "classnames";
9
- import { CSSTransition } from "react-transition-group";
10
9
  import { View } from "@tarojs/components";
11
10
  import { Failure, Close } from "@nutui/icons-react-taro";
12
11
  import Button from "../button/index";
@@ -171,24 +170,29 @@ export var BaseDialog = function(props) {
171
170
  var renderContent = function() {
172
171
  var contentZIndex = harmony() ? zIndex + 1 : zIndex // 解决harmony层级问题
173
172
  ;
174
- return /*#__PURE__*/ React.createElement(CSSTransition, {
175
- in: visible,
176
- timeout: 300,
177
- classNames: "fadeDialog",
178
- unmountOnExit: true,
179
- appear: true
180
- }, /*#__PURE__*/ React.createElement(Content, {
181
- className: className,
182
- style: _object_spread({
183
- zIndex: contentZIndex
184
- }, style),
185
- title: title,
186
- header: header,
187
- close: renderCloseIcon(),
188
- footer: renderFooter(),
189
- footerDirection: footerDirection,
190
- visible: visible
191
- }, content || children));
173
+ return (
174
+ // <CSSTransition
175
+ // in={visible}
176
+ // timeout={300}
177
+ // classNames="fadeDialog"
178
+ // unmountOnExit
179
+ // appear
180
+ // >
181
+ /*#__PURE__*/ (React.createElement(Content, {
182
+ className: className,
183
+ style: _object_spread_props(_object_spread({
184
+ zIndex: contentZIndex
185
+ }, style), {
186
+ display: visible ? 'block' : 'none'
187
+ }),
188
+ title: title,
189
+ header: header,
190
+ close: renderCloseIcon(),
191
+ footer: renderFooter(),
192
+ footerDirection: footerDirection,
193
+ visible: visible
194
+ }, content || children))
195
+ );
192
196
  };
193
197
  return /*#__PURE__*/ React.createElement(View, {
194
198
  style: {
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -64,18 +64,27 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
64
64
  }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
65
65
  var inputRef = useRef(null);
66
66
  var _useState = _sliced_to_array(useState(false), 2), active = _useState[0], setActive = _useState[1];
67
+ // 兼容H5和小程序获取原生input标签
68
+ var getNativeInput = function() {
69
+ if (Taro.getEnv() === 'WEB') {
70
+ var taroInputCoreEl = inputRef.current;
71
+ var inputEl = taroInputCoreEl.querySelector('input');
72
+ return inputEl;
73
+ }
74
+ return inputRef.current;
75
+ };
67
76
  useImperativeHandle(ref, function() {
68
77
  return {
69
78
  clear: function() {
70
79
  setValue('');
71
80
  },
72
81
  focus: function() {
73
- var _inputRef_current;
74
- (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
82
+ var nativeInput = getNativeInput();
83
+ nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.focus();
75
84
  },
76
85
  blur: function() {
77
- var _inputRef_current;
78
- (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
86
+ var nativeInput = getNativeInput();
87
+ nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.blur();
79
88
  },
80
89
  get nativeElement () {
81
90
  return inputRef.current;
@@ -163,7 +172,7 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
163
172
  maxlength: maxLength,
164
173
  placeholder: placeholder === undefined ? locale.placeholder : placeholder,
165
174
  placeholderClass: "".concat(classPrefix, "-placeholder"),
166
- disabled: disabled || readOnly,
175
+ disabled: disabled,
167
176
  value: value,
168
177
  focus: autoFocus || focus,
169
178
  confirmType: confirmType,
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -3,7 +3,6 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
3
3
  import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
4
4
  import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
5
5
  import React, { useEffect, useState } from "react";
6
- import { CSSTransition } from "react-transition-group";
7
6
  import classNames from "classnames";
8
7
  import { View } from "@tarojs/components";
9
8
  import { ComponentDefaults } from "../../utils/typings";
@@ -53,20 +52,27 @@ export var Overlay = function(props) {
53
52
  return /*#__PURE__*/ React.createElement(View, _object_spread_props(_object_spread({
54
53
  ref: nodeRef,
55
54
  className: classes,
56
- style: styles
55
+ style: _object_spread_props(_object_spread({}, styles), {
56
+ display: innerVisible ? 'block' : 'none'
57
+ })
57
58
  }, rest), {
58
59
  catchMove: lockScroll,
59
60
  onClick: handleClick
60
61
  }), children);
61
62
  };
62
- return /*#__PURE__*/ React.createElement(CSSTransition, {
63
- nodeRef: nodeRef,
64
- classNames: "".concat(classPrefix, "-slide"),
65
- unmountOnExit: true,
66
- timeout: duration,
67
- in: innerVisible,
68
- onEntered: afterShow,
69
- onExited: afterClose
70
- }, renderOverlay());
63
+ return /*#__PURE__*/ React.createElement(React.Fragment, null, renderOverlay());
64
+ // return (
65
+ // <CSSTransition
66
+ // nodeRef={nodeRef}
67
+ // classNames={`${classPrefix}-slide`}
68
+ // unmountOnExit
69
+ // timeout={duration}
70
+ // in={innerVisible}
71
+ // onEntered={afterShow}
72
+ // onExited={afterClose}
73
+ // >
74
+ // {renderOverlay()}
75
+ // </CSSTransition>
76
+ // )
71
77
  };
72
78
  Overlay.displayName = 'NutOverlay';
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -1,3 +1,3 @@
1
1
  import React, { FunctionComponent } from 'react';
2
2
  import { TaroPopupProps } from "../../types";
3
- export declare const Popup: FunctionComponent<Partial<TaroPopupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'title'>>;
3
+ export declare const Popup: FunctionComponent<Partial<TaroPopupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'title' | 'onTouchStart' | 'onTouchMove' | 'onTouchEnd'>>;
@@ -1,17 +1,21 @@
1
+ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
1
2
  import { _ as _define_property } from "@swc/helpers/_/_define_property";
2
3
  import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
3
4
  import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
4
5
  import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
5
- import React, { useState, useEffect } from "react";
6
+ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
7
+ import React, { useState, useEffect, useRef } from "react";
6
8
  import { createPortal } from "react-dom";
7
- import { CSSTransition } from "react-transition-group";
9
+ // import { CSSTransition } from 'react-transition-group'
8
10
  import classNames from "classnames";
9
11
  import { Close } from "@nutui/icons-react-taro";
10
12
  import { View } from "@tarojs/components";
13
+ import { getRectInMultiPlatformWithoutCache } from "../../utils/taro/get-rect";
11
14
  import { defaultOverlayProps } from "../overlay/overlay";
12
15
  import Overlay from "../overlay/index";
13
16
  import { useLockScrollTaro } from "../../hooks/taro/use-lock-scoll";
14
17
  import { harmony } from "../../utils/taro/platform";
18
+ import { pxTransform } from "../../utils/taro/px-transform";
15
19
  var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
16
20
  position: 'center',
17
21
  transition: '',
@@ -24,6 +28,8 @@ var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps),
24
28
  portal: null,
25
29
  overlay: true,
26
30
  round: false,
31
+ resizable: false,
32
+ minHeight: '',
27
33
  onOpen: function() {},
28
34
  onClose: function() {},
29
35
  onOverlayClick: function() {
@@ -31,29 +37,51 @@ var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps),
31
37
  },
32
38
  onCloseIconClick: function() {
33
39
  return true;
34
- }
40
+ },
41
+ onTouchStart: function() {},
42
+ onTouchMove: function() {},
43
+ onTouchEnd: function() {}
35
44
  });
36
45
  // 默认1000,参看variables
37
46
  var _zIndex = 1100;
38
47
  export var Popup = function(props) {
39
- var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick;
48
+ var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd;
40
49
  var innerIndex = zIndex || _zIndex;
41
50
  var _useState = _sliced_to_array(useState(innerIndex), 2), index = _useState[0], setIndex = _useState[1];
42
51
  var _useState1 = _sliced_to_array(useState(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
43
52
  var _useState2 = _sliced_to_array(useState(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
44
53
  var _useState3 = _sliced_to_array(useState(''), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
45
- var refObject = useLockScrollTaro(innerVisible && lockScroll);
54
+ var nodeRef = useLockScrollTaro(innerVisible && lockScroll);
55
+ var rootRect = useRef(null);
56
+ var touchStartRef = useRef(0);
57
+ var touchMoveDistanceRef = useRef(0);
58
+ var heightRef = useRef(0);
59
+ var defaultHeightRef = useRef(0);
60
+ var isTouching = useRef(false);
46
61
  var classPrefix = 'nut-popup';
47
62
  var overlayStyles = _object_spread({}, overlayStyle);
48
63
  var contentZIndex = harmony() ? index + 1 : index // 解决harmony层级问题
49
64
  ;
50
65
  var popStyles = _object_spread({
51
- zIndex: contentZIndex
66
+ zIndex: contentZIndex,
67
+ minHeight: minHeight
52
68
  }, style);
53
69
  var _obj;
54
70
  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
+ var _useState4 = _sliced_to_array(useState(''), 2), popupHeight = _useState4[0], setPopupHeight = _useState4[1];
72
+ var resizeStyles = function() {
73
+ if (popupHeight !== '') {
74
+ return {
75
+ height: popupHeight
76
+ };
77
+ }
78
+ };
55
79
  var open = function() {
56
80
  if (!innerVisible) {
81
+ // 当高度改变后,再次打开时,将高度置为初始高度
82
+ if (position === 'bottom' && resizable && nodeRef.current && heightRef.current) {
83
+ setPopupHeight(pxTransform(defaultHeightRef.current));
84
+ }
57
85
  setInnerVisible(true);
58
86
  setIndex(++innerIndex);
59
87
  }
@@ -107,27 +135,99 @@ export var Popup = function(props) {
107
135
  return renderCloseIcon();
108
136
  }
109
137
  };
110
- var renderContent = function() {
111
- return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
112
- ref: refObject,
113
- style: popStyles,
114
- className: popClassName,
115
- onClick: onClick,
116
- catchMove: lockScroll
117
- }, renderTitle(), showChildren ? children : null));
138
+ var handleTouchStart = /*#__PURE__*/ function() {
139
+ var _ref = _async_to_generator(function(event) {
140
+ var _nodeRef_current, _rootRect_current, e, rect;
141
+ return _ts_generator(this, function(_state) {
142
+ switch(_state.label){
143
+ case 0:
144
+ if (position !== 'bottom' || !resizable || !nodeRef.current) return [
145
+ 2
146
+ ];
147
+ e = event;
148
+ // 开始touch,记录下touch的pageY,用以判断是向上滑动还是向下滑动
149
+ touchStartRef.current = e.touches[0].pageY;
150
+ // 标记开始滑动
151
+ isTouching.current = true;
152
+ return [
153
+ 4,
154
+ getRectInMultiPlatformWithoutCache(nodeRef.current)
155
+ ];
156
+ case 1:
157
+ rect = _state.sent();
158
+ rootRect.current = rect;
159
+ heightRef.current = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || ((_rootRect_current = rootRect.current) === null || _rootRect_current === void 0 ? void 0 : _rootRect_current.height) || 0;
160
+ if (!defaultHeightRef.current) defaultHeightRef.current = heightRef.current;
161
+ onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(heightRef.current, e);
162
+ return [
163
+ 2
164
+ ];
165
+ }
166
+ });
167
+ });
168
+ return function handleTouchStart(event) {
169
+ return _ref.apply(this, arguments);
170
+ };
171
+ }();
172
+ var handleTouchMove = function(event) {
173
+ if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
174
+ var e = event;
175
+ e.stopPropagation();
176
+ // 计算位移:move过程中,当前的pageY 与 start值比较
177
+ touchMoveDistanceRef.current = e.touches[0].pageY - touchStartRef.current;
178
+ var handleMove = function() {
179
+ var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
180
+ var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
181
+ setPopupHeight(pxTransform(currentHeight));
182
+ if (touchMoveDistanceRef.current > 0 && isTouching.current) {
183
+ // 向下滑动
184
+ onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, e, 'down');
185
+ } else {
186
+ // 向上滑动
187
+ onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, e, 'up');
188
+ }
189
+ };
190
+ requestAnimationFrame(handleMove);
191
+ };
192
+ var handleTouchEnd = function(event) {
193
+ if (position !== 'bottom' || !resizable || !nodeRef.current || !rootRect.current) return;
194
+ var e = event;
195
+ isTouching.current = false;
196
+ var min = typeof minHeight === 'number' ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
197
+ var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
198
+ onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(currentHeight, e);
118
199
  };
119
200
  var renderPop = function() {
120
- return /*#__PURE__*/ React.createElement(CSSTransition, {
121
- nodeRef: refObject,
122
- classNames: transitionName,
123
- mountOnEnter: true,
124
- unmountOnExit: destroyOnClose,
125
- timeout: duration,
126
- in: innerVisible,
127
- onEntered: afterShow,
128
- onExited: afterClose
129
- }, renderContent());
201
+ return /*#__PURE__*/ React.createElement(View, {
202
+ ref: nodeRef,
203
+ style: _object_spread(_object_spread_props(_object_spread({}, popStyles), {
204
+ display: innerVisible ? 'block' : 'none'
205
+ }), resizeStyles()),
206
+ className: popClassName,
207
+ onClick: onClick,
208
+ catchMove: lockScroll,
209
+ onTouchStart: handleTouchStart,
210
+ onTouchMove: handleTouchMove,
211
+ onTouchEnd: handleTouchEnd,
212
+ onTouchCancel: handleTouchEnd
213
+ }, top, renderTitle(), showChildren ? children : null);
130
214
  };
215
+ // const renderPop = () => {
216
+ // return (
217
+ // <CSSTransition
218
+ // nodeRef={nodeRef}
219
+ // classNames={transitionName}
220
+ // mountOnEnter
221
+ // unmountOnExit={destroyOnClose}
222
+ // timeout={duration}
223
+ // in={innerVisible}
224
+ // onEntered={afterShow}
225
+ // onExited={afterClose}
226
+ // >
227
+ // {renderContent()}
228
+ // </CSSTransition>
229
+ // )
230
+ // }
131
231
  var renderNode = function() {
132
232
  return /*#__PURE__*/ React.createElement(React.Fragment, null, overlay ? /*#__PURE__*/ React.createElement(Overlay, {
133
233
  zIndex: index,
@@ -88,11 +88,6 @@
88
88
  }
89
89
  }
90
90
 
91
- &-bottom,
92
- &-top {
93
- max-height: 87%;
94
- }
95
-
96
91
  &-bottom {
97
92
  bottom: 0;
98
93
  left: 0;
@@ -80,9 +80,6 @@
80
80
  .nut-popup-center.nut-popup-round {
81
81
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
82
82
  }
83
- .nut-popup-bottom, .nut-popup-top {
84
- max-height: 87%;
85
- }
86
83
  .nut-popup-bottom {
87
84
  bottom: 0;
88
85
  left: 0;
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -88,11 +88,6 @@
88
88
  }
89
89
  }
90
90
 
91
- &-bottom,
92
- &-top {
93
- max-height: 87%;
94
- }
95
-
96
91
  &-bottom {
97
92
  bottom: 0;
98
93
  left: 0;
@@ -80,9 +80,6 @@
80
80
  .nut-popup-center.nut-popup-round {
81
81
  border-radius: var(--nutui-popup-border-radius, 12px);
82
82
  }
83
- .nut-popup-bottom, .nut-popup-top {
84
- max-height: 87%;
85
- }
86
83
  .nut-popup-bottom {
87
84
  bottom: 0;
88
85
  left: 0;
@@ -88,11 +88,6 @@
88
88
  }
89
89
  }
90
90
 
91
- &-bottom,
92
- &-top {
93
- max-height: 87%;
94
- }
95
-
96
91
  &-bottom {
97
92
  bottom: 0;
98
93
  left: 0;
@@ -80,9 +80,6 @@
80
80
  .nut-popup-center.nut-popup-round {
81
81
  border-radius: var(--nutui-popup-border-radius, 12px);
82
82
  }
83
- .nut-popup-bottom, .nut-popup-top {
84
- max-height: 87%;
85
- }
86
83
  .nut-popup-bottom {
87
84
  bottom: 0;
88
85
  left: 0;
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -19,7 +19,7 @@ var defaultProps = {
19
19
  };
20
20
  var classPrefix = 'nut-swiper';
21
21
  export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
22
- var _ref = _object_spread({}, defaultProps, props), width = _ref.width, height = _ref.height, className = _ref.className, children = _ref.children, indicator = _ref.indicator, indicatorDots = _ref.indicatorDots, loop = _ref.loop, circular = _ref.circular, autoPlay = _ref.autoPlay, autoplay = _ref.autoplay, duration = _ref.duration, vertical = _ref.vertical, direction = _ref.direction, defaultValue = _ref.defaultValue, current = _ref.current, onChange = _ref.onChange, style = _ref.style, rest = _object_without_properties(_ref, [
22
+ var _ref = _object_spread({}, defaultProps, props), width = _ref.width, height = _ref.height, className = _ref.className, children = _ref.children, indicator = _ref.indicator, indicatorDots = _ref.indicatorDots, loop = _ref.loop, circular = _ref.circular, autoPlay = _ref.autoPlay, autoplay = _ref.autoplay, vertical = _ref.vertical, direction = _ref.direction, defaultValue = _ref.defaultValue, current = _ref.current, onChange = _ref.onChange, style = _ref.style, rest = _object_without_properties(_ref, [
23
23
  "width",
24
24
  "height",
25
25
  "className",
@@ -30,7 +30,6 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
30
30
  "circular",
31
31
  "autoPlay",
32
32
  "autoplay",
33
- "duration",
34
33
  "vertical",
35
34
  "direction",
36
35
  "defaultValue",
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -134,9 +134,6 @@
134
134
  .nut-popup-center.nut-popup-round {
135
135
  border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
136
136
  }
137
- .nut-popup-bottom, .nut-popup-top {
138
- max-height: 87%;
139
- }
140
137
  .nut-popup-bottom {
141
138
  bottom: 0;
142
139
  left: 0;
@@ -34,6 +34,10 @@ export interface BasePopup extends BaseProps, BaseOverlay {
34
34
  */
35
35
  title?: ReactNode
36
36
  /**
37
+ * 頂部佔位
38
+ */
39
+ top?: ReactNode
40
+ /**
37
41
  * 子标题/描述部分
38
42
  */
39
43
  description?: ReactNode
@@ -50,6 +54,14 @@ export interface BasePopup extends BaseProps, BaseOverlay {
50
54
  */
51
55
  round: boolean
52
56
  /**
57
+ * 上下滑动调整高度,当前只支持从底部弹出
58
+ */
59
+ resizable: boolean
60
+ /**
61
+ * 设置最小高度
62
+ */
63
+ minHeight: string
64
+ /**
53
65
  * 打开弹框时触发
54
66
  */
55
67
  onOpen: () => void
@@ -65,4 +77,16 @@ export interface BasePopup extends BaseProps, BaseOverlay {
65
77
  * 点击关闭图标时触发
66
78
  */
67
79
  onCloseIconClick: (e: any) => boolean | void
80
+ /**
81
+ * 滑动时触发
82
+ */
83
+ onTouchMove: (height: number, e: any, direction: 'up' | 'down') => void
84
+ /**
85
+ * 开始触碰时触发
86
+ */
87
+ onTouchStart: (height: number, e: any) => void
88
+ /**
89
+ * 结束触碰时触发
90
+ */
91
+ onTouchEnd: (height: number, e: any) => void
68
92
  }