@nutui/nutui-react 3.0.4 → 3.0.5

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 (64) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/packages/badge/style/badge.scss +3 -8
  3. package/dist/cjs/packages/badge/style/style.css +4 -9
  4. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  5. package/dist/cjs/packages/datepicker/style/style.css +0 -1
  6. package/dist/cjs/packages/datepickerview/style/style.css +0 -1
  7. package/dist/cjs/packages/empty/style/index.js +1 -0
  8. package/dist/cjs/packages/empty/style/style.css +389 -0
  9. package/dist/cjs/packages/fixednav/fixednav.js +3 -2
  10. package/dist/cjs/packages/fixednav/style/fixednav.scss +43 -39
  11. package/dist/cjs/packages/fixednav/style/style.css +47 -45
  12. package/dist/cjs/packages/imagepreview/imagepreview.js +49 -84
  13. package/dist/cjs/packages/imagepreview/style/imagepreview.scss +2 -1
  14. package/dist/cjs/packages/imagepreview/style/style.css +2 -1
  15. package/dist/cjs/packages/inputnumber/inputnumber.js +2 -2
  16. package/dist/cjs/packages/notify/Notification.js +1 -1
  17. package/dist/cjs/packages/nutui.react.d.ts +1 -0
  18. package/dist/cjs/packages/nutui.react.js +1 -0
  19. package/dist/cjs/packages/picker/style/style.css +0 -1
  20. package/dist/cjs/packages/pickerview/pickerroller.js +11 -6
  21. package/dist/cjs/packages/pickerview/style/pickerview.scss +0 -1
  22. package/dist/cjs/packages/pickerview/style/style.css +0 -1
  23. package/dist/cjs/packages/resultpage/style/index.js +1 -0
  24. package/dist/cjs/packages/resultpage/style/style.css +389 -0
  25. package/dist/cjs/packages/tabbar/style/style.css +4 -9
  26. package/dist/cjs/packages/tabbaritem/style/style.css +4 -9
  27. package/dist/cjs/packages/toast/Notification.js +1 -1
  28. package/dist/es/packages/badge/style/badge.scss +3 -8
  29. package/dist/es/packages/badge/style/style.css +4 -9
  30. package/dist/es/packages/configprovider/types.d.ts +1 -1
  31. package/dist/es/packages/datepicker/style/style.css +0 -1
  32. package/dist/es/packages/datepickerview/style/style.css +0 -1
  33. package/dist/es/packages/empty/style/index.js +1 -0
  34. package/dist/es/packages/empty/style/style.css +389 -0
  35. package/dist/es/packages/fixednav/fixednav.js +3 -2
  36. package/dist/es/packages/fixednav/style/fixednav.scss +43 -39
  37. package/dist/es/packages/fixednav/style/style.css +47 -45
  38. package/dist/es/packages/imagepreview/imagepreview.js +49 -84
  39. package/dist/es/packages/imagepreview/style/imagepreview.scss +2 -1
  40. package/dist/es/packages/imagepreview/style/style.css +2 -1
  41. package/dist/es/packages/inputnumber/inputnumber.js +2 -2
  42. package/dist/es/packages/notify/Notification.js +1 -1
  43. package/dist/es/packages/picker/style/style.css +0 -1
  44. package/dist/es/packages/pickerview/pickerroller.js +10 -6
  45. package/dist/es/packages/pickerview/style/pickerview.scss +0 -1
  46. package/dist/es/packages/pickerview/style/style.css +0 -1
  47. package/dist/es/packages/resultpage/style/index.js +1 -0
  48. package/dist/es/packages/resultpage/style/style.css +389 -0
  49. package/dist/es/packages/tabbar/style/style.css +4 -9
  50. package/dist/es/packages/tabbaritem/style/style.css +4 -9
  51. package/dist/es/packages/toast/Notification.js +1 -1
  52. package/dist/nutui.react.umd.js +60 -89
  53. package/dist/style.css +1 -1
  54. package/dist/style.scss +47 -47
  55. package/dist/styles/theme-dark.scss +2 -0
  56. package/dist/styles/theme-default.scss +2 -0
  57. package/dist/styles/themes/dark.css +1 -1
  58. package/dist/styles/themes/default.css +1 -1
  59. package/dist/styles/themes/jmapp.css +1 -1
  60. package/dist/styles/themes/jrkf.css +1 -1
  61. package/dist/styles/variables-jmapp.scss +1 -0
  62. package/dist/styles/variables-jrkf.scss +1 -0
  63. package/dist/styles/variables.scss +2 -1
  64. package/package.json +1 -1
