react-simply-carousel 6.0.3 → 8.1.0

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 (5) hide show
  1. package/README.md +30 -30
  2. package/dist/index.d.ts +8 -5
  3. package/dist/index.esm.js +1 -0
  4. package/dist/index.js +1 -1
  5. package/package.json +9 -12
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [![npm version](https://img.shields.io/npm/v/react-simply-carousel)](https://www.npmjs.com/package/react-simply-carousel)
4
4
  [![minified + gzip](https://img.shields.io/bundlephobia/minzip/react-simply-carousel/latest)](https://bundlephobia.com/package/react-simply-carousel)
5
- [![typescript](https://badgen.net/npm/types/react-simply-carousel?6.0.3)](https://unpkg.com/react-simply-carousel/dist/index.d.ts)
5
+ [![typescript](https://badgen.net/npm/types/react-simply-carousel)](https://unpkg.com/react-simply-carousel/dist/index.d.ts)
6
6
  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vadymshymko/react-simply-carousel/blob/master/LICENSE)
7
7
 
8
8
  A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. [Fully customizable](#props)
@@ -131,35 +131,35 @@ export default ReactSimplyCarouselExample;
131
131
 
132
132
  ## Props
133
133
 
134
- | Name | Type | Default Value | Description |
135
- | ----------------------------------------------------------------- | ------------------------------------ | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
136
- | **activeSlideIndex** | number | | Index of active slide |
137
- | **activeSlideProps** | object | `{}` | DOM props for active slide element |
138
- | **autoplay** | boolean | `false` | |
139
- | **autoplayDirection** | string (`'forward'` or `'backward'`) | `'forward'` | |
140
- | **backwardBtnProps** | object | `{}` | DOM props for carousel backward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |
141
- | **children** | node | `null` | slides array |
142
- | **containerProps** | object | `{}` | DOM props for carousel container div element |
143
- | **delay** | number | `0` | Slide change delay (css transition delay) in ms |
144
- | **disableNavIfAllVisible** | boolean | `true` | Disable carousel nav if all slides is visible |
145
- | **easing** | string | `'linear'` | Slide change easing (css transition easing) |
146
- | **forwardBtnProps** | object | `{}` | DOM props for carousel forward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |
147
- | **hideNavIfAllVisible** | boolean | `true` | Hide nav buttons if all slides is visible |
148
- | **innerProps** | object | `{}` | DOM props for inner div element |
149
- | **itemsListProps** | object | `{}` | DOM props for items list div element |
150
- | **itemsToScroll** | number | `1` | How many slides to scroll at once |
151
- | **itemsToShow** | number | `0` (automaticaly calculated) | How many slides to show |
152
- | **onAfterChange** | function | `null` | activeSlideIndex change callback |
153
- | **onRequestChange** | function | | Callback to handle every time the active slide changes, receives the new active index as arguments. |
154
- | **responsiveProps** | Array of objects | `[]` | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px |
155
- | **speed** | number | `0` | Carousel scroll speed (css transition speed) in ms |
156
- | **updateOnItemClick** | boolean | `false` | Update active item index after click on some slide |
157
- | **centerMode** (disabled if `infinite` prop disabled) | boolean | `false` | Align active slide to the center of the carousel container viewport |
158
- | **infinite** | boolean | `true` | Enable infinite loop scroll |
159
- | **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean | `true` | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible |
160
- | **disableNavIfEdgeActive** | boolean | `true` | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0 |
161
- | **dotsNav (experimental)** (disabled if `infinite` prop enabled) | object | `{}` | Props for carousel dots. includes `show` (boolean) for toggle dots nav visibility, activeClassName (className for active dot) and DOM props for all dots nav buttons |
162
- | **dotsNavWrapperProps** | object | `{}` | DOM Props for dots nav wrapper div |
134
+ | Name | Type | Default Value | Description |
135
+ | ----------------------------------------------------------------- | ------------------------------------ | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
136
+ | **activeSlideIndex** | number | | Index of active slide |
137
+ | **activeSlideProps** | object | `{}` | DOM props for active slide element |
138
+ | **autoplay** | boolean | `false` | |
139
+ | **autoplayDirection** | string (`'forward'` or `'backward'`) | `'forward'` | |
140
+ | **backwardBtnProps** | object | `{}` | DOM props for carousel backward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |
141
+ | **children** | node | `null` | slides array |
142
+ | **containerProps** | object | `{}` | DOM props for carousel container div element |
143
+ | **delay** | number | `0` | Slide change delay (css transition delay) in ms |
144
+ | **disableNavIfAllVisible** | boolean | `true` | Disable carousel nav if all slides is visible |
145
+ | **easing** | string | `'linear'` | Slide change easing (css transition easing) |
146
+ | **forwardBtnProps** | object | `{}` | DOM props for carousel forward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |
147
+ | **hideNavIfAllVisible** | boolean | `true` | Hide nav buttons if all slides is visible |
148
+ | **innerProps** | object | `{}` | DOM props for inner div element |
149
+ | **itemsListProps** | object | `{}` | DOM props for items list div element |
150
+ | **itemsToScroll** | number | `1` | How many slides to scroll at once |
151
+ | **itemsToShow** | number | `0` (automaticaly calculated) | How many slides to show |
152
+ | **onAfterChange** | function | `null` | activeSlideIndex change callback |
153
+ | **onRequestChange** | function | | Callback to handle every time the active slide changes, receives the new active index as arguments. |
154
+ | **responsiveProps** | Array of objects | `[]` | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px |
155
+ | **speed** | number | `0` | Carousel scroll speed (css transition speed) in ms |
156
+ | **updateOnItemClick** | boolean | `false` | Update active item index after click on some slide |
157
+ | **centerMode** (disabled if `infinite` prop disabled) | boolean | `false` | Align active slide to the center of the carousel container viewport |
158
+ | **infinite** | boolean | `true` | Enable infinite loop scroll |
159
+ | **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean | `true` | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible |
160
+ | **disableNavIfEdgeActive** | boolean | `true` | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0 |
161
+ | **dotsNav** (experimental) | object | `{}` | Props for carousel dots. Includes `show` (boolean) property for toggle dots nav visibility, `containerProps` (DOM Props for dots nav wrapper div) property, `itemBtnProps` (DOM props for all dots nav buttons) property and `activeItemBtnProps` (DOM props for active dots nav button) |
162
+ | **persistentChangeCallbacks** | boolean | `false` | Enable call `onRequestChange` prop even if activeSlideIndex equals new value |
163
163
 
164
164
  ## Demo
165
165
 
package/dist/index.d.ts CHANGED
@@ -3,6 +3,12 @@ declare type NavDirection = 'forward' | 'backward';
3
3
  declare type NavBtnProps = ButtonHTMLAttributes<HTMLButtonElement> & {
4
4
  show?: boolean;
5
5
  };
6
+ declare type DotsNav = {
7
+ show?: boolean;
8
+ containerProps?: HTMLAttributes<HTMLDivElement>;
9
+ itemBtnProps?: ButtonHTMLAttributes<HTMLButtonElement>;
10
+ activeItemBtnProps?: ButtonHTMLAttributes<HTMLButtonElement>;
11
+ };
6
12
  declare type ReactSimplyCarouselStaticProps = {
7
13
  activeSlideIndex: number;
8
14
  activeSlideProps?: HTMLAttributes<any>;
@@ -28,11 +34,8 @@ declare type ReactSimplyCarouselStaticProps = {
28
34
  infinite?: boolean;
29
35
  disableNavIfEdgeVisible?: boolean;
30
36
  disableNavIfEdgeActive?: boolean;
31
- dotsNav?: {
32
- show?: boolean;
33
- activeClassName?: string;
34
- } & ButtonHTMLAttributes<HTMLButtonElement>;
35
- dotsNavWrapperProps?: HTMLAttributes<HTMLDivElement>;
37
+ dotsNav?: DotsNav;
38
+ persistentChangeCallbacks?: boolean;
36
39
  };
37
40
  declare type ReactSimplyCarouselResponsiveProps = (Omit<Omit<ReactSimplyCarouselStaticProps, 'activeSlideIndex'>, 'onRequestChange'> & {
38
41
  minWidth?: number;
package/dist/index.esm.js ADDED
@@ -0,0 +1 @@
1
+ import e,{memo as t,useState as n,useRef as r,Children as o,useMemo as i,useCallback as c,useEffect as a}from"react";function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(){return s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function f(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],c=!0,a=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(a)throw o}}return i}(e,t)||h(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(e){return function(e){if(Array.isArray(e))return p(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||h(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var b=["responsiveProps"],y=["minWidth","maxWidth"],w=["style","onClickCapture"],g=["style"],E=["style","onTouchStart","onMouseDown","onTransitionEnd"],x=["children","show"],O=["children","show"],S=["className","style"],T=["className","onClick","style"],k=["props"];function j(t){var u=t.responsiveProps,d=void 0===u?[]:u,h=f(t,b),p=v(n(0),2),j=p[0],C=p[1],P=v(n(h.activeSlideIndex),2),L=P[0],I=P[1],M=r(null),W=r(null),A=r(null),N=r(0),D=r(!1),X=r(""),z=r(null),B=r(null),V=r(0),F=d.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.minWidth,r=void 0===n?0:n,o=t.maxWidth,i=void 0===o?null:o,c=f(t,y);return j>r&&(!i||j<=i)?l(l({},e),c):e}),h),q=o.toArray(F.children),R=j?l(l({},F),{},{activeSlideIndex:Math.max(0,Math.min(F.activeSlideIndex,q.length-1)),itemsToShow:Math.min(q.length,F.itemsToShow||0),itemsToScroll:Math.min(q.length,F.itemsToScroll||1)}):h,U=R.containerProps,$=(U=void 0===U?{}:U).style,G=void 0===$?{}:$,H=U.onClickCapture,J=void 0===H?null:H,K=f(U,w),Q=R.innerProps,Y=(Q=void 0===Q?{}:Q).style,Z=void 0===Y?{}:Y,_=f(Q,g),ee=R.itemsListProps,te=(ee=void 0===ee?{}:ee).style,ne=void 0===te?{}:te,re=ee.onTouchStart,oe=void 0===re?null:re,ie=ee.onMouseDown,ce=void 0===ie?null:ie,ae=ee.onTransitionEnd,ue=void 0===ae?null:ae,le=f(ee,E),de=R.backwardBtnProps,se=(de=void 0===de?{}:de).children,fe=void 0===se?null:se,ve=de.show,me=void 0===ve||ve,he=f(de,x),pe=R.forwardBtnProps,be=(pe=void 0===pe?{}:pe).children,ye=void 0===be?null:be,we=pe.show,ge=void 0===we||we,Ee=f(pe,O),xe=R.activeSlideProps,Oe=(xe=void 0===xe?{}:xe).className,Se=void 0===Oe?"":Oe,Te=xe.style,ke=void 0===Te?{}:Te,je=f(xe,S),Ce=R.updateOnItemClick,Pe=void 0!==Ce&&Ce,Le=R.activeSlideIndex,Ie=R.onRequestChange,Me=R.speed,We=void 0===Me?0:Me,Ae=R.delay,Ne=void 0===Ae?0:Ae,De=R.easing,Xe=void 0===De?"linear":De,ze=R.itemsToShow,Be=void 0===ze?0:ze,Ve=R.itemsToScroll,Fe=void 0===Ve?1:Ve,qe=R.children,Re=R.onAfterChange,Ue=R.autoplay,$e=void 0!==Ue&&Ue,Ge=R.autoplayDirection,He=void 0===Ge?"forward":Ge,Je=R.disableNavIfAllVisible,Ke=void 0===Je||Je,Qe=R.hideNavIfAllVisible,Ye=void 0===Qe||Qe,Ze=R.centerMode,_e=void 0!==Ze&&Ze,et=R.infinite,tt=void 0===et||et,nt=R.disableNavIfEdgeVisible,rt=void 0===nt||nt,ot=R.disableNavIfEdgeActive,it=void 0===ot||ot,ct=R.dotsNav,at=void 0===ct?{}:ct,ut=R.persistentChangeCallbacks,lt=void 0!==ut&&ut,dt=at||{},st=dt.show,ft=void 0!==st&&st,vt=dt.containerProps,mt=void 0===vt?{}:vt,ht=dt.itemBtnProps,pt=void 0===ht?{}:ht,bt=dt.activeItemBtnProps,yt=void 0===bt?{}:bt,wt=j?m(A.current.children):[],gt=i((function(){return j?tt?wt.slice(q.length-L,q.length-L+q.length):wt:[]}),[L,q.length,j,tt,wt]),Et=j?A.current.offsetWidth-W.current.offsetWidth:0,xt=function(e){var t=gt.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return tt?t:Math.min(Et,t)},Ot=i((function(){return j&&Be?gt.reduce((function(e,t,n){return n>=Le&&n<Le+Be||n<Le&&n<Le+Be-gt.length?e+t.offsetWidth:e}),0):0}),[Le,Be,gt,j]),St=o.count(qe)-1,Tt=Be===q.length,kt=Ye&&Tt,jt=Ke&&Tt,Ct=Le-L!=0,Pt=j&&Ct&&tt?xt(L):0,Lt=!j||!Ct&&tt?0:xt(Le),It=j?gt[Le].offsetWidth:0,Mt=j&&(_e&&tt)?-(Math.min(Ot||W.current.offsetWidth,W.current.offsetWidth)-It)/2:0,Wt=i((function(){return tt&&j?A.current.offsetWidth/3:0}),[j,tt]),At=L-Le!=0&&A.current?"forward"===X.current.toLowerCase()&&Le<L?Wt:"backward"===X.current.toLowerCase()&&Le>L?-Wt:0:0,Nt=Ct&&(We||Ne)?"transform ".concat(We,"ms ").concat(Xe," ").concat(Ne,"ms"):"none",Dt=jt||!j?0:Lt-Pt+Mt+At+Wt,Xt=j?"translateX(-".concat(Dt,"px)"):"none",zt=c((function(e){if("forward"===e){var t=Le+Fe;return t>St?tt?t-St-1:Le:t}if("backward"===e){var n=Le-Fe;return n<0?tt?St+1+n:Le:n}return Le}),[Le,Fe,St,tt]),Bt=c((function(e,t){X.current=t,A.current.style.transition=We||Ne?"transform ".concat(We,"ms ").concat(Xe," ").concat(Ne,"ms"):"none",e!==Le||lt?(clearTimeout(z.current),Ie(e)):(N.current=0,D.current=!1,A.current.style.transform="translateX(-".concat(Mt+Wt+(tt?0:Dt),"px)"))}),[lt,Le,Mt,Ne,Xe,We,Ie,Wt,tt,Dt]),Vt=c((function(){$e&&(clearTimeout(z.current),z.current=setTimeout((function(){Bt(zt(He),He)}),Ne))}),[$e,He,Bt,zt,Ne]),Ft=c((function(e){D.current&&(e.preventDefault(),e.stopPropagation(),J&&J(e))}),[J]),qt=c((function(){Bt(zt("backward"),"backward")}),[Bt,zt]),Rt=c((function(e){D.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=N.current-t+Mt+Wt+(tt?0:Dt),r=A.current.offsetWidth-W.current.offsetWidth,o=Math.max(Math.min(0,-n),-r);A.current.style.transition="none",A.current.style.transform="translateX(".concat(o,"px)")}),[Mt,Wt,tt,Dt]),Ut=c((function(e){if(A.current.removeEventListener("mouseout",Ut),A.current.removeEventListener("dragstart",Ut),document.removeEventListener("mousemove",Rt),document.removeEventListener("mouseup",Ut),document.removeEventListener("touchmove",Rt),document.removeEventListener("touchend",Ut),D.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=N.current-t;n>It/2?Bt(zt("forward"),"forward"):n<-It/2?Bt(zt("backward"),"backward"):Bt(Le,"forward")}}),[Le,It,Bt,zt,Rt]),$t=c((function(e){clearTimeout(z.current),D.current||(N.current=e.clientX,document.addEventListener("mousemove",Rt),document.addEventListener("mouseup",Ut),A.current.addEventListener("mouseout",Ut),A.current.addEventListener("dragstart",Ut)),ce&&ce(e)}),[Rt,Ut]),Gt=c((function(e){clearTimeout(z.current),D.current||(N.current=e.touches[0].clientX,document.addEventListener("touchmove",Rt),document.addEventListener("touchend",Ut)),oe&&oe(e)}),[Rt,Ut]),Ht=c((function(e){I(Le),ue&&ue(e)}),[Le]),Jt=c((function(){Bt(zt("forward"),"forward")}),[Bt,zt]),Kt=function(e,t,n){return e.map((function(e,r){var o=e.props,i=(o=void 0===o?{}:o).className,c=void 0===i?"":i,a=o.onClick,u=void 0===a?null:a,d=o.style,s=void 0===d?{}:d,v=f(o,T),m=f(e,k),h=tt?V.current>=q.length?"forward":"backward":r>=Le?"forward":"backward",p=r+t===Le,b="".concat(c," ").concat(h," ").concat(p?Se:""),y=l(l(l({},s),p?ke:{}),{},{boxSizing:"border-box",margin:0}),w=!n&&Pe?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){Bt(n,t||(Le<n?"forward":"")||(Le>n?"backward":"")),r&&r(e)}}({direction:h,index:r+t,onClick:u}):u,g=l(l({role:"tabpanel",className:b,style:y,onClick:w},v),p?je:{});return V.current+=1,l({props:g},m)}))};return a((function(){return N.current=0,D.current=!1,X.current="",Le!==L?We||Ne||I(Le):(Re&&Re(Le,L),(tt||"forward"===He&&Le!==St||"backward"===He&&0!==Le)&&Vt()),function(){clearTimeout(z.current)}}),[L,Le,Re,We,Ne,Vt,tt,St,He]),a((function(){return j&&Vt(),function(){clearTimeout(z.current)}}),[j]),a((function(){var e=A.current;function t(){clearTimeout(B.current),clearTimeout(z.current),B.current=setTimeout((function(){C(window.innerWidth)}),400)}return C(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(B.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",Rt),document.removeEventListener("mouseup",Ut),document.removeEventListener("touchmove",Rt),document.removeEventListener("touchend",Ut),e.removeEventListener("mouseout",Ut),e.removeEventListener("dragstart",Ut)}}),[Rt,Ut]),V.current=0,j&&(A.current.style.transform=Xt),e.createElement("div",s({onClickCapture:Ft,style:l({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},G)},K,{ref:M}),me&&!kt&&e.createElement("button",s({},he,{type:"button",onClick:(0===Dt&&rt||0===Le&&it)&&!tt?void 0:qt,disabled:"boolean"==typeof he.disabled?he.disabled:!(!(0===Dt&&rt||0===Le&&it)||tt)}),fe),e.createElement("div",s({},_,{style:l(l({},Z),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:Ot?"".concat(Ot,"px"):0}),ref:W}),e.createElement("div",s({},le,{style:l(l({},ne),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:Nt,transform:Xt}),"data-transform":Xt,onTouchStart:jt?void 0:Gt,onMouseDown:jt?void 0:$t,onTransitionEnd:We||Ne?Ht:void 0,tabIndex:-1,role:"presentation",ref:A}),!jt&&tt&&Kt(q.slice(L),L),Kt(q,0,jt),!jt&&tt&&Kt(q,0),!jt&&tt&&Kt(q.slice(0,L),0))),ge&&!kt&&e.createElement("button",s({},Ee,{type:"button",onClick:(Dt===Et&&rt||Le===St&&it)&&!tt?void 0:Jt,disabled:"boolean"==typeof Ee.disabled?Ee.disabled:!(!(Dt===Et&&rt||Le===St&&it)||tt)}),ye),!!ft&&e.createElement("div",s({style:{width:"100%",display:"flex",justifyContent:"center"}},mt),Array.from({length:Math.ceil(q.length/Fe)}).map((function(t,n){return e.createElement("button",s({type:"button",key:n,title:"".concat(n)},pt,Math.min(n*Fe,q.length-1)===Le?yt:{},{onClick:function(){Bt(Math.min(n*Fe,q.length-1),Math.min(n*Fe,q.length-1)>Le?"forward":"backward")}}))}))))}var C=t(j);export{C as default};
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("ReactSimplyCarousel",["react"],t):"object"==typeof exports?exports.ReactSimplyCarousel=t(require("react")):e.ReactSimplyCarousel=t(e.React)}(this,(e=>(()=>{"use strict";var t={244:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};return(()=>{n.d(o,{default:()=>O});var e=n(244),t=n.n(e),r=["responsiveProps"],i=["minWidth","maxWidth"],a=["style","onClickCapture"],c=["style"],u=["style","onTouchStart","onMouseDown","onTransitionEnd"],l=["children","show"],s=["children","show"],d=["className","style"],f=["show","activeClassName"],v=["className","onClick","style"],m=["props"];function h(){return h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},h.apply(this,arguments)}function p(e){return function(e){if(Array.isArray(e))return E(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function g(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){if(e){if("string"==typeof e)return E(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?E(e,t):void 0}}function E(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function C(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function k(n){var o=n.responsiveProps,b=void 0===o?[]:o,w=C(n,r),x=g((0,e.useState)(0),2),E=x[0],k=x[1],O=g((0,e.useState)(w.activeSlideIndex),2),S=O[0],T=O[1],j=(0,e.useRef)(null),P=(0,e.useRef)(null),L=(0,e.useRef)(null),M=(0,e.useRef)(0),W=(0,e.useRef)(!1),I=(0,e.useRef)(""),A=(0,e.useRef)(null),N=(0,e.useRef)(null),R=(0,e.useRef)(0),D=b.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.minWidth,n=void 0===r?0:r,o=t.maxWidth,a=void 0===o?null:o,c=C(t,i);return E>n&&(!a||E<=a)?y(y({},e),c):e}),w),X=e.Children.toArray(D.children),z=E?y(y({},D),{},{activeSlideIndex:Math.max(0,Math.min(D.activeSlideIndex,X.length-1)),itemsToShow:Math.min(X.length,D.itemsToShow||0),itemsToScroll:Math.min(X.length,D.itemsToScroll||1)}):w,q=z.containerProps,V=(q=void 0===q?{}:q).style,B=void 0===V?{}:V,_=q.onClickCapture,F=void 0===_?null:_,U=C(q,a),$=z.innerProps,G=($=void 0===$?{}:$).style,H=void 0===G?{}:G,J=C($,c),K=z.itemsListProps,Q=(K=void 0===K?{}:K).style,Y=void 0===Q?{}:Q,Z=K.onTouchStart,ee=void 0===Z?null:Z,te=K.onMouseDown,re=void 0===te?null:te,ne=K.onTransitionEnd,oe=void 0===ne?null:ne,ie=C(K,u),ae=z.backwardBtnProps,ce=(ae=void 0===ae?{}:ae).children,ue=void 0===ce?null:ce,le=ae.show,se=void 0===le||le,de=C(ae,l),fe=z.forwardBtnProps,ve=(fe=void 0===fe?{}:fe).children,me=void 0===ve?null:ve,he=fe.show,pe=void 0===he||he,be=C(fe,s),ye=z.activeSlideProps,we=(ye=void 0===ye?{}:ye).className,ge=void 0===we?"":we,xe=ye.style,Ee=void 0===xe?{}:xe,Ce=C(ye,d),ke=z.updateOnItemClick,Oe=void 0!==ke&&ke,Se=z.activeSlideIndex,Te=z.onRequestChange,je=z.speed,Pe=void 0===je?0:je,Le=z.delay,Me=void 0===Le?0:Le,We=z.easing,Ie=void 0===We?"linear":We,Ae=z.itemsToShow,Ne=void 0===Ae?0:Ae,Re=z.itemsToScroll,De=void 0===Re?1:Re,Xe=z.children,ze=z.onAfterChange,qe=z.autoplay,Ve=void 0!==qe&&qe,Be=z.autoplayDirection,_e=void 0===Be?"forward":Be,Fe=z.disableNavIfAllVisible,Ue=void 0===Fe||Fe,$e=z.hideNavIfAllVisible,Ge=void 0===$e||$e,He=z.centerMode,Je=void 0!==He&&He,Ke=z.infinite,Qe=void 0===Ke||Ke,Ye=z.disableNavIfEdgeVisible,Ze=void 0===Ye||Ye,et=z.disableNavIfEdgeActive,tt=void 0===et||et,rt=z.dotsNav,nt=void 0===rt?{}:rt,ot=z.dotsNavWrapperProps,it=void 0===ot?{}:ot,at=nt||{},ct=at.show,ut=void 0!==ct&&ct,lt=at.activeClassName,st=void 0===lt?"":lt,dt=C(at,f),ft=(0,e.useMemo)((function(){return E?Qe?p(L.current.children).slice(X.length-S,X.length-S+X.length):p(L.current.children):[]}),[S,X.length,E,Qe]),vt=E?L.current.offsetWidth-P.current.offsetWidth:0,mt=function(e){var t=ft.reduce((function(t,r,n){return n>=e?t:t+(r.offsetWidth||0)}),0);return Qe?t:Math.min(vt,t)},ht=(0,e.useMemo)((function(){return E&&Ne?ft.reduce((function(e,t,r){return r>=Se&&r<Se+Ne||r<Se&&r<Se+Ne-ft.length?e+t.offsetWidth:e}),0):0}),[Se,Ne,ft,E]),pt=e.Children.count(Xe)-1,bt=Ne===X.length,yt=Ge&&bt,wt=Ue&&bt,gt=Se-S!=0,xt=E&&gt&&Qe?mt(S):0,Et=!E||!gt&&Qe?0:mt(Se),Ct=E?ft[Se].offsetWidth:0,kt=E&&Je&&Qe?-(Math.min(ht||P.current.offsetWidth,P.current.offsetWidth)-Ct)/2:0,Ot=(0,e.useMemo)((function(){return Qe&&E?L.current.offsetWidth/3:0}),[E,Qe]),St=S-Se!=0&&L.current?"forward"===I.current.toLowerCase()&&Se<S?Ot:"backward"===I.current.toLowerCase()&&Se>S?-Ot:0:0,Tt=gt&&(Pe||Me)?"transform ".concat(Pe,"ms ").concat(Ie," ").concat(Me,"ms"):"none",jt=wt||!E?0:Et-xt+kt+St+Ot,Pt=E?"translateX(-".concat(jt,"px)"):"none",Lt=(0,e.useCallback)((function(e){if("forward"===e){var t=Se+De;return t>pt?Qe?t-pt-1:Se:t}if("backward"===e){var r=Se-De;return r<0?Qe?pt+1+r:Se:r}return Se}),[Se,De,pt,Qe]),Mt=(0,e.useCallback)((function(e,t){I.current=t,L.current.style.transition=Pe||Me?"transform ".concat(Pe,"ms ").concat(Ie," ").concat(Me,"ms"):"none",e!==Se?(clearTimeout(A.current),Te(e)):(M.current=0,W.current=!1,L.current.style.transform="translateX(-".concat(kt+Ot+(Qe?0:jt),"px)"))}),[Se,kt,Me,Ie,Pe,Te,Ot,Qe,jt]),Wt=(0,e.useCallback)((function(){Ve&&(clearTimeout(A.current),A.current=setTimeout((function(){Mt(Lt(_e),_e)}),Me))}),[Ve,_e,Mt,Lt,Me]),It=(0,e.useCallback)((function(e){W.current&&(e.preventDefault(),e.stopPropagation(),F&&F(e))}),[F]),At=(0,e.useCallback)((function(){Mt(Lt("backward"),"backward")}),[Mt,Lt]),Nt=(0,e.useCallback)((function(e){W.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,r=M.current-t+kt+Ot+(Qe?0:jt),n=L.current.offsetWidth-P.current.offsetWidth,o=Math.max(Math.min(0,-r),-n);L.current.style.transition="none",L.current.style.transform="translateX(".concat(o,"px)")}),[kt,Ot,Qe,jt]),Rt=(0,e.useCallback)((function(e){if(L.current.removeEventListener("mouseout",Rt),L.current.removeEventListener("dragstart",Rt),document.removeEventListener("mousemove",Nt),document.removeEventListener("mouseup",Rt),document.removeEventListener("touchmove",Nt),document.removeEventListener("touchend",Rt),W.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,r=M.current-t;r>Ct/2?Mt(Lt("forward"),"forward"):r<-Ct/2?Mt(Lt("backward"),"backward"):Mt(Se,"forward")}}),[Se,Ct,Mt,Lt,Nt]),Dt=(0,e.useCallback)((function(e){clearTimeout(A.current),W.current||(M.current=e.clientX,document.addEventListener("mousemove",Nt),document.addEventListener("mouseup",Rt),L.current.addEventListener("mouseout",Rt),L.current.addEventListener("dragstart",Rt)),re&&re(e)}),[Nt,Rt]),Xt=(0,e.useCallback)((function(e){clearTimeout(A.current),W.current||(M.current=e.touches[0].clientX,document.addEventListener("touchmove",Nt),document.addEventListener("touchend",Rt)),ee&&ee(e)}),[Nt,Rt]),zt=(0,e.useCallback)((function(e){T(Se),oe&&oe(e)}),[Se]),qt=(0,e.useCallback)((function(){Mt(Lt("forward"),"forward")}),[Mt,Lt]),Vt=function(e,t,r){return e.map((function(e,n){var o=e.props,i=(o=void 0===o?{}:o).className,a=void 0===i?"":i,c=o.onClick,u=void 0===c?null:c,l=o.style,s=void 0===l?{}:l,d=C(o,v),f=C(e,m),h=Qe?R.current>=X.length?"forward":"backward":n>=Se?"forward":"backward",p=n+t===Se,b="".concat(a," ").concat(h," ").concat(p?ge:""),w=y(y(y({},s),p?Ee:{}),{},{boxSizing:"border-box",margin:0}),g=!r&&Oe?function(e){var t=e.direction,r=e.index,n=e.onClick;return function(e){Mt(r,t||(Se<r?"forward":"")||(Se>r?"backward":"")),n&&n(e)}}({direction:h,index:n+t,onClick:u}):u,x=y(y({role:"tabpanel",className:b,style:w,onClick:g},d),p?Ce:{});return R.current+=1,y({props:x},f)}))};return(0,e.useEffect)((function(){return M.current=0,W.current=!1,I.current="",Se!==S?Pe||Me||T(Se):(ze&&ze(Se,S),(Qe||"forward"===_e&&Se!==pt||"backward"===_e&&0!==Se)&&Wt()),function(){clearTimeout(A.current)}}),[S,Se,ze,Pe,Me,Wt,Qe,pt,_e]),(0,e.useEffect)((function(){return E&&Wt(),function(){clearTimeout(A.current)}}),[E]),(0,e.useEffect)((function(){var e=L.current;function t(){clearTimeout(N.current),clearTimeout(A.current),N.current=setTimeout((function(){k(window.innerWidth)}),400)}return k(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(N.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",Nt),document.removeEventListener("mouseup",Rt),document.removeEventListener("touchmove",Nt),document.removeEventListener("touchend",Rt),e.removeEventListener("mouseout",Rt),e.removeEventListener("dragstart",Rt)}}),[Nt,Rt]),R.current=0,E&&(L.current.style.transform=Pt),t().createElement("div",h({onClickCapture:It,style:y({display:"flex",boxSizing:"border-box",justifyContent:"center"},B)},U,{ref:j}),se&&!yt&&t().createElement("button",h({},de,{type:"button",onClick:(0===jt&&Ze||0===Se&&tt)&&!Qe?void 0:At,disabled:"boolean"==typeof de.disabled?de.disabled:!(!(0===jt&&Ze||0===Se&&tt)||Qe)}),ue),t().createElement("div",h({},J,{style:y(y({},H),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:ht?"".concat(ht,"px"):"100%"}),ref:P}),t().createElement("div",h({},ie,{style:y(y({},Y),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:Tt,transform:Pt}),"data-transform":Pt,onTouchStart:wt?void 0:Xt,onMouseDown:wt?void 0:Dt,onTransitionEnd:Pe||Me?zt:void 0,tabIndex:-1,role:"presentation",ref:L}),!wt&&Qe&&Vt(X.slice(S),S),Vt(X,0,wt),!wt&&Qe&&Vt(X,0),!wt&&Qe&&Vt(X.slice(0,S),0))),pe&&!yt&&t().createElement("button",h({},be,{type:"button",onClick:(jt===vt&&Ze||Se===pt&&tt)&&!Qe?void 0:qt,disabled:"boolean"==typeof be.disabled?be.disabled:!(!(jt===vt&&Ze||Se===pt&&tt)||Qe)}),me),!Qe&&!!ut&&t().createElement("div",it,Array.from({length:Math.ceil(X.length/De)}).map((function(e,r){return t().createElement("button",h({type:"button",key:r,title:"".concat(r)},dt,{className:"".concat(dt.className||""," ").concat(r*De===Se?st:""),onClick:function(){Mt(Math.min(r*De,X.length-1),Math.min(r*De,X.length-1)>Se?"forward":"backward")}}))}))))}const O=(0,e.memo)(k)})(),o.default})()));
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactSimplyCarousel=t(e.React)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(){return a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],a=!0,c=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(c)throw o}}return i}(e,t)||d(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||d(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=["responsiveProps"],v=["minWidth","maxWidth"],m=["style","onClickCapture"],h=["style"],b=["style","onTouchStart","onMouseDown","onTransitionEnd"],p=["children","show"],y=["children","show"],w=["className","style"],g=["className","onClick","style"],E=["props"];function k(t){var r=t.responsiveProps,i=void 0===r?[]:r,d=c(t,f),s=u(e.useState(0),2),k=s[0],C=s[1],x=u(e.useState(d.activeSlideIndex),2),S=x[0],O=x[1],T=e.useRef(null),j=e.useRef(null),P=e.useRef(null),L=e.useRef(0),M=e.useRef(!1),I=e.useRef(""),W=e.useRef(null),A=e.useRef(null),R=e.useRef(0),N=i.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.minWidth,r=void 0===n?0:n,i=t.maxWidth,a=void 0===i?null:i,u=c(t,v);return k>r&&(!a||k<=a)?o(o({},e),u):e}),d),D=e.Children.toArray(N.children),X=k?o(o({},N),{},{activeSlideIndex:Math.max(0,Math.min(N.activeSlideIndex,D.length-1)),itemsToShow:Math.min(D.length,N.itemsToShow||0),itemsToScroll:Math.min(D.length,N.itemsToScroll||1)}):d,z=X.containerProps,B=(z=void 0===z?{}:z).style,V=void 0===B?{}:B,q=z.onClickCapture,F=void 0===q?null:q,U=c(z,m),$=X.innerProps,G=($=void 0===$?{}:$).style,H=void 0===G?{}:G,J=c($,h),K=X.itemsListProps,Q=(K=void 0===K?{}:K).style,Y=void 0===Q?{}:Q,Z=K.onTouchStart,_=void 0===Z?null:Z,ee=K.onMouseDown,te=void 0===ee?null:ee,ne=K.onTransitionEnd,re=void 0===ne?null:ne,oe=c(K,b),ie=X.backwardBtnProps,ae=(ie=void 0===ie?{}:ie).children,ce=void 0===ae?null:ae,ue=ie.show,le=void 0===ue||ue,de=c(ie,p),se=X.forwardBtnProps,fe=(se=void 0===se?{}:se).children,ve=void 0===fe?null:fe,me=se.show,he=void 0===me||me,be=c(se,y),pe=X.activeSlideProps,ye=(pe=void 0===pe?{}:pe).className,we=void 0===ye?"":ye,ge=pe.style,Ee=void 0===ge?{}:ge,ke=c(pe,w),Ce=X.updateOnItemClick,xe=void 0!==Ce&&Ce,Se=X.activeSlideIndex,Oe=X.onRequestChange,Te=X.speed,je=void 0===Te?0:Te,Pe=X.delay,Le=void 0===Pe?0:Pe,Me=X.easing,Ie=void 0===Me?"linear":Me,We=X.itemsToShow,Ae=void 0===We?0:We,Re=X.itemsToScroll,Ne=void 0===Re?1:Re,De=X.children,Xe=X.onAfterChange,ze=X.autoplay,Be=void 0!==ze&&ze,Ve=X.autoplayDirection,qe=void 0===Ve?"forward":Ve,Fe=X.disableNavIfAllVisible,Ue=void 0===Fe||Fe,$e=X.hideNavIfAllVisible,Ge=void 0===$e||$e,He=X.centerMode,Je=void 0!==He&&He,Ke=X.infinite,Qe=void 0===Ke||Ke,Ye=X.disableNavIfEdgeVisible,Ze=void 0===Ye||Ye,_e=X.disableNavIfEdgeActive,et=void 0===_e||_e,tt=X.dotsNav,nt=void 0===tt?{}:tt,rt=X.persistentChangeCallbacks,ot=void 0!==rt&&rt,it=nt||{},at=it.show,ct=void 0!==at&&at,ut=it.containerProps,lt=void 0===ut?{}:ut,dt=it.itemBtnProps,st=void 0===dt?{}:dt,ft=it.activeItemBtnProps,vt=void 0===ft?{}:ft,mt=k?l(P.current.children):[],ht=e.useMemo((function(){return k?Qe?mt.slice(D.length-S,D.length-S+D.length):mt:[]}),[S,D.length,k,Qe,mt]),bt=k?P.current.offsetWidth-j.current.offsetWidth:0,pt=function(e){var t=ht.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return Qe?t:Math.min(bt,t)},yt=e.useMemo((function(){return k&&Ae?ht.reduce((function(e,t,n){return n>=Se&&n<Se+Ae||n<Se&&n<Se+Ae-ht.length?e+t.offsetWidth:e}),0):0}),[Se,Ae,ht,k]),wt=e.Children.count(De)-1,gt=Ae===D.length,Et=Ge&&gt,kt=Ue&&gt,Ct=Se-S!=0,xt=k&&Ct&&Qe?pt(S):0,St=!k||!Ct&&Qe?0:pt(Se),Ot=k?ht[Se].offsetWidth:0,Tt=k&&(Je&&Qe)?-(Math.min(yt||j.current.offsetWidth,j.current.offsetWidth)-Ot)/2:0,jt=e.useMemo((function(){return Qe&&k?P.current.offsetWidth/3:0}),[k,Qe]),Pt=S-Se!=0&&P.current?"forward"===I.current.toLowerCase()&&Se<S?jt:"backward"===I.current.toLowerCase()&&Se>S?-jt:0:0,Lt=Ct&&(je||Le)?"transform ".concat(je,"ms ").concat(Ie," ").concat(Le,"ms"):"none",Mt=kt||!k?0:St-xt+Tt+Pt+jt,It=k?"translateX(-".concat(Mt,"px)"):"none",Wt=e.useCallback((function(e){if("forward"===e){var t=Se+Ne;return t>wt?Qe?t-wt-1:Se:t}if("backward"===e){var n=Se-Ne;return n<0?Qe?wt+1+n:Se:n}return Se}),[Se,Ne,wt,Qe]),At=e.useCallback((function(e,t){I.current=t,P.current.style.transition=je||Le?"transform ".concat(je,"ms ").concat(Ie," ").concat(Le,"ms"):"none",e!==Se||ot?(clearTimeout(W.current),Oe(e)):(L.current=0,M.current=!1,P.current.style.transform="translateX(-".concat(Tt+jt+(Qe?0:Mt),"px)"))}),[ot,Se,Tt,Le,Ie,je,Oe,jt,Qe,Mt]),Rt=e.useCallback((function(){Be&&(clearTimeout(W.current),W.current=setTimeout((function(){At(Wt(qe),qe)}),Le))}),[Be,qe,At,Wt,Le]),Nt=e.useCallback((function(e){M.current&&(e.preventDefault(),e.stopPropagation(),F&&F(e))}),[F]),Dt=e.useCallback((function(){At(Wt("backward"),"backward")}),[At,Wt]),Xt=e.useCallback((function(e){M.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=L.current-t+Tt+jt+(Qe?0:Mt),r=P.current.offsetWidth-j.current.offsetWidth,o=Math.max(Math.min(0,-n),-r);P.current.style.transition="none",P.current.style.transform="translateX(".concat(o,"px)")}),[Tt,jt,Qe,Mt]),zt=e.useCallback((function(e){if(P.current.removeEventListener("mouseout",zt),P.current.removeEventListener("dragstart",zt),document.removeEventListener("mousemove",Xt),document.removeEventListener("mouseup",zt),document.removeEventListener("touchmove",Xt),document.removeEventListener("touchend",zt),M.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=L.current-t;n>Ot/2?At(Wt("forward"),"forward"):n<-Ot/2?At(Wt("backward"),"backward"):At(Se,"forward")}}),[Se,Ot,At,Wt,Xt]),Bt=e.useCallback((function(e){clearTimeout(W.current),M.current||(L.current=e.clientX,document.addEventListener("mousemove",Xt),document.addEventListener("mouseup",zt),P.current.addEventListener("mouseout",zt),P.current.addEventListener("dragstart",zt)),te&&te(e)}),[Xt,zt]),Vt=e.useCallback((function(e){clearTimeout(W.current),M.current||(L.current=e.touches[0].clientX,document.addEventListener("touchmove",Xt),document.addEventListener("touchend",zt)),_&&_(e)}),[Xt,zt]),qt=e.useCallback((function(e){O(Se),re&&re(e)}),[Se]),Ft=e.useCallback((function(){At(Wt("forward"),"forward")}),[At,Wt]),Ut=function(e,t,n){return e.map((function(e,r){var i=e.props,a=(i=void 0===i?{}:i).className,u=void 0===a?"":a,l=i.onClick,d=void 0===l?null:l,s=i.style,f=void 0===s?{}:s,v=c(i,g),m=c(e,E),h=Qe?R.current>=D.length?"forward":"backward":r>=Se?"forward":"backward",b=r+t===Se,p="".concat(u," ").concat(h," ").concat(b?we:""),y=o(o(o({},f),b?Ee:{}),{},{boxSizing:"border-box",margin:0}),w=!n&&xe?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){At(n,t||(Se<n?"forward":"")||(Se>n?"backward":"")),r&&r(e)}}({direction:h,index:r+t,onClick:d}):d,k=o(o({role:"tabpanel",className:p,style:y,onClick:w},v),b?ke:{});return R.current+=1,o({props:k},m)}))};return e.useEffect((function(){return L.current=0,M.current=!1,I.current="",Se!==S?je||Le||O(Se):(Xe&&Xe(Se,S),(Qe||"forward"===qe&&Se!==wt||"backward"===qe&&0!==Se)&&Rt()),function(){clearTimeout(W.current)}}),[S,Se,Xe,je,Le,Rt,Qe,wt,qe]),e.useEffect((function(){return k&&Rt(),function(){clearTimeout(W.current)}}),[k]),e.useEffect((function(){var e=P.current;function t(){clearTimeout(A.current),clearTimeout(W.current),A.current=setTimeout((function(){C(window.innerWidth)}),400)}return C(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(A.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",Xt),document.removeEventListener("mouseup",zt),document.removeEventListener("touchmove",Xt),document.removeEventListener("touchend",zt),e.removeEventListener("mouseout",zt),e.removeEventListener("dragstart",zt)}}),[Xt,zt]),R.current=0,k&&(P.current.style.transform=It),n.default.createElement("div",a({onClickCapture:Nt,style:o({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},V)},U,{ref:T}),le&&!Et&&n.default.createElement("button",a({},de,{type:"button",onClick:(0===Mt&&Ze||0===Se&&et)&&!Qe?void 0:Dt,disabled:"boolean"==typeof de.disabled?de.disabled:!(!(0===Mt&&Ze||0===Se&&et)||Qe)}),ce),n.default.createElement("div",a({},J,{style:o(o({},H),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:yt?"".concat(yt,"px"):0}),ref:j}),n.default.createElement("div",a({},oe,{style:o(o({},Y),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:Lt,transform:It}),"data-transform":It,onTouchStart:kt?void 0:Vt,onMouseDown:kt?void 0:Bt,onTransitionEnd:je||Le?qt:void 0,tabIndex:-1,role:"presentation",ref:P}),!kt&&Qe&&Ut(D.slice(S),S),Ut(D,0,kt),!kt&&Qe&&Ut(D,0),!kt&&Qe&&Ut(D.slice(0,S),0))),he&&!Et&&n.default.createElement("button",a({},be,{type:"button",onClick:(Mt===bt&&Ze||Se===wt&&et)&&!Qe?void 0:Ft,disabled:"boolean"==typeof be.disabled?be.disabled:!(!(Mt===bt&&Ze||Se===wt&&et)||Qe)}),ve),!!ct&&n.default.createElement("div",a({style:{width:"100%",display:"flex",justifyContent:"center"}},lt),Array.from({length:Math.ceil(D.length/Ne)}).map((function(e,t){return n.default.createElement("button",a({type:"button",key:t,title:"".concat(t)},st,Math.min(t*Ne,D.length-1)===Se?vt:{},{onClick:function(){At(Math.min(t*Ne,D.length-1),Math.min(t*Ne,D.length-1)>Se?"forward":"backward")}}))}))))}return e.memo(k)}));
package/package.json CHANGED
@@ -1,18 +1,16 @@
1
1
  {
2
2
  "name": "react-simply-carousel",
3
- "version": "6.0.3",
3
+ "version": "8.1.0",
4
4
  "description": "A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable",
5
- "main": "dist/index.js",
6
5
  "files": [
7
6
  "dist/"
8
7
  ],
9
- "unpkg": "dist/index.js",
10
- "module": "dist/index.js",
8
+ "main": "dist/index.js",
9
+ "module": "dist/index.esm.js",
11
10
  "types": "dist/index.d.ts",
12
11
  "sideEffects": false,
13
12
  "scripts": {
14
- "build": "rm -rf dist && yarn lint && yarn generate-types && webpack --mode=production",
15
- "build:dev": "yarn generate-types && webpack --mode=development",
13
+ "build": "rm -rf dist && yarn lint && yarn generate-types && rollup -c",
16
14
  "generate-types": "tsc --emitDeclarationOnly",
17
15
  "lint": "eslint . --ext .tsx",
18
16
  "prepare": "husky install",
@@ -50,13 +48,13 @@
50
48
  "@babel/preset-env": "^7.17.10",
51
49
  "@babel/preset-react": "^7.16.7",
52
50
  "@babel/preset-typescript": "^7.16.7",
51
+ "@rollup/plugin-babel": "^5.3.1",
52
+ "@rollup/plugin-node-resolve": "^13.3.0",
53
53
  "@types/react": "^18.0.8",
54
54
  "@types/react-dom": "^18.0.3",
55
55
  "@typescript-eslint/eslint-plugin": "^5.21.0",
56
56
  "@typescript-eslint/parser": "^5.21.0",
57
- "babel-loader": "^8.2.5",
58
57
  "babel-plugin-transform-remove-console": "^6.9.4",
59
- "clean-webpack-plugin": "^3.0.0",
60
58
  "eslint": "^8.14.0",
61
59
  "eslint-config-airbnb": "^19.0.4",
62
60
  "eslint-config-prettier": "^8.5.0",
@@ -69,10 +67,9 @@
69
67
  "prettier": "2.6.2",
70
68
  "react": "^18.1.0",
71
69
  "react-dom": "^18.1.0",
72
- "typescript": "^4.6.4",
73
- "webpack": "^5.72.0",
74
- "webpack-bundle-analyzer": "^4.5.0",
75
- "webpack-cli": "^4.9.2"
70
+ "rollup": "^2.72.1",
71
+ "rollup-plugin-terser": "^7.0.2",
72
+ "typescript": "^4.6.4"
76
73
  },
77
74
  "dependencies": {
78
75
  "core-js": "^3.8.1"