rox-react-components 0.0.4 → 0.0.6

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.
@@ -1,8 +1,7 @@
1
1
  import React from 'react';
2
- import { SwiperExposeMethods } from '../types';
3
- import { UseSwiperStateProps } from './useSwiperState';
2
+ import { SwiperExposeMethods, SwiperProps } from './type';
4
3
  declare module 'react' {
5
4
  function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
6
5
  }
7
- declare const _default: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
6
+ declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
8
7
  export default _default;
@@ -1 +1 @@
1
- import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import r,{forwardRef as n,useMemo as o,useImperativeHandle as a}from"react";import l from"./styles.js";import i from"./useSwiperState.js";var d={data:[],renderItem:function(e){return null},duration:300,delay:3e3,autoPlay:!1,boundary:1/3,onChange:function(){return null},active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:{},activeDotStyle:{}},c=n((function(n,c){var s=e(e({},d),n),u=i(s),f=u.children,m=u.dotVisible,b=u.dotBoxStyle,y=u.dotStyle,v=u.activeDotStyle,_=u.scroll_element,h=u.box_element,p=u.width,x=u.boundary,w=u.renderItem,k=u.list,S=u.current,E=u.setCurrent,N=u.playNext,V=u.playPrev,g=o((function(){return p?{width:k.length*p+"px"}:{}}),[k,p]),B=o((function(){return k.length>=2}),[k.length]);if(a(c,(function(){return{next:function(){return N()},prev:function(){return V()}}}),[N,V]),void 0===x||x<=0||x>=1)throw new Error("boundary must between 0 - 1, exclude 0 and 1.");return r.createElement("div",{className:t(l.relative,l.w_full,l.overflow_hidden,l.border_box)},r.createElement("div",{ref:h,className:t(l.relative,l.w_full,l.overflow_hidden,l.border_box)},r.createElement("div",{ref:_,style:e(e({},g),{backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"}),className:t(l.w_full,l.flex,l.nowrap,l.item_center,l.justify_center,l.border_box,l.back_hidden)},k.map((function(e,n){return r.createElement("div",{key:n,className:t(l.flex_1,l.border_box,l.overflow_hidden,l.trans_0),style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"}},w(e))})))),f||B&&m&&r.createElement("ul",{className:t(l.dots_box),style:b},n.data.map((function(n,o){return r.createElement("li",{className:"".concat(t(l.dot)," ").concat(o===S?t(l.active):""),key:o,style:o===S?e(e({},y),v):y,onClick:function(){return E(o)}})}))))}));export{c as default};
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?(x.current=g?u+1:u,j(!0),B(),C(u),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,17 +1,17 @@
1
1
  declare const styles: {
2
- border_box: object;
2
+ relative: object;
3
+ absolute: object;
3
4
  w_full: object;
5
+ border_box: object;
4
6
  overflow_hidden: object;
5
7
  flex: object;
8
+ nowrap: object;
6
9
  flex_1: object;
7
10
  item_center: object;
8
11
  justify_center: object;
9
- nowrap: object;
10
- relative: object;
11
- back_hidden: object;
12
- trans_0: object;
13
- dots_box: object;
14
- dot: object;
15
- active: object;
12
+ left_0: object;
13
+ bottom_20: object;
14
+ style_none: object;
15
+ gap: object;
16
16
  };
17
17
  export default styles;
@@ -1 +1 @@
1
- import{StyleSheet as e}from"aphrodite/no-important";var t=e.create({border_box:{boxSizing:"border-box"},w_full:{width:"100%"},overflow_hidden:{overflow:"hidden"},flex:{display:"flex"},flex_1:{flex:1},item_center:{alignItems:"center"},justify_center:{justifyContent:"center"},nowrap:{whiteSpace:"nowrap"},relative:{position:"relative"},back_hidden:{backfaceVisibility:"hidden"},trans_0:{transform:"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"},dots_box:{position:"absolute",bottom:"15px",width:"100%",display:"flex",alignItems:"center",justifyContent:"center",columnGap:"6px",listStyle:"none",zIndex:99},dot:{width:"10px",height:"10px",borderRadius:"9999px",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},active:{backgroundColor:"rgba(255,255,255,.7)"}});export{t as default};
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};
@@ -0,0 +1,20 @@
1
+ import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
2
+ export interface SwiperProps<T> extends PropsWithChildren {
3
+ data: T[];
4
+ renderItem: (item: T) => ReactNode;
5
+ onChange?: (index: number) => void;
6
+ boundary?: number;
7
+ duration?: number;
8
+ delay?: number;
9
+ autoPlay?: boolean;
10
+ active?: number;
11
+ dotVisible?: boolean;
12
+ renderDots?: ReactNode;
13
+ dotBoxStyle?: CSSProperties;
14
+ dotStyle?: CSSProperties;
15
+ activeDotStyle?: CSSProperties;
16
+ }
17
+ export interface SwiperExposeMethods {
18
+ next: () => any;
19
+ pre: () => any;
20
+ }
@@ -1,4 +1 @@
1
- export interface SwiperExposeMethods {
2
- next: () => void;
3
- prev: () => void;
4
- }
1
+ export * from './Swiper/type';
package/dist/index.d.ts CHANGED
@@ -1,39 +1,39 @@
1
- import React, { FC, PropsWithChildren, ReactNode, CSSProperties } from 'react';
1
+ import React, { PropsWithChildren, ReactNode, CSSProperties, FC } from 'react';
2
2
 
