rox-react-components 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -3,3 +3,9 @@
3
3
  # Usage & Components
4
4
 
5
5
  [Demo](https://stackblitz.com/edit/stackblitz-starters-wftsic?file=src%2FApp.tsx)
6
+
7
+ # Components
8
+
9
+ ## Card
10
+
11
+ ## Swiper (suppoert <strong>PC</strong> & <strong>Mobile</strong> Platform)
@@ -1 +1 @@
1
- import{css as t}from"aphrodite";import a,{useMemo as n}from"react";import o from"./styles.js";var r=function(r){var i=r.expand,e=void 0!==i&&i,c=r.children,s=r.duration,m=void 0===s?200:s,d=n((function(){return{transitionDuration:"".concat(m,"ms"),msTransitionDuration:"".concat(m,"ms"),MozTransitionDuration:"".concat(m,"ms"),WebkitTransitionDuration:"".concat(m,"ms")}}),[m]);return a.createElement("div",{style:d,className:"".concat(t(o.collapse)," ").concat(e?t(o.expand):"")},a.createElement("div",{className:t(o.hide0)},c))};export{r as default};
1
+ import{css as t}from"aphrodite/no-important";import n,{useMemo as a}from"react";import o from"./styles.js";var r=function(r){var i=r.expand,e=void 0!==i&&i,c=r.children,s=r.duration,m=void 0===s?200:s,d=a((function(){return{transitionDuration:"".concat(m,"ms"),msTransitionDuration:"".concat(m,"ms"),MozTransitionDuration:"".concat(m,"ms"),WebkitTransitionDuration:"".concat(m,"ms")}}),[m]);return n.createElement("div",{style:d,className:"".concat(t(o.collapse)," ").concat(e?t(o.expand):"")},n.createElement("div",{className:t(o.hide0)},c))};export{r as default};
@@ -1 +1 @@
1
- import{StyleSheet as e}from"aphrodite";var r=e.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});export{r as default};
1
+ import{StyleSheet as e}from"aphrodite/no-important";var r=e.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});export{r as default};
@@ -0,0 +1,8 @@
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;
@@ -0,0 +1 @@
1
+ import{__assign as e}from"tslib";import{css as t}from"aphrodite/no-important";import r,{forwardRef as n,useMemo as o,useImperativeHandle as a}from"react";import l from"./styles.js";import i from"./useSwiperState.js";var d={data:[],renderItem:function(e){return null},duration:300,delay:3e3,autoPlay:!1,boundary:1/3,onChange:function(){return null},active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:{},activeDotStyle:{}},c=n((function(n,c){var s=e(e({},d),n),u=i(s),f=u.children,m=u.dotVisible,b=u.dotBoxStyle,y=u.dotStyle,v=u.activeDotStyle,_=u.scroll_element,h=u.box_element,p=u.width,x=u.boundary,w=u.renderItem,k=u.list,S=u.current,E=u.setCurrent,N=u.playNext,V=u.playPrev,g=o((function(){return p?{width:k.length*p+"px"}:{}}),[k,p]),B=o((function(){return k.length>=2}),[k.length]);if(a(c,(function(){return{next:function(){return N()},prev:function(){return V()}}}),[N,V]),void 0===x||x<=0||x>=1)throw new Error("boundary must between 0 - 1, exclude 0 and 1.");return r.createElement("div",{className:t(l.relative,l.w_full,l.overflow_hidden,l.border_box)},r.createElement("div",{ref:h,className:t(l.relative,l.w_full,l.overflow_hidden,l.border_box)},r.createElement("div",{ref:_,style:e(e({},g),{backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"}),className:t(l.w_full,l.flex,l.nowrap,l.item_center,l.justify_center,l.border_box,l.back_hidden)},k.map((function(e,n){return r.createElement("div",{key:n,className:t(l.flex_1,l.border_box,l.overflow_hidden,l.trans_0),style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"}},w(e))})))),f||B&&m&&r.createElement("ul",{className:t(l.dots_box),style:b},n.data.map((function(n,o){return r.createElement("li",{className:"".concat(t(l.dot)," ").concat(o===S?t(l.active):""),key:o,style:o===S?e(e({},y),v):y,onClick:function(){return E(o)}})}))))}));export{c as default};
@@ -0,0 +1,2 @@
1
+ import Swiper from './Swiper';
2
+ export default Swiper;
@@ -0,0 +1 @@
1
+ import r from"./Swiper.js";export{r as default};
@@ -0,0 +1,17 @@
1
+ declare const styles: {
2
+ border_box: object;
3
+ w_full: object;
4
+ overflow_hidden: object;
5
+ flex: object;
6
+ flex_1: object;
7
+ item_center: object;
8
+ 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;
16
+ };
17
+ export default styles;
@@ -0,0 +1 @@
1
+ import{StyleSheet as e}from"aphrodite/no-important";var t=e.create({border_box:{boxSizing:"border-box"},w_full:{width:"100%"},overflow_hidden:{overflow:"hidden"},flex:{display:"flex"},flex_1:{flex:1},item_center:{alignItems:"center"},justify_center:{justifyContent:"center"},nowrap:{whiteSpace:"nowrap"},relative:{position:"relative"},back_hidden:{backfaceVisibility:"hidden"},trans_0:{transform:"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"},dots_box:{position:"absolute",bottom:"15px",width:"100%",display:"flex",alignItems:"center",justifyContent:"center",columnGap:"6px",listStyle:"none",zIndex:99},dot:{width:"10px",height:"10px",borderRadius:"9999px",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},active:{backgroundColor:"rgba(255,255,255,.7)"}});export{t as default};
@@ -0,0 +1,27 @@
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 {};
@@ -0,0 +1 @@
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 +1,4 @@
1
+ export * from './types';
1
2
  export { default as Card } from './Card';