@@ -3,7 +3,6 @@
3
3
  z-index: $fixednav-index;
4
4
  display: inline-block;
5
5
  height: 50px;
6
- right: 0;
7
6
 
8
7
  &.active {
9
8
  .nut-fixednav-btn {
@@ -16,9 +15,9 @@
16
15
  transform: translateX(0%) !important;
17
16
  }
18
17
 
19
- &.left {
18
+ &.nut-fixednav-left {
20
19
  .nut-icon {
21
- transform: rotate(0deg) !important;
20
+ transform: rotate(0deg);
22
21
  }
23
22
  }
24
23
  }
@@ -26,13 +25,10 @@
26
25
  &-btn {
27
26
  box-sizing: border-box;
28
27
  position: absolute;
29
- right: 0;
30
-
31
28
  z-index: $fixednav-index;
32
29
  width: 70px;
33
30
  height: 100%;
34
31
  background: $fixednav-button-background;
35
- border-radius: 45px 0px 0px 45px;
36
32
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
37
33
  display: flex;
38
34
  align-items: center;
@@ -47,33 +43,21 @@
47
43
  }
48
44
 
49
45
  .nut-icon {
50
- margin-right: 5px;
51
- transition: all 0.3s;
52
- transform: rotate(0deg);
53
46
  transition: all 0.3s;
54
47
  }
55
48
  }
56
49
 
57
50
  &-list {
58
51
  position: absolute;
59
- right: 0;
60
- transform: translateX(100%);
61
52
  transition: all 0.5s;
62
-
63
53
  z-index: $fixednav-index;
64
54
  flex-shrink: 0;
65
55
  height: 100%;
66
56
  background: $fixednav-background-color;
67
57
  display: flex;
68
58
  justify-content: space-between;
69
- border-radius: 25px 0px 0px 25px;
70
59
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
71
60
 
72
- padding: {
73
- left: 20px;
74
- right: 80px;
75
- }
76
-
77
61
  &-item {
78
62
  position: relative;
79
63
  flex: 1;
@@ -86,57 +70,77 @@
86
70
  flex-shrink: 0;
87
71
  color: $fixednav-color;
88
72
 
89
- img {
90
- width: 20px;
91
- height: 20px;
92
- margin-bottom: 2px;
93
- }
94
-
95
73
  .nut-fixednav-list-text {
96
74
  font-size: 10px;
97
75
  }
98
76
  }
77
+
78
+ &-image {
79
+ width: 20px;
80
+ height: 20px;
81
+ margin-bottom: 2px;
82
+ }
99
83
  }
100
84
 
101
- &.left {
102
- right: auto;
103
- left: 0;
85
+ &-right {
86
+ right: 0;
87
+ .nut-fixednav-btn {
88
+ right: 0;
89
+ border-radius: 45px 0px 0px 45px;
90
+ .nut-icon {
91
+ margin-right: 5px;
92
+ transform: rotate(0deg);
93
+ }
94
+ }
95
+ .nut-fixednav-list {
96
+ right: 0;
97
+ transform: translateX(100%);
98
+ border-radius: 25px 0px 0px 25px;
99
+ padding: {
100
+ left: 20px;
101
+ right: 80px;
102
+ }
103
+ }
104
+ }
104
105
 
106
+ &-left {
107
+ left: 0;
105
108
  .nut-fixednav-btn {
106
109
  flex-direction: row-reverse;
107
- right: auto;
108
110
  left: 0;
109
111
  border-radius: 0 45px 45px 0;
110
-
111
112
  .nut-icon {
112
- transform: rotate(180deg);
113
- margin-right: 0px;
114
113
  margin-left: 5px;
114
+ transform: rotate(180deg);
115
115
  }
116
116
  }
117
117
 
118
118
  .nut-fixednav-list {
119
119
  transform: translateX(-100%);
120
- right: auto;
120
+ left: 0;
121
121
  border-radius: 0px 25px 25px 0px;
122
-
123
122
  padding: {
124
123
  left: 80px;
125
124
  right: 20px;
126
125
  }
127
-
128
- margin: 0;
129
126
  }
130
127
  }
131
128
  }
