@nutui/nutui-react-taro 3.0.14 → 3.0.16

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 (90) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/packages/button/style/button.scss +3 -0
  3. package/dist/cjs/packages/button/style/style.css +3 -3
  4. package/dist/cjs/packages/button/style/style.harmony.css +12 -0
  5. package/dist/cjs/packages/button/style-jmapp/button.scss +3 -0
  6. package/dist/cjs/packages/button/style-jmapp/style.css +3 -3
  7. package/dist/cjs/packages/button/style-jrkf/button.scss +3 -0
  8. package/dist/cjs/packages/button/style-jrkf/style.css +3 -3
  9. package/dist/cjs/packages/calendarcard/calendarcard.js +10 -4
  10. package/dist/cjs/packages/calendaritem/calendaritem.d.ts +1 -1
  11. package/dist/cjs/packages/calendaritem/calendaritem.js +3 -3
  12. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  13. package/dist/cjs/packages/datepicker/utils.js +22 -37
  14. package/dist/cjs/packages/dialog/dialog.js +2 -7
  15. package/dist/cjs/packages/formitem/formitem.js +2 -2
  16. package/dist/cjs/packages/formitem/style/formitem.scss +14 -15
  17. package/dist/cjs/packages/formitem/style/style.css +9 -11
  18. package/dist/cjs/packages/formitem/style/style.harmony.css +8 -10
  19. package/dist/cjs/packages/formitem/style-jmapp/formitem.scss +14 -15
  20. package/dist/cjs/packages/formitem/style-jmapp/style.css +8 -10
  21. package/dist/cjs/packages/formitem/style-jrkf/formitem.scss +14 -15
  22. package/dist/cjs/packages/formitem/style-jrkf/style.css +8 -10
  23. package/dist/cjs/packages/imagepreview/imagepreview.js +25 -4
  24. package/dist/cjs/packages/noticebar/noticebar.js +66 -42
  25. package/dist/cjs/packages/overlay/style/overlay.scss +0 -1
  26. package/dist/cjs/packages/overlay/style/style.css +0 -1
  27. package/dist/cjs/packages/overlay/style/style.harmony.css +0 -1
  28. package/dist/cjs/packages/overlay/style-jmapp/overlay.scss +0 -1
  29. package/dist/cjs/packages/overlay/style-jmapp/style.css +0 -1
  30. package/dist/cjs/packages/overlay/style-jrkf/overlay.scss +0 -1
  31. package/dist/cjs/packages/overlay/style-jrkf/style.css +0 -1
  32. package/dist/cjs/packages/pickerview/pickerroller.js +9 -1
  33. package/dist/cjs/packages/swiper/index.d.ts +1 -1
  34. package/dist/cjs/packages/swiper/swiper.js +6 -0
  35. package/dist/cjs/types/spec/calendar/base.d.ts +3 -1
  36. package/dist/cjs/types/spec/calendarcard/base.d.ts +1 -0
  37. package/dist/cjs/types/spec/datepicker/base.d.ts +1 -1
  38. package/dist/cjs/types/spec/imagepreview/h5.d.ts +4 -1
  39. package/dist/cjs/types/spec/imagepreview/taro.d.ts +4 -1
  40. package/dist/cjs/utils/date.d.ts +2 -2
  41. package/dist/cjs/utils/date.js +2 -2
  42. package/dist/es/packages/button/style/button.scss +3 -0
  43. package/dist/es/packages/button/style/style.css +3 -3
  44. package/dist/es/packages/button/style/style.harmony.css +12 -0
  45. package/dist/es/packages/button/style-jmapp/button.scss +3 -0
  46. package/dist/es/packages/button/style-jmapp/style.css +3 -3
  47. package/dist/es/packages/button/style-jrkf/button.scss +3 -0
  48. package/dist/es/packages/button/style-jrkf/style.css +3 -3
  49. package/dist/es/packages/calendarcard/calendarcard.js +11 -5
  50. package/dist/es/packages/calendaritem/calendaritem.d.ts +1 -1
  51. package/dist/es/packages/calendaritem/calendaritem.js +3 -3
  52. package/dist/es/packages/configprovider/types.d.ts +1 -1
  53. package/dist/es/packages/datepicker/utils.js +22 -37
  54. package/dist/es/packages/dialog/dialog.js +2 -7
  55. package/dist/es/packages/formitem/formitem.js +2 -2
  56. package/dist/es/packages/formitem/style/formitem.scss +14 -15
  57. package/dist/es/packages/formitem/style/style.css +9 -11
  58. package/dist/es/packages/formitem/style/style.harmony.css +8 -10
  59. package/dist/es/packages/formitem/style-jmapp/formitem.scss +14 -15
  60. package/dist/es/packages/formitem/style-jmapp/style.css +8 -10
  61. package/dist/es/packages/formitem/style-jrkf/formitem.scss +14 -15
  62. package/dist/es/packages/formitem/style-jrkf/style.css +8 -10
  63. package/dist/es/packages/imagepreview/imagepreview.js +25 -4
  64. package/dist/es/packages/noticebar/noticebar.js +67 -43
  65. package/dist/es/packages/overlay/style/overlay.scss +0 -1
  66. package/dist/es/packages/overlay/style/style.css +0 -1
  67. package/dist/es/packages/overlay/style/style.harmony.css +0 -1
  68. package/dist/es/packages/overlay/style-jmapp/overlay.scss +0 -1
  69. package/dist/es/packages/overlay/style-jmapp/style.css +0 -1
  70. package/dist/es/packages/overlay/style-jrkf/overlay.scss +0 -1
  71. package/dist/es/packages/overlay/style-jrkf/style.css +0 -1
  72. package/dist/es/packages/pickerview/pickerroller.js +9 -1
  73. package/dist/es/packages/swiper/index.d.ts +1 -1
  74. package/dist/es/packages/swiper/swiper.js +7 -1
  75. package/dist/es/types/spec/calendar/base.d.ts +3 -1
  76. package/dist/es/types/spec/calendarcard/base.d.ts +4 -0
  77. package/dist/es/types/spec/datepicker/base.d.ts +1 -1
  78. package/dist/es/types/spec/imagepreview/h5.d.ts +4 -1
  79. package/dist/es/types/spec/imagepreview/taro.d.ts +4 -1
  80. package/dist/es/utils/date.d.ts +2 -2
  81. package/dist/es/utils/date.js +2 -2
  82. package/dist/nutui.react.umd.js +145 -101
  83. package/dist/style-jmapp.css +1 -1
  84. package/dist/style-jmapp.scss +40 -40
  85. package/dist/style-jrkf.css +1 -1
  86. package/dist/style-jrkf.scss +41 -41
  87. package/dist/style.css +1 -1
  88. package/dist/style.scss +37 -37
  89. package/dist/styles/variables.scss +1 -2
  90. package/package.json +1 -1