3
+ export { default as Swiper } from './Swiper';
4
+ export { default as utils } from './utils';
package/dist/es/index.js CHANGED
@@ -1 +1 @@
1
- export{default as Card}from"./Card/Card.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";
@@ -0,0 +1,4 @@
1
+ export interface SwiperExposeMethods {
2
+ next: () => void;
3
+ prev: () => void;
4
+ }
@@ -0,0 +1,5 @@
1
+ declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
2
+ declare const _default: {
3
+ sleep: typeof sleep;
4
+ };
5
+ export default _default;
@@ -0,0 +1 @@
1
+ import{__awaiter as t,__generator as n}from"tslib";var r={sleep:function(r,i){return void 0===i&&(i=!1),t(this,void 0,void 0,(function(){return n(this,(function(t){return[2,new Promise((function(t){return setTimeout((function(){return t(i)}),r)}))]}))}))}};export{r as default};
package/dist/index.d.ts CHANGED
@@ -1,4 +1,9 @@
1
- import { FC, PropsWithChildren } from 'react';
1
+ import React, { FC, PropsWithChildren, ReactNode, CSSProperties } from 'react';
2
+
3
+ interface SwiperExposeMethods {
4
+ next: () => void;
5
+ prev: () => void;
6
+ }
2
7
 