3
- interface SwiperExposeMethods {
4
- next: () => void;
5
- prev: () => void;
6
- }
7
-
8
- interface CardProps extends PropsWithChildren {
9
- expand?: boolean;
10
- duration?: number;
11
- }
12
- declare const Card: FC<CardProps>;
13
-
14
- interface UseSwiperStateProps<T> extends PropsWithChildren {
3
+ interface SwiperProps<T> extends PropsWithChildren {
15
4
  data: T[];
16
5
  renderItem: (item: T) => ReactNode;
6
+ onChange?: (index: number) => void;
7
+ boundary?: number;
17
8
  duration?: number;
18
9
  delay?: number;
19
10
  autoPlay?: boolean;
20
- boundary?: number;
21
- onChange?: (index: number) => void;
22
11
  active?: number;
23
12
  dotVisible?: boolean;
13
+ renderDots?: ReactNode;
24
14
  dotBoxStyle?: CSSProperties;
25
15
  dotStyle?: CSSProperties;
26
16
  activeDotStyle?: CSSProperties;
27
17
  }
18
+ interface SwiperExposeMethods {
19
+ next: () => any;
20
+ pre: () => any;
21
+ }
22
+
23
+ interface CardProps extends PropsWithChildren {
24
+ expand?: boolean;
25
+ duration?: number;
26
+ }
27
+ declare const Card: FC<CardProps>;
28
28
 
29
29
  declare module 'react' {
30
30
  function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
31
31
  }
32
- declare const _default$1: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
32
+ declare const _default$1: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
33
33
 
34
34
  declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
35
35
  declare const _default: {
36
36
  sleep: typeof sleep;
37
37
  };
38
38
 
39
- export { Card, _default$1 as Swiper, type SwiperExposeMethods, _default as utils };
39
+ export { Card, _default$1 as Swiper, type SwiperExposeMethods, type SwiperProps, _default as utils };
@@ -1,8 +1,7 @@
1
1
  import React from 'react';
2
- import { SwiperExposeMethods } from '../types';
3
- import { UseSwiperStateProps } from './useSwiperState';
2
+ import { SwiperExposeMethods, SwiperProps } from './type';
4
3
  declare module 'react' {
5
4
  function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
6
5
  }
7
- declare const _default: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
6
+ declare const _default: <T extends unknown>(props: SwiperProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
8
7
  export default _default;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),a=require("react"),r=require("./styles.js"),l=require("./useSwiperState.js"),n={data:[],renderItem:function(e){return null},duration:300,delay:3e3,autoPlay:!1,boundary:1/3,onChange:function(){return null},active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:{},activeDotStyle:{}},d=a.forwardRef((function(d,i){var s=e.__assign(e.__assign({},n),d),u=l.default(s),o=u.children,f=u.dotVisible,c=u.dotBoxStyle,_=u.dotStyle,m=u.activeDotStyle,b=u.scroll_element,y=u.box_element,v=u.width,h=u.boundary,x=u.renderItem,p=u.list,w=u.current,g=u.setCurrent,k=u.playNext,S=u.playPrev,E=a.useMemo((function(){return v?{width:p.length*v+"px"}:{}}),[p,v]),N=a.useMemo((function(){return p.length>=2}),[p.length]);if(a.useImperativeHandle(i,(function(){return{next:function(){return k()},prev:function(){return S()}}}),[k,S]),void 0===h||h<=0||h>=1)throw new Error("boundary must between 0 - 1, exclude 0 and 1.");return a.createElement("div",{className:t.css(r.default.relative,r.default.w_full,r.default.overflow_hidden,r.default.border_box)},a.createElement("div",{ref:y,className:t.css(r.default.relative,r.default.w_full,r.default.overflow_hidden,r.default.border_box)},a.createElement("div",{ref:b,style:e.__assign(e.__assign({},E),{backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"}),className:t.css(r.default.w_full,r.default.flex,r.default.nowrap,r.default.item_center,r.default.justify_center,r.default.border_box,r.default.back_hidden)},p.map((function(e,l){return a.createElement("div",{key:l,className:t.css(r.default.flex_1,r.default.border_box,r.default.overflow_hidden,r.default.trans_0),style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"}},x(e))})))),o||N&&f&&a.createElement("ul",{className:t.css(r.default.dots_box),style:c},d.data.map((function(l,n){return a.createElement("li",{className:"".concat(t.css(r.default.dot)," ").concat(n===w?t.css(r.default.active):""),key:n,style:n===w?e.__assign(e.__assign({},_),m):_,onClick:function(){return g(n)}})}))))}));exports.default=d;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),r=require("react"),n=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=r.forwardRef((function(i,c){var o=e.__assign(e.__assign({},l),i),f=o.boundary,d=o.data,v=o.renderItem,m=o.children,_=o.dotVisible,h=o.renderDots,b=o.dotBoxStyle,g=o.activeDotStyle,p=o.dotStyle,y=d.length>=2,w=function(){var e=r.useRef(null),t=r.useState(0),n=t[0],u=t[1],a=r.useCallback((function(){var t;return u((null===(t=e.current)||void 0===t?void 0:t.clientWidth)||0)}),[]);return r.useEffect((function(){return a(),window.addEventListener("resize",a),function(){return window.removeEventListener("resize",a)}}),[a]),[e,n]}(),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=r.useRef(),_=r.useRef(!0),h=r.useRef(a),b=r.useRef(!1),g=r.useRef(!1),p=r.useState(!1),y=p[0],w=p[1],E=r.useState(a),x=E[0],k=E[1],L=r.useRef(null),T=r.useMemo((function(){return l*c}),[l,c]),C=r.useCallback((function(e){if(!L.current)return 0;var t=getComputedStyle(L.current);try{var r=new WebKitCSSMatrix(t.transform);return{x:r.m41,y:r.m42,z:r.m43}[e]}catch(r){var n=t.transform.split(/\(|\)/),u=n[0],a=n[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=r.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=r.useCallback((function(e){if(L.current){var t=e;null==t&&(t=v?-l*h.current+"px":"0px"),L.current.style.transform="translate3d(".concat(t,", 0, 0)"),L.current.style.webkitTransform="translate3d(".concat(t,", 0, 0)")}}),[v,l]),R=r.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),h.current>=s.length+1?(b.current=!1,S(!0),h.current=1,N(),[4,n.default.sleep(5)]):[3,2]);case 1:return e.sent(),R(),[2];case 2:return S(),h.current++,(t=h.current-1)>=s.length&&(t=0),k(t),N(),[4,n.default.sleep(i)];case 3:return e.sent(),b.current=!1,w(!1),[2]}}))}))}),[v,s.length,S,N]),z=r.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),h.current<=0?(b.current=!1,S(!0),h.current=s.length,N(),[4,n.default.sleep(5)]):[3,2]);case 1:return e.sent(),z(),[2];case 2:return S(),h.current--,(t=h.current-1)<0&&(t=s.length-1),k(t),N(),[4,n.default.sleep(i)];case 3:return e.sent(),b.current=!1,w(!1),[2]}}))}))}),[v,s.length,S,N]),X=r.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),h.current<=0?(S(!0),h.current=s.length,N(),[4,n.default.sleep(5)]):[3,2]);case 1:e.sent(),e.label=2;case 2:return h.current>=s.length+1?(S(!0),h.current=1,N(),[4,n.default.sleep(5)]):[3,4];case 3:e.sent(),e.label=4;case 4:return S(),h.current=t+1,N(),k(t),[4,n.default.sleep(i)];case 5:return e.sent(),b.current=!1,w(!1),[2]}}))}))}),[v,S,s.length,N,i]);return r.useImperativeHandle(f,(function(){return{next:function(){return R()},pre:function(){return z()}}}),[R,z]),r.useEffect((function(){_.current=!0}),[l,s.length]),r.useEffect((function(){_.current?(h.current=v?a+1:a,S(!0),N(),k(a),_.current=!1):X(a)}),[a,v,s,S,N,X]),r.useEffect((function(){d(x)}),[x]),r.useEffect((function(){v&&t.autoPlay&&!y?m.current=setTimeout((function(){return R()}),o):clearTimeout(m.current)}),[v,t.autoPlay,y,o,R]),r.useEffect((function(){var t=L.current,r=0,u=0;function a(e){b.current||(g.current=!0,w(!0),S(!0),h.current<=0&&(h.current=s.length,N()),h.current>=s.length+1&&(h.current=1,N()),r=e,u=C("x"))}function l(e){g.current&&N(u+(e-r)+"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-r)>=T&&h.current--,u<=-T&&h.current++,(a=h.current-1)>=s.length&&(a=0),k(a),g.current=!1,b.current=!0,N(),[4,n.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 _(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",_,{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",_),null==t||t.removeEventListener("mouseup",y),null==t||t.removeEventListener("mouseout",y)}}),[v,S,C,N,T,i,s.length]),r.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]),r.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=r.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 r.createElement("div",{className:t.css(u.default.relative,u.default.w_full,u.default.border_box,u.default.overflow_hidden)},r.createElement("div",{ref:E,className:t.css(u.default.relative,u.default.w_full,u.default.border_box,u.default.overflow_hidden)},r.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&&r.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,n){return r.createElement("div",{key:n,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&&r.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||r.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,n){return r.createElement("li",{key:n,onClick:function(){return C(n)},style:n===T?e.__assign(e.__assign({},s),g):e.__assign(e.__assign({},a),p)})})))))}));exports.default=i;
@@ -1,17 +1,17 @@
1
1
  declare const styles: {
2
- border_box: object;
2
+ relative: object;
3
+ absolute: object;
3
4
  w_full: object;
5
+ border_box: object;
4
6
  overflow_hidden: object;
5
7
  flex: object;
8
+ nowrap: object;
6
9
  flex_1: object;
7
10
  item_center: object;
8
11
  justify_center: object;
9
- nowrap: object;
10
- relative: object;
11
- back_hidden: object;
12
- trans_0: object;
13
- dots_box: object;
14
- dot: object;
15
- active: object;
12
+ left_0: object;
13
+ bottom_20: object;
14
+ style_none: object;
15
+ gap: object;
16
16
  };
17
17
  export default styles;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({border_box:{boxSizing:"border-box"},w_full:{width:"100%"},overflow_hidden:{overflow:"hidden"},flex:{display:"flex"},flex_1:{flex:1},item_center:{alignItems:"center"},justify_center:{justifyContent:"center"},nowrap:{whiteSpace:"nowrap"},relative:{position:"relative"},back_hidden:{backfaceVisibility:"hidden"},trans_0:{transform:"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"},dots_box:{position:"absolute",bottom:"15px",width:"100%",display:"flex",alignItems:"center",justifyContent:"center",columnGap:"6px",listStyle:"none",zIndex:99},dot:{width:"10px",height:"10px",borderRadius:"9999px",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},active:{backgroundColor:"rgba(255,255,255,.7)"}});exports.default=e;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.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"}});exports.default=e;
@@ -0,0 +1,20 @@
1
+ import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
2
+ export interface SwiperProps<T> extends PropsWithChildren {
3
+ data: T[];
4
+ renderItem: (item: T) => ReactNode;
5
+ onChange?: (index: number) => void;
6
+ boundary?: number;
7
+ duration?: number;
8
+ delay?: number;
9
+ autoPlay?: boolean;
10
+ active?: number;
11
+ dotVisible?: boolean;
12
+ renderDots?: ReactNode;
13
+ dotBoxStyle?: CSSProperties;
14
+ dotStyle?: CSSProperties;
15
+ activeDotStyle?: CSSProperties;
16
+ }
17
+ export interface SwiperExposeMethods {
18
+ next: () => any;
19
+ pre: () => any;
20
+ }
@@ -1,4 +1 @@
1
- export interface SwiperExposeMethods {
2
- next: () => void;
3
- prev: () => void;
4
- }
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.4",
3
+ "version": "0.0.6",
4
4
  "main": "dist/lib/index.js",
5
5
  "module": "dist/es/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -11,7 +11,11 @@
11
11
  "card",
12
12
  "swiper",
13
13
  "mobile swiper",
14
- "pc swiper"
14
+ "pc swiper",
15
+ "carousel",
16
+ "mobile carousel",
17
+ "ps carousel",
18
+ "react swiper carousel pc mobile touch mouse"
15
19
  ],
16
20
  "files": [
17
21
  "dist",
@@ -1,27 +0,0 @@
1
- import { CSSProperties, PropsWithChildren, ReactNode, RefObject } from 'react';
2
- export interface UseSwiperStateProps<T> extends PropsWithChildren {
3
- data: T[];
4
- renderItem: (item: T) => ReactNode;
5
- duration?: number;
6
- delay?: number;
7
- autoPlay?: boolean;
8
- boundary?: number;
9
- onChange?: (index: number) => void;
10
- active?: number;
11
- dotVisible?: boolean;
12
- dotBoxStyle?: CSSProperties;
13
- dotStyle?: CSSProperties;
14
- activeDotStyle?: CSSProperties;
15
- }
16
- interface UseSwiperStateResponse<T, S, B> extends UseSwiperStateProps<T> {
17
- scroll_element: RefObject<S>;
18
- box_element: RefObject<B>;
19
- width: number;
20
- list: T[];
21
- current: number;
22
- playNext: () => any;
23
- playPrev: () => any;
24
- setCurrent: (i: number) => void;
25
- }
26
- export default function useSwiperState<T, S extends HTMLElement, B extends HTMLElement>(props: UseSwiperStateProps<T>): UseSwiperStateResponse<T, S, B>;
27
- export {};
@@ -1 +0,0 @@
1
- import{__awaiter as t,__generator as e,__spreadArray as n,__assign as r}from"tslib";import{useRef as u,useState as c,useCallback as a,useEffect as o}from"react";import i from"../utils.js";function l(t,e){t.current&&(t.current.style.transform="translate3d(".concat(e,", 0 ,0)"),t.current.style.webkitTransform="translate3d(".concat(e,", 0 ,0)"))}function s(t,e){t.current&&(t.current.style.transition=e,t.current.style.webkitTransition=e)}function d(d){var v=this,f=u(null),p=u(null),h=u(d.active),m=u(0),g=u(0),y=u(!1),x=u(),T=u(!1),b=c(!1),E=b[0],L=b[1],w=c(d.data),P=w[0],X=w[1],C=c(0),D=C[0],S=C[1],k=c(d.active),z=k[0],N=k[1],W=a((function(){var t;return(null===(t=p.current)||void 0===t?void 0:t.clientWidth)||0}),[]),_=a((function(){S(W()),s(f,"none"),l(f,"-".concat(h.current*W(),"px"))}),[W]),j=a((function(){N((function(t){var e=t+1;return e>=P.length-2?0:e}))}),[P.length]),K=a((function(){N((function(t){var e=t-1;return e<0?P.length-3:e}))}),[P.length]),M=a((function(n){return t(v,void 0,void 0,(function(){return e(this,(function(t){switch(t.label){case 0:return L(!0),h.current=n+1,N(n),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(h.current*W(),"px")),[4,i.sleep(d.duration)];case 1:return t.sent(),[4,i.sleep(0)];case 2:return t.sent(),L(!1),[2]}}))}))}),[P.length,W,d.duration]),q=a((function(t,e){void 0===e&&(e=!1),L(!0),y.current=!0,P.length<2||(t.preventDefault(),t.stopPropagation(),m.current=e?t.pageX:t.targetTouches[0].pageX,s(f,"none"),0===h.current&&(h.current=P.length-2,l(f,"-".concat(h.current*W(),"px"))),h.current===P.length-1&&(h.current=1,l(f,"-".concat(h.current*W(),"px"))),f.current&&(g.current=function(t){var e=void 0;if(t.current){var n=getComputedStyle(t.current).transform;try{e=new WebKitCSSMatrix(n).m41}catch(t){var r=n.split(/\(|\)/)[1].split(",");e=Number(r[r.length-2])}}return e}(f)))}),[P.length,W]),A=a((function(t,e){if(void 0===e&&(e=!1),!(P.length<2)&&y.current){t.preventDefault(),t.stopPropagation();var n=e?t.pageX-m.current:t.targetTouches[0].pageX-m.current,r=g.current+n;s(f,"none"),l(f,r+"px")}}),[P.length]),B=a((function(t,e){if(void 0===e&&(e=!1),y.current=!1,L(!1),!(P.length<2)){t.preventDefault(),t.stopPropagation(),s(f,"all ".concat(d.duration,"ms linear"));var n=e?t.pageX-m.current:t.changedTouches[0].pageX-m.current;n>W()*d.boundary?(h.current--,K()):n<-W()*d.boundary&&(h.current++,j()),l(f,"-".concat(h.current*W(),"px"))}}),[P.length,d.duration,W,d.boundary,j,K]),F=a((function(){return t(v,void 0,void 0,(function(){return e(this,(function(t){switch(t.label){case 0:return P.length<2||T.current?[4,i.sleep(0)]:[3,2];case 1:return[2,t.sent()];case 2:return clearTimeout(x.current),T.current=!0,h.current++,h.current>=P.length?(h.current=1,s(f,"none"),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(0)]):[3,4];case 3:return t.sent(),T.current=!1,[2,F()];case 4:return j(),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(d.duration,!0)];case 5:t.sent(),T.current=!1,d.autoPlay&&P.length>=2&&(x.current=setTimeout((function(){return F()}),d.delay)),t.label=6;case 6:return[2]}}))}))}),[P.length,W,d.duration,d.autoPlay,d.delay,j]),G=a((function(){return t(v,void 0,void 0,(function(){return e(this,(function(t){switch(t.label){case 0:return P.length<2||T.current?[4,i.sleep(0)]:[3,2];case 1:return[2,t.sent()];case 2:return clearTimeout(x.current),T.current=!0,h.current--,h.current<0?(h.current=P.length-2,s(f,"none"),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(0)]):[3,4];case 3:return t.sent(),T.current=!1,[2,G()];case 4:return K(),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(W()*h.current,"px")),[4,i.sleep(d.duration,!0)];case 5:t.sent(),T.current=!1,d.autoPlay&&P.length>=2&&(x.current=setTimeout((function(){return F()}),d.delay)),t.label=6;case 6:return[2]}}))}))}),[P.length,d.duration,W,d.autoPlay,F,d.delay,K]),H=a((function(t){return q(t)}),[q]),I=a((function(t){return A(t)}),[A]),J=a((function(t){return B(t)}),[B]),O=a((function(t){return q(t,!0)}),[q]),Q=a((function(t){return A(t,!0)}),[A]),R=a((function(t){return B(t,!0)}),[B]),U=a((function(){f.current&&p.current&&(p.current.addEventListener("touchstart",H,{passive:!1}),p.current.addEventListener("touchmove",I,{passive:!1}),p.current.addEventListener("touchend",J,{passive:!1}))}),[H,I,J]),V=a((function(){f.current&&p.current&&(p.current.removeEventListener("touchstart",H),p.current.removeEventListener("touchmove",I),p.current.removeEventListener("touchend",J))}),[H,I,J]),Y=a((function(){f.current&&p.current&&(p.current.addEventListener("mousedown",O,{passive:!1}),p.current.addEventListener("mousemove",Q,{passive:!1}),p.current.addEventListener("mouseup",R,{passive:!1}))}),[O,Q,R]),Z=a((function(){f.current&&p.current&&(p.current.removeEventListener("mousedown",O),p.current.removeEventListener("mousemove",Q),p.current.removeEventListener("mouseup",R))}),[O,Q,R]);return o((function(){d.data.length<2?X(d.data):X(n(n([d.data[d.data.length-1]],d.data,!0),[d.data[0]],!1))}),[d.data,W]),o((function(){clearTimeout(x.current),h.current=d.active+1,N(d.active),s(f,"all ".concat(d.duration,"ms linear")),l(f,"-".concat(h.current*W(),"px"))}),[d.active,d.duration,W]),o((function(){return _(),window.addEventListener("resize",_),function(){window.removeEventListener("resize",_)}}),[_]),o((function(){return U(),function(){V()}}),[U,V]),o((function(){return Y(),function(){Z()}}),[Y,Z]),o((function(){var t=x.current;return E&&clearTimeout(x.current),d.autoPlay&&P.length>=2?x.current=setTimeout((function(){return F()}),d.delay):clearTimeout(x.current),function(){clearTimeout(t)}}),[E,d.autoPlay,P.length,F,d.delay]),o((function(){var t;null===(t=d.onChange)||void 0===t||t.call(d,z)}),[z,d.onChange]),o((function(){var t=x.current;return function(){clearTimeout(t)}}),[]),r(r({},d),{scroll_element:f,box_element:p,width:D,list:P,current:z,playNext:F,playPrev:G,setCurrent:M})}export{d as default};
@@ -1,27 +0,0 @@
1
- import { CSSProperties, PropsWithChildren, ReactNode, RefObject } from 'react';
2
- export interface UseSwiperStateProps<T> extends PropsWithChildren {
3
- data: T[];
4
- renderItem: (item: T) => ReactNode;
5
- duration?: number;
6
- delay?: number;
7
- autoPlay?: boolean;
8
- boundary?: number;
9
- onChange?: (index: number) => void;
10
- active?: number;
11
- dotVisible?: boolean;
12
- dotBoxStyle?: CSSProperties;
13
- dotStyle?: CSSProperties;
14
- activeDotStyle?: CSSProperties;
15
- }
16
- interface UseSwiperStateResponse<T, S, B> extends UseSwiperStateProps<T> {
17
- scroll_element: RefObject<S>;
18
- box_element: RefObject<B>;
19
- width: number;
20
- list: T[];
21
- current: number;
22
- playNext: () => any;
23
- playPrev: () => any;
24
- setCurrent: (i: number) => void;
25
- }
26
- export default function useSwiperState<T, S extends HTMLElement, B extends HTMLElement>(props: UseSwiperStateProps<T>): UseSwiperStateResponse<T, S, B>;
27
- export {};
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react"),n=require("../utils.js");function r(e,t){e.current&&(e.current.style.transform="translate3d(".concat(t,", 0 ,0)"),e.current.style.webkitTransform="translate3d(".concat(t,", 0 ,0)"))}function u(e,t){e.current&&(e.current.style.transition=t,e.current.style.webkitTransition=t)}exports.default=function(a){var c=this,o=t.useRef(null),l=t.useRef(null),s=t.useRef(a.active),i=t.useRef(0),f=t.useRef(0),d=t.useRef(!1),v=t.useRef(),p=t.useRef(!1),h=t.useState(!1),g=h[0],m=h[1],b=t.useState(a.data),y=b[0],C=b[1],_=t.useState(0),k=_[0],E=_[1],w=t.useState(a.active),x=w[0],T=w[1],L=t.useCallback((function(){var e;return(null===(e=l.current)||void 0===e?void 0:e.clientWidth)||0}),[]),P=t.useCallback((function(){E(L()),u(o,"none"),r(o,"-".concat(s.current*L(),"px"))}),[L]),R=t.useCallback((function(){T((function(e){var t=e+1;return t>=y.length-2?0:t}))}),[y.length]),S=t.useCallback((function(){T((function(e){var t=e-1;return t<0?y.length-3:t}))}),[y.length]),X=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 m(!0),s.current=t+1,T(t),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(s.current*L(),"px")),[4,n.default.sleep(a.duration)];case 1:return e.sent(),[4,n.default.sleep(0)];case 2:return e.sent(),m(!1),[2]}}))}))}),[y.length,L,a.duration]),q=t.useCallback((function(e,t){void 0===t&&(t=!1),m(!0),d.current=!0,y.length<2||(e.preventDefault(),e.stopPropagation(),i.current=t?e.pageX:e.targetTouches[0].pageX,u(o,"none"),0===s.current&&(s.current=y.length-2,r(o,"-".concat(s.current*L(),"px"))),s.current===y.length-1&&(s.current=1,r(o,"-".concat(s.current*L(),"px"))),o.current&&(f.current=function(e){var t=void 0;if(e.current){var n=getComputedStyle(e.current).transform;try{t=new WebKitCSSMatrix(n).m41}catch(e){var r=n.split(/\(|\)/)[1].split(",");t=Number(r[r.length-2])}}return t}(o)))}),[y.length,L]),D=t.useCallback((function(e,t){if(void 0===t&&(t=!1),!(y.length<2)&&d.current){e.preventDefault(),e.stopPropagation();var n=t?e.pageX-i.current:e.targetTouches[0].pageX-i.current,a=f.current+n;u(o,"none"),r(o,a+"px")}}),[y.length]),j=t.useCallback((function(e,t){if(void 0===t&&(t=!1),d.current=!1,m(!1),!(y.length<2)){e.preventDefault(),e.stopPropagation(),u(o,"all ".concat(a.duration,"ms linear"));var n=t?e.pageX-i.current:e.changedTouches[0].pageX-i.current;n>L()*a.boundary?(s.current--,S()):n<-L()*a.boundary&&(s.current++,R()),r(o,"-".concat(s.current*L(),"px"))}}),[y.length,a.duration,L,a.boundary,R,S]),z=t.useCallback((function(){return e.__awaiter(c,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return y.length<2||p.current?[4,n.default.sleep(0)]:[3,2];case 1:return[2,e.sent()];case 2:return clearTimeout(v.current),p.current=!0,s.current++,s.current>=y.length?(s.current=1,u(o,"none"),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(0)]):[3,4];case 3:return e.sent(),p.current=!1,[2,z()];case 4:return R(),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(a.duration,!0)];case 5:e.sent(),p.current=!1,a.autoPlay&&y.length>=2&&(v.current=setTimeout((function(){return z()}),a.delay)),e.label=6;case 6:return[2]}}))}))}),[y.length,L,a.duration,a.autoPlay,a.delay,R]),A=t.useCallback((function(){return e.__awaiter(c,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return y.length<2||p.current?[4,n.default.sleep(0)]:[3,2];case 1:return[2,e.sent()];case 2:return clearTimeout(v.current),p.current=!0,s.current--,s.current<0?(s.current=y.length-2,u(o,"none"),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(0)]):[3,4];case 3:return e.sent(),p.current=!1,[2,A()];case 4:return S(),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(L()*s.current,"px")),[4,n.default.sleep(a.duration,!0)];case 5:e.sent(),p.current=!1,a.autoPlay&&y.length>=2&&(v.current=setTimeout((function(){return z()}),a.delay)),e.label=6;case 6:return[2]}}))}))}),[y.length,a.duration,L,a.autoPlay,z,a.delay,S]),M=t.useCallback((function(e){return q(e)}),[q]),N=t.useCallback((function(e){return D(e)}),[D]),W=t.useCallback((function(e){return j(e)}),[j]),K=t.useCallback((function(e){return q(e,!0)}),[q]),O=t.useCallback((function(e){return D(e,!0)}),[D]),B=t.useCallback((function(e){return j(e,!0)}),[j]),F=t.useCallback((function(){o.current&&l.current&&(l.current.addEventListener("touchstart",M,{passive:!1}),l.current.addEventListener("touchmove",N,{passive:!1}),l.current.addEventListener("touchend",W,{passive:!1}))}),[M,N,W]),G=t.useCallback((function(){o.current&&l.current&&(l.current.removeEventListener("touchstart",M),l.current.removeEventListener("touchmove",N),l.current.removeEventListener("touchend",W))}),[M,N,W]),H=t.useCallback((function(){o.current&&l.current&&(l.current.addEventListener("mousedown",K,{passive:!1}),l.current.addEventListener("mousemove",O,{passive:!1}),l.current.addEventListener("mouseup",B,{passive:!1}))}),[K,O,B]),I=t.useCallback((function(){o.current&&l.current&&(l.current.removeEventListener("mousedown",K),l.current.removeEventListener("mousemove",O),l.current.removeEventListener("mouseup",B))}),[K,O,B]);return t.useEffect((function(){a.data.length<2?C(a.data):C(e.__spreadArray(e.__spreadArray([a.data[a.data.length-1]],a.data,!0),[a.data[0]],!1))}),[a.data,L]),t.useEffect((function(){clearTimeout(v.current),s.current=a.active+1,T(a.active),u(o,"all ".concat(a.duration,"ms linear")),r(o,"-".concat(s.current*L(),"px"))}),[a.active,a.duration,L]),t.useEffect((function(){return P(),window.addEventListener("resize",P),function(){window.removeEventListener("resize",P)}}),[P]),t.useEffect((function(){return F(),function(){G()}}),[F,G]),t.useEffect((function(){return H(),function(){I()}}),[H,I]),t.useEffect((function(){var e=v.current;return g&&clearTimeout(v.current),a.autoPlay&&y.length>=2?v.current=setTimeout((function(){return z()}),a.delay):clearTimeout(v.current),function(){clearTimeout(e)}}),[g,a.autoPlay,y.length,z,a.delay]),t.useEffect((function(){var e;null===(e=a.onChange)||void 0===e||e.call(a,x)}),[x,a.onChange]),t.useEffect((function(){var e=v.current;return function(){clearTimeout(e)}}),[]),e.__assign(e.__assign({},a),{scroll_element:o,box_element:l,width:k,list:y,current:x,playNext:z,playPrev:A,setCurrent:X})};