@@ -13,7 +13,7 @@
13
13
  .nut-form-item-label {
14
14
  display: flex;
15
15
  flex-direction: row;
16
- font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-base, 14px));
16
+ font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12px));
17
17
  font-weight: normal;
18
18
  width: var(--nutui-form-item-label-width, 90px);
19
19
  margin-right: var(--nutui-form-item-label-margin-right, 10px);
@@ -22,16 +22,21 @@
22
22
  text-align: var(--nutui-form-item-label-text-align, left);
23
23
  line-height: unset;
24
24
  }
25
- .nut-form-item-label-required {
25
+ .nut-form-item-label-left-required {
26
26
  color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
27
27
  margin-right: var(--nutui-form-item-required-margin-right, 4px);
28
- display: block;
29
28
  position: absolute;
30
29
  left: -10px;
31
30
  }
31
+ .nut-form-item-label-right-required {
32
+ color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
33
+ margin-left: var(--nutui-form-item-required-margin-right, 4px);
34
+ position: absolute;
35
+ right: -10px;
36
+ }
32
37
  .nut-form-item .nut-form-item-labeltxt {
33
38
  position: relative;
34
- font-size: 12px;
39
+ font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12px));
35
40
  }
36
41
  .nut-form-item-body {
37
42
  flex: 1;
@@ -121,13 +126,6 @@
121
126
  white-space: nowrap;
122
127
  }
123
128
 
