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.
Files changed (56) hide show
  1. package/dist/es/Button/Button.js +46 -1
  2. package/dist/es/Button/index.js +5 -1
  3. package/dist/es/Button/styles.js +40 -1
  4. package/dist/es/Card/Card.js +22 -1
  5. package/dist/es/Card/index.js +5 -1
  6. package/dist/es/Card/styles.js +18 -1
  7. package/dist/es/Container/Container.js +20 -1
  8. package/dist/es/Container/index.js +5 -1
  9. package/dist/es/Container/styles.js +30 -1
  10. package/dist/es/Loading/Inner.js +13 -1
  11. package/dist/es/Loading/Loading.js +67 -1
  12. package/dist/es/Loading/dom.js +11 -1
  13. package/dist/es/Loading/index.js +5 -1
  14. package/dist/es/Loading/styles.js +80 -1
  15. package/dist/es/Loading/type.js +3 -1
  16. package/dist/es/Popup/Popup.js +112 -1
  17. package/dist/es/Popup/index.js +5 -1
  18. package/dist/es/Popup/styles.js +138 -1
  19. package/dist/es/ScrollView/ScrollView.js +105 -1
  20. package/dist/es/ScrollView/index.js +5 -1
  21. package/dist/es/ScrollView/styles.js +23 -1
  22. package/dist/es/Swiper/Swiper.js +388 -1
  23. package/dist/es/Swiper/index.js +5 -1
  24. package/dist/es/Swiper/styles.js +48 -1
  25. package/dist/es/hooks/useShow.js +18 -1
  26. package/dist/es/index.js +9 -1
  27. package/dist/es/utils.js +69 -1
  28. package/dist/index.d.ts +4 -3
  29. package/dist/lib/Button/Button.js +50 -1
  30. package/dist/lib/Button/index.js +9 -1
  31. package/dist/lib/Button/styles.js +44 -1
  32. package/dist/lib/Card/Card.js +26 -1
  33. package/dist/lib/Card/index.js +9 -1
  34. package/dist/lib/Card/styles.js +22 -1
  35. package/dist/lib/Container/Container.js +24 -1
  36. package/dist/lib/Container/index.js +9 -1
  37. package/dist/lib/Container/styles.js +34 -1
  38. package/dist/lib/Loading/Inner.js +17 -1
  39. package/dist/lib/Loading/Loading.js +71 -1
  40. package/dist/lib/Loading/dom.js +15 -1
  41. package/dist/lib/Loading/index.js +9 -1
  42. package/dist/lib/Loading/styles.js +84 -1
  43. package/dist/lib/Loading/type.js +5 -1
  44. package/dist/lib/Popup/Popup.js +116 -1
  45. package/dist/lib/Popup/index.js +9 -1
  46. package/dist/lib/Popup/styles.js +143 -1
  47. package/dist/lib/ScrollView/ScrollView.js +109 -1
  48. package/dist/lib/ScrollView/index.js +9 -1
  49. package/dist/lib/ScrollView/styles.js +27 -1
  50. package/dist/lib/Swiper/Swiper.js +392 -1
  51. package/dist/lib/Swiper/index.js +9 -1
  52. package/dist/lib/Swiper/styles.js +52 -1
  53. package/dist/lib/hooks/useShow.js +22 -1
  54. package/dist/lib/index.js +23 -1
  55. package/dist/lib/utils.js +73 -1
  56. package/package.json +58 -58
