rox-react-components 0.0.44 → 0.0.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/Button/Button.js +46 -1
- package/dist/es/Button/index.js +5 -1
- package/dist/es/Button/styles.js +40 -1
- package/dist/es/Card/Card.js +22 -1
- package/dist/es/Card/index.js +5 -1
- package/dist/es/Card/styles.js +18 -1
- package/dist/es/Container/Container.js +20 -1
- package/dist/es/Container/index.js +5 -1
- package/dist/es/Container/styles.js +30 -1
- package/dist/es/Loading/Inner.js +13 -1
- package/dist/es/Loading/Loading.js +67 -1
- package/dist/es/Loading/dom.js +11 -1
- package/dist/es/Loading/index.js +5 -1
- package/dist/es/Loading/styles.js +80 -1
- package/dist/es/Loading/type.js +3 -1
- package/dist/es/Popup/Popup.js +112 -1
- package/dist/es/Popup/index.js +5 -1
- package/dist/es/Popup/styles.js +138 -1
- package/dist/es/ScrollView/ScrollView.js +105 -1
- package/dist/es/ScrollView/index.js +5 -1
- package/dist/es/ScrollView/styles.js +23 -1
- package/dist/es/Swiper/Swiper.js +388 -1
- package/dist/es/Swiper/index.js +5 -1
- package/dist/es/Swiper/styles.js +48 -1
- package/dist/es/hooks/useShow.js +18 -1
- package/dist/es/index.js +9 -1
- package/dist/es/utils.js +69 -1
- package/dist/index.d.ts +4 -3
- package/dist/lib/Button/Button.js +50 -1
- package/dist/lib/Button/index.js +9 -1
- package/dist/lib/Button/styles.js +44 -1
- package/dist/lib/Card/Card.js +26 -1
- package/dist/lib/Card/index.js +9 -1
- package/dist/lib/Card/styles.js +22 -1
- package/dist/lib/Container/Container.js +24 -1
- package/dist/lib/Container/index.js +9 -1
- package/dist/lib/Container/styles.js +34 -1
- package/dist/lib/Loading/Inner.js +17 -1
- package/dist/lib/Loading/Loading.js +71 -1
- package/dist/lib/Loading/dom.js +15 -1
- package/dist/lib/Loading/index.js +9 -1
- package/dist/lib/Loading/styles.js +84 -1
- package/dist/lib/Loading/type.js +5 -1
- package/dist/lib/Popup/Popup.js +116 -1
- package/dist/lib/Popup/index.js +9 -1
- package/dist/lib/Popup/styles.js +143 -1
- package/dist/lib/ScrollView/ScrollView.js +109 -1
- package/dist/lib/ScrollView/index.js +9 -1
- package/dist/lib/ScrollView/styles.js +27 -1
- package/dist/lib/Swiper/Swiper.js +392 -1
- package/dist/lib/Swiper/index.js +9 -1
- package/dist/lib/Swiper/styles.js +52 -1
- package/dist/lib/hooks/useShow.js +22 -1
- package/dist/lib/index.js +23 -1
- package/dist/lib/utils.js +73 -1
- package/package.json +58 -58
package/dist/es/Swiper/Swiper.js
CHANGED
|
@@ -1 +1,388 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { __assign, __awaiter, __generator } from 'tslib';
|
|
2
|
+
import { css } from 'aphrodite/no-important';
|
|
3
|
+
import React, { forwardRef, useMemo, useRef, useState, useCallback, useEffect, useImperativeHandle } from 'react';
|
|
4
|
+
import utils from '../utils.js';
|
|
5
|
+
import styles from './styles.js';
|
|
6
|
+
|
|
7
|
+
var keyframe = 60;
|
|
8
|
+
var initDotStyle = { width: '10px', height: '10px', borderRadius: '50%', backgroundColor: 'rgba(0,0,0,.3)', transition: 'all 200ms linear' };
|
|
9
|
+
var initActiveDotStyle = __assign(__assign({}, initDotStyle), { backgroundColor: 'rgba(255,255,255,.7)' });
|
|
10
|
+
var initSwiperProps = {
|
|
11
|
+
data: [],
|
|
12
|
+
renderItem: function () { return null; },
|
|
13
|
+
onChange: function () { return null; },
|
|
14
|
+
boundary: 1 / 3,
|
|
15
|
+
duration: 500,
|
|
16
|
+
delay: 2000,
|
|
17
|
+
autoPlay: true,
|
|
18
|
+
active: 0,
|
|
19
|
+
dotVisible: true,
|
|
20
|
+
dotBoxStyle: {},
|
|
21
|
+
dotStyle: initDotStyle,
|
|
22
|
+
activeDotStyle: initActiveDotStyle,
|
|
23
|
+
};
|
|
24
|
+
function useClientWidth() {
|
|
25
|
+
var box_el = useRef(null);
|
|
26
|
+
var _a = useState(0), width = _a[0], setWidth = _a[1];
|
|
27
|
+
var resetWidth = useCallback(function () { var _a, _b; return setWidth(Math.max(((_a = box_el.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, ((_b = box_el.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0)); }, []);
|
|
28
|
+
useEffect(function () {
|
|
29
|
+
resetWidth();
|
|
30
|
+
window.addEventListener('resize', resetWidth);
|
|
31
|
+
return function () { return window.removeEventListener('resize', resetWidth); };
|
|
32
|
+
}, [resetWidth]);
|
|
33
|
+
return [box_el, width];
|
|
34
|
+
}
|
|
35
|
+
function useTouchMouseScrollEvent(props) {
|
|
36
|
+
var _this = this;
|
|
37
|
+
var active = props.active, data = props.data, width = props.width, duration = props.duration, boundary = props.boundary, delay = props.delay, ref = props.ref, onChange = props.onChange;
|
|
38
|
+
var gte2 = data.length >= 2;
|
|
39
|
+
var ticker = useRef();
|
|
40
|
+
var inited = useRef(true);
|
|
41
|
+
var idx_ref = useRef(active);
|
|
42
|
+
var is_moving = useRef(false);
|
|
43
|
+
var touch_mouse_started = useRef(false);
|
|
44
|
+
var _a = useState(false), interaction = _a[0], setInteraction = _a[1];
|
|
45
|
+
var _b = useState(active), current = _b[0], setCurrent = _b[1];
|
|
46
|
+
var scroll_el = useRef(null);
|
|
47
|
+
var bound = useMemo(function () { return width * boundary; }, [width, boundary]);
|
|
48
|
+
var getTranslateX = useCallback(function (axis) {
|
|
49
|
+
if (!scroll_el.current)
|
|
50
|
+
return 0;
|
|
51
|
+
var style = getComputedStyle(scroll_el.current);
|
|
52
|
+
try {
|
|
53
|
+
var _a = new WebKitCSSMatrix(style.transform), m41 = _a.m41, m42 = _a.m42, m43 = _a.m43;
|
|
54
|
+
return { x: m41, y: m42, z: m43 }[axis];
|
|
55
|
+
}
|
|
56
|
+
catch (e) {
|
|
57
|
+
var _b = style.transform.split(/\(|\)/), type = _b[0], str = _b[1];
|
|
58
|
+
if (type.includes('3d')) {
|
|
59
|
+
var _c = str.split(',').slice(-4), x = _c[0], y = _c[1], z = _c[2];
|
|
60
|
+
return Number({ x: x, y: y, z: z }[axis]);
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
var _d = str.split(',').slice(-2), x = _d[0], y = _d[1];
|
|
64
|
+
return Number({ x: x, y: y, z: 0 }[axis]);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}, []);
|
|
68
|
+
var setD = useCallback(function (none, timestamp) {
|
|
69
|
+
if (none === void 0) { none = false; }
|
|
70
|
+
if (timestamp === void 0) { timestamp = duration; }
|
|
71
|
+
if (scroll_el.current) {
|
|
72
|
+
scroll_el.current.style.transition = none ? 'none' : "all ".concat(timestamp, "ms linear");
|
|
73
|
+
scroll_el.current.style.webkitTransition = none ? 'none' : "all ".concat(timestamp, "ms linear");
|
|
74
|
+
}
|
|
75
|
+
}, [duration]);
|
|
76
|
+
var setX = useCallback(function (x) {
|
|
77
|
+
if (scroll_el.current) {
|
|
78
|
+
var _x = x;
|
|
79
|
+
if (_x === undefined || _x === null)
|
|
80
|
+
_x = gte2 ? -width * idx_ref.current + 'px' : '0px';
|
|
81
|
+
scroll_el.current.style.transform = "translate3d(".concat(_x, ", 0, 0)");
|
|
82
|
+
scroll_el.current.style.webkitTransform = "translate3d(".concat(_x, ", 0, 0)");
|
|
83
|
+
}
|
|
84
|
+
}, [gte2, width]);
|
|
85
|
+
var next = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
86
|
+
var index;
|
|
87
|
+
return __generator(this, function (_a) {
|
|
88
|
+
switch (_a.label) {
|
|
89
|
+
case 0:
|
|
90
|
+
if (is_moving.current || !gte2)
|
|
91
|
+
return [2 /*return*/];
|
|
92
|
+
is_moving.current = true;
|
|
93
|
+
setInteraction(true);
|
|
94
|
+
if (!(idx_ref.current >= data.length + 1)) return [3 /*break*/, 2];
|
|
95
|
+
is_moving.current = false;
|
|
96
|
+
setD(true);
|
|
97
|
+
idx_ref.current = 1;
|
|
98
|
+
setX();
|
|
99
|
+
return [4 /*yield*/, utils.sleep(keyframe)];
|
|
100
|
+
case 1:
|
|
101
|
+
_a.sent();
|
|
102
|
+
next();
|
|
103
|
+
return [2 /*return*/];
|
|
104
|
+
case 2:
|
|
105
|
+
setD();
|
|
106
|
+
idx_ref.current++;
|
|
107
|
+
index = idx_ref.current - 1;
|
|
108
|
+
if (index >= data.length)
|
|
109
|
+
index = 0;
|
|
110
|
+
setCurrent(index);
|
|
111
|
+
setX();
|
|
112
|
+
return [4 /*yield*/, utils.sleep(duration)];
|
|
113
|
+
case 3:
|
|
114
|
+
_a.sent();
|
|
115
|
+
is_moving.current = false;
|
|
116
|
+
setInteraction(false);
|
|
117
|
+
return [2 /*return*/];
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
}); }, [gte2, data.length, setD, setX]);
|
|
121
|
+
var pre = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
122
|
+
var index;
|
|
123
|
+
return __generator(this, function (_a) {
|
|
124
|
+
switch (_a.label) {
|
|
125
|
+
case 0:
|
|
126
|
+
if (is_moving.current || !gte2)
|
|
127
|
+
return [2 /*return*/];
|
|
128
|
+
is_moving.current = true;
|
|
129
|
+
setInteraction(true);
|
|
130
|
+
if (!(idx_ref.current <= 0)) return [3 /*break*/, 2];
|
|
131
|
+
is_moving.current = false;
|
|
132
|
+
setD(true);
|
|
133
|
+
idx_ref.current = data.length;
|
|
134
|
+
setX();
|
|
135
|
+
return [4 /*yield*/, utils.sleep(keyframe)];
|
|
136
|
+
case 1:
|
|
137
|
+
_a.sent();
|
|
138
|
+
pre();
|
|
139
|
+
return [2 /*return*/];
|
|
140
|
+
case 2:
|
|
141
|
+
setD();
|
|
142
|
+
idx_ref.current--;
|
|
143
|
+
index = idx_ref.current - 1;
|
|
144
|
+
if (index < 0)
|
|
145
|
+
index = data.length - 1;
|
|
146
|
+
setCurrent(index);
|
|
147
|
+
setX();
|
|
148
|
+
return [4 /*yield*/, utils.sleep(duration)];
|
|
149
|
+
case 3:
|
|
150
|
+
_a.sent();
|
|
151
|
+
is_moving.current = false;
|
|
152
|
+
setInteraction(false);
|
|
153
|
+
return [2 /*return*/];
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
}); }, [gte2, data.length, setD, setX]);
|
|
157
|
+
var handleSetCurrent = useCallback(function (index) { return __awaiter(_this, void 0, void 0, function () {
|
|
158
|
+
return __generator(this, function (_a) {
|
|
159
|
+
switch (_a.label) {
|
|
160
|
+
case 0:
|
|
161
|
+
if (is_moving.current || !gte2)
|
|
162
|
+
return [2 /*return*/];
|
|
163
|
+
is_moving.current = true;
|
|
164
|
+
setInteraction(true);
|
|
165
|
+
if (!(idx_ref.current <= 0)) return [3 /*break*/, 2];
|
|
166
|
+
setD(true);
|
|
167
|
+
idx_ref.current = data.length;
|
|
168
|
+
setX();
|
|
169
|
+
return [4 /*yield*/, utils.sleep(keyframe)];
|
|
170
|
+
case 1:
|
|
171
|
+
_a.sent();
|
|
172
|
+
_a.label = 2;
|
|
173
|
+
case 2:
|
|
174
|
+
if (!(idx_ref.current >= data.length + 1)) return [3 /*break*/, 4];
|
|
175
|
+
setD(true);
|
|
176
|
+
idx_ref.current = 1;
|
|
177
|
+
setX();
|
|
178
|
+
return [4 /*yield*/, utils.sleep(keyframe)];
|
|
179
|
+
case 3:
|
|
180
|
+
_a.sent();
|
|
181
|
+
_a.label = 4;
|
|
182
|
+
case 4:
|
|
183
|
+
setD();
|
|
184
|
+
idx_ref.current = index + 1;
|
|
185
|
+
setX();
|
|
186
|
+
setCurrent(index);
|
|
187
|
+
return [4 /*yield*/, utils.sleep(duration)];
|
|
188
|
+
case 5:
|
|
189
|
+
_a.sent();
|
|
190
|
+
is_moving.current = false;
|
|
191
|
+
setInteraction(false);
|
|
192
|
+
return [2 /*return*/];
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
}); }, [gte2, setD, data.length, setX, duration]);
|
|
196
|
+
useImperativeHandle(ref, function () { return ({ next: function () { return next(); }, pre: function () { return pre(); } }); }, [next, pre]);
|
|
197
|
+
useEffect(function () {
|
|
198
|
+
inited.current = true;
|
|
199
|
+
}, [width, data.length]);
|
|
200
|
+
useEffect(function () {
|
|
201
|
+
if (inited.current) {
|
|
202
|
+
setInteraction(true);
|
|
203
|
+
idx_ref.current = gte2 ? active + 1 : active;
|
|
204
|
+
setD(true);
|
|
205
|
+
setX();
|
|
206
|
+
setCurrent(active);
|
|
207
|
+
inited.current = false;
|
|
208
|
+
utils.sleep(keyframe).then(function () {
|
|
209
|
+
setInteraction(false);
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
inited.current = false;
|
|
214
|
+
handleSetCurrent(active);
|
|
215
|
+
}
|
|
216
|
+
}, [active, gte2, data, setD, setX, handleSetCurrent]);
|
|
217
|
+
useEffect(function () {
|
|
218
|
+
onChange(current);
|
|
219
|
+
}, [current]); // attention
|
|
220
|
+
useEffect(function () {
|
|
221
|
+
if (gte2 && props.autoPlay && !interaction) {
|
|
222
|
+
ticker.current = setTimeout(function () { return next(); }, delay);
|
|
223
|
+
}
|
|
224
|
+
else {
|
|
225
|
+
clearTimeout(ticker.current);
|
|
226
|
+
}
|
|
227
|
+
}, [gte2, props.autoPlay, interaction, delay, next]);
|
|
228
|
+
useEffect(function () {
|
|
229
|
+
var el = scroll_el.current;
|
|
230
|
+
var start = 0, offset = 0;
|
|
231
|
+
function adjustPositionOnBegin(x) {
|
|
232
|
+
if (is_moving.current)
|
|
233
|
+
return;
|
|
234
|
+
touch_mouse_started.current = true;
|
|
235
|
+
setInteraction(true);
|
|
236
|
+
setD(true);
|
|
237
|
+
if (idx_ref.current <= 0) {
|
|
238
|
+
idx_ref.current = data.length;
|
|
239
|
+
setX();
|
|
240
|
+
}
|
|
241
|
+
if (idx_ref.current >= data.length + 1) {
|
|
242
|
+
idx_ref.current = 1;
|
|
243
|
+
setX();
|
|
244
|
+
}
|
|
245
|
+
start = x;
|
|
246
|
+
offset = getTranslateX('x');
|
|
247
|
+
}
|
|
248
|
+
function adjustPositionOnMove(x) {
|
|
249
|
+
if (!touch_mouse_started.current)
|
|
250
|
+
return;
|
|
251
|
+
var diff_x = x - start;
|
|
252
|
+
setX(offset + diff_x + 'px');
|
|
253
|
+
}
|
|
254
|
+
function adjustPositionOnEnd(x) {
|
|
255
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
256
|
+
var diff_x, timestamp, timestamp, timestamp, index;
|
|
257
|
+
return __generator(this, function (_a) {
|
|
258
|
+
switch (_a.label) {
|
|
259
|
+
case 0:
|
|
260
|
+
if (!touch_mouse_started.current)
|
|
261
|
+
return [2 /*return*/];
|
|
262
|
+
diff_x = x - start;
|
|
263
|
+
if (diff_x >= bound) {
|
|
264
|
+
idx_ref.current--;
|
|
265
|
+
timestamp = ((width - Math.abs(diff_x)) * duration) / width;
|
|
266
|
+
setD(false, timestamp);
|
|
267
|
+
}
|
|
268
|
+
else if (diff_x <= -bound) {
|
|
269
|
+
idx_ref.current++;
|
|
270
|
+
timestamp = ((width - Math.abs(diff_x)) * duration) / width;
|
|
271
|
+
setD(false, timestamp);
|
|
272
|
+
}
|
|
273
|
+
else {
|
|
274
|
+
timestamp = (Math.abs(diff_x) * duration) / width;
|
|
275
|
+
setD(false, timestamp);
|
|
276
|
+
}
|
|
277
|
+
index = idx_ref.current - 1;
|
|
278
|
+
if (index >= data.length)
|
|
279
|
+
index = 0;
|
|
280
|
+
setCurrent(index);
|
|
281
|
+
touch_mouse_started.current = false;
|
|
282
|
+
is_moving.current = true;
|
|
283
|
+
setX();
|
|
284
|
+
return [4 /*yield*/, utils.sleep(duration)];
|
|
285
|
+
case 1:
|
|
286
|
+
_a.sent();
|
|
287
|
+
setInteraction(false);
|
|
288
|
+
is_moving.current = false;
|
|
289
|
+
return [2 /*return*/];
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
function stop(ev) {
|
|
295
|
+
ev.preventDefault();
|
|
296
|
+
ev.stopPropagation();
|
|
297
|
+
}
|
|
298
|
+
function onTouchStart(ev) {
|
|
299
|
+
stop(ev);
|
|
300
|
+
adjustPositionOnBegin(ev.targetTouches[0].pageX);
|
|
301
|
+
}
|
|
302
|
+
function onMouseStart(ev) {
|
|
303
|
+
stop(ev);
|
|
304
|
+
adjustPositionOnBegin(ev.pageX);
|
|
305
|
+
}
|
|
306
|
+
function onTouchMove(ev) {
|
|
307
|
+
stop(ev);
|
|
308
|
+
adjustPositionOnMove(ev.targetTouches[0].pageX);
|
|
309
|
+
}
|
|
310
|
+
function onMouseMove(ev) {
|
|
311
|
+
stop(ev);
|
|
312
|
+
adjustPositionOnMove(ev.pageX);
|
|
313
|
+
}
|
|
314
|
+
function onTouchEnd(ev) {
|
|
315
|
+
stop(ev);
|
|
316
|
+
adjustPositionOnEnd(ev.changedTouches[0].pageX);
|
|
317
|
+
}
|
|
318
|
+
function onMouseEnd(ev) {
|
|
319
|
+
stop(ev);
|
|
320
|
+
adjustPositionOnEnd(ev.pageX);
|
|
321
|
+
}
|
|
322
|
+
function onCancel(ev) {
|
|
323
|
+
stop(ev);
|
|
324
|
+
adjustPositionOnEnd(ev.changedTouches[0].pageX);
|
|
325
|
+
}
|
|
326
|
+
if (el && gte2) {
|
|
327
|
+
el.addEventListener('touchstart', onTouchStart, { passive: false });
|
|
328
|
+
el.addEventListener('touchmove', onTouchMove, { passive: false });
|
|
329
|
+
el.addEventListener('touchend', onTouchEnd, { passive: false });
|
|
330
|
+
el.addEventListener('touchcancel', onCancel, { passive: false });
|
|
331
|
+
el.addEventListener('mousedown', onMouseStart, { passive: false });
|
|
332
|
+
el.addEventListener('mousemove', onMouseMove, { passive: false });
|
|
333
|
+
el.addEventListener('mouseup', onMouseEnd, { passive: false });
|
|
334
|
+
el.addEventListener('mouseout', onMouseEnd, { passive: false });
|
|
335
|
+
}
|
|
336
|
+
return function () {
|
|
337
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('touchstart', onTouchStart);
|
|
338
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('touchmove', onTouchMove);
|
|
339
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('touchend', onTouchEnd);
|
|
340
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('touchcancel', onCancel);
|
|
341
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('mousedown', onMouseStart);
|
|
342
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('mousemove', onMouseMove);
|
|
343
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('mouseup', onMouseEnd);
|
|
344
|
+
el === null || el === void 0 ? void 0 : el.removeEventListener('mouseout', onMouseEnd);
|
|
345
|
+
};
|
|
346
|
+
}, [gte2, setD, getTranslateX, setX, bound, duration, data.length, width]);
|
|
347
|
+
useEffect(function () {
|
|
348
|
+
var tick;
|
|
349
|
+
function onResize() {
|
|
350
|
+
clearTimeout(tick);
|
|
351
|
+
setInteraction(true);
|
|
352
|
+
setD(true);
|
|
353
|
+
setX();
|
|
354
|
+
tick = setTimeout(function () {
|
|
355
|
+
setInteraction(false);
|
|
356
|
+
}, 60);
|
|
357
|
+
}
|
|
358
|
+
window.addEventListener('resize', onResize);
|
|
359
|
+
return function () { return window.removeEventListener('resize', onResize); };
|
|
360
|
+
}, [setD, setX]);
|
|
361
|
+
useEffect(function () {
|
|
362
|
+
var tick = ticker.current;
|
|
363
|
+
return function () { return clearTimeout(tick); };
|
|
364
|
+
}, []);
|
|
365
|
+
return [scroll_el, current, handleSetCurrent];
|
|
366
|
+
}
|
|
367
|
+
function Swiper(props, ref) {
|
|
368
|
+
var _a = __assign(__assign({}, initSwiperProps), props), boundary = _a.boundary, data = _a.data, renderItem = _a.renderItem, children = _a.children, dotVisible = _a.dotVisible, renderDots = _a.renderDots, dotBoxStyle = _a.dotBoxStyle, activeDotStyle = _a.activeDotStyle, dotStyle = _a.dotStyle;
|
|
369
|
+
var gte2 = data.length >= 2;
|
|
370
|
+
var _b = useClientWidth(), box_el = _b[0], width = _b[1];
|
|
371
|
+
var _c = useTouchMouseScrollEvent(__assign(__assign(__assign({}, initSwiperProps), props), { width: width, ref: ref })), scroll_el = _c[0], current = _c[1], setCurrent = _c[2];
|
|
372
|
+
var scroll_width = useMemo(function () { return (width && gte2 ? width * (data.length + 2) + 'px' : '100%'); }, [width, gte2, data.length]);
|
|
373
|
+
if (typeof boundary !== 'number' || boundary <= 0 || boundary >= 1) {
|
|
374
|
+
throw new Error('property boundary must be number, and between 0 and 1, exclude 0 and 1');
|
|
375
|
+
}
|
|
376
|
+
return (React.createElement("div", { className: css(styles.relative, styles.w_full, styles.border_box, styles.overflow_hidden) },
|
|
377
|
+
React.createElement("div", { ref: box_el, className: css(styles.relative, styles.w_full, styles.border_box, styles.overflow_hidden) },
|
|
378
|
+
React.createElement("div", { ref: scroll_el, style: { width: scroll_width, backfaceVisibility: 'hidden', MozBackfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden' }, className: css(styles.relative, styles.w_full, styles.flex, styles.nowrap, styles.border_box, styles.item_center, styles.justify_center) },
|
|
379
|
+
gte2 && (React.createElement("div", { style: { WebkitTransform: 'translate3d(0,0,0)', msTransform: 'translate3d(0,0,0)', transform: 'translate3d(0,0,0)' }, className: css(styles.relative, styles.flex_1, styles.overflow_hidden, styles.border_box) }, renderItem(data[data.length - 1]))),
|
|
380
|
+
data.map(function (item, index) { return (React.createElement("div", { key: index, style: { WebkitTransform: 'translate3d(0,0,0)', msTransform: 'translate3d(0,0,0)', transform: 'translate3d(0,0,0)' }, className: css(styles.relative, styles.flex_1, styles.overflow_hidden, styles.border_box) }, renderItem(item))); }),
|
|
381
|
+
gte2 && (React.createElement("div", { style: { WebkitTransform: 'translate3d(0,0,0)', msTransform: 'translate3d(0,0,0)', transform: 'translate3d(0,0,0)' }, className: css(styles.relative, styles.flex_1, styles.overflow_hidden, styles.border_box) }, renderItem(data[0]))))),
|
|
382
|
+
children,
|
|
383
|
+
renderDots ||
|
|
384
|
+
(dotVisible && (React.createElement("ul", { style: dotBoxStyle, className: css(styles.absolute, styles.w_full, styles.left_0, styles.flex, styles.justify_center, styles.item_center, styles.bottom_20, styles.style_none, styles.gap) }, data.map(function (_, i) { return (React.createElement("li", { key: i, onClick: function () { return setCurrent(i); }, style: i === current ? __assign(__assign({}, initActiveDotStyle), activeDotStyle) : __assign(__assign({}, initDotStyle), dotStyle) })); }))))));
|
|
385
|
+
}
|
|
386
|
+
var Swiper$1 = forwardRef(Swiper);
|
|
387
|
+
|
|
388
|
+
export { Swiper$1 as default };
|
package/dist/es/Swiper/index.js
CHANGED
package/dist/es/Swiper/styles.js
CHANGED
|
@@ -1 +1,48 @@
|
|
|
1
|
-
import{StyleSheet
|
|
1
|
+
import { StyleSheet } from 'aphrodite/no-important';
|
|
2
|
+
|
|
3
|
+
var styles = StyleSheet.create({
|
|
4
|
+
relative: {
|
|
5
|
+
position: 'relative',
|
|
6
|
+
},
|
|
7
|
+
absolute: {
|
|
8
|
+
position: 'absolute',
|
|
9
|
+
},
|
|
10
|
+
w_full: {
|
|
11
|
+
width: '100%',
|
|
12
|
+
},
|
|
13
|
+
border_box: {
|
|
14
|
+
boxSizing: 'border-box',
|
|
15
|
+
},
|
|
16
|
+
overflow_hidden: {
|
|
17
|
+
overflow: 'hidden',
|
|
18
|
+
},
|
|
19
|
+
flex: {
|
|
20
|
+
display: 'flex',
|
|
21
|
+
},
|
|
22
|
+
nowrap: {
|
|
23
|
+
flexWrap: 'nowrap',
|
|
24
|
+
},
|
|
25
|
+
flex_1: {
|
|
26
|
+
flex: 1,
|
|
27
|
+
},
|
|
28
|
+
item_center: {
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
},
|
|
31
|
+
justify_center: {
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
},
|
|
34
|
+
left_0: {
|
|
35
|
+
left: 0,
|
|
36
|
+
},
|
|
37
|
+
bottom_20: {
|
|
38
|
+
bottom: '20px',
|
|
39
|
+
},
|
|
40
|
+
style_none: {
|
|
41
|
+
listStyle: 'none',
|
|
42
|
+
},
|
|
43
|
+
gap: {
|
|
44
|
+
columnGap: '8px',
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
export { styles as default };
|
package/dist/es/hooks/useShow.js
CHANGED
|
@@ -1 +1,18 @@
|
|
|
1
|
-
import{useCallback
|
|
1
|
+
import { useCallback, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
function useShow(method, dep) {
|
|
4
|
+
if (dep === void 0) { dep = []; }
|
|
5
|
+
var onShow = useCallback(function () {
|
|
6
|
+
if (document.visibilityState === 'visible')
|
|
7
|
+
method === null || method === void 0 ? void 0 : method();
|
|
8
|
+
}, dep);
|
|
9
|
+
useEffect(function () {
|
|
10
|
+
onShow();
|
|
11
|
+
document.addEventListener('visibilitychange', onShow);
|
|
12
|
+
return function () {
|
|
13
|
+
document.removeEventListener('visibilitychange', onShow);
|
|
14
|
+
};
|
|
15
|
+
}, [onShow]);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { useShow as default };
|
package/dist/es/index.js
CHANGED
|
@@ -1 +1,9 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { default as utils } from './utils.js';
|
|
2
|
+
export { default as useShow } from './hooks/useShow.js';
|
|
3
|
+
export { default as Button } from './Button/Button.js';
|
|
4
|
+
export { default as Card } from './Card/Card.js';
|
|
5
|
+
export { default as Container } from './Container/Container.js';
|
|
6
|
+
export { default as Loading } from './Loading/Loading.js';
|
|
7
|
+
export { default as Popup } from './Popup/Popup.js';
|
|
8
|
+
export { default as ScrollView } from './ScrollView/ScrollView.js';
|
|
9
|
+
export { default as Swiper } from './Swiper/Swiper.js';
|
package/dist/es/utils.js
CHANGED
|
@@ -1 +1,69 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { __awaiter, __generator } from 'tslib';
|
|
2
|
+
|
|
3
|
+
function sleep(timestamp_1) {
|
|
4
|
+
return __awaiter(this, arguments, void 0, function (timestamp, result) {
|
|
5
|
+
if (result === void 0) { result = false; }
|
|
6
|
+
return __generator(this, function (_a) {
|
|
7
|
+
return [2 /*return*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(result); }, timestamp); })];
|
|
8
|
+
});
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
function parseUrl(key) {
|
|
12
|
+
var url = window.location.href;
|
|
13
|
+
var result = {};
|
|
14
|
+
// 处理哈希片段中的查询参数
|
|
15
|
+
var hashIndex = url.indexOf("#");
|
|
16
|
+
var queryString = "";
|
|
17
|
+
if (hashIndex !== -1) {
|
|
18
|
+
// 提取哈希片段
|
|
19
|
+
var hashPart = url.substring(hashIndex + 1);
|
|
20
|
+
var hashQueryIndex = hashPart.indexOf("?");
|
|
21
|
+
if (hashQueryIndex !== -1) {
|
|
22
|
+
// 哈希片段中包含查询参数
|
|
23
|
+
queryString += (queryString ? "&" : "") + hashPart.substring(hashQueryIndex + 1);
|
|
24
|
+
}
|
|
25
|
+
// 处理主查询字符串(在问号后,哈希前)
|
|
26
|
+
var mainQueryIndex = url.indexOf("?");
|
|
27
|
+
if (mainQueryIndex !== -1 && mainQueryIndex < hashIndex) {
|
|
28
|
+
var mainQuery = url.substring(mainQueryIndex + 1, hashIndex);
|
|
29
|
+
queryString = mainQuery + (queryString ? "&" + queryString : "");
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
// 没有哈希片段,直接处理查询字符串
|
|
34
|
+
var mainQueryIndex = url.indexOf("?");
|
|
35
|
+
if (mainQueryIndex !== -1) {
|
|
36
|
+
queryString = url.substring(mainQueryIndex + 1);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
// 如果没有查询参数,返回空对象或指定键的 undefined
|
|
40
|
+
if (!queryString) {
|
|
41
|
+
return key !== undefined ? undefined : result;
|
|
42
|
+
}
|
|
43
|
+
// 解析查询参数
|
|
44
|
+
var keyValuePairs = queryString.split("&");
|
|
45
|
+
keyValuePairs.forEach(function (pair) {
|
|
46
|
+
var _a = pair.split("="), key = _a[0], value = _a[1];
|
|
47
|
+
if (key) {
|
|
48
|
+
var _value = value === undefined ? true : decodeURIComponent(value);
|
|
49
|
+
if (result.hasOwnProperty(key)) {
|
|
50
|
+
var val = result[key];
|
|
51
|
+
if (Array.isArray(val)) {
|
|
52
|
+
val.push(_value);
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
result[key] = [val, _value];
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
result[key] = _value;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
if (key !== undefined)
|
|
64
|
+
return result[key] || undefined;
|
|
65
|
+
return result;
|
|
66
|
+
}
|
|
67
|
+
var utils = { sleep: sleep, parseUrl: parseUrl };
|
|
68
|
+
|
|
69
|
+
export { utils as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -127,11 +127,12 @@ interface ScrollViewProps extends PropsWithChildren {
|
|
|
127
127
|
onReachLeft?: (done: Function) => void;
|
|
128
128
|
onReachRight?: (done: Function) => void;
|
|
129
129
|
}
|
|
130
|
-
declare const _default$1: (props: ScrollViewProps & React.RefAttributes<ScrollViewExposeMethods>) => React.ReactNode;
|
|
130
|
+
declare const _default$1: (props: ScrollViewProps & React.RefAttributes<ScrollViewExposeMethods>) => React.ReactNode | null;
|
|
131
131
|
|
|
132
132
|
declare module 'react' {
|
|
133
133
|
function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
|
|
134
134
|
}
|
|
135
|
-
declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
|
|
135
|
+
declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode | null;
|
|
136
136
|
|
|
137
|
-
export {
|
|
137
|
+
export { Button, Card, Container, Loading, Popup, _default$1 as ScrollView, _default as Swiper, useShow, _default$2 as utils };
|
|
138
|
+
export type { AnimationTimingFunction, PopupPosition, PopupType, ScrollViewExposeMethods, SwiperExposeMethods, SwiperProps, ToParams };
|
|
@@ -1 +1,50 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var noImportant = require('aphrodite/no-important');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var styles = require('./styles.js');
|
|
9
|
+
|
|
10
|
+
var positions = ['relative', 'absolute', 'fixed'];
|
|
11
|
+
var Button = function (props) {
|
|
12
|
+
var children = props.children, _a = props.style, style = _a === void 0 ? {} : _a, _b = props.block, block = _b === void 0 ? false : _b, _c = props.className, className = _c === void 0 ? '' : _c, _d = props.radius, radius = _d === void 0 ? 4 : _d, _e = props.bg, bg = _e === void 0 ? 'rgba(0,0,0,.7)' : _e, _f = props.color, color = _f === void 0 ? '#ffffff' : _f, onClick = props.onClick, _g = props.wavesColor, wavesColor = _g === void 0 ? 'rgba(255,255,255,.3)' : _g, rest = tslib.__rest(props, ["children", "style", "block", "className", "radius", "bg", "color", "onClick", "wavesColor"]);
|
|
13
|
+
var pools = React.useRef([]);
|
|
14
|
+
var btn_ref = React.useRef(null);
|
|
15
|
+
var btnStyle = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, style), { overflow: 'hidden', borderRadius: radius + 'px', background: bg, color: color })); }, [style, radius, bg, color]);
|
|
16
|
+
var handleButtonClick = React.useCallback(function (event) {
|
|
17
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
18
|
+
var target = event.currentTarget;
|
|
19
|
+
var node;
|
|
20
|
+
if (pools.current.length) {
|
|
21
|
+
node = pools.current.shift();
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
node = document.createElement('div');
|
|
25
|
+
node.classList.add(noImportant.css(styles.default.ripple));
|
|
26
|
+
}
|
|
27
|
+
var rect = target.getBoundingClientRect();
|
|
28
|
+
node.style.width = node.style.height = Math.max(rect.width, rect.height) + 'px';
|
|
29
|
+
node.style.backgroundColor = wavesColor;
|
|
30
|
+
target.appendChild(node);
|
|
31
|
+
var y = event.pageY - rect.top - node.offsetHeight / 2 + 'px';
|
|
32
|
+
var x = event.pageX - rect.left - node.offsetWidth / 2 + 'px';
|
|
33
|
+
node.style.top = y;
|
|
34
|
+
node.style.left = x;
|
|
35
|
+
node.onanimationend = function () {
|
|
36
|
+
target.removeChild(node);
|
|
37
|
+
pools.current.push(node);
|
|
38
|
+
};
|
|
39
|
+
}, [onClick, wavesColor]);
|
|
40
|
+
React.useEffect(function () {
|
|
41
|
+
if (btn_ref.current) {
|
|
42
|
+
var style_1 = getComputedStyle(btn_ref.current);
|
|
43
|
+
if (!positions.includes(style_1.position))
|
|
44
|
+
btn_ref.current.style.position = 'relative';
|
|
45
|
+
}
|
|
46
|
+
}, []);
|
|
47
|
+
return (React.createElement("button", tslib.__assign({}, rest, { className: "".concat(className, " ").concat(noImportant.css(styles.default.button), " ").concat(block ? noImportant.css(styles.default.block) : ''), style: btnStyle, ref: btn_ref, onClick: handleButtonClick }), children));
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.default = Button;
|
package/dist/lib/Button/index.js
CHANGED
|
@@ -1 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var Button = require('./Button.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.default = Button.default;
|