132
129
 
133
130
  [dir='rtl'] .nut-fixednav,
134
131
  .nut-rtl .nut-fixednav {
135
- right: auto;
136
- left: 0;
132
+ &-right {
133
+ right: auto;
134
+ left: 0;
135
+ }
137
136
  &.active {
138
137
  .nut-icon {
139
- transform: rotate(-180deg);
138
+ transform: rotate(0deg);
139
+ }
140
+ &.nut-fixednav-left {
141
+ .nut-icon {
142
+ transform: rotate(-180deg);
143
+ }
140
144
  }
141
145
  }
142
146
 
@@ -171,7 +175,7 @@
171
175
  }
172
176
  }
173
177
 
174
- &.left {
178
+ &-left {
175
179
  left: auto;
176
180
  right: 0;
177
181
 
@@ -60,6 +60,8 @@
60
60
  .nut-badge {
61
61
  position: relative;
62
62
  display: inline-flex;
63
+ vertical-align: middle;
64
+ box-sizing: content-box;
63
65
  width: auto;
64
66
  }
65
67
  .nut-badge-icon {
@@ -92,13 +94,12 @@
92
94
  }
93
95
  .nut-badge-sup {
94
96
  display: inline-flex;
95
- justify-content: center;
96
- height: var(--nutui-badge-height, 14px);
97
+ text-align: center;
97
98
  min-width: var(--nutui-badge-min-width, 6px);
98
99
  padding: var(--nutui-badge-padding, 1px 4px);
99
100
  box-sizing: border-box;
100
101
  color: var(--nutui-badge-color, #ffffff);
101
- font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
102
+ font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
102
103
  line-height: 12px;
103
104
  white-space: nowrap;
104
105
  font-weight: normal;
@@ -108,12 +109,6 @@
108
109
  }
109
110
  .nut-badge-number {
110
111
  font-family: "JD";
111
- /* #ifdef harmony */
112
- line-height: 12px;
113
- /* #endif */
114
- /* #ifndef harmony */
115
- line-height: 13px;
116
- /* #endif */
117
112
  }
118
113
  .nut-badge-one {
119
114
  height: var(--nutui-badge-height, 14px);
@@ -159,7 +154,6 @@
159
154
  z-index: var(--nutui-fixednav-index, 900);
160
155
  display: inline-block;
161
156
  height: 50px;
162
- right: 0;
163
157
  }
164
158
  .nut-fixednav.active .nut-fixednav-btn .nut-icon {
165
159
  transform: rotate(180deg);
@@ -167,18 +161,16 @@
167
161
  .nut-fixednav.active .nut-fixednav-list {
168
162
  transform: translateX(0%) !important;
169
163
  }
170
- .nut-fixednav.active.left .nut-icon {
171
- transform: rotate(0deg) !important;
164
+ .nut-fixednav.active.nut-fixednav-left .nut-icon {
165
+ transform: rotate(0deg);
172
166
  }
173
167
  .nut-fixednav-btn {
174
168
  box-sizing: border-box;
175
169
  position: absolute;
176
- right: 0;
177
170
  z-index: var(--nutui-fixednav-index, 900);
178
171
  width: 70px;
179
172
  height: 100%;
180
173
  background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23));
181
- border-radius: 45px 0px 0px 45px;
182
174
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
183
175
  display: flex;
184
176
  align-items: center;
@@ -192,15 +184,10 @@
192
184
  flex-shrink: 0;
193
185
  }
194
186
  .nut-fixednav-btn .nut-icon {
195
- margin-right: 5px;
196
- transition: all 0.3s;
197
- transform: rotate(0deg);
198
187
  transition: all 0.3s;
199
188
  }
200
189
  .nut-fixednav-list {
201
190
  position: absolute;
202
- right: 0;
203
- transform: translateX(100%);
204
191
  transition: all 0.5s;
205
192
  z-index: var(--nutui-fixednav-index, 900);
206
193
  flex-shrink: 0;
@@ -208,10 +195,7 @@
208
195
  background: var(--nutui-fixednav-background-color, #ffffff);
209
196
  display: flex;
210
197
  justify-content: space-between;
211
- border-radius: 25px 0px 0px 25px;
212
198
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
213
- padding-left: 20px;
214
- padding-right: 80px;
215
199
  }
216
200
  .nut-fixednav-list-item {
217
201
  position: relative;
@@ -225,45 +209,63 @@
225
209
  flex-shrink: 0;
226
210
  color: var(--nutui-fixednav-color, #1a1a1a);
227
211
  }
228
- .nut-fixednav-list-item img {
212
+ .nut-fixednav-list-item .nut-fixednav-list-text {
213
+ font-size: 10px;
214
+ }
215
+ .nut-fixednav-list-image {
229
216
  width: 20px;
230
217
  height: 20px;
231
218
  margin-bottom: 2px;
232
219
  }
233
- .nut-fixednav-list-item .nut-fixednav-list-text {
234
- font-size: 10px;
220
+ .nut-fixednav-right {
221
+ right: 0;
235
222
  }
236
- .nut-fixednav.left {
237
- right: auto;
223
+ .nut-fixednav-right .nut-fixednav-btn {
224
+ right: 0;
225
+ border-radius: 45px 0px 0px 45px;
226
+ }
227
+ .nut-fixednav-right .nut-fixednav-btn .nut-icon {
228
+ margin-right: 5px;
229
+ transform: rotate(0deg);
230
+ }
231
+ .nut-fixednav-right .nut-fixednav-list {
232
+ right: 0;
233
+ transform: translateX(100%);
234
+ border-radius: 25px 0px 0px 25px;
235
+ padding-left: 20px;
236
+ padding-right: 80px;
237
+ }
238
+ .nut-fixednav-left {
238
239
  left: 0;
239
240
  }
240
- .nut-fixednav.left .nut-fixednav-btn {
241
+ .nut-fixednav-left .nut-fixednav-btn {
241
242
  flex-direction: row-reverse;
242
- right: auto;
243
243
  left: 0;
244
244
  border-radius: 0 45px 45px 0;
245
245
  }
246
- .nut-fixednav.left .nut-fixednav-btn .nut-icon {
247
- transform: rotate(180deg);
248
- margin-right: 0px;
246
+ .nut-fixednav-left .nut-fixednav-btn .nut-icon {
249
247
  margin-left: 5px;
248
+ transform: rotate(180deg);
250
249
  }
251
- .nut-fixednav.left .nut-fixednav-list {
250
+ .nut-fixednav-left .nut-fixednav-list {
252
251
  transform: translateX(-100%);
253
- right: auto;
252
+ left: 0;
254
253
  border-radius: 0px 25px 25px 0px;
255
254
  padding-left: 80px;
256
255
  padding-right: 20px;
257
- margin: 0;
258
256
  }
259
257
 
260
- [dir=rtl] .nut-fixednav,
261
- .nut-rtl .nut-fixednav {
258
+ [dir=rtl] .nut-fixednav-right,
259
+ .nut-rtl .nut-fixednav-right {
262
260
  right: auto;
263
261
  left: 0;
264
262
  }
265
263
  [dir=rtl] .nut-fixednav.active .nut-icon,
266
264
  .nut-rtl .nut-fixednav.active .nut-icon {
265
+ transform: rotate(0deg);
266
+ }
267
+ [dir=rtl] .nut-fixednav.active.nut-fixednav-left .nut-icon,
268
+ .nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon {
267
269
  transform: rotate(-180deg);
268
270
  }
269
271
  [dir=rtl] .nut-fixednav-btn,
@@ -293,25 +295,25 @@
293
295
  right: auto;
294
296
  left: 0;
295
297
  }
296
- [dir=rtl] .nut-fixednav.left,
297
- .nut-rtl .nut-fixednav.left {
298
+ [dir=rtl] .nut-fixednav-left,
299
+ .nut-rtl .nut-fixednav-left {
298
300
  left: auto;
299
301
  right: 0;
300
302
  }
301
- [dir=rtl] .nut-fixednav.left .nut-fixednav-btn,
302
- .nut-rtl .nut-fixednav.left .nut-fixednav-btn {
303
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-btn,
304
+ .nut-rtl .nut-fixednav-left .nut-fixednav-btn {
303
305
  left: auto;
304
306
  right: 0;
305
307
  border-radius: 45px 0 0 45px;
306
308
  }
307
- [dir=rtl] .nut-fixednav.left .nut-fixednav-btn .nut-icon,
308
- .nut-rtl .nut-fixednav.left .nut-fixednav-btn .nut-icon {
309
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-btn .nut-icon,
310
+ .nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon {
309
311
  transform: rotate(0deg);
310
312
  margin-right: 5px;
311
313
  margin-left: 0px;
312
314
  }
313
- [dir=rtl] .nut-fixednav.left .nut-fixednav-list,
314
- .nut-rtl .nut-fixednav.left .nut-fixednav-list {
315
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-list,
316
+ .nut-rtl .nut-fixednav-left .nut-fixednav-list {
315
317
  transform: translateX(100%);
316
318
  right: auto;
317
319
  left: auto;
@@ -1,6 +1,7 @@
1
1
  import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
2
2
  import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
3
3
  import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
4
+ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
4
5
  import React, { useEffect, useRef, useState } from "react";
5
6
  import classNames from "classnames";
6
7
  import { Close } from "@nutui/icons-react";
@@ -23,7 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
23
24
  indicatorColor: '#fff',
24
25
  closeIcon: false,
25
26
  closeIconPosition: 'top-right',
26
- onChange: function(value) {},
27
+ onChange: function() {},
27
28
  onClose: function() {}
28
29
  });
29
30
  export var ImagePreview = function(props) {
@@ -34,81 +35,59 @@ export var ImagePreview = function(props) {
34
35
  value: value,
35
36
  defaultValue: defaultValue,
36
37
  finalValue: defaultValue,
37
- onChange: function(val) {
38
- onChange === null || onChange === void 0 ? void 0 : onChange(val);
39
- }
38
+ onChange: onChange
40
39
  }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
41
40
  var _useState = _sliced_to_array(useState(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
42
41
  var _useState1 = _sliced_to_array(useState(0), 2), active = _useState1[0], setActive = _useState1[1];
43
- var _useState2 = _sliced_to_array(useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
42
+ var _useState2 = _sliced_to_array(useState(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
44
43
  var _useState3 = _sliced_to_array(useState({
45
44
  scale: 1,
46
- moveable: false
45
+ moveable: false,
46
+ oriDistance: 0,
47
+ originScale: 1
47
48
  }), 2), store = _useState3[0], setStore = _useState3[1];
48
- var _useState4 // 用来辅助监听双击
49
- = _sliced_to_array(useState(0), 2), lastTouchEndTime = _useState4[0], setLastTouchEndTime = _useState4[1];
49
+ var lastTouchEndTime = useRef(0) // 用来辅助监听双击
50
+ ;
50
51
  var onTouchStart = function(event) {
51
52
  var touches = event.touches;
52
53
  var events = touches[0];
53
54
  var events2 = touches[1];
54
- // 如果已经放大,双击应变回原尺寸;如果是原尺寸,双击应放大
55
- var curTouchTime = new Date().getTime();
56
- if (curTouchTime - lastTouchEndTime < 300) {
55
+ // 如果是原尺寸,双击放大;否则回到原尺寸。
56
+ var curTouchTime = Date.now();
57
+ if (curTouchTime - lastTouchEndTime.current < 100) {
57
58
  var store1 = store;
58
- if (store1.scale > 1) {
59
- store1.scale = 1;
60
- } else if (store1.scale === 1) {
61
- store1.scale = 2;
62
- }
59
+ store1.scale = store1.scale === 1 ? 2 : 1;
63
60
  scaleNow();
64
61
  }
65
62
  var store11 = store;
66
63
  store11.moveable = true;
67
64
  if (events2) {
68
65
  // 如果开始两指操作,记录初始时刻两指间的距离
69
- store11.oriDistance = getDistance({
70
- x: events.pageX,
71
- y: events.pageY
72
- }, {
73
- x: events2.pageX,
74
- y: events2.pageY
75
- });
66
+ store11.oriDistance = getDistance(events, events2);
76
67
  }
77
68
  // 取到开始两指操作时的放大(缩小比例),store.scale 存储的是当前的放缩比(相对于标准大小 scale 为 1 的情况的放大缩小比)
78
- store11.originScale = store11.scale || 1;
69
+ store11.originScale = store11.scale;
79
70
  };
80
71
  var onTouchMove = function(event) {
72
+ if (!store.moveable) return;
81
73
  var touches = event.touches;
82
74
  var events = touches[0];
83
75
  var events2 = touches[1];
84
- if (!store.moveable) {
85
- return;
86
- }
87
76
  var store1 = store;
88
77
  // 双指移动
89
78
  if (events2) {
90
- // 获得当前两点间的距离
91
- var curDistance = getDistance({
92
- x: events.pageX,
93
- y: events.pageY
94
- }, {
95
- x: events2.pageX,
96
- y: events2.pageY
97
- });
79
+ var curDistance = getDistance(events, events2);
98
80
  /** 此处计算倍数,距离放大(缩小) k 倍则 scale 也 扩大(缩小) k 倍。距离放大(缩小)倍数 = 结束时两点距离 除以 开始时两点距离
99
81
  * 注意此处的 scale 变化是基于 store.scale 的。
100
82
  * store.scale 是一个暂存值,比如第一次放大 2 倍,则 store.scale 为 2。
101
83
  * 再次两指触碰的时候,store.originScale 就为 store.scale 的值,基于此时的 store.scale 继续放大缩小。 * */ var curScale = curDistance / store1.oriDistance;
102
- store1.scale = store1.originScale * curScale;
103
84
  // 最大放大 3 倍,缩小后松手要弹回原比例
104
- if (store1.scale > 3) {
105
- store1.scale = 3;
106
- }
85
+ store1.scale = Math.min(store1.originScale * curScale, 3);
107
86
  scaleNow();
108
87
  }
109
88
  };
110
89
  var onTouchEnd = function() {
111
- setLastTouchEndTime(new Date().getTime());
90
+ lastTouchEndTime.current = Date.now();
112
91
  var store1 = store;
113
92
  store1.moveable = false;
114
93
  if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
@@ -123,6 +102,11 @@ export var ImagePreview = function(props) {
123
102
  document.addEventListener('touchmove', onTouchMove);
124
103
  document.addEventListener('touchend', onTouchEnd);
125
104
  document.addEventListener('touchcancel', onTouchEnd);
105
+ return function() {
106
+ document.removeEventListener('touchcancel', onTouchEnd);
107
+ document.removeEventListener('touchmove', onTouchMove);
108
+ document.removeEventListener('touchend', onTouchEnd);
109
+ };
126
110
  };
127
111
  useEffect(function() {
128
112
  setShowPop(visible);
@@ -140,22 +124,19 @@ export var ImagePreview = function(props) {
140
124
  innerNo
141
125
  ]);
142
126
  useEffect(function() {
143
- setMaxNo((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0));
127
+ setMaxNo(images.length + videos.length);
144
128
  }, [
145
129
  images,
146
130
  videos
147
131
  ]);
148
132
  var scaleNow = function() {
149
133
  if (ref.current) {
150
- ;
151
134
  ref.current.style.transform = "scale(".concat(store.scale, ")");
152
135
  }
153
136
  };
154
- // 计算两个点的距离
137
+ // 用于查找给定数字的斜边。起止两点间距离。
155
138
  var getDistance = function(first, second) {
156
- // 计算两个点起始时刻的距离和终止时刻的距离,终止时刻距离变大了则放大,变小了则缩小
157
- // 放大 k 倍则 scale 也 扩大 k 倍
158
- return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
139
+ return Math.hypot(Math.abs(second.pageX - first.pageX), Math.abs(second.pageY - first.pageY));
159
140
  };
160
141
  var slideChangeEnd = function(page) {
161
142
  setActive(page + 1);
@@ -166,7 +147,7 @@ export var ImagePreview = function(props) {
166
147
  setShowPop(false);
167
148
  setActive(innerNo);
168
149
  scaleNow();
169
- onClose && onClose();
150
+ onClose === null || onClose === void 0 ? void 0 : onClose();
170
151
  setStore(_object_spread_props(_object_spread({}, store), {
171
152
  scale: 1
172
153
  }));
@@ -174,24 +155,19 @@ export var ImagePreview = function(props) {
174
155
  var closeOnImg = function(e) {
175
156
  e.stopPropagation();
176
157
  // 点击内容区域的图片是否可以关闭弹层(视频区域由于nut-video做了限制,无法关闭弹层)
177
- if (closeOnContentClick) {
178
- onCloseInner(e);
179
- }
158
+ if (closeOnContentClick) onCloseInner(e);
180
159
  };
181
160
  var duration = typeof autoPlay === 'string' ? parseInt(autoPlay) : autoPlay;
182
161
  return /*#__PURE__*/ React.createElement(Popup, {
183
162
  visible: showPop,
184
163
  className: "".concat(classPrefix, "-pop"),
185
- style: {
186
- width: '100%'
187
- },
188
164
  onClick: onCloseInner
189
165
  }, /*#__PURE__*/ React.createElement("div", {
190
166
  className: classNames(classPrefix, className),
191
167
  style: style,
192
168
  ref: ref,
193
169
  onTouchStart: onTouchStart
194
- }, showPop ? /*#__PURE__*/ React.createElement(Swiper, {
170
+ }, showPop && /*#__PURE__*/ React.createElement(Swiper, {
195
171
  autoPlay: !!duration,
196
172
  duration: duration,
197
173
  className: "".concat(classPrefix, "-swiper"),
@@ -203,49 +179,38 @@ export var ImagePreview = function(props) {
203
179
  onChange: function(page) {
204
180
  return slideChangeEnd(page);
205
181
  },
206
- defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
182
+ defaultValue: innerNo > maxNo ? maxNo - 1 : innerNo - 1,
207
183
  indicator: indicator
208
- }, (videos !== null && videos !== void 0 ? videos : []).map(function(item) {
184
+ }, _to_consumable_array(videos.map(function(item) {
209
185
  return {
210
186
  type: 'video',
211
187
  data: item
212
188
  };
213
- }).concat((images !== null && images !== void 0 ? images : []).map(function(item) {
189
+ })).concat(_to_consumable_array(images.map(function(item) {
214
190
  return {
215
191
  type: 'image',
216
192
  data: item
217
193
  };
218
- })).sort(function(a, b) {
219
- var _a_data, _b_data;
194
+ }))).sort(function(a, b) {
220
195
  var _a_data_index, _b_data_index;
221
- return ((_a_data_index = (_a_data = a.data) === null || _a_data === void 0 ? void 0 : _a_data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = (_b_data = b.data) === null || _b_data === void 0 ? void 0 : _b_data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
196
+ return ((_a_data_index = a.data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = b.data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
222
197
  }).map(function(item, index) {
223
- if (item.type === 'video') {
224
- var _item_data = item.data, source = _item_data.source, options = _item_data.options;
225
- return /*#__PURE__*/ React.createElement(SwiperItem, {
226
- key: index
227
- }, /*#__PURE__*/ React.createElement(Video, {
228
- source: source,
229
- options: options,
230
- onClick: closeOnImg
231
- }));
232
- }
233
- if (item.type === 'image') {
234
- var src = item.data.src;
235
- return /*#__PURE__*/ React.createElement(SwiperItem, {
236
- key: index
237
- }, /*#__PURE__*/ React.createElement(Image, {
238
- src: src,
239
- draggable: false,
240
- onClick: closeOnImg
241
- }));
242
- }
243
- return null;
244
- })) : null), pagination ? /*#__PURE__*/ React.createElement("div", {
198
+ return /*#__PURE__*/ React.createElement(SwiperItem, {
199
+ key: index
200
+ }, item.type === 'video' ? /*#__PURE__*/ React.createElement(Video, {
201
+ source: item.data.source,
202
+ options: item.data.options,
203
+ onClick: closeOnImg
204
+ }) : /*#__PURE__*/ React.createElement(Image, {
205
+ src: item.data.src,
206
+ draggable: false,
207
+ onClick: closeOnImg
208
+ }));
209
+ }))), pagination && /*#__PURE__*/ React.createElement("div", {
245
210
  className: "".concat(classPrefix, "-index")
246
- }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)) : null, closeIcon !== false ? /*#__PURE__*/ React.createElement("div", {
211
+ }, active, "/", maxNo), closeIcon !== false && /*#__PURE__*/ React.createElement("div", {
247
212
  className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
248
213
  onClick: onCloseInner
249
- }, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon) : null);
214
+ }, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon));
250
215
  };
251
216
  ImagePreview.displayName = 'NutImagePreview';
@@ -57,11 +57,12 @@
57
57
  }
58
58
 
59
59
  &-pop {
60
+ width: 100%;
60
61
  height: 100%;
62
+ max-width: 100% !important;
61
63
  background: transparent !important;
62
64
  display: flex;
63
65
  align-items: center;
64
- width: 100%;
65
66
  }
66
67
 
67
68
  &-swiper {
@@ -697,11 +697,12 @@
697
697
  text-align: center;
698
698
  }
699
699
  .nut-imagepreview-pop {
700
+ width: 100%;
700
701
  height: 100%;
702
+ max-width: 100% !important;
701
703
  background: transparent !important;
702
704
  display: flex;
703
705
  align-items: center;
704
- width: 100%;
705
706
  }
706
707
  .nut-imagepreview-swiper .nut-imagepreview-swiper-item,
707
708
  .nut-imagepreview-swiper .nut-swiper-item {
@@ -236,7 +236,7 @@ export var InputNumber = function(props) {
236
236
  className: "".concat(classPrefix, "-minus"),
237
237
  onClick: handleReduce
238
238
  }, /*#__PURE__*/ React.createElement(Minus, {
239
- className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === min || disabled))
239
+ className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-minus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
240
240
  })), /*#__PURE__*/ React.createElement("input", {
241
241
  className: classNames("".concat(classPrefix, "-input"), _define_property({}, "".concat(classPrefix, "-input-disabled"), disabled)),
242
242
  ref: inputRef,
@@ -251,7 +251,7 @@ export var InputNumber = function(props) {
251
251
  className: "".concat(classPrefix, "-add"),
252
252
  onClick: handlePlus
253
253
  }, /*#__PURE__*/ React.createElement(Plus, {
254
- className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), shadowValue === max || disabled))
254
+ className: classNames("".concat(classPrefix, "-icon ").concat(classPrefix, "-icon-plus"), _define_property({}, "".concat(classPrefix, "-icon-disabled"), Number(shadowValue) >= Number(max) || disabled))
255
255
  })));
256
256
  };
257
257
  InputNumber.displayName = 'NutInputNumber';