rox-react-components 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/es/Carousel/Carouse.d.ts +13 -0
  2. package/dist/es/Carousel/Carouse.js +1 -0
  3. package/dist/es/Carousel/index.d.ts +2 -0
  4. package/dist/es/Carousel/index.js +1 -0
  5. package/dist/{lib/Swiper → es/Carousel}/styles.d.ts +8 -8
  6. package/dist/es/Carousel/styles.js +1 -0
  7. package/dist/es/Carousel/type.d.ts +23 -0
  8. package/dist/es/Carousel/useCarousel.d.ts +26 -0
  9. package/dist/es/Carousel/useCarousel.js +1 -0
  10. package/dist/es/Swiper/index.d.ts +2 -2
  11. package/dist/es/Swiper/index.js +1 -1
  12. package/dist/es/index.d.ts +2 -0
  13. package/dist/es/index.js +1 -1
  14. package/dist/es/types.d.ts +1 -4
  15. package/dist/index.d.ts +27 -17
  16. package/dist/lib/Carousel/Carouse.d.ts +13 -0
  17. package/dist/lib/Carousel/Carouse.js +1 -0
  18. package/dist/lib/Carousel/index.d.ts +2 -0
  19. package/dist/lib/Carousel/index.js +1 -0
  20. package/dist/{es/Swiper → lib/Carousel}/styles.d.ts +8 -8
  21. package/dist/lib/Carousel/styles.js +1 -0
  22. package/dist/lib/Carousel/type.d.ts +23 -0
  23. package/dist/lib/Carousel/useCarousel.d.ts +26 -0
  24. package/dist/lib/Carousel/useCarousel.js +1 -0
  25. package/dist/lib/Swiper/index.d.ts +2 -2
  26. package/dist/lib/Swiper/index.js +1 -1
  27. package/dist/lib/index.d.ts +2 -0
  28. package/dist/lib/index.js +1 -1
  29. package/dist/lib/types.d.ts +1 -4
  30. package/package.json +5 -2
  31. package/dist/es/Swiper/Swiper.d.ts +0 -8
  32. package/dist/es/Swiper/Swiper.js +0 -1
  33. package/dist/es/Swiper/styles.js +0 -1
  34. package/dist/es/Swiper/useSwiperState.d.ts +0 -27
  35. package/dist/es/Swiper/useSwiperState.js +0 -1
  36. package/dist/lib/Swiper/Swiper.d.ts +0 -8
  37. package/dist/lib/Swiper/Swiper.js +0 -1
  38. package/dist/lib/Swiper/styles.js +0 -1
  39. package/dist/lib/Swiper/useSwiperState.d.ts +0 -27
  40. package/dist/lib/Swiper/useSwiperState.js +0 -1
@@ -0,0 +1,13 @@
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;
@@ -0,0 +1 @@
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};
@@ -0,0 +1,2 @@
1
+ import Carousel from './Carouse';
2
+ export default Carousel;
@@ -0,0 +1 @@
1
+ import o from"./Carouse.js";export{o 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;
@@ -0,0 +1 @@
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,23 @@
1
+ import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
2
+ export interface CarouselProps<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
+ dotBoxStyle?: CSSProperties;
13
+ dotStyle?: CSSProperties;
14
+ activeDotStyle?: CSSProperties;
15
+ }
16
+ export interface CarouselExposeMethods {
17
+ next: () => any;
18
+ pre: () => any;
19
+ }
20
+ export interface SwiperProps<T> extends CarouselProps<T> {
21
+ }
22
+ export interface SwiperExposeMethods extends CarouselExposeMethods {
23
+ }
@@ -0,0 +1,26 @@
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;
@@ -0,0 +1 @@
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,2 +1,2 @@
1
- import Swiper from './Swiper';
2
- export default Swiper;
1
+ import Carousel from '../Carousel';
2
+ export default Carousel;
@@ -1 +1 @@
1
- import r from"./Swiper.js";export{r as default};
1
+ import o from"../Carousel/Carouse.js";export{o as default};
@@ -1,4 +1,6 @@
1
+ export * from './Carousel/type';
1
2
  export * from './types';
2
3
  export { default as Card } from './Card';
4
+ export { default as Carousel } from './Carousel';
3
5
  export { default as Swiper } from './Swiper';