@@ -1 +1,388 @@
1
- import{__assign as e,__awaiter as t,__generator as n}from"tslib";import{css as r}from"aphrodite/no-important";import u,{forwardRef as o,useMemo as a,useRef as i,useState as c,useCallback as s,useEffect as l,useImperativeHandle as d}from"react";import f from"../utils.js";import v from"./styles.js";var m=60,h={width:"10px",height:"10px",borderRadius:"50%",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},p=e(e({},h),{backgroundColor:"rgba(255,255,255,.7)"}),b={data:[],renderItem:function(){return null},onChange:function(){return null},boundary:1/3,duration:500,delay:2e3,autoPlay:!0,active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:h,activeDotStyle:p};var y=o((function(o,y){var g=e(e({},b),o),w=g.boundary,E=g.data,x=g.renderItem,_=g.children,L=g.dotVisible,T=g.renderDots,k=g.dotBoxStyle,N=g.activeDotStyle,S=g.dotStyle,z=E.length>=2,C=function(){var e=i(null),t=c(0),n=t[0],r=t[1],u=s((function(){var t,n;return r(Math.max((null===(t=e.current)||void 0===t?void 0:t.clientWidth)||0,(null===(n=e.current)||void 0===n?void 0:n.offsetWidth)||0))}),[]);return l((function(){return u(),window.addEventListener("resize",u),function(){return window.removeEventListener("resize",u)}}),[u]),[e,n]}(),W=C[0],X=C[1],M=function(e){var r=this,u=e.active,o=e.data,v=e.width,h=e.duration,p=e.boundary,b=e.delay,y=e.ref,g=e.onChange,w=o.length>=2,E=i(),x=i(!0),_=i(u),L=i(!1),T=i(!1),k=c(!1),N=k[0],S=k[1],z=c(u),C=z[0],W=z[1],X=i(null),M=a((function(){return v*p}),[v,p]),V=s((function(e){if(!X.current)return 0;var t=getComputedStyle(X.current);try{var n=new WebKitCSSMatrix(t.transform);return{x:n.m41,y:n.m42,z:n.m43}[e]}catch(n){var r=t.transform.split(/\(|\)/),u=r[0],o=r[1];if(u.includes("3d")){var a=o.split(",").slice(-4),i=a[0],c=a[1],s=a[2];return Number({x:i,y:c,z:s}[e])}var l=o.split(",").slice(-2);return i=l[0],c=l[1],Number({x:i,y:c,z:0}[e])}}),[]),j=s((function(e,t){void 0===e&&(e=!1),void 0===t&&(t=h),X.current&&(X.current.style.transition=e?"none":"all ".concat(t,"ms linear"),X.current.style.webkitTransition=e?"none":"all ".concat(t,"ms linear"))}),[h]),B=s((function(e){if(X.current){var t=e;null==t&&(t=w?-v*_.current+"px":"0px"),X.current.style.transform="translate3d(".concat(t,", 0, 0)"),X.current.style.webkitTransform="translate3d(".concat(t,", 0, 0)")}}),[w,v]),D=s((function(){return t(r,void 0,void 0,(function(){var e;return n(this,(function(t){switch(t.label){case 0:return L.current||!w?[2]:(L.current=!0,S(!0),_.current>=o.length+1?(L.current=!1,j(!0),_.current=1,B(),[4,f.sleep(m)]):[3,2]);case 1:return t.sent(),D(),[2];case 2:return j(),_.current++,(e=_.current-1)>=o.length&&(e=0),W(e),B(),[4,f.sleep(h)];case 3:return t.sent(),L.current=!1,S(!1),[2]}}))}))}),[w,o.length,j,B]),P=s((function(){return t(r,void 0,void 0,(function(){var e;return n(this,(function(t){switch(t.label){case 0:return L.current||!w?[2]:(L.current=!0,S(!0),_.current<=0?(L.current=!1,j(!0),_.current=o.length,B(),[4,f.sleep(m)]):[3,2]);case 1:return t.sent(),P(),[2];case 2:return j(),_.current--,(e=_.current-1)<0&&(e=o.length-1),W(e),B(),[4,f.sleep(h)];case 3:return t.sent(),L.current=!1,S(!1),[2]}}))}))}),[w,o.length,j,B]),I=s((function(e){return t(r,void 0,void 0,(function(){return n(this,(function(t){switch(t.label){case 0:return L.current||!w?[2]:(L.current=!0,S(!0),_.current<=0?(j(!0),_.current=o.length,B(),[4,f.sleep(m)]):[3,2]);case 1:t.sent(),t.label=2;case 2:return _.current>=o.length+1?(j(!0),_.current=1,B(),[4,f.sleep(m)]):[3,4];case 3:t.sent(),t.label=4;case 4:return j(),_.current=e+1,B(),W(e),[4,f.sleep(h)];case 5:return t.sent(),L.current=!1,S(!1),[2]}}))}))}),[w,j,o.length,B,h]);return d(y,(function(){return{next:function(){return D()},pre:function(){return P()}}}),[D,P]),l((function(){x.current=!0}),[v,o.length]),l((function(){x.current?(S(!0),_.current=w?u+1:u,j(!0),B(),W(u),x.current=!1,f.sleep(m).then((function(){S(!1)}))):(x.current=!1,I(u))}),[u,w,o,j,B,I]),l((function(){g(C)}),[C]),l((function(){w&&e.autoPlay&&!N?E.current=setTimeout((function(){return D()}),b):clearTimeout(E.current)}),[w,e.autoPlay,N,b,D]),l((function(){var e=X.current,r=0,u=0;function a(e){L.current||(T.current=!0,S(!0),j(!0),_.current<=0&&(_.current=o.length,B()),_.current>=o.length+1&&(_.current=1,B()),r=e,u=V("x"))}function i(e){T.current&&B(u+(e-r)+"px")}function c(e){return t(this,void 0,void 0,(function(){var t,u,a;return n(this,(function(n){switch(n.label){case 0:return T.current?((t=e-r)>=M?(_.current--,u=(v-Math.abs(t))*h/v,j(!1,u)):t<=-M?(_.current++,u=(v-Math.abs(t))*h/v,j(!1,u)):(u=Math.abs(t)*h/v,j(!1,u)),(a=_.current-1)>=o.length&&(a=0),W(a),T.current=!1,L.current=!0,B(),[4,f.sleep(h)]):[2];case 1:return n.sent(),S(!1),L.current=!1,[2]}}))}))}function s(e){e.preventDefault(),e.stopPropagation()}function l(e){s(e),a(e.targetTouches[0].pageX)}function d(e){s(e),a(e.pageX)}function m(e){s(e),i(e.targetTouches[0].pageX)}function p(e){s(e),i(e.pageX)}function b(e){s(e),c(e.changedTouches[0].pageX)}function y(e){s(e),c(e.pageX)}function g(e){s(e),c(e.changedTouches[0].pageX)}return e&&w&&(e.addEventListener("touchstart",l,{passive:!1}),e.addEventListener("touchmove",m,{passive:!1}),e.addEventListener("touchend",b,{passive:!1}),e.addEventListener("touchcancel",g,{passive:!1}),e.addEventListener("mousedown",d,{passive:!1}),e.addEventListener("mousemove",p,{passive:!1}),e.addEventListener("mouseup",y,{passive:!1}),e.addEventListener("mouseout",y,{passive:!1})),function(){null==e||e.removeEventListener("touchstart",l),null==e||e.removeEventListener("touchmove",m),null==e||e.removeEventListener("touchend",b),null==e||e.removeEventListener("touchcancel",g),null==e||e.removeEventListener("mousedown",d),null==e||e.removeEventListener("mousemove",p),null==e||e.removeEventListener("mouseup",y),null==e||e.removeEventListener("mouseout",y)}}),[w,j,V,B,M,h,o.length,v]),l((function(){var e;function t(){clearTimeout(e),S(!0),j(!0),B(),e=setTimeout((function(){S(!1)}),60)}return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[j,B]),l((function(){var e=E.current;return function(){return clearTimeout(e)}}),[]),[X,C,I]}(e(e(e({},b),o),{width:X,ref:y})),V=M[0],j=M[1],B=M[2],D=a((function(){return X&&z?X*(E.length+2)+"px":"100%"}),[X,z,E.length]);if("number"!=typeof w||w<=0||w>=1)throw new Error("property boundary must be number, and between 0 and 1, exclude 0 and 1");return u.createElement("div",{className:r(v.relative,v.w_full,v.border_box,v.overflow_hidden)},u.createElement("div",{ref:W,className:r(v.relative,v.w_full,v.border_box,v.overflow_hidden)},u.createElement("div",{ref:V,style:{width:D,backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"},className:r(v.relative,v.w_full,v.flex,v.nowrap,v.border_box,v.item_center,v.justify_center)},z&&u.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:r(v.relative,v.flex_1,v.overflow_hidden,v.border_box)},x(E[E.length-1])),E.map((function(e,t){return u.createElement("div",{key:t,style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:r(v.relative,v.flex_1,v.overflow_hidden,v.border_box)},x(e))})),z&&u.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:r(v.relative,v.flex_1,v.overflow_hidden,v.border_box)},x(E[0])))),_,T||L&&u.createElement("ul",{style:k,className:r(v.absolute,v.w_full,v.left_0,v.flex,v.justify_center,v.item_center,v.bottom_20,v.style_none,v.gap)},E.map((function(t,n){return u.createElement("li",{key:n,onClick:function(){return B(n)},style:n===j?e(e({},p),N):e(e({},h),S)})}))))}));export{y as default};
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 };
@@ -1 +1,5 @@
1
- import r from"./Swiper.js";export{r as default};
1
+ import Swiper from './Swiper.js';
2
+
3
+
4
+
5
+ export { Swiper as default };
@@ -1 +1,48 @@
1
- import{StyleSheet as e}from"aphrodite/no-important";var t=e.create({relative:{position:"relative"},absolute:{position:"absolute"},w_full:{width:"100%"},border_box:{boxSizing:"border-box"},overflow_hidden:{overflow:"hidden"},flex:{display:"flex"},nowrap:{flexWrap:"nowrap"},flex_1:{flex:1},item_center:{alignItems:"center"},justify_center:{justifyContent:"center"},left_0:{left:0},bottom_20:{bottom:"20px"},style_none:{listStyle:"none"},gap:{columnGap:"8px"}});export{t as default};
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 };
@@ -1 +1,18 @@
1
- import{useCallback as n,useEffect as t}from"react";function e(e,i){void 0===i&&(i=[]);var o=n((function(){return null==e?void 0:e()}),i);t((function(){return o(),document.addEventListener("visibilitychange",o),function(){document.removeEventListener("visibilitychange",o)}}),[o])}export{e as default};
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{default as utils}from"./utils.js";export{default as useShow}from"./hooks/useShow.js";export{default as Button}from"./Button/Button.js";export{default as Card}from"./Card/Card.js";export{default as Container}from"./Container/Container.js";export{default as Loading}from"./Loading/Loading.js";export{default as Popup}from"./Popup/Popup.js";export{default as ScrollView}from"./ScrollView/ScrollView.js";export{default as Swiper}from"./Swiper/Swiper.js";
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{__awaiter as r,__generator as i}from"tslib";var n={sleep:function(n,t){return void 0===t&&(t=!1),r(this,void 0,void 0,(function(){return i(this,(function(r){return[2,new Promise((function(r){return setTimeout((function(){return r(t)}),n)}))]}))}))},parseUrl:function(r){var i=window.location.href.split("?").slice(1),n={};return i.forEach((function(r){var i=r.indexOf("/");(-1!==i?r.substring(0,i):r).split("&").forEach((function(r){var i=r.split("="),t=i[0],o=i[1],e=void 0===o||o;if(n.hasOwnProperty(t)){var s=n[t];Array.isArray(s)?s.push(e):n[t]=[e]}else n[t]=e}))})),void 0!==r?n[r]||void 0:n}};export{n as default};
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 { type AnimationTimingFunction, Button, Card, Container, Loading, Popup, type PopupPosition, type PopupType, _default$1 as ScrollView, type ScrollViewExposeMethods, _default as Swiper, type SwiperExposeMethods, type SwiperProps, type ToParams, useShow, _default$2 as utils };
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
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),r=require("react"),o=require("./styles.js"),i=["relative","absolute","fixed"];exports.default=function(s){var l=s.children,n=s.style,a=void 0===n?{}:n,c=s.block,u=void 0!==c&&c,d=s.className,f=void 0===d?"":d,p=s.radius,v=void 0===p?4:p,g=s.bg,h=void 0===g?"rgba(0,0,0,.7)":g,b=s.color,m=void 0===b?"#ffffff":b,y=s.onClick,C=s.wavesColor,_=void 0===C?"rgba(255,255,255,.3)":C,k=e.__rest(s,["children","style","block","className","radius","bg","color","onClick","wavesColor"]),x=r.useRef([]),w=r.useRef(null),q=r.useMemo((function(){return e.__assign(e.__assign({},a),{overflow:"hidden",borderRadius:v+"px",background:h,color:m})}),[a,v,h,m]),R=r.useCallback((function(e){null==y||y(e);var r,i=e.currentTarget;x.current.length?r=x.current.shift():(r=document.createElement("div")).classList.add(t.css(o.default.ripple));var s=i.getBoundingClientRect();r.style.width=r.style.height=Math.max(s.width,s.height)+"px",r.style.backgroundColor=_,i.appendChild(r);var l=e.pageY-s.top-r.offsetHeight/2+"px",n=e.pageX-s.left-r.offsetWidth/2+"px";r.style.top=l,r.style.left=n,r.onanimationend=function(){i.removeChild(r),x.current.push(r)}}),[y,_]);return r.useEffect((function(){if(w.current){var e=getComputedStyle(w.current);i.includes(e.position)||(w.current.style.position="relative")}}),[]),r.createElement("button",e.__assign({},k,{className:"".concat(f," ").concat(t.css(o.default.button)," ").concat(u?t.css(o.default.block):""),style:q,ref:w,onClick:R}),l)};
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;
@@ -1 +1,9 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Button.js");exports.default=e.default;
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;