124
- .nut-form-item-label-left-required {
125
- display: block;
126
- line-height: 1.5;
127
- position: absolute;
128
- left: 0.1em;
129
- }
130
-
131
129
  .nut-form-item-top {
132
130
  flex-direction: column;
133
131
  align-items: flex-start;
@@ -13,7 +13,7 @@
13
13
  .nut-form-item-label {
14
14
  display: flex;
15
15
  flex-direction: row;
16
- font-size: 14px;
16
+ font-size: 12px;
17
17
  font-weight: normal;
18
18
  width: 90px;
19
19
  margin-right: 10px;
@@ -22,13 +22,18 @@
22
22
  text-align: left;
23
23
  line-height: unset;
24
24
  }
25
- .nut-form-item-label-required {
25
+ .nut-form-item-label-left-required {
26
26
  color: #ff0f23;
27
27
  margin-right: 4px;
28
- display: block;
29
28
  position: absolute;
30
29
  left: -10px;
31
30
  }
31
+ .nut-form-item-label-right-required {
32
+ color: #ff0f23;
33
+ margin-left: 4px;
34
+ position: absolute;
35
+ right: -10px;
36
+ }
32
37
  .nut-form-item .nut-form-item-labeltxt {
33
38
  position: relative;
34
39
  font-size: 12px;
@@ -129,13 +134,6 @@
129
134
  white-space: nowrap;
130
135
  }
131
136
 
132
- .nut-form-item-label-left-required {
133
- display: block;
134
- line-height: 1.5;
135
- position: absolute;
136
- left: 0.1em;
137
- }
138
-
139
137
  .nut-form-item-top {
140
138
  flex-direction: column;
141
139
  align-items: flex-start;
@@ -18,19 +18,25 @@
18
18
  word-wrap: break-word;
19
19
  text-align: $form-item-label-text-align;
20
20
  line-height: unset;
21
- }
22
21
 
23
- &-label-required {
24
- color: $form-item-required-color;
25
- margin-right: $form-item-required-margin-right;
26
- display: block;
27
- position: absolute;
28
- left: -10px;
22
+ &-left-required {
23
+ color: $form-item-required-color;
24
+ margin-right: $form-item-required-margin-right;
25
+ position: absolute;
26
+ left: -10px;
27
+ }
28
+
29
+ &-right-required {
30
+ color: $form-item-required-color;
31
+ margin-left: $form-item-required-margin-right;
32
+ position: absolute;
33
+ right: -10px;
34
+ }
29
35
  }
30
36
 
31
37
  .nut-form-item-labeltxt {
32
38
  position: relative;
33
- font-size: 12px;
39
+ font-size: $form-item-label-font-size;
34
40
  }
35
41
 
36
42
  &-body {
@@ -136,13 +142,6 @@
136
142
  white-space: nowrap;
137
143
  }
138
144
 
139
- .nut-form-item-label-left-required {
140
- display: block;
141
- line-height: 1.5;
142
- position: absolute;
143
- left: 0.1em;
144
- }
145
-
146
145
  .nut-form-item-top {
147
146
  flex-direction: column;
148
147
  align-items: flex-start;
@@ -22,16 +22,21 @@
22
22
  text-align: var(--nutui-form-item-label-text-align, left);
23
23
  line-height: unset;
24
24
  }
25
- .nut-form-item-label-required {
25
+ .nut-form-item-label-left-required {
26
26
  color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
27
27
  margin-right: var(--nutui-form-item-required-margin-right, 4px);
28
- display: block;
29
28
  position: absolute;
30
29
  left: -10px;
31
30
  }
31
+ .nut-form-item-label-right-required {
32
+ color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
33
+ margin-left: var(--nutui-form-item-required-margin-right, 4px);
34
+ position: absolute;
35
+ right: -10px;
36
+ }
32
37
  .nut-form-item .nut-form-item-labeltxt {
33
38
  position: relative;
34
- font-size: 12px;
39
+ font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-text));
35
40
  }
36
41
  .nut-form-item-body {
37
42
  flex: 1;
@@ -121,13 +126,6 @@
121
126
  white-space: nowrap;
122
127
  }
123
128
 
124
- .nut-form-item-label-left-required {
125
- display: block;
126
- line-height: 1.5;
127
- position: absolute;
128
- left: 0.1em;
129
- }
130
-
131
129
  .nut-form-item-top {
132
130
  flex-direction: column;
133
131
  align-items: flex-start;
@@ -18,19 +18,25 @@
18
18
  word-wrap: break-word;
19
19
  text-align: $form-item-label-text-align;
20
20
  line-height: unset;
21
- }
22
21
 
23
- &-label-required {
24
- color: $form-item-required-color;
25
- margin-right: $form-item-required-margin-right;
26
- display: block;
27
- position: absolute;
28
- left: -10px;
22
+ &-left-required {
23
+ color: $form-item-required-color;
24
+ margin-right: $form-item-required-margin-right;
25
+ position: absolute;
26
+ left: -10px;
27
+ }
28
+
29
+ &-right-required {
30
+ color: $form-item-required-color;
31
+ margin-left: $form-item-required-margin-right;
32
+ position: absolute;
33
+ right: -10px;
34
+ }
29
35
  }
30
36
 
31
37
  .nut-form-item-labeltxt {
32
38
  position: relative;
33
- font-size: 12px;
39
+ font-size: $form-item-label-font-size;
34
40
  }
35
41
 
36
42
  &-body {
@@ -136,13 +142,6 @@
136
142
  white-space: nowrap;
137
143
  }
138
144
 
139
- .nut-form-item-label-left-required {
140
- display: block;
141
- line-height: 1.5;
142
- position: absolute;
143
- left: 0.1em;
144
- }
145
-
146
145
  .nut-form-item-top {
147
146
  flex-direction: column;
148
147
  align-items: flex-start;
@@ -22,16 +22,21 @@
22
22
  text-align: var(--nutui-form-item-label-text-align, left);
23
23
  line-height: unset;
24
24
  }
25
- .nut-form-item-label-required {
25
+ .nut-form-item-label-left-required {
26
26
  color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
27
27
  margin-right: var(--nutui-form-item-required-margin-right, 4px);
28
- display: block;
29
28
  position: absolute;
30
29
  left: -10px;
31
30
  }
31
+ .nut-form-item-label-right-required {
32
+ color: var(--nutui-form-item-required-color, var(--nutui-color-danger));
33
+ margin-left: var(--nutui-form-item-required-margin-right, 4px);
34
+ position: absolute;
35
+ right: -10px;
36
+ }
32
37
  .nut-form-item .nut-form-item-labeltxt {
33
38
  position: relative;
34
- font-size: 12px;
39
+ font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-text));
35
40
  }
