@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.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/packages/badge/style/badge.scss +3 -8
- package/dist/cjs/packages/badge/style/style.css +4 -9
- package/dist/cjs/packages/configprovider/types.d.ts +1 -1
- package/dist/cjs/packages/datepicker/style/style.css +0 -1
- package/dist/cjs/packages/datepickerview/style/style.css +0 -1
- package/dist/cjs/packages/empty/style/index.js +1 -0
- package/dist/cjs/packages/empty/style/style.css +389 -0
- package/dist/cjs/packages/fixednav/fixednav.js +3 -2
- package/dist/cjs/packages/fixednav/style/fixednav.scss +43 -39
- package/dist/cjs/packages/fixednav/style/style.css +47 -45
- package/dist/cjs/packages/imagepreview/imagepreview.js +49 -84
- package/dist/cjs/packages/imagepreview/style/imagepreview.scss +2 -1
- package/dist/cjs/packages/imagepreview/style/style.css +2 -1
- package/dist/cjs/packages/inputnumber/inputnumber.js +2 -2
- package/dist/cjs/packages/notify/Notification.js +1 -1
- package/dist/cjs/packages/nutui.react.d.ts +1 -0
- package/dist/cjs/packages/nutui.react.js +1 -0
- package/dist/cjs/packages/picker/style/style.css +0 -1
- package/dist/cjs/packages/pickerview/pickerroller.js +11 -6
- package/dist/cjs/packages/pickerview/style/pickerview.scss +0 -1
- package/dist/cjs/packages/pickerview/style/style.css +0 -1
- package/dist/cjs/packages/resultpage/style/index.js +1 -0
- package/dist/cjs/packages/resultpage/style/style.css +389 -0
- package/dist/cjs/packages/tabbar/style/style.css +4 -9
- package/dist/cjs/packages/tabbaritem/style/style.css +4 -9
- package/dist/cjs/packages/toast/Notification.js +1 -1
- package/dist/es/packages/badge/style/badge.scss +3 -8
- package/dist/es/packages/badge/style/style.css +4 -9
- package/dist/es/packages/configprovider/types.d.ts +1 -1
- package/dist/es/packages/datepicker/style/style.css +0 -1
- package/dist/es/packages/datepickerview/style/style.css +0 -1
- package/dist/es/packages/empty/style/index.js +1 -0
- package/dist/es/packages/empty/style/style.css +389 -0
- package/dist/es/packages/fixednav/fixednav.js +3 -2
- package/dist/es/packages/fixednav/style/fixednav.scss +43 -39
- package/dist/es/packages/fixednav/style/style.css +47 -45
- package/dist/es/packages/imagepreview/imagepreview.js +49 -84
- package/dist/es/packages/imagepreview/style/imagepreview.scss +2 -1
- package/dist/es/packages/imagepreview/style/style.css +2 -1
- package/dist/es/packages/inputnumber/inputnumber.js +2 -2
- package/dist/es/packages/notify/Notification.js +1 -1
- package/dist/es/packages/picker/style/style.css +0 -1
- package/dist/es/packages/pickerview/pickerroller.js +10 -6
- package/dist/es/packages/pickerview/style/pickerview.scss +0 -1
- package/dist/es/packages/pickerview/style/style.css +0 -1
- package/dist/es/packages/resultpage/style/index.js +1 -0
- package/dist/es/packages/resultpage/style/style.css +389 -0
- package/dist/es/packages/tabbar/style/style.css +4 -9
- package/dist/es/packages/tabbaritem/style/style.css +4 -9
- package/dist/es/packages/toast/Notification.js +1 -1
- package/dist/nutui.react.umd.js +60 -89
- package/dist/style.css +1 -1
- package/dist/style.scss +47 -47
- package/dist/styles/theme-dark.scss +2 -0
- package/dist/styles/theme-default.scss +2 -0
- package/dist/styles/themes/dark.css +1 -1
- package/dist/styles/themes/default.css +1 -1
- package/dist/styles/themes/jmapp.css +1 -1
- package/dist/styles/themes/jrkf.css +1 -1
- package/dist/styles/variables-jmapp.scss +1 -0
- package/dist/styles/variables-jrkf.scss +1 -0
- package/dist/styles/variables.scss +2 -1
- 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)
|
|
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
|
-
|
|
102
|
-
right:
|
|
103
|
-
|
|
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
|
-
|
|
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
|
|
136
|
-
|
|
132
|
+
&-right {
|
|
133
|
+
right: auto;
|
|
134
|
+
left: 0;
|
|
135
|
+
}
|
|
137
136
|
&.active {
|
|
138
137
|
.nut-icon {
|
|
139
|
-
transform: rotate(
|
|
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
|
-
|
|
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
|
-
|
|
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-
|
|
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)
|
|
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
|
|
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-
|
|
234
|
-
|
|
220
|
+
.nut-fixednav-right {
|
|
221
|
+
right: 0;
|
|
235
222
|
}
|
|
236
|
-
.nut-fixednav.
|
|
237
|
-
right:
|
|
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
|
|
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
|
|
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
|
|
250
|
+
.nut-fixednav-left .nut-fixednav-list {
|
|
252
251
|
transform: translateX(-100%);
|
|
253
|
-
|
|
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
|
|
297
|
-
.nut-rtl .nut-fixednav
|
|
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
|
|
302
|
-
.nut-rtl .nut-fixednav
|
|
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
|
|
308
|
-
.nut-rtl .nut-fixednav
|
|
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
|
|
314
|
-
.nut-rtl .nut-fixednav
|
|
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(
|
|
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:
|
|
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(
|
|
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
|
|
49
|
-
|
|
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 =
|
|
56
|
-
if (curTouchTime - lastTouchEndTime <
|
|
55
|
+
// 如果是原尺寸,双击放大;否则回到原尺寸。
|
|
56
|
+
var curTouchTime = Date.now();
|
|
57
|
+
if (curTouchTime - lastTouchEndTime.current < 100) {
|
|
57
58
|
var store1 = store;
|
|
58
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
|
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
|
|
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
|
|
182
|
+
defaultValue: innerNo > maxNo ? maxNo - 1 : innerNo - 1,
|
|
207
183
|
indicator: indicator
|
|
208
|
-
}, (videos
|
|
184
|
+
}, _to_consumable_array(videos.map(function(item) {
|
|
209
185
|
return {
|
|
210
186
|
type: 'video',
|
|
211
187
|
data: item
|
|
212
188
|
};
|
|
213
|
-
}).concat((images
|
|
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 =
|
|
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
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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, "/",
|
|
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)
|
|
214
|
+
}, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon));
|
|
250
215
|
};
|
|
251
216
|
ImagePreview.displayName = 'NutImagePreview';
|
|
@@ -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
|
|
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
|
|
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';
|