4
6
  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 Swiper}from"./Swiper/Swiper.js";export{default as utils}from"./utils.js";
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,4 +1 @@
1
- export interface SwiperExposeMethods {
2
- next: () => void;
3
- prev: () => void;
4
- }
1
+ export * from './Carousel/type';
package/dist/index.d.ts CHANGED
@@ -1,39 +1,49 @@
1
- import React, { FC, PropsWithChildren, ReactNode, CSSProperties } from 'react';
1
+ import * as React from 'react';
2
+ import { PropsWithChildren, ReactNode, CSSProperties, FC } from 'react';
2
3
 
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 {
4
+ interface CarouselProps<T> extends PropsWithChildren {
15
5
  data: T[];
16
6
  renderItem: (item: T) => ReactNode;
7
+ onChange?: (index: number) => void;
8
+ boundary?: number;
17
9
  duration?: number;
18
10
  delay?: number;
19
11
  autoPlay?: boolean;
20
- boundary?: number;
21
- onChange?: (index: number) => void;
22
12
  active?: number;
23
13
  dotVisible?: boolean;
24
14
  dotBoxStyle?: CSSProperties;
25
15
  dotStyle?: CSSProperties;
26
16
  activeDotStyle?: CSSProperties;
27
17
  }
18
+ interface CarouselExposeMethods {
19
+ next: () => any;
20
+ pre: () => any;
21
+ }
22
+ interface SwiperProps<T> extends CarouselProps<T> {
23
+ }
24
+ interface SwiperExposeMethods extends CarouselExposeMethods {
25
+ }
26
+
27
+ interface CardProps extends PropsWithChildren {
28
+ expand?: boolean;
29
+ duration?: number;
30
+ }
31
+ declare const Card: FC<CardProps>;
28
32
 
29
33
  declare module 'react' {
30
34
  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
+ }
31
41
  }
32
- declare const _default$1: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
42
+ declare const _default$1: <T extends unknown>(props: CarouselProps<T> & React.RefAttributes<CarouselExposeMethods>) => React.ReactNode;
33
43
 
34
44
  declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
35
45
  declare const _default: {
36
46
  sleep: typeof sleep;
37
47
  };
38
48
 
39
- export { Card, _default$1 as Swiper, type SwiperExposeMethods, _default as utils };
49
+ export { Card, _default$1 as Carousel, type CarouselExposeMethods, type CarouselProps, _default$1 as Swiper, type SwiperExposeMethods, type SwiperProps, _default as utils };
@@ -0,0 +1,13 @@
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;
@@ -0,0 +1 @@
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;
@@ -0,0 +1,2 @@
1
+ import Carousel from './Carouse';
2
+ export default Carousel;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Carouse.js");exports.default=e.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;
@@ -0,0 +1 @@
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,23 @@
1
+ import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
2
+ export interface CarouselProps<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
+ dotBoxStyle?: CSSProperties;
13
+ dotStyle?: CSSProperties;
14
+ activeDotStyle?: CSSProperties;
15
+ }
16
+ export interface CarouselExposeMethods {
17
+ next: () => any;
18
+ pre: () => any;
19
+ }
20
+ export interface SwiperProps<T> extends CarouselProps<T> {
21
+ }
22
+ export interface SwiperExposeMethods extends CarouselExposeMethods {
23
+ }
@@ -0,0 +1,26 @@
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;
@@ -0,0 +1 @@
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;
@@ -1,2 +1,2 @@
1
- import Swiper from './Swiper';
2
- export default Swiper;
1
+ import Carousel from '../Carousel';
2
+ export default Carousel;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Swiper.js");exports.default=e.default;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../Carousel/Carouse.js");exports.default=e.default;
@@ -1,4 +1,6 @@
1
+ export * from './Carousel/type';
1
2
  export * from './types';
2
3
  export { default as Card } from './Card';
4
+ export { default as Carousel } from './Carousel';
3
5
  export { default as Swiper } from './Swiper';
4
6
  export { default as utils } from './utils';
package/dist/lib/index.js CHANGED
@@ -1 +1 @@
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
+ "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,4 +1 @@
1
- export interface SwiperExposeMethods {
2
- next: () => void;
3
- prev: () => void;
4
- }
1
+ export * from './Carousel/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.5",
4
4
  "main": "dist/lib/index.js",
5
5
  "module": "dist/es/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -11,7 +11,10 @@
11
11
  "card",
12
12
  "swiper",
13
13
  "mobile swiper",
14
- "pc swiper"
14
+ "pc swiper",
15
+ "carousel",
16
+ "mobile carousel",
17
+ "ps carousel"
15
18
  ],
16
19
  "files": [
17
20
  "dist",
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { SwiperExposeMethods } from '../types';
3
- import { UseSwiperStateProps } from './useSwiperState';
4
- declare module 'react' {
5
- function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
6
- }
7
- declare const _default: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
8
- export default _default;
@@ -1 +0,0 @@
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 +0,0 @@
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,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,8 +0,0 @@
1
- import React from 'react';
2
- import { SwiperExposeMethods } from '../types';
3
- import { UseSwiperStateProps } from './useSwiperState';
4
- declare module 'react' {
5
- function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
6
- }
7
- declare const _default: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
8
- export default _default;
@@ -1 +0,0 @@
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 +0,0 @@
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,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})};