rox-react-components 0.0.5 → 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.
@@ -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?(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,2 +1,2 @@
1
- import Carousel from '../Carousel';
2
- export default Carousel;
1
+ import Swiper from './Swiper';
2
+ export default Swiper;
@@ -1 +1 @@
1
- import o from"../Carousel/Carouse.js";export{o as default};
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 CarouselProps<T> extends PropsWithChildren {
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 CarouselExposeMethods {
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
- }
@@ -1,6 +1,4 @@
1
- export * from './Carousel/type';
2
1
  export * from './types';
3
2
  export { default as Card } from './Card';
4
- export { default as Carousel } from './Carousel';
5
3
  export { default as Swiper } from './Swiper';
6
4
  export { default as utils } from './utils';
package/dist/es/index.js CHANGED
@@ -1 +1 @@
1
- export{default as Card}from"./Card/Card.js";export{default as Carousel,default as Swiper}from"./Carousel/Carouse.js";export{default as utils}from"./utils.js";
1
+ export{default as Card}from"./Card/Card.js";export{default as Swiper}from"./Swiper/Swiper.js";export{default as utils}from"./utils.js";
@@ -1 +1 @@
1
- export * from './Carousel/type';
1
+ export * from './Swiper/type';
package/dist/index.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren, ReactNode, CSSProperties, FC } from 'react';
1
+ import React, { PropsWithChildren, ReactNode, CSSProperties, FC } from 'react';
3
2
 
4
- interface CarouselProps<T> extends PropsWithChildren {
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 CarouselExposeMethods {
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: CarouselProps<T> & React.RefAttributes<CarouselExposeMethods>) => React.ReactNode;
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 Carousel, type CarouselExposeMethods, type CarouselProps, _default$1 as Swiper, type SwiperExposeMethods, type SwiperProps, _default as utils };
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"),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,2 +1,2 @@
1
- import Carousel from '../Carousel';
2
- export default Carousel;
1
+ import Swiper from './Swiper';
2
+ export default Swiper;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../Carousel/Carouse.js");exports.default=e.default;
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 CarouselProps<T> extends PropsWithChildren {
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 CarouselExposeMethods {
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
- }
@@ -1,6 +1,4 @@
1
- export * from './Carousel/type';
2
1
  export * from './types';
3
2
  export { default as Card } from './Card';
4
- export { default as Carousel } from './Carousel';
5
3
  export { default as Swiper } from './Swiper';
6
4
  export { default as utils } from './utils';
package/dist/lib/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("./Card/Card.js"),r=require("./Carousel/Carouse.js"),s=require("./utils.js");exports.Card=e.default,exports.Carousel=r.default,exports.Swiper=r.default,exports.utils=s.default;
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;
@@ -1 +1 @@
1
- export * from './Carousel/type';
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.5",
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",
@@ -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,2 +0,0 @@
1
- import Carousel from './Carouse';
2
- export default Carousel;
@@ -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,2 +0,0 @@
1
- import Carousel from './Carouse';
2
- export default Carousel;
@@ -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