3
8
  interface CardProps extends PropsWithChildren {
4
9
  expand?: boolean;
@@ -6,4 +11,29 @@ interface CardProps extends PropsWithChildren {
6
11
  }
7
12
  declare const Card: FC<CardProps>;
8
13
 
9
- export { Card };
14
+ interface UseSwiperStateProps<T> extends PropsWithChildren {
15
+ data: T[];
16
+ renderItem: (item: T) => ReactNode;
17
+ duration?: number;
18
+ delay?: number;
19
+ autoPlay?: boolean;
20
+ boundary?: number;
21
+ onChange?: (index: number) => void;
22
+ active?: number;
23
+ dotVisible?: boolean;
24
+ dotBoxStyle?: CSSProperties;
25
+ dotStyle?: CSSProperties;
26
+ activeDotStyle?: CSSProperties;
27
+ }
28
+
29
+ declare module 'react' {
30
+ function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode | null): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
31
+ }
32
+ declare const _default$1: <T extends unknown>(props: UseSwiperStateProps<T> & React.RefAttributes<SwiperExposeMethods>) => React.ReactNode;
33
+
34
+ declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
35
+ declare const _default: {
36
+ sleep: typeof sleep;
37
+ };
38
+
39
+ export { Card, _default$1 as Swiper, type SwiperExposeMethods, _default as utils };
@@ -1 +1 @@
1
- "use strict";var e=require("aphrodite"),t=require("react"),n=require("./styles.js");module.exports=function(a){var r=a.expand,s=void 0!==r&&r,i=a.children,c=a.duration,o=void 0===c?200:c,u=t.useMemo((function(){return{transitionDuration:"".concat(o,"ms"),msTransitionDuration:"".concat(o,"ms"),MozTransitionDuration:"".concat(o,"ms"),WebkitTransitionDuration:"".concat(o,"ms")}}),[o]);return t.createElement("div",{style:u,className:"".concat(e.css(n.collapse)," ").concat(s?e.css(n.expand):"")},t.createElement("div",{className:e.css(n.hide0)},i))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important"),t=require("react"),a=require("./styles.js");exports.default=function(n){var r=n.expand,s=void 0!==r&&r,i=n.children,o=n.duration,c=void 0===o?200:o,u=t.useMemo((function(){return{transitionDuration:"".concat(c,"ms"),msTransitionDuration:"".concat(c,"ms"),MozTransitionDuration:"".concat(c,"ms"),WebkitTransitionDuration:"".concat(c,"ms")}}),[c]);return t.createElement("div",{style:u,className:"".concat(e.css(a.default.collapse)," ").concat(s?e.css(a.default.expand):"")},t.createElement("div",{className:e.css(a.default.hide0)},i))};
@@ -1 +1 @@
1
- "use strict";var r=require("./Card.js");module.exports=r;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Card.js");exports.default=e.default;
@@ -1 +1 @@
1
- "use strict";var e=require("aphrodite").StyleSheet.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});module.exports=e;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({collapse:{display:"grid",gridTemplateRows:"0fr",overflow:"hidden"},expand:{gridTemplateRows:"1fr"},hide0:{minHeight:0}});exports.default=e;
@@ -0,0 +1,8 @@
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;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("aphrodite/no-important"),a=require("react"),r=require("./styles.js"),l=require("./useSwiperState.js"),n={data:[],renderItem:function(e){return null},duration:300,delay:3e3,autoPlay:!1,boundary:1/3,onChange:function(){return null},active:0,dotVisible:!0,dotBoxStyle:{},dotStyle:{},activeDotStyle:{}},d=a.forwardRef((function(d,i){var s=e.__assign(e.__assign({},n),d),u=l.default(s),o=u.children,f=u.dotVisible,c=u.dotBoxStyle,_=u.dotStyle,m=u.activeDotStyle,b=u.scroll_element,y=u.box_element,v=u.width,h=u.boundary,x=u.renderItem,p=u.list,w=u.current,g=u.setCurrent,k=u.playNext,S=u.playPrev,E=a.useMemo((function(){return v?{width:p.length*v+"px"}:{}}),[p,v]),N=a.useMemo((function(){return p.length>=2}),[p.length]);if(a.useImperativeHandle(i,(function(){return{next:function(){return k()},prev:function(){return S()}}}),[k,S]),void 0===h||h<=0||h>=1)throw new Error("boundary must between 0 - 1, exclude 0 and 1.");return a.createElement("div",{className:t.css(r.default.relative,r.default.w_full,r.default.overflow_hidden,r.default.border_box)},a.createElement("div",{ref:y,className:t.css(r.default.relative,r.default.w_full,r.default.overflow_hidden,r.default.border_box)},a.createElement("div",{ref:b,style:e.__assign(e.__assign({},E),{backfaceVisibility:"hidden",MozBackfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden"}),className:t.css(r.default.w_full,r.default.flex,r.default.nowrap,r.default.item_center,r.default.justify_center,r.default.border_box,r.default.back_hidden)},p.map((function(e,l){return a.createElement("div",{key:l,className:t.css(r.default.flex_1,r.default.border_box,r.default.overflow_hidden,r.default.trans_0),style:{WebkitTransform:"translate3d(0,0,0)",msTransform:"translate3d(0,0,0)",transform:"translate3d(0,0,0)"}},x(e))})))),o||N&&f&&a.createElement("ul",{className:t.css(r.default.dots_box),style:c},d.data.map((function(l,n){return a.createElement("li",{className:"".concat(t.css(r.default.dot)," ").concat(n===w?t.css(r.default.active):""),key:n,style:n===w?e.__assign(e.__assign({},_),m):_,onClick:function(){return g(n)}})}))))}));exports.default=d;
@@ -0,0 +1,2 @@
1
+ import Swiper from './Swiper';
2
+ export default Swiper;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Swiper.js");exports.default=e.default;
@@ -0,0 +1,17 @@
1
+ declare const styles: {
2
+ border_box: object;
3
+ w_full: object;
4
+ overflow_hidden: object;
5
+ flex: object;
6
+ flex_1: object;
7
+ item_center: object;
8
+ 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;
16
+ };
17
+ export default styles;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("aphrodite/no-important").StyleSheet.create({border_box:{boxSizing:"border-box"},w_full:{width:"100%"},overflow_hidden:{overflow:"hidden"},flex:{display:"flex"},flex_1:{flex:1},item_center:{alignItems:"center"},justify_center:{justifyContent:"center"},nowrap:{whiteSpace:"nowrap"},relative:{position:"relative"},back_hidden:{backfaceVisibility:"hidden"},trans_0:{transform:"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"},dots_box:{position:"absolute",bottom:"15px",width:"100%",display:"flex",alignItems:"center",justifyContent:"center",columnGap:"6px",listStyle:"none",zIndex:99},dot:{width:"10px",height:"10px",borderRadius:"9999px",backgroundColor:"rgba(0,0,0,.3)",transition:"all 200ms linear"},active:{backgroundColor:"rgba(255,255,255,.7)"}});exports.default=e;
@@ -0,0 +1,27 @@
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 {};
@@ -0,0 +1 @@
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})};
@@ -1 +1,4 @@
1
+ export * from './types';
1
2
  export { default as Card } from './Card';
3
+ export { default as Swiper } from './Swiper';
4
+ export { default as utils } from './utils';
package/dist/lib/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var r=require("./Card/Card.js");exports.Card=r;
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;
@@ -0,0 +1,4 @@
1
+ export interface SwiperExposeMethods {
2
+ next: () => void;
3
+ prev: () => void;
4
+ }
@@ -0,0 +1,5 @@
1
+ declare function sleep(timestamp?: number, result?: boolean): Promise<boolean>;
2
+ declare const _default: {
3
+ sleep: typeof sleep;
4
+ };
5
+ export default _default;
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib");var t={sleep:function(t,r){return void 0===r&&(r=!1),e.__awaiter(this,void 0,void 0,(function(){return e.__generator(this,(function(e){return[2,new Promise((function(e){return setTimeout((function(){return e(r)}),t)}))]}))}))}};exports.default=t;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rox-react-components",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "main": "dist/lib/index.js",
5
5
  "module": "dist/es/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -8,7 +8,8 @@
8
8
  "keywords": [
9
9
  "React",
10
10
  "SlideMenu",
11
- "Card"
11
+ "Card",
12
+ "Swiper"
12
13
  ],
13
14
  "files": [
14
15
  "dist",
@@ -35,6 +36,7 @@
35
36
  "@types/react-dom": "^18.2.14",
36
37
  "cross-env": "^7.0.3",
37
38
  "rollup": "^4.3.0",
39
+ "rollup-plugin-delete": "^2.0.0",
38
40
  "rollup-plugin-dts": "^6.1.0",
39
41
  "rollup-plugin-node-externals": "^6.1.2"
40
42
  },