36
41
  .nut-form-item-body {
37
42
  flex: 1;
@@ -121,13 +126,6 @@
121
126
  white-space: nowrap;
122
127
  }
123
128
 
124
- .nut-form-item-label-left-required {
125
- display: block;
126
- line-height: 1.5;
127
- position: absolute;
128
- left: 0.1em;
129
- }
130
-
131
129
  .nut-form-item-top {
132
130
  flex-direction: column;
133
131
  align-items: flex-start;
@@ -12,6 +12,7 @@ var _interop_require_default = require("@swc/helpers/_/_interop_require_default"
12
12
  var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
13
  var _object_spread = require("@swc/helpers/_/_object_spread");
14
14
  var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
15
+ var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
15
16
  var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
16
17
  var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
17
18
  var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -25,6 +26,7 @@ var _index2 = /*#__PURE__*/ _interop_require_default._(require("../swiper/index"
25
26
  var _index3 = /*#__PURE__*/ _interop_require_default._(require("../swiperitem/index"));
26
27
  var _typings = require("../../utils/typings");
27
28
  var _usepropsvalue = require("../../hooks/use-props-value");
29
+ var _utils = require("../../utils");
28
30
  var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
29
31
  images: [],
30
32
  videos: [],
@@ -42,7 +44,26 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
42
44
  onClose: function onClose() {}
43
45
  });
44
46
  var ImagePreview = function ImagePreview(props) {
45
- var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), value = _$_object_spread.value, className = _$_object_spread.className, style = _$_object_spread.style, images = _$_object_spread.images, videos = _$_object_spread.videos, visible = _$_object_spread.visible, defaultValue = _$_object_spread.defaultValue, indicatorColor = _$_object_spread.indicatorColor, pagination = _$_object_spread.pagination, indicator = _$_object_spread.indicator, autoPlay = _$_object_spread.autoPlay, closeOnContentClick = _$_object_spread.closeOnContentClick, closeIcon = _$_object_spread.closeIcon, closeIconPosition = _$_object_spread.closeIconPosition, showMenuByLongpress = _$_object_spread.showMenuByLongpress, onClose = _$_object_spread.onClose, onChange = _$_object_spread.onChange;
47
+ var _mergeProps = (0, _utils.mergeProps)(defaultProps, props), value = _mergeProps.value, className = _mergeProps.className, style = _mergeProps.style, images = _mergeProps.images, videos = _mergeProps.videos, visible = _mergeProps.visible, defaultValue = _mergeProps.defaultValue, indicatorColor = _mergeProps.indicatorColor, pagination = _mergeProps.pagination, indicator = _mergeProps.indicator, autoPlay = _mergeProps.autoPlay, loop = _mergeProps.loop, closeOnContentClick = _mergeProps.closeOnContentClick, closeIcon = _mergeProps.closeIcon, closeIconPosition = _mergeProps.closeIconPosition, showMenuByLongpress = _mergeProps.showMenuByLongpress, onClose = _mergeProps.onClose, onChange = _mergeProps.onChange, rest = (0, _object_without_properties._)(_mergeProps, [
48
+ "value",
49
+ "className",
50
+ "style",
51
+ "images",
52
+ "videos",
53
+ "visible",
54
+ "defaultValue",
55
+ "indicatorColor",
56
+ "pagination",
57
+ "indicator",
58
+ "autoPlay",
59
+ "loop",
60
+ "closeOnContentClick",
61
+ "closeIcon",
62
+ "closeIconPosition",
63
+ "showMenuByLongpress",
64
+ "onClose",
65
+ "onChange"
66
+ ]);
46
67
  var classPrefix = 'nut-imagepreview';
47
68
  var ref = (0, _react.useRef)(null);
48
69
  var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
@@ -183,9 +204,10 @@ var ImagePreview = function ImagePreview(props) {
183
204
  onTouchEnd: onTouchEnd,
184
205
  onTouchCancel: onTouchEnd
185
206
  }, /*#__PURE__*/ _react.default.createElement(_index2.default, {
186
- autoPlay: autoPlay,
207
+ autoplay: autoPlay,
208
+ loop: loop,
209
+ direction: "horizontal",
187
210
  className: "".concat(classPrefix, "-swiper"),
188
- loop: true,
189
211
  height: "100%",
190
212
  style: {
191
213
  display: showPop ? 'block' : 'none',
@@ -193,7 +215,6 @@ var ImagePreview = function ImagePreview(props) {
193
215
  width: '100%',
194
216
  height: '100%'
195
217
  },
196
- direction: "horizontal",
197
218
  onChange: function onChange(e) {
198
219
  return slideChangeEnd(e.detail.current);
199
220
  },
@@ -15,6 +15,7 @@ var _define_property = require("@swc/helpers/_/_define_property");
15
15
  var _object_spread = require("@swc/helpers/_/_object_spread");
16
16
  var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
17
17
  var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
18
+ var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
18
19
  var _ts_generator = require("@swc/helpers/_/_ts_generator");
19
20
  var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
20
21
  var _components = require("@tarojs/components");
@@ -59,9 +60,10 @@ var NoticeBar = function NoticeBar(props) {
59
60
  var _useState8 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), isCanScroll = _useState8[0], SetIsCanScroll = _useState8[1];
60
61
  var isVertical = direction === 'vertical';
61
62
  var _useState9 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), rect = _useState9[0], setRect = _useState9[1];
62
- var active = 0;
63
+ var activeRef = (0, _react.useRef)(0);
63
64
  var _useState10 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), ready = _useState10[0], setReady = _useState10[1];
64
65
  var container = (0, _react.useRef)(null);
66
+ var _useState11 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isContainerReady = _useState11[0], setIsContainerReady = _useState11[1];
65
67
  var innerRef = (0, _react.useRef)(null);
66
68
  var swiperRef = (0, _react.useRef)({
67
69
  moving: false,
@@ -71,8 +73,8 @@ var NoticeBar = function NoticeBar(props) {
71
73
  offset: 0,
72
74
  size: 0
73
75
  });
74
- var _useState11 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), childOffset = _useState11[0], setChildOffset = _useState11[1];
75
- var _useState12 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), offset = _useState12[0], setOffset = _useState12[1];
76
+ var _useState12 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), childOffset = _useState12[0], setChildOffset = _useState12[1];
77
+ var _useState13 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), offset = _useState13[0], setOffset = _useState13[1];
76
78
  var _useMemo = (0, _react.useMemo)(function() {
77
79
  var childCount = 0;
78
80
  var childs = _react.default.Children.map(children, function(child) {
@@ -112,7 +114,9 @@ var NoticeBar = function NoticeBar(props) {
112
114
  // 销毁事件
113
115
  clearInterval(timer);
114
116
  };
115
- }, []);
117
+ }, [
118
+ childs
119
+ ]);
116
120
  (0, _react.useEffect)(function() {
117
121
  initScrollWrap(content);
118
122
  }, [
@@ -231,7 +235,7 @@ var NoticeBar = function NoticeBar(props) {
231
235
  };
232
236
  // 垂直自定义滚动方式
233
237
  var init = function init() {
234
- var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : +0;
238
+ var activeIndex = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
235
239
  if (!(container === null || container === void 0 ? void 0 : container.current)) return;
236
240
  setTimeout(/*#__PURE__*/ (0, _async_to_generator._)(function() {
237
241
  var rects, _active, _height, targetOffset;
@@ -244,17 +248,18 @@ var NoticeBar = function NoticeBar(props) {
244
248
  ];
245
249
  case 1:
246
250
  rects = _state.sent();
247
- _active = Math.max(Math.min(childCount - 1, active), 0);
251
+ _active = Math.max(Math.min(childCount - 1, activeIndex), 0);
248
252
  _height = rects === null || rects === void 0 ? void 0 : rects.height;
249
253
  trackSize = childCount * Number(_height);
250
254
  targetOffset = getOffset(_active);
251
- swiperRef.current.moving = true;
252
- if (ready) {
253
- swiperRef.current.moving = false;
254
- }
255
- active = _active;
255
+ activeRef.current = _active;
256
256
  setRect(rects);
257
257
  setOffset(targetOffset);
258
+ setChildOffset(new Array(childCount).fill(0));
259
+ // 关闭动画并立即设置样式
260
+ swiperRef.current.moving = true;
261
+ setStyle(targetOffset, rects);
262
+ swiperRef.current.moving = false;
258
263
  setReady(true);
259
264
  return [
260
265
  2
@@ -265,7 +270,6 @@ var NoticeBar = function NoticeBar(props) {
265
270
  };
266
271
  (0, _react.useEffect)(function() {
267
272
  if (ready) {
268
- stopAutoPlay();
269
273
  autoplay();
270
274
  }
271
275
  return function() {
@@ -275,18 +279,19 @@ var NoticeBar = function NoticeBar(props) {
275
279
  ready
276
280
  ]);
277
281
  (0, _react.useEffect)(function() {
278
- if (isVertical && children) {
279
- init();
282
+ if (isVertical && children && isContainerReady) {
280
283
  stopAutoPlay();
281
- autoplay();
284
+ setReady(false);
285
+ init();
282
286
  }
283
287
  }, [
284
288
  children,
285
- container === null || container === void 0 ? void 0 : container.current
289
+ isContainerReady
286
290
  ]);
287
291
  // 清除定时器
288
292
  var stopAutoPlay = function stopAutoPlay() {
289
293
  clearTimeout(swiperRef.current.autoplayTimer);
294
+ swiperRef.current.moving = false;
290
295
  swiperRef.current.autoplayTimer = null;
291
296
  };
292
297
  // 定时轮播
@@ -305,23 +310,26 @@ var NoticeBar = function NoticeBar(props) {
305
310
  var targetActive = getActive(pace);
306
311
  // 父级容器偏移量
307
312
  var targetOffset = getOffset(targetActive, offset);
308
- // 如果循环,调整开头结尾图片位置
309
- if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
310
- var rightBound = targetOffset < minOffset;
311
- childOffset[0] = rightBound ? trackSize : 0;
312
- }
313
- if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
314
- var leftBound = targetOffset > 0;
315
- childOffset[childCount - 1] = leftBound ? -trackSize : 0;
316
- }
317
- setChildOffset(childOffset);
318
- active = targetActive;
313
+ // 循环滚动,调整开头结尾图片位置
314
+ setChildOffset(function(prevChildOffset) {
315
+ var newChildOffset = (0, _to_consumable_array._)(prevChildOffset);
316
+ if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
317
+ var rightBound = targetOffset < minOffset;
318
+ newChildOffset[0] = rightBound ? trackSize : 0;
319
+ }
320
+ if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
321
+ var leftBound = targetOffset > 0;
322
+ newChildOffset[childCount - 1] = leftBound ? -trackSize : 0;
323
+ }
324
+ return newChildOffset;
325
+ });
326
+ activeRef.current = targetActive;
319
327
  setOffset(targetOffset);
320
- getStyle(targetOffset);
328
+ setStyle(targetOffset);
321
329
  };
322
330
  // 下一页
323
331
  var next = function next() {
324
- resettPosition();
332
+ resetPosition();
325
333
  requestFrame(function() {
326
334
  requestFrame(function() {
327
335
  swiperRef.current.moving = false;
@@ -334,18 +342,18 @@ var NoticeBar = function NoticeBar(props) {
334
342
  var handleItemClick = function handleItemClick(event, value) {
335
343
  onItemClick && onItemClick(event, value);
336
344
  };
337
- var getStyle = function getStyle() {
338
- var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset;
345
+ var setStyle = function setStyle() {
346
+ var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset, currentRect = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : rect;
339
347
  var target = innerRef.current;
340
348
  if (!target) {
341
349
  return;
342
350
  }
343
351
  var _offset = 0;
344
- // 容器高度-元素高度
345
- var val = ((rect === null || rect === void 0 ? void 0 : rect.height) || 0) - height;
346
- _offset = moveOffset + Number(active === childCount - 1 && val / 2);
352
+ var containerHeight = (currentRect === null || currentRect === void 0 ? void 0 : currentRect.height) || height;
353
+ var val = containerHeight - Number(height);
354
+ _offset = moveOffset + Number(activeRef.current === childCount - 1 && val / 2);
347
355
  target.style.transitionDuration = "".concat(swiperRef.current.moving ? 0 : duration, "ms");
348
- target.style.height = "".concat(Number(height) * childCount, "px");
356
+ target.style.height = "".concat(Number(height) * (childCount + 1), "px");
349
357
  target.style.transform = "translate3D(0,".concat(_offset, "px,0)");
350
358
  };
351
359
  // 无缝滚动第一个元素位移控制
@@ -363,11 +371,12 @@ var NoticeBar = function NoticeBar(props) {
363
371
  };
364
372
  // 确定当前active 元素
365
373
  var getActive = function getActive(pace) {
374
+ var currentActive = activeRef.current;
366
375
  if (pace) {
367
- var _active = active + pace;
376
+ var _active = currentActive + pace;
368
377
  return range(_active, -1, childCount);
369
378
  }
370
- return active;
379
+ return currentActive;
371
380
  };
372
381
  // 计算位移
373
382
  var getOffset = function getOffset(active) {
@@ -385,14 +394,15 @@ var NoticeBar = function NoticeBar(props) {
385
394
  return Math.min(Math.max(num, min), max);
386
395
  };
387
396
  // 重置首尾位置信息
388
- var resettPosition = function resettPosition() {
397
+ var resetPosition = function resetPosition() {
398
+ var currentActive = activeRef.current;
389
399
  swiperRef.current.moving = true;
390
- if (active <= -1) {
400
+ if (currentActive <= -1) {
391
401
  move({
392
402
  pace: childCount
393
403
  });
394
404
  }
395
- if (active >= childCount) {
405
+ if (currentActive >= childCount) {
396
406
  move({
397
407
  pace: -childCount
398
408
  });
@@ -406,6 +416,20 @@ var NoticeBar = function NoticeBar(props) {
406
416
  stopAutoPlay();
407
417
  };
408
418
  }, []);
419
+ var hasVerticalContent = (0, _react.useMemo)(function() {
420
+ if (!isVertical) return false;
421
+ if (children) return (childs === null || childs === void 0 ? void 0 : childs.length) > 0;
422
+ return (list === null || list === void 0 ? void 0 : list.length) > 0;
423
+ }, [
424
+ isVertical,
425
+ childs,
426
+ list,
427
+ children
428
+ ]);
429
+ var containerRefCallback = (0, _react.useCallback)(function(ref) {
430
+ container.current = ref;
431
+ setIsContainerReady(true);
432
+ }, []);
409
433
  return /*#__PURE__*/ _react.default.createElement(_components.View, {
410
434
  className: cls,
411
435
  style: style
@@ -430,10 +454,10 @@ var NoticeBar = function NoticeBar(props) {
430
454
  onClick: onClickIcon
431
455
  }, rightIcon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
432
456
  size: 12
433
- })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /*#__PURE__*/ _react.default.createElement(_components.View, {
457
+ })) : null) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ _react.default.createElement(_components.View, {
434
458
  className: "nut-noticebar-vertical",
435
459
  style: barStyle,
436
- ref: container,
460
+ ref: containerRefCallback,
437
461
  onClick: handleClick
438
462
  }, leftIcon ? /*#__PURE__*/ _react.default.createElement(_components.View, {
439
463
  className: "nut-noticebar-box-left-icon"
@@ -7,7 +7,6 @@
7
7
  width: 100%;
8
8
  height: 100%;
9
9
  background-color: $overlay-bg-color;
10
- z-index: $overlay-zIndex;
11
10
  }
12
11
 
13
12
  .nut-overflow-hidden {
@@ -11,7 +11,6 @@
11
11
  width: 100%;
12
12
  height: 100%;
13
13
  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
14
- z-index: var(--nutui-overlay-zIndex, 1000);
15
14
  }
16
15
 
17
16
  .nut-overflow-hidden {
@@ -11,7 +11,6 @@
11
11
  width: 100%;
12
12
  height: 100%;
13
13
  background-color: rgba(0, 0, 0, 0.7);
14
- z-index: 1000;
15
14
  }
16
15
 
17
16
  .nut-overflow-hidden {
@@ -7,7 +7,6 @@
7
7
  width: 100%;
8
8
  height: 100%;
9
9
  background-color: $overlay-bg-color;
10
- z-index: $overlay-zIndex;
11
10
  }
12
11
 
13
12
  .nut-overflow-hidden {
@@ -11,7 +11,6 @@
11
11
  width: 100%;
12
12
  height: 100%;
13
13
  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-surface-overlay));
14
- z-index: var(--nutui-overlay-zIndex, 1000);
15
14
  }
16
15
 
17
16
  .nut-overflow-hidden {
@@ -7,7 +7,6 @@
7
7
  width: 100%;
8
8
  height: 100%;
9
9
  background-color: $overlay-bg-color;
10
- z-index: $overlay-zIndex;
11
10
  }
12
11
 
13
12
  .nut-overflow-hidden {
@@ -11,7 +11,6 @@
11
11
  width: 100%;
12
12
  height: 100%;
13
13
  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-surface-overlay));
14
- z-index: var(--nutui-overlay-zIndex, 1000);
15
14
  }
16
15
 
17
16
  .nut-overflow-hidden {
@@ -79,7 +79,9 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
79
79
  var selectValue = function selectValue(move) {
80
80
  onSelect === null || onSelect === void 0 ? void 0 : onSelect(options === null || options === void 0 ? void 0 : options[Math.round(-move / lineSpacing.current)], keyIndex);
81
81
  };
82
+ var isScroll = (0, _react.useRef)(false);
82
83
  var handleTouchStart = function handleTouchStart(event) {
84
+ isScroll.current = true;
83
85
  touch.start(event);
84
86
  setStartY(touch.deltaY.current);
85
87
  setStartTime(Date.now());
@@ -104,6 +106,7 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
104
106
  } else {
105
107
  handleMove(move, 'end');
106
108
  }
109
+ isScroll.current = false;
107
110
  setTimeout(function() {
108
111
  touch.reset();
109
112
  }, 0);
@@ -223,6 +226,11 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
223
226
  handleTouchMove,
224
227
  handleTouchEnd
225
228
  ]);
229
+ var onTransitionEnd = function onTransitionEnd() {
230
+ if (!isScroll.current) {
231
+ stopMomentumScroll();
232
+ }
233
+ };
226
234
  return /*#__PURE__*/ _react.default.createElement(_components.View, {
227
235
  className: "nut-pickerview-list",
228
236
  ref: pickerRollerRef
@@ -235,7 +243,7 @@ var InternalPickerRoller = function InternalPickerRoller(props, ref) {
235
243
  id: "".concat(classPrefix, "-").concat(uuid),
236
244
  ref: rollerRef,
237
245
  style: threeDimensional ? touchRollerStyle() : touchTiledStyle(),
238
- onTransitionEnd: stopMomentumScroll
246
+ onTransitionEnd: onTransitionEnd
239
247
  }, threeDimensional && options.map(function(item, index) {
240
248
  var _item_value;
241
249
  var _obj;