rox-react-components 0.0.5 → 0.0.7
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/Swiper/Swiper.d.ts +7 -0
- package/dist/es/Swiper/Swiper.js +1 -0
- package/dist/es/Swiper/index.d.ts +2 -2
- package/dist/es/Swiper/index.js +1 -1
- package/dist/{lib/Carousel → es/Swiper}/type.d.ts +3 -6
- package/dist/es/index.d.ts +0 -2
- package/dist/es/index.js +1 -1
- package/dist/es/types.d.ts +1 -1
- package/dist/index.d.ts +6 -16
- package/dist/lib/Swiper/Swiper.d.ts +7 -0
- package/dist/lib/Swiper/Swiper.js +1 -0
- package/dist/lib/Swiper/index.d.ts +2 -2
- package/dist/lib/Swiper/index.js +1 -1
- package/dist/{es/Carousel → lib/Swiper}/type.d.ts +3 -6
- package/dist/lib/index.d.ts +0 -2
- package/dist/lib/index.js +1 -1
- package/dist/lib/types.d.ts +1 -1
- package/package.json +3 -2
- package/dist/es/Carousel/Carouse.d.ts +0 -13
- package/dist/es/Carousel/Carouse.js +0 -1
- package/dist/es/Carousel/index.d.ts +0 -2
- package/dist/es/Carousel/index.js +0 -1
- package/dist/es/Carousel/useCarousel.d.ts +0 -26
- package/dist/es/Carousel/useCarousel.js +0 -1
- package/dist/lib/Carousel/Carouse.d.ts +0 -13
- package/dist/lib/Carousel/Carouse.js +0 -1
- package/dist/lib/Carousel/index.d.ts +0 -2
- package/dist/lib/Carousel/index.js +0 -1
- package/dist/lib/Carousel/useCarousel.d.ts +0 -26
- package/dist/lib/Carousel/useCarousel.js +0 -1
- /package/dist/es/{Carousel → Swiper}/styles.d.ts +0 -0
- /package/dist/es/{Carousel → Swiper}/styles.js +0 -0
- /package/dist/lib/{Carousel → Swiper}/styles.d.ts +0 -0
- /package/dist/lib/{Carousel → Swiper}/styles.js +0 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SwiperExposeMethods, SwiperProps } from './type';
|
|
3
|
+
declare module 'react' {
|
|
4
|
+
function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
|
|
5
|
+
}
|
|
6
|
+
declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
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 i,useRef as a,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={width:"10px",height:"10px",borderRadius:"50%",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},h=e(e({},m),{backgroundColor:"rgba(255,255,255,.7)"}),p={data:[],renderItem:function(){return null},onChange:function(){return null},boundary:1/3,duration:500,delay:2e3,autoPlay:!0,active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:m,activeDotStyle:h};var b=o((function(o,b){var y=e(e({},p),o),g=y.boundary,w=y.data,E=y.renderItem,x=y.children,_=y.dotVisible,L=y.renderDots,T=y.dotBoxStyle,k=y.activeDotStyle,N=y.dotStyle,S=w.length>=2,z=function(){var e=a(null),t=c(0),n=t[0],r=t[1],u=s((function(){var t;return r((null===(t=e.current)||void 0===t?void 0:t.clientWidth)||0)}),[]);return l((function(){return u(),window.addEventListener("resize",u),function(){return window.removeEventListener("resize",u)}}),[u]),[e,n]}(),C=z[0],X=z[1],W=function(e){var r=this,u=e.active,o=e.data,v=e.width,m=e.duration,h=e.boundary,p=e.delay,b=e.ref,y=e.onChange,g=o.length>=2,w=a(),E=a(!0),x=a(u),_=a(!1),L=a(!1),T=c(!1),k=T[0],N=T[1],S=c(u),z=S[0],C=S[1],X=a(null),W=i((function(){return v*h}),[v,h]),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 i=o.split(",").slice(-4),a=i[0],c=i[1],s=i[2];return Number({x:a,y:c,z:s}[e])}var l=o.split(",").slice(-2);return a=l[0],c=l[1],Number({x:a,y:c,z:0}[e])}}),[]),j=s((function(e){void 0===e&&(e=!1),X.current&&(X.current.style.transition=e?"none":"all ".concat(m,"ms linear"),X.current.style.webkitTransition=e?"none":"all ".concat(m,"ms linear"))}),[m]),B=s((function(e){if(X.current){var t=e;null==t&&(t=g?-v*x.current+"px":"0px"),X.current.style.transform="translate3d(".concat(t,", 0, 0)"),X.current.style.webkitTransform="translate3d(".concat(t,", 0, 0)")}}),[g,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 _.current||!g?[2]:(_.current=!0,N(!0),x.current>=o.length+1?(_.current=!1,j(!0),x.current=1,B(),[4,f.sleep(5)]):[3,2]);case 1:return t.sent(),D(),[2];case 2:return j(),x.current++,(e=x.current-1)>=o.length&&(e=0),C(e),B(),[4,f.sleep(m)];case 3:return t.sent(),_.current=!1,N(!1),[2]}}))}))}),[g,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 _.current||!g?[2]:(_.current=!0,N(!0),x.current<=0?(_.current=!1,j(!0),x.current=o.length,B(),[4,f.sleep(5)]):[3,2]);case 1:return t.sent(),P(),[2];case 2:return j(),x.current--,(e=x.current-1)<0&&(e=o.length-1),C(e),B(),[4,f.sleep(m)];case 3:return t.sent(),_.current=!1,N(!1),[2]}}))}))}),[g,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 _.current||!g?[2]:(_.current=!0,N(!0),x.current<=0?(j(!0),x.current=o.length,B(),[4,f.sleep(5)]):[3,2]);case 1:t.sent(),t.label=2;case 2:return x.current>=o.length+1?(j(!0),x.current=1,B(),[4,f.sleep(5)]):[3,4];case 3:t.sent(),t.label=4;case 4:return j(),x.current=e+1,B(),C(e),[4,f.sleep(m)];case 5:return t.sent(),_.current=!1,N(!1),[2]}}))}))}),[g,j,o.length,B,m]);return d(b,(function(){return{next:function(){return D()},pre:function(){return P()}}}),[D,P]),l((function(){E.current=!0}),[v,o.length]),l((function(){E.current?(N(!0),x.current=g?u+1:u,j(!0),B(),C(u),E.current=!1,f.sleep(5).then((function(){N(!1)}))):(E.current=!1,I(u))}),[u,g,o,j,B,I]),l((function(){y(z)}),[z]),l((function(){g&&e.autoPlay&&!k?w.current=setTimeout((function(){return D()}),p):clearTimeout(w.current)}),[g,e.autoPlay,k,p,D]),l((function(){var e=X.current,r=0,u=0;function i(e){_.current||(L.current=!0,N(!0),j(!0),x.current<=0&&(x.current=o.length,B()),x.current>=o.length+1&&(x.current=1,B()),r=e,u=V("x"))}function a(e){L.current&&B(u+(e-r)+"px")}function c(e){return t(this,void 0,void 0,(function(){var t,u;return n(this,(function(n){switch(n.label){case 0:return L.current?(j(),(t=e-r)>=W&&x.current--,t<=-W&&x.current++,(u=x.current-1)>=o.length&&(u=0),C(u),L.current=!1,_.current=!0,B(),[4,f.sleep(m)]):[2];case 1:return n.sent(),N(!1),_.current=!1,[2]}}))}))}function s(e){e.preventDefault(),e.stopPropagation()}function l(e){s(e),i(e.targetTouches[0].pageX)}function d(e){s(e),i(e.pageX)}function v(e){s(e),a(e.targetTouches[0].pageX)}function h(e){s(e),a(e.pageX)}function p(e){s(e),c(e.changedTouches[0].pageX)}function b(e){s(e),c(e.pageX)}function y(e){s(e),c(e.changedTouches[0].pageX)}return e&&g&&(e.addEventListener("touchstart",l,{passive:!1}),e.addEventListener("touchmove",v,{passive:!1}),e.addEventListener("touchend",p,{passive:!1}),e.addEventListener("touchcancel",y,{passive:!1}),e.addEventListener("mousedown",d,{passive:!1}),e.addEventListener("mousemove",h,{passive:!1}),e.addEventListener("mouseup",b,{passive:!1}),e.addEventListener("mouseout",b,{passive:!1})),function(){null==e||e.removeEventListener("touchstart",l),null==e||e.removeEventListener("touchmove",v),null==e||e.removeEventListener("touchend",p),null==e||e.removeEventListener("touchcancel",y),null==e||e.removeEventListener("mousedown",d),null==e||e.removeEventListener("mousemove",h),null==e||e.removeEventListener("mouseup",b),null==e||e.removeEventListener("mouseout",b)}}),[g,j,V,B,W,m,o.length]),l((function(){var e;function t(){clearTimeout(e),N(!0),j(!0),B(),e=setTimeout((function(){N(!1)}),60)}return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[j,B]),l((function(){var e=w.current;return function(){return clearTimeout(e)}}),[]),[X,z,I]}(e(e(e({},p),o),{width:X,ref:b})),V=W[0],j=W[1],B=W[2],D=i((function(){return X&&S?X*(w.length+2)+"px":"100%"}),[X,S,w.length]);if("number"!=typeof g||g<=0||g>=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:C,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)},S&&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)},E(w[w.length-1])),w.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)},E(e))})),S&&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)},E(w[0])))),x,!x&&_&&(L||u.createElement("ul",{style:T,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)},w.map((function(t,n){return u.createElement("li",{key:n,onClick:function(){return B(n)},style:n===j?e(e({},h),k):e(e({},m),N)})})))))}));export{b as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export default
|
|
1
|
+
import Swiper from './Swiper';
|
|
2
|
+
export default Swiper;
|
package/dist/es/Swiper/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import r from"./Swiper.js";export{r as default};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
-
export interface
|
|
2
|
+
export interface SwiperProps<T> extends PropsWithChildren {
|
|
3
3
|
data: T[];
|
|
4
4
|
renderItem: (item: T) => ReactNode;
|
|
5
5
|
onChange?: (index: number) => void;
|
|
@@ -9,15 +9,12 @@ export interface CarouselProps<T> extends PropsWithChildren {
|
|
|
9
9
|
autoPlay?: boolean;
|
|
10
10
|
active?: number;
|
|
11
11
|
dotVisible?: boolean;
|
|
12
|
+
renderDots?: ReactNode;
|
|
12
13
|
dotBoxStyle?: CSSProperties;
|
|
13
14
|
dotStyle?: CSSProperties;
|
|
14
15
|
activeDotStyle?: CSSProperties;
|
|
15
16
|
}
|
|
16
|
-
export interface
|
|
17
|
+
export interface SwiperExposeMethods {
|
|
17
18
|
next: () => any;
|
|
18
19
|
pre: () => any;
|
|
19
20
|
}
|
|
20
|
-
export interface SwiperProps<T> extends CarouselProps<T> {
|
|
21
|
-
}
|
|
22
|
-
export interface SwiperExposeMethods extends CarouselExposeMethods {
|
|
23
|
-
}
|
package/dist/es/index.d.ts
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default as Card}from"./Card/Card.js";export{default as
|
|
1
|
+
export{default as Card}from"./Card/Card.js";export{default as Swiper}from"./Swiper/Swiper.js";export{default as utils}from"./utils.js";
|
package/dist/es/types.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './Swiper/type';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { PropsWithChildren, ReactNode, CSSProperties, FC } from 'react';
|
|
1
|
+
import React, { PropsWithChildren, ReactNode, CSSProperties, FC } from 'react';
|
|
3
2
|
|
|
4
|
-
interface
|
|
3
|
+
interface SwiperProps<T> extends PropsWithChildren {
|
|
5
4
|
data: T[];
|
|
6
5
|
renderItem: (item: T) => ReactNode;
|
|
7
6
|
onChange?: (index: number) => void;
|
|
@@ -11,18 +10,15 @@ interface CarouselProps<T> extends PropsWithChildren {
|
|
|
11
10
|
autoPlay?: boolean;
|
|
12
11
|
active?: number;
|
|
13
12
|
dotVisible?: boolean;
|
|
13
|
+
renderDots?: ReactNode;
|
|
14
14
|
dotBoxStyle?: CSSProperties;
|
|
15
15
|
dotStyle?: CSSProperties;
|
|
16
16
|
activeDotStyle?: CSSProperties;
|
|
17
17
|
}
|
|
18
|
-
interface
|
|
18
|
+
interface SwiperExposeMethods {
|
|
19
19
|
next: () => any;
|
|
20
20
|
pre: () => any;
|
|
21
21
|
}
|
|
22
|
-
interface SwiperProps<T> extends CarouselProps<T> {
|
|
23
|
-
}
|
|
24
|
-
interface SwiperExposeMethods extends CarouselExposeMethods {
|
|
25
|
-
}
|
|
26
22
|
|
|
27
23
|
interface CardProps extends PropsWithChildren {
|
|
28
24
|
expand?: boolean;
|
|
@@ -32,18 +28,12 @@ declare const Card: FC<CardProps>;
|
|
|
32
28
|
|
|
33
29
|
declare module 'react' {
|
|
34
30
|
function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
|
|
35
|
-
interface CSSProperties {
|
|
36
|
-
'--width'?: string;
|
|
37
|
-
'--duration'?: string;
|
|
38
|
-
'--x'?: string;
|
|
39
|
-
'--delay'?: string;
|
|
40
|
-
}
|
|
41
31
|
}
|
|
42
|
-
declare const _default$1: <T extends unknown>(props:
|
|
32
|
+
declare const _default$1: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
|
|
43
33
|
|
|
44
34
|
declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
|
|
45
35
|
declare const _default: {
|
|
46
36
|
sleep: typeof sleep;
|
|
47
37
|
};
|
|
48
38
|
|
|
49
|
-
export { Card, _default$1 as
|
|
39
|
+
export { Card, _default$1 as Swiper, type SwiperExposeMethods, type SwiperProps, _default as utils };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SwiperExposeMethods, SwiperProps } from './type';
|
|
3
|
+
declare module 'react' {
|
|
4
|
+
function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
|
|
5
|
+
}
|
|
6
|
+
declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),n=require("react"),r=require("../utils.js"),u=require("./styles.js"),a={width:"10px",height:"10px",borderRadius:"50%",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},s=e.__assign(e.__assign({},a),{backgroundColor:"rgba(255,255,255,.7)"}),l={data:[],renderItem:function(){return null},onChange:function(){return null},boundary:1/3,duration:500,delay:2e3,autoPlay:!0,active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:a,activeDotStyle:s};var i=n.forwardRef((function(i,c){var o=e.__assign(e.__assign({},l),i),f=o.boundary,d=o.data,v=o.renderItem,m=o.children,h=o.dotVisible,_=o.renderDots,b=o.dotBoxStyle,g=o.activeDotStyle,p=o.dotStyle,y=d.length>=2,w=function(){var e=n.useRef(null),t=n.useState(0),r=t[0],u=t[1],a=n.useCallback((function(){var t;return u((null===(t=e.current)||void 0===t?void 0:t.clientWidth)||0)}),[]);return n.useEffect((function(){return a(),window.addEventListener("resize",a),function(){return window.removeEventListener("resize",a)}}),[a]),[e,r]}(),E=w[0],x=w[1],k=function(t){var u=this,a=t.active,s=t.data,l=t.width,i=t.duration,c=t.boundary,o=t.delay,f=t.ref,d=t.onChange,v=s.length>=2,m=n.useRef(),h=n.useRef(!0),_=n.useRef(a),b=n.useRef(!1),g=n.useRef(!1),p=n.useState(!1),y=p[0],w=p[1],E=n.useState(a),x=E[0],k=E[1],L=n.useRef(null),T=n.useMemo((function(){return l*c}),[l,c]),C=n.useCallback((function(e){if(!L.current)return 0;var t=getComputedStyle(L.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],a=r[1];if(u.includes("3d")){var s=a.split(",").slice(-4),l=s[0],i=s[1],c=s[2];return Number({x:l,y:i,z:c}[e])}var o=a.split(",").slice(-2);return l=o[0],i=o[1],Number({x:l,y:i,z:0}[e])}}),[]),S=n.useCallback((function(e){void 0===e&&(e=!1),L.current&&(L.current.style.transition=e?"none":"all ".concat(i,"ms linear"),L.current.style.webkitTransition=e?"none":"all ".concat(i,"ms linear"))}),[i]),N=n.useCallback((function(e){if(L.current){var t=e;null==t&&(t=v?-l*_.current+"px":"0px"),L.current.style.transform="translate3d(".concat(t,", 0, 0)"),L.current.style.webkitTransform="translate3d(".concat(t,", 0, 0)")}}),[v,l]),R=n.useCallback((function(){return e.__awaiter(u,void 0,void 0,(function(){var t;return e.__generator(this,(function(e){switch(e.label){case 0:return b.current||!v?[2]:(b.current=!0,w(!0),_.current>=s.length+1?(b.current=!1,S(!0),_.current=1,N(),[4,r.default.sleep(5)]):[3,2]);case 1:return e.sent(),R(),[2];case 2:return S(),_.current++,(t=_.current-1)>=s.length&&(t=0),k(t),N(),[4,r.default.sleep(i)];case 3:return e.sent(),b.current=!1,w(!1),[2]}}))}))}),[v,s.length,S,N]),z=n.useCallback((function(){return e.__awaiter(u,void 0,void 0,(function(){var t;return e.__generator(this,(function(e){switch(e.label){case 0:return b.current||!v?[2]:(b.current=!0,w(!0),_.current<=0?(b.current=!1,S(!0),_.current=s.length,N(),[4,r.default.sleep(5)]):[3,2]);case 1:return e.sent(),z(),[2];case 2:return S(),_.current--,(t=_.current-1)<0&&(t=s.length-1),k(t),N(),[4,r.default.sleep(i)];case 3:return e.sent(),b.current=!1,w(!1),[2]}}))}))}),[v,s.length,S,N]),X=n.useCallback((function(t){return e.__awaiter(u,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return b.current||!v?[2]:(b.current=!0,w(!0),_.current<=0?(S(!0),_.current=s.length,N(),[4,r.default.sleep(5)]):[3,2]);case 1:e.sent(),e.label=2;case 2:return _.current>=s.length+1?(S(!0),_.current=1,N(),[4,r.default.sleep(5)]):[3,4];case 3:e.sent(),e.label=4;case 4:return S(),_.current=t+1,N(),k(t),[4,r.default.sleep(i)];case 5:return e.sent(),b.current=!1,w(!1),[2]}}))}))}),[v,S,s.length,N,i]);return n.useImperativeHandle(f,(function(){return{next:function(){return R()},pre:function(){return z()}}}),[R,z]),n.useEffect((function(){h.current=!0}),[l,s.length]),n.useEffect((function(){h.current?(w(!0),_.current=v?a+1:a,S(!0),N(),k(a),h.current=!1,r.default.sleep(5).then((function(){w(!1)}))):(h.current=!1,X(a))}),[a,v,s,S,N,X]),n.useEffect((function(){d(x)}),[x]),n.useEffect((function(){v&&t.autoPlay&&!y?m.current=setTimeout((function(){return R()}),o):clearTimeout(m.current)}),[v,t.autoPlay,y,o,R]),n.useEffect((function(){var t=L.current,n=0,u=0;function a(e){b.current||(g.current=!0,w(!0),S(!0),_.current<=0&&(_.current=s.length,N()),_.current>=s.length+1&&(_.current=1,N()),n=e,u=C("x"))}function l(e){g.current&&N(u+(e-n)+"px")}function c(t){return e.__awaiter(this,void 0,void 0,(function(){var u,a;return e.__generator(this,(function(e){switch(e.label){case 0:return g.current?(S(),(u=t-n)>=T&&_.current--,u<=-T&&_.current++,(a=_.current-1)>=s.length&&(a=0),k(a),g.current=!1,b.current=!0,N(),[4,r.default.sleep(i)]):[2];case 1:return e.sent(),w(!1),b.current=!1,[2]}}))}))}function o(e){e.preventDefault(),e.stopPropagation()}function f(e){o(e),a(e.targetTouches[0].pageX)}function d(e){o(e),a(e.pageX)}function m(e){o(e),l(e.targetTouches[0].pageX)}function h(e){o(e),l(e.pageX)}function p(e){o(e),c(e.changedTouches[0].pageX)}function y(e){o(e),c(e.pageX)}function E(e){o(e),c(e.changedTouches[0].pageX)}return t&&v&&(t.addEventListener("touchstart",f,{passive:!1}),t.addEventListener("touchmove",m,{passive:!1}),t.addEventListener("touchend",p,{passive:!1}),t.addEventListener("touchcancel",E,{passive:!1}),t.addEventListener("mousedown",d,{passive:!1}),t.addEventListener("mousemove",h,{passive:!1}),t.addEventListener("mouseup",y,{passive:!1}),t.addEventListener("mouseout",y,{passive:!1})),function(){null==t||t.removeEventListener("touchstart",f),null==t||t.removeEventListener("touchmove",m),null==t||t.removeEventListener("touchend",p),null==t||t.removeEventListener("touchcancel",E),null==t||t.removeEventListener("mousedown",d),null==t||t.removeEventListener("mousemove",h),null==t||t.removeEventListener("mouseup",y),null==t||t.removeEventListener("mouseout",y)}}),[v,S,C,N,T,i,s.length]),n.useEffect((function(){var e;function t(){clearTimeout(e),w(!0),S(!0),N(),e=setTimeout((function(){w(!1)}),60)}return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}),[S,N]),n.useEffect((function(){var e=m.current;return function(){return clearTimeout(e)}}),[]),[L,x,X]}(e.__assign(e.__assign(e.__assign({},l),i),{width:x,ref:c})),L=k[0],T=k[1],C=k[2],S=n.useMemo((function(){return x&&y?x*(d.length+2)+"px":"100%"}),[x,y,d.length]);if("number"!=typeof f||f<=0||f>=1)throw new Error("property boundary must be number, and between 0 and 1, exclude 0 and 1");return n.createElement("div",{className:t.css(u.default.relative,u.default.w_full,u.default.border_box,u.default.overflow_hidden)},n.createElement("div",{ref:E,className:t.css(u.default.relative,u.default.w_full,u.default.border_box,u.default.overflow_hidden)},n.createElement("div",{ref:L,style:{width:S,backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"},className:t.css(u.default.relative,u.default.w_full,u.default.flex,u.default.nowrap,u.default.border_box,u.default.item_center,u.default.justify_center)},y&&n.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t.css(u.default.relative,u.default.flex_1,u.default.overflow_hidden,u.default.border_box)},v(d[d.length-1])),d.map((function(e,r){return n.createElement("div",{key:r,style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t.css(u.default.relative,u.default.flex_1,u.default.overflow_hidden,u.default.border_box)},v(e))})),y&&n.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t.css(u.default.relative,u.default.flex_1,u.default.overflow_hidden,u.default.border_box)},v(d[0])))),m,!m&&h&&(_||n.createElement("ul",{style:b,className:t.css(u.default.absolute,u.default.w_full,u.default.left_0,u.default.flex,u.default.justify_center,u.default.item_center,u.default.bottom_20,u.default.style_none,u.default.gap)},d.map((function(t,r){return n.createElement("li",{key:r,onClick:function(){return C(r)},style:r===T?e.__assign(e.__assign({},s),g):e.__assign(e.__assign({},a),p)})})))))}));exports.default=i;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export default
|
|
1
|
+
import Swiper from './Swiper';
|
|
2
|
+
export default Swiper;
|
package/dist/lib/Swiper/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Swiper.js");exports.default=e.default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
-
export interface
|
|
2
|
+
export interface SwiperProps<T> extends PropsWithChildren {
|
|
3
3
|
data: T[];
|
|
4
4
|
renderItem: (item: T) => ReactNode;
|
|
5
5
|
onChange?: (index: number) => void;
|
|
@@ -9,15 +9,12 @@ export interface CarouselProps<T> extends PropsWithChildren {
|
|
|
9
9
|
autoPlay?: boolean;
|
|
10
10
|
active?: number;
|
|
11
11
|
dotVisible?: boolean;
|
|
12
|
+
renderDots?: ReactNode;
|
|
12
13
|
dotBoxStyle?: CSSProperties;
|
|
13
14
|
dotStyle?: CSSProperties;
|
|
14
15
|
activeDotStyle?: CSSProperties;
|
|
15
16
|
}
|
|
16
|
-
export interface
|
|
17
|
+
export interface SwiperExposeMethods {
|
|
17
18
|
next: () => any;
|
|
18
19
|
pre: () => any;
|
|
19
20
|
}
|
|
20
|
-
export interface SwiperProps<T> extends CarouselProps<T> {
|
|
21
|
-
}
|
|
22
|
-
export interface SwiperExposeMethods extends CarouselExposeMethods {
|
|
23
|
-
}
|
package/dist/lib/index.d.ts
CHANGED
package/dist/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var r=require("./Card/Card.js"),e=require("./Swiper/Swiper.js"),s=require("./utils.js");exports.Card=r.default,exports.Swiper=e.default,exports.utils=s.default;
|
package/dist/lib/types.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './Swiper/type';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rox-react-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"main": "dist/lib/index.js",
|
|
5
5
|
"module": "dist/es/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"pc swiper",
|
|
15
15
|
"carousel",
|
|
16
16
|
"mobile carousel",
|
|
17
|
-
"ps carousel"
|
|
17
|
+
"ps carousel",
|
|
18
|
+
"react swiper carousel pc mobile touch mouse"
|
|
18
19
|
],
|
|
19
20
|
"files": [
|
|
20
21
|
"dist",
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CarouselExposeMethods, CarouselProps } from './type';
|
|
3
|
-
declare module 'react' {
|
|
4
|
-
function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
|
|
5
|
-
interface CSSProperties {
|
|
6
|
-
'--width'?: string;
|
|
7
|
-
'--duration'?: string;
|
|
8
|
-
'--x'?: string;
|
|
9
|
-
'--delay'?: string;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
declare const _default: <T extends unknown>(props: CarouselProps<T> & React.RefAttributes<CarouselExposeMethods>) => React.ReactNode;
|
|
13
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import*as r from"react";import a from"./styles.js";import l,{initActiveDotStyle as o,initDotStyle as n}from"./useCarousel.js";var s=r.forwardRef((function(s,i){var d=l(s,i),m=d.boundary,f=d.scroll_el,c=d.box_el,b=d.data,u=d.renderItem,_=d.gte2,y=d.scroll_width,v=d.current,w=d.dotVisible,p=d.dotBoxStyle,x=d.dotStyle,h=d.activeDotStyle,k=d.children,E=d.setCurrent,N=r.useMemo((function(){return!k&&w}),[w,k]);if("number"!=typeof m||m<=0&&m>=1)throw new Error("property boundary must be number, and between 0 and 1, exclude 0 and 1");return r.createElement("div",{className:t(a.relative,a.w_full,a.border_box,a.overflow_hidden)},r.createElement("div",{ref:c,className:t(a.relative,a.w_full,a.border_box,a.overflow_hidden)},r.createElement("div",{ref:f,style:{width:y,backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"},className:t(a.relative,a.w_full,a.flex,a.nowrap,a.border_box,a.item_center,a.justify_center)},_&&r.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t(a.relative,a.flex_1,a.overflow_hidden,a.border_box)},u(b[b.length-1])),b.map((function(e,l){return r.createElement("div",{key:l,style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t(a.relative,a.flex_1,a.overflow_hidden,a.border_box)},u(e))})),_&&r.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t(a.relative,a.flex_1,a.overflow_hidden,a.border_box)},u(b[0])))),k,N&&r.createElement("ul",{style:p,className:t(a.absolute,a.w_full,a.left_0,a.flex,a.justify_center,a.item_center,a.bottom_20,a.style_none,a.gap)},b.map((function(t,a){return r.createElement("li",{key:a,onClick:function(){return E(a)},style:a===v?e(e({},o),h):e(e({},n),x)})}))))}));export{s as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import o from"./Carouse.js";export{o as default};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { CSSProperties, ForwardedRef } from 'react';
|
|
2
|
-
import { CarouselExposeMethods, CarouselProps } from './type';
|
|
3
|
-
export declare const initDotStyle: CSSProperties;
|
|
4
|
-
export declare const initActiveDotStyle: CSSProperties;
|
|
5
|
-
declare function useCarousel<T, B extends HTMLElement, S extends HTMLElement>(_props: CarouselProps<T>, ref: ForwardedRef<CarouselExposeMethods>): {
|
|
6
|
-
box_el: import("react").RefObject<B>;
|
|
7
|
-
scroll_el: import("react").RefObject<S>;
|
|
8
|
-
gte2: boolean;
|
|
9
|
-
scroll_width: number;
|
|
10
|
-
current: number;
|
|
11
|
-
setCurrent: (i: number) => Promise<void>;
|
|
12
|
-
data: T[];
|
|
13
|
-
renderItem: (item: T) => import("react").ReactNode;
|
|
14
|
-
onChange?: ((index: number) => void) | undefined;
|
|
15
|
-
boundary?: number | undefined;
|
|
16
|
-
duration?: number | undefined;
|
|
17
|
-
delay?: number | undefined;
|
|
18
|
-
autoPlay?: boolean | undefined;
|
|
19
|
-
active?: number | undefined;
|
|
20
|
-
dotVisible?: boolean | undefined;
|
|
21
|
-
dotBoxStyle?: CSSProperties | undefined;
|
|
22
|
-
dotStyle?: CSSProperties | undefined;
|
|
23
|
-
activeDotStyle?: CSSProperties | undefined;
|
|
24
|
-
children?: import("react").ReactNode;
|
|
25
|
-
};
|
|
26
|
-
export default useCarousel;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{__assign as t,__awaiter as n,__generator as e}from"tslib";import{useMemo as r,useRef as u,useState as a,useCallback as c,useImperativeHandle as o,useEffect as i}from"react";import l from"../utils.js";var s={width:"10px",height:"10px",borderRadius:"50%",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},d=t(t({},s),{backgroundColor:"rgba(255,255,255,.7)"}),v={data:[],renderItem:function(){return null},onChange:function(){return null},boundary:1/3,duration:500,delay:2e3,autoPlay:!0,active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:s,activeDotStyle:d};function f(s,d){var f=this,m=r((function(){return t(t({},v),s)}),[s]),h=u(null),p=u(null),g=u(!1),y=u(!1),b=u(),E=u(0),L=u(0),T=u(m.active),w=a(m.active),x=w[0],P=w[1],C=a(0),S=C[0],X=C[1],z=a(!1),k=z[0],D=z[1],_=r((function(){return m.data.length>=2}),[m.data.length]),N=r((function(){return _?S*(m.data.length+2):S*m.data.length}),[_,S,m.data.length]),W=c((function(){var t;return(null===(t=h.current)||void 0===t?void 0:t.clientWidth)||0}),[]),j=c((function(t){void 0===t&&(t=!1),p.current&&(p.current.style.transition=t?"none":"all ".concat(m.duration,"ms linear"),p.current.style.webkitTransition=t?"none":"all ".concat(m.duration,"ms linear"))}),[m.duration]),B=c((function(t){if(p.current&&h.current){var n=t;null==n&&(n=_?-W()*T.current+"px":"0px"),p.current.style.transform="translate3d(".concat(n,", 0, 0)"),p.current.style.webkitTransform="translate3d(".concat(n,", 0, 0)")}}),[_,W]),I=c((function(t){return n(f,void 0,void 0,(function(){return e(this,(function(n){switch(n.label){case 0:return g.current||y.current?[2]:(D(!0),g.current=!0,T.current=t+1,P(t),j(),B(),[4,l.sleep(m.duration)]);case 1:return n.sent(),g.current=!1,D(!1),[2]}}))}))}),[j,B]),K=c((function(t){if(!p.current)return 0;var n=getComputedStyle(p.current);try{var e=new WebKitCSSMatrix(n.transform);return{x:e.m41,y:e.m42,z:e.m43}[t]}catch(e){var r=n.transform.split(/\(|\)/),u=r[0],a=r[1];if(u.includes("3d")){var c=a.split(",").slice(-4),o=c[0],i=c[1],l=c[2];return Number({x:o,y:i,z:l}[t])}var s=a.split(",").slice(-2);o=s[0],i=s[1];return Number({x:o,y:i,z:0}[t])}}),[]),M=c((function(){X(W()),j(!0),B()}),[B,j,W]),R=c((function(){return n(f,void 0,void 0,(function(){var t,n;return e(this,(function(e){switch(e.label){case 0:return!_||g.current||k?[2]:(clearTimeout(b.current),g.current=!0,j(),(t=T.current+1)>m.data.length+1?(j(!0),T.current=1,B(),[4,l.sleep(1)]):[3,2]);case 1:return e.sent(),g.current=!1,R(),[3,3];case 2:T.current=t,n=t===m.data.length+1?0:t-1,P(n),B(),b.current=setTimeout((function(){g.current=!1,m.autoPlay&&(b.current=setTimeout((function(){R()}),m.delay))}),m.duration),e.label=3;case 3:return[2]}}))}))}),[_,k,j,m.data.length,B,m.duration,m.autoPlay,m.delay]),V=c((function(){return n(f,void 0,void 0,(function(){var t,n;return e(this,(function(e){switch(e.label){case 0:return!_||g.current||k?[2]:(clearTimeout(b.current),g.current=!0,j(),(t=T.current-1)<0?(j(!0),T.current=m.data.length,B(),[4,l.sleep(1)]):[3,2]);case 1:return e.sent(),g.current=!1,V(),[3,3];case 2:T.current=t,n=0===t?m.data.length-1:t-1,P(n),B(),b.current=setTimeout((function(){g.current=!1,m.autoPlay&&(b.current=setTimeout((function(){R()}),m.delay))}),m.duration),e.label=3;case 3:return[2]}}))}))}),[_,k,j,m.data.length,B,m.duration,m.autoPlay,m.delay,R]),q=c((function(t,r){return n(f,void 0,void 0,(function(){return e(this,(function(n){return r.preventDefault(),r.stopPropagation(),D(!0),y.current=!0,!_||g.current||(clearTimeout(b.current),E.current=t,j(!0),0===T.current&&(T.current=m.data.length,B()),T.current===m.data.length+1&&(T.current=1,B()),L.current=K("x")),[2]}))}))}),[_]),A=c((function(t,n){if(n.preventDefault(),n.stopPropagation(),_&&y.current&&!g.current){var e=t-E.current;B(L.current+e+"px")}}),[_]),F=c((function(t,r){return n(f,void 0,void 0,(function(){var n,u,a,c;return e(this,(function(e){return r.preventDefault(),r.stopPropagation(),D(!1),y.current=!1,!_||g.current||(j(),(n=t-E.current)>m.boundary*W()&&(a=T.current-1,T.current=a,u=0===a?m.data.length-1:a-1,P(u)),n<-m.boundary*W()&&(a=T.current+1,T.current=a,c=a===m.data.length+1?0:a-1,P(c)),B()),[2]}))}))}),[_,j,m.boundary,W,m.data.length,B]),G=c((function(t){return q(t.targetTouches[0].pageX,t)}),[q]),H=c((function(t){return A(t.targetTouches[0].pageX,t)}),[A]),J=c((function(t){return F(t.changedTouches[0].pageX,t)}),[F]),O=c((function(t){return q(t.pageX,t)}),[q]),Q=c((function(t){return A(t.pageX,t)}),[A]),U=c((function(t){return F(t.pageX,t)}),[F]),Y=c((function(){D(!1),y.current=!1,_&&(j(),B())}),[_,j,B]);return o(d,(function(){return{next:function(){return R()},pre:function(){return V()}}}),[R,V]),i((function(){T.current=m.active,P(m.active)}),[m.active]),i((function(){m.onChange(x)}),[x,m.onChange]),i((function(){_&&T.current++}),[_]),i((function(){return M(),window.addEventListener("resize",M),function(){window.removeEventListener("resize",M)}}),[M]),i((function(){m.autoPlay&&!k?(g.current=!1,b.current=setTimeout((function(){R()}),m.delay)):clearTimeout(b.current);var t=b.current;return function(){clearTimeout(t)}}),[m.autoPlay,k,R,m.delay]),i((function(){var t=h.current;return null==t||t.addEventListener("touchstart",G,{passive:!1}),null==t||t.addEventListener("touchmove",H,{passive:!1}),null==t||t.addEventListener("touchend",J,{passive:!1}),null==t||t.addEventListener("touchcancel",Y),null==t||t.addEventListener("mousedown",O,{passive:!1}),null==t||t.addEventListener("mousemove",Q,{passive:!1}),null==t||t.addEventListener("mouseup",U,{passive:!1}),function(){null==t||t.removeEventListener("touchstart",G),null==t||t.removeEventListener("touchmove",H),null==t||t.removeEventListener("touchend",J),null==t||t.removeEventListener("touchcancel",Y),null==t||t.removeEventListener("mousedown",O),null==t||t.removeEventListener("mousemove",Q),null==t||t.removeEventListener("mouseup",U)}}),[G,H,J,Y,O,Q,U]),i((function(){var t=b.current;return function(){clearTimeout(t)}}),[]),t(t({},m),{box_el:h,scroll_el:p,gte2:_,scroll_width:N,current:x,setCurrent:I})}export{f as default,d as initActiveDotStyle,s as initDotStyle};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CarouselExposeMethods, CarouselProps } from './type';
|
|
3
|
-
declare module 'react' {
|
|
4
|
-
function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
|
|
5
|
-
interface CSSProperties {
|
|
6
|
-
'--width'?: string;
|
|
7
|
-
'--duration'?: string;
|
|
8
|
-
'--x'?: string;
|
|
9
|
-
'--delay'?: string;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
declare const _default: <T extends unknown>(props: CarouselProps<T> & React.RefAttributes<CarouselExposeMethods>) => React.ReactNode;
|
|
13
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),r=require("react"),a=require("./styles.js"),l=require("./useCarousel.js");function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=d(r);var s=n.forwardRef((function(r,d){var s=l.default(r,d),f=s.boundary,u=s.scroll_el,i=s.box_el,o=s.data,c=s.renderItem,m=s.gte2,b=s.scroll_width,_=s.current,y=s.dotVisible,v=s.dotBoxStyle,w=s.dotStyle,x=s.activeDotStyle,h=s.children,p=s.setCurrent,k=n.useMemo((function(){return!h&&y}),[y,h]);if("number"!=typeof f||f<=0&&f>=1)throw new Error("property boundary must be number, and between 0 and 1, exclude 0 and 1");return n.createElement("div",{className:t.css(a.default.relative,a.default.w_full,a.default.border_box,a.default.overflow_hidden)},n.createElement("div",{ref:i,className:t.css(a.default.relative,a.default.w_full,a.default.border_box,a.default.overflow_hidden)},n.createElement("div",{ref:u,style:{width:b,backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"},className:t.css(a.default.relative,a.default.w_full,a.default.flex,a.default.nowrap,a.default.border_box,a.default.item_center,a.default.justify_center)},m&&n.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t.css(a.default.relative,a.default.flex_1,a.default.overflow_hidden,a.default.border_box)},c(o[o.length-1])),o.map((function(e,r){return n.createElement("div",{key:r,style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t.css(a.default.relative,a.default.flex_1,a.default.overflow_hidden,a.default.border_box)},c(e))})),m&&n.createElement("div",{style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"},className:t.css(a.default.relative,a.default.flex_1,a.default.overflow_hidden,a.default.border_box)},c(o[0])))),h,k&&n.createElement("ul",{style:v,className:t.css(a.default.absolute,a.default.w_full,a.default.left_0,a.default.flex,a.default.justify_center,a.default.item_center,a.default.bottom_20,a.default.style_none,a.default.gap)},o.map((function(t,r){return n.createElement("li",{key:r,onClick:function(){return p(r)},style:r===_?e.__assign(e.__assign({},l.initActiveDotStyle),x):e.__assign(e.__assign({},l.initDotStyle),w)})}))))}));exports.default=s;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Carouse.js");exports.default=e.default;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { CSSProperties, ForwardedRef } from 'react';
|
|
2
|
-
import { CarouselExposeMethods, CarouselProps } from './type';
|
|
3
|
-
export declare const initDotStyle: CSSProperties;
|
|
4
|
-
export declare const initActiveDotStyle: CSSProperties;
|
|
5
|
-
declare function useCarousel<T, B extends HTMLElement, S extends HTMLElement>(_props: CarouselProps<T>, ref: ForwardedRef<CarouselExposeMethods>): {
|
|
6
|
-
box_el: import("react").RefObject<B>;
|
|
7
|
-
scroll_el: import("react").RefObject<S>;
|
|
8
|
-
gte2: boolean;
|
|
9
|
-
scroll_width: number;
|
|
10
|
-
current: number;
|
|
11
|
-
setCurrent: (i: number) => Promise<void>;
|
|
12
|
-
data: T[];
|
|
13
|
-
renderItem: (item: T) => import("react").ReactNode;
|
|
14
|
-
onChange?: ((index: number) => void) | undefined;
|
|
15
|
-
boundary?: number | undefined;
|
|
16
|
-
duration?: number | undefined;
|
|
17
|
-
delay?: number | undefined;
|
|
18
|
-
autoPlay?: boolean | undefined;
|
|
19
|
-
active?: number | undefined;
|
|
20
|
-
dotVisible?: boolean | undefined;
|
|
21
|
-
dotBoxStyle?: CSSProperties | undefined;
|
|
22
|
-
dotStyle?: CSSProperties | undefined;
|
|
23
|
-
activeDotStyle?: CSSProperties | undefined;
|
|
24
|
-
children?: import("react").ReactNode;
|
|
25
|
-
};
|
|
26
|
-
export default useCarousel;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),n=require("../utils.js"),r={width:"10px",height:"10px",borderRadius:"50%",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},u=e.__assign(e.__assign({},r),{backgroundColor:"rgba(255,255,255,.7)"}),a={data:[],renderItem:function(){return null},onChange:function(){return null},boundary:1/3,duration:500,delay:2e3,autoPlay:!0,active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:r,activeDotStyle:u};exports.default=function(r,u){var c=this,o=t.useMemo((function(){return e.__assign(e.__assign({},a),r)}),[r]),i=t.useRef(null),l=t.useRef(null),s=t.useRef(!1),d=t.useRef(!1),f=t.useRef(),v=t.useRef(0),g=t.useRef(0),m=t.useRef(o.active),h=t.useState(o.active),p=h[0],b=h[1],_=t.useState(0),y=_[0],C=_[1],E=t.useState(!1),k=E[0],w=E[1],x=t.useMemo((function(){return o.data.length>=2}),[o.data.length]),L=t.useMemo((function(){return x?y*(o.data.length+2):y*o.data.length}),[x,y,o.data.length]),T=t.useCallback((function(){var e;return(null===(e=i.current)||void 0===e?void 0:e.clientWidth)||0}),[]),P=t.useCallback((function(e){void 0===e&&(e=!1),l.current&&(l.current.style.transition=e?"none":"all ".concat(o.duration,"ms linear"),l.current.style.webkitTransition=e?"none":"all ".concat(o.duration,"ms linear"))}),[o.duration]),S=t.useCallback((function(e){if(l.current&&i.current){var t=e;null==t&&(t=x?-T()*m.current+"px":"0px"),l.current.style.transform="translate3d(".concat(t,", 0, 0)"),l.current.style.webkitTransform="translate3d(".concat(t,", 0, 0)")}}),[x,T]),R=t.useCallback((function(t){return e.__awaiter(c,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return s.current||d.current?[2]:(w(!0),s.current=!0,m.current=t+1,b(t),P(),S(),[4,n.default.sleep(o.duration)]);case 1:return e.sent(),s.current=!1,w(!1),[2]}}))}))}),[P,S]),D=t.useCallback((function(e){if(!l.current)return 0;var t=getComputedStyle(l.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],a=r[1];if(u.includes("3d")){var c=a.split(",").slice(-4),o=c[0],i=c[1],s=c[2];return Number({x:o,y:i,z:s}[e])}var d=a.split(",").slice(-2);o=d[0],i=d[1];return Number({x:o,y:i,z:0}[e])}}),[]),X=t.useCallback((function(){C(T()),P(!0),S()}),[S,P,T]),z=t.useCallback((function(){return e.__awaiter(c,void 0,void 0,(function(){var t,r;return e.__generator(this,(function(e){switch(e.label){case 0:return!x||s.current||k?[2]:(clearTimeout(f.current),s.current=!0,P(),(t=m.current+1)>o.data.length+1?(P(!0),m.current=1,S(),[4,n.default.sleep(1)]):[3,2]);case 1:return e.sent(),s.current=!1,z(),[3,3];case 2:m.current=t,r=t===o.data.length+1?0:t-1,b(r),S(),f.current=setTimeout((function(){s.current=!1,o.autoPlay&&(f.current=setTimeout((function(){z()}),o.delay))}),o.duration),e.label=3;case 3:return[2]}}))}))}),[x,k,P,o.data.length,S,o.duration,o.autoPlay,o.delay]),M=t.useCallback((function(){return e.__awaiter(c,void 0,void 0,(function(){var t,r;return e.__generator(this,(function(e){switch(e.label){case 0:return!x||s.current||k?[2]:(clearTimeout(f.current),s.current=!0,P(),(t=m.current-1)<0?(P(!0),m.current=o.data.length,S(),[4,n.default.sleep(1)]):[3,2]);case 1:return e.sent(),s.current=!1,M(),[3,3];case 2:m.current=t,r=0===t?o.data.length-1:t-1,b(r),S(),f.current=setTimeout((function(){s.current=!1,o.autoPlay&&(f.current=setTimeout((function(){z()}),o.delay))}),o.duration),e.label=3;case 3:return[2]}}))}))}),[x,k,P,o.data.length,S,o.duration,o.autoPlay,o.delay,z]),q=t.useCallback((function(t,n){return e.__awaiter(c,void 0,void 0,(function(){return e.__generator(this,(function(e){return n.preventDefault(),n.stopPropagation(),w(!0),d.current=!0,!x||s.current||(clearTimeout(f.current),v.current=t,P(!0),0===m.current&&(m.current=o.data.length,S()),m.current===o.data.length+1&&(m.current=1,S()),g.current=D("x")),[2]}))}))}),[x]),j=t.useCallback((function(e,t){if(t.preventDefault(),t.stopPropagation(),x&&d.current&&!s.current){var n=e-v.current;S(g.current+n+"px")}}),[x]),I=t.useCallback((function(t,n){return e.__awaiter(c,void 0,void 0,(function(){var r,u,a,c;return e.__generator(this,(function(e){return n.preventDefault(),n.stopPropagation(),w(!1),d.current=!1,!x||s.current||(P(),(r=t-v.current)>o.boundary*T()&&(a=m.current-1,m.current=a,u=0===a?o.data.length-1:a-1,b(u)),r<-o.boundary*T()&&(a=m.current+1,m.current=a,c=a===o.data.length+1?0:a-1,b(c)),S()),[2]}))}))}),[x,P,o.boundary,T,o.data.length,S]),N=t.useCallback((function(e){return q(e.targetTouches[0].pageX,e)}),[q]),W=t.useCallback((function(e){return j(e.targetTouches[0].pageX,e)}),[j]),A=t.useCallback((function(e){return I(e.changedTouches[0].pageX,e)}),[I]),B=t.useCallback((function(e){return q(e.pageX,e)}),[q]),H=t.useCallback((function(e){return j(e.pageX,e)}),[j]),K=t.useCallback((function(e){return I(e.pageX,e)}),[I]),O=t.useCallback((function(){w(!1),d.current=!1,x&&(P(),S())}),[x,P,S]);return t.useImperativeHandle(u,(function(){return{next:function(){return z()},pre:function(){return M()}}}),[z,M]),t.useEffect((function(){m.current=o.active,b(o.active)}),[o.active]),t.useEffect((function(){o.onChange(p)}),[p,o.onChange]),t.useEffect((function(){x&&m.current++}),[x]),t.useEffect((function(){return X(),window.addEventListener("resize",X),function(){window.removeEventListener("resize",X)}}),[X]),t.useEffect((function(){o.autoPlay&&!k?(s.current=!1,f.current=setTimeout((function(){z()}),o.delay)):clearTimeout(f.current);var e=f.current;return function(){clearTimeout(e)}}),[o.autoPlay,k,z,o.delay]),t.useEffect((function(){var e=i.current;return null==e||e.addEventListener("touchstart",N,{passive:!1}),null==e||e.addEventListener("touchmove",W,{passive:!1}),null==e||e.addEventListener("touchend",A,{passive:!1}),null==e||e.addEventListener("touchcancel",O),null==e||e.addEventListener("mousedown",B,{passive:!1}),null==e||e.addEventListener("mousemove",H,{passive:!1}),null==e||e.addEventListener("mouseup",K,{passive:!1}),function(){null==e||e.removeEventListener("touchstart",N),null==e||e.removeEventListener("touchmove",W),null==e||e.removeEventListener("touchend",A),null==e||e.removeEventListener("touchcancel",O),null==e||e.removeEventListener("mousedown",B),null==e||e.removeEventListener("mousemove",H),null==e||e.removeEventListener("mouseup",K)}}),[N,W,A,O,B,H,K]),t.useEffect((function(){var e=f.current;return function(){clearTimeout(e)}}),[]),e.__assign(e.__assign({},o),{box_el:i,scroll_el:l,gte2:x,scroll_width:L,current:p,setCurrent:R})},exports.initActiveDotStyle=u,exports.initDotStyle=r;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|