react-simply-carousel 8.4.5 → 8.5.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.
- package/README.md +41 -32
- package/dist/index.d.ts +18 -9
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -131,38 +131,47 @@ export default ReactSimplyCarouselExample;
|
|
|
131
131
|
|
|
132
132
|
## Props
|
|
133
133
|
|
|
134
|
-
| Name | Type | Default Value
|
|
135
|
-
| ----------------------------------------------------------------- | ------------------------------------ |
|
|
136
|
-
| **activeSlideIndex** | number |
|
|
137
|
-
| **activeSlideProps** | object | `{}`
|
|
138
|
-
| **autoplay** | boolean | `false`
|
|
139
|
-
| **autoplayDirection** | string (`'forward'` or `'backward'`) | `'forward'`
|
|
140
|
-
| **backwardBtnProps** | object | `{}`
|
|
141
|
-
| **children** | node | `null`
|
|
142
|
-
| **containerProps** | object | `{}`
|
|
143
|
-
| **delay** | number | `0`
|
|
144
|
-
| **disableNavIfAllVisible** | boolean | `true`
|
|
145
|
-
| **easing** | string | `'linear'`
|
|
146
|
-
| **forwardBtnProps** | object | `{}`
|
|
147
|
-
| **hideNavIfAllVisible** | boolean | `true`
|
|
148
|
-
| **innerProps** | object | `{}`
|
|
149
|
-
| **itemsListProps** | object | `{}`
|
|
150
|
-
| **itemsToScroll** | number | `1`
|
|
151
|
-
| **itemsToShow** | number | `0` (automaticaly calculated)
|
|
152
|
-
| **onAfterChange** | function | `null`
|
|
153
|
-
| **onRequestChange** | function |
|
|
154
|
-
| **responsiveProps** | Array of objects | `[]`
|
|
155
|
-
| **speed** | number | `0`
|
|
156
|
-
| **updateOnItemClick** | boolean | `false`
|
|
157
|
-
| **centerMode** (disabled if `infinite` prop disabled) | boolean | `false`
|
|
158
|
-
| **infinite** | boolean | `true`
|
|
159
|
-
| **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean | `true`
|
|
160
|
-
| **disableNavIfEdgeActive** | boolean | `true`
|
|
161
|
-
| **dotsNav** (experimental) | object | `{}`
|
|
162
|
-
| **persistentChangeCallbacks** | boolean | `false`
|
|
163
|
-
| **showSlidesBeforeInit** (deprecated) | boolean | `true`
|
|
164
|
-
| **visibleSlideProps** | object | `{}`
|
|
165
|
-
| **autoplayDelay** | number | `0`
|
|
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 first argument and info about visible slides (`{`<br /> ` isFirstSlideVisible: boolean;`<br />`isLastSlideVisible: boolean;`<br />`visibleSlides: { slideIndex: number; isFullyVisible: boolean }[];`<br />`}`) as second. |
|
|
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
|
+
| **showSlidesBeforeInit** (deprecated) | boolean | `true` | Show slides on very first (initial) carousel render |
|
|
164
|
+
| **visibleSlideProps** | object | `{}` | DOM props for visible slide element |
|
|
165
|
+
| **autoplayDelay** | number | `0` | after what period of time the auto-update function of the active slide will be launched |
|
|
166
|
+
| **preventScrollOnSwipe** | boolean | `false` | prevent vertical scroll on swipe |
|
|
167
|
+
| **disableSwipeByMouse** | boolean | `false` | disable swipe by mouse |
|
|
168
|
+
| **disableSwipeByTouch** | boolean | `false` | disable swipe by touch |
|
|
169
|
+
| **swipeTreshold** | number | half width of the active slide | minimum swipe distance in px (by touch or by mouse drag) for change slide |
|
|
170
|
+
| **touchSwipeTreshold** | number | half width of the active slide | minimum swipe distance in px (by touch) for change slide |
|
|
171
|
+
| **mouseSwipeTreshold** | number | half width of the active slide | minimum swipe distance in px (by mouse drag) for change slide |
|
|
172
|
+
| **swipeRatio** | number | `1` | swipe distance ratio (on swipe by touchmove or by mouse drag) |
|
|
173
|
+
| **touchSwipeTreshold** | number | | swipe distance ratio (on swipe by touchmove) |
|
|
174
|
+
| **mouseSwipeTreshold** | number | | swipe distance ratio (on swipe by mouse drag) |
|
|
166
175
|
|
|
167
176
|
## Demo
|
|
168
177
|
|
package/dist/index.d.ts
CHANGED
|
@@ -20,33 +20,42 @@ type VisibleSlidesState = {
|
|
|
20
20
|
type ReactSimplyCarouselStaticProps = {
|
|
21
21
|
activeSlideIndex: number;
|
|
22
22
|
activeSlideProps?: HTMLAttributes<any>;
|
|
23
|
-
visibleSlideProps?: HTMLAttributes<any>;
|
|
24
23
|
autoplay?: boolean;
|
|
24
|
+
autoplayDelay?: number;
|
|
25
25
|
autoplayDirection?: NavDirection;
|
|
26
26
|
backwardBtnProps?: NavBtnProps;
|
|
27
|
+
centerMode?: boolean;
|
|
27
28
|
children?: ReactNode;
|
|
28
29
|
containerProps?: HTMLAttributes<HTMLDivElement>;
|
|
29
30
|
delay?: number;
|
|
30
31
|
disableNavIfAllVisible?: boolean;
|
|
32
|
+
disableNavIfEdgeActive?: boolean;
|
|
33
|
+
disableNavIfEdgeVisible?: boolean;
|
|
34
|
+
disableSwipeByMouse?: boolean;
|
|
35
|
+
disableSwipeByTouch?: boolean;
|
|
36
|
+
dotsNav?: DotsNav;
|
|
31
37
|
easing?: string;
|
|
32
38
|
forwardBtnProps?: NavBtnProps;
|
|
33
39
|
hideNavIfAllVisible?: boolean;
|
|
40
|
+
infinite?: boolean;
|
|
34
41
|
innerProps?: HTMLAttributes<HTMLDivElement>;
|
|
35
42
|
itemsListProps?: HTMLAttributes<HTMLDivElement>;
|
|
36
43
|
itemsToScroll?: number;
|
|
37
44
|
itemsToShow?: number;
|
|
45
|
+
mouseSwipeRatio?: number;
|
|
46
|
+
mouseSwipeTreshold?: number;
|
|
38
47
|
onAfterChange?: (activeSlideIndex: number, deprecated_positionSlideIndex: number) => void;
|
|
39
48
|
onRequestChange: (newActiveSlideIndex: number, newVisibleSlidesState: VisibleSlidesState) => void;
|
|
40
|
-
speed?: number;
|
|
41
|
-
updateOnItemClick?: boolean;
|
|
42
|
-
centerMode?: boolean;
|
|
43
|
-
infinite?: boolean;
|
|
44
|
-
disableNavIfEdgeVisible?: boolean;
|
|
45
|
-
disableNavIfEdgeActive?: boolean;
|
|
46
|
-
dotsNav?: DotsNav;
|
|
47
49
|
persistentChangeCallbacks?: boolean;
|
|
50
|
+
preventScrollOnSwipe?: boolean;
|
|
48
51
|
showSlidesBeforeInit?: boolean;
|
|
49
|
-
|
|
52
|
+
speed?: number;
|
|
53
|
+
swipeRatio?: number;
|
|
54
|
+
swipeTreshold?: number;
|
|
55
|
+
touchSwipeRatio?: number;
|
|
56
|
+
touchSwipeTreshold?: number;
|
|
57
|
+
updateOnItemClick?: boolean;
|
|
58
|
+
visibleSlideProps?: HTMLAttributes<any>;
|
|
50
59
|
};
|
|
51
60
|
type ReactSimplyCarouselResponsiveProps = (Omit<Omit<ReactSimplyCarouselStaticProps, 'activeSlideIndex'>, 'onRequestChange'> & {
|
|
52
61
|
minWidth?: number;
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{memo as t,useState as n,useRef as r,Children as i,useCallback as o,useEffect as c}from"react";function a(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 d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(){return u=Object.assign?Object.assign.bind():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},u.apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function f(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){var r,i,o,c,a=[],d=!0,l=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;d=!1}else for(;!(d=(r=o.call(n)).done)&&(a.push(r.value),a.length!==t);d=!0);}catch(e){l=!0,i=e}finally{try{if(!d&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(l)throw i}}return a}}(e,t)||m(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 v(e){return function(e){if(Array.isArray(e))return h(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||m(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 m(e,t){if(e){if("string"==typeof e)return h(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)?h(e,t):void 0}}function h(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"],p=["minWidth","maxWidth"],y=["style","onClickCapture"],w=["style"],x=["style","onTouchStart","onMouseDown","onTransitionEnd"],g=["children","show"],S=["children","show"],E=["className","style"],T=["className","style"],I=["className","onClick","style"],O=["props"];function C(t){var a=t.responsiveProps,l=void 0===a?[]:a,m=s(t,b),h=f(n(0),2),C=h[0],L=h[1],j=f(n(m.activeSlideIndex),2),k=j[0],P=j[1],M=r(null),W=r(null),A=r(null),N=r(0),X=r(!1),D=r(""),F=r(null),V=r(null),z=r(0),B=r(k),q=l.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,o=void 0===i?null:i,c=s(t,p);return C>r&&(!o||C<=o)?d(d({},e),c):e}),m),H=i.toArray(q.children),R=C?d(d({},q),{},{activeSlideIndex:Math.max(0,Math.min(q.activeSlideIndex,H.length-1)),itemsToShow:Math.min(H.length,q.itemsToShow||0),itemsToScroll:Math.min(H.length,q.itemsToScroll||1)}):m,U=R.containerProps,$=void 0===U?{}:U,G=$.style,J=void 0===G?{}:G,K=$.onClickCapture,Q=void 0===K?null:K,Y=s($,y),Z=R.innerProps,_=void 0===Z?{}:Z,ee=_.style,te=void 0===ee?{}:ee,ne=s(_,w),re=R.itemsListProps,ie=void 0===re?{}:re,oe=ie.style,ce=void 0===oe?{}:oe,ae=ie.onTouchStart,de=void 0===ae?null:ae,le=ie.onMouseDown,ue=void 0===le?null:le,se=ie.onTransitionEnd,fe=void 0===se?null:se,ve=s(ie,x),me=R.backwardBtnProps,he=void 0===me?{}:me,be=he.children,pe=void 0===be?null:be,ye=he.show,we=void 0===ye||ye,xe=s(he,g),ge=R.forwardBtnProps,Se=void 0===ge?{}:ge,Ee=Se.children,Te=void 0===Ee?null:Ee,Ie=Se.show,Oe=void 0===Ie||Ie,Ce=s(Se,S),Le=R.activeSlideProps,je=void 0===Le?{}:Le,ke=je.className,Pe=void 0===ke?"":ke,Me=je.style,We=void 0===Me?{}:Me,Ae=s(je,E),Ne=R.visibleSlideProps,Xe=void 0===Ne?{}:Ne,De=Xe.className,Fe=void 0===De?"":De,Ve=Xe.style,ze=void 0===Ve?{}:Ve,Be=s(Xe,T),qe=R.updateOnItemClick,He=void 0!==qe&&qe,Re=R.activeSlideIndex,Ue=R.onRequestChange,$e=R.speed,Ge=void 0===$e?0:$e,Je=R.delay,Ke=void 0===Je?0:Je,Qe=R.easing,Ye=void 0===Qe?"linear":Qe,Ze=R.itemsToShow,_e=void 0===Ze?0:Ze,et=R.itemsToScroll,tt=void 0===et?1:et,nt=R.children,rt=R.onAfterChange,it=R.autoplay,ot=void 0!==it&&it,ct=R.autoplayDirection,at=void 0===ct?"forward":ct,dt=R.disableNavIfAllVisible,lt=void 0===dt||dt,ut=R.hideNavIfAllVisible,st=void 0===ut||ut,ft=R.centerMode,vt=void 0!==ft&&ft,mt=R.infinite,ht=void 0===mt||mt,bt=R.disableNavIfEdgeVisible,pt=void 0===bt||bt,yt=R.disableNavIfEdgeActive,wt=void 0===yt||yt,xt=R.dotsNav,gt=void 0===xt?{}:xt,St=R.persistentChangeCallbacks,Et=void 0!==St&&St,Tt=R.autoplayDelay,It=void 0===Tt?0:Tt,Ot=gt||{},Ct=Ot.show,Lt=void 0!==Ct&&Ct,jt=Ot.containerProps,kt=void 0===jt?{}:jt,Pt=Ot.itemBtnProps,Mt=void 0===Pt?{}:Pt,Wt=Ot.activeItemBtnProps,At=void 0===Wt?{}:Wt,Nt=i.count(nt)-1,Xt=_e===H.length,Dt=st&&Xt,Ft=lt&&Xt,Vt=Re-k==0||!Ge&&!Ke?"none":"transform ".concat(Ge,"ms ").concat(Ye," ").concat(Ke,"ms"),zt=o((function(e){var t,n=e.correctionSlideIndex,r=e.prevCorrectionSlideIndex,i=e.curActiveSlideIndex,o=A.current.offsetWidth,c=A.current.children,a=c.length,d=ht?v(c).slice(a/3-r,a/3-r+a/3):v(c),l=null===(t=d[i])||void 0===t?void 0:t.offsetWidth,u=_e?d.reduce((function(e,t,n){return n>=i&&n<i+_e||n<i&&n<i+_e-d.length?e+t.offsetWidth:e}),0):W.current.offsetWidth,s=o-u,f=vt&&ht?-(u-l)/2:0,m=ht?o/3:0,h=n-i==0?0:"forward"===D.current&&i<n?m:"backward"===D.current&&i>n?-m:0,b=i-n!=0,p=function(e){var t=d.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return ht?t:Math.min(s,t)},y=b&&ht?p(n):0,w=b||!ht?p(i):0,x=Ft?0:w-y+f+h+m,g="translateX(-".concat(x,"px)"),S=ht?m+f:Math.min(s,d.reduce((function(e,t,n){return n<i?e+t.offsetWidth:e}),0)),E=S+u,T=d.map((function(e,t){return{slideIndex:t,htmlElement:e}})),I=ht?[].concat(v(d.slice(i).map((function(e,t){return{slideIndex:t+i,htmlElement:e}}))),v(T),v(T),v(d.slice(0,i).map((function(e,t){return{slideIndex:t,htmlElement:e}})))):T,O=I.reduce((function(e,t){var n=t.slideIndex,r=t.htmlElement.offsetWidth;return(e.summ>=S&&e.summ<E||e.summ+r>S&&e.summ+r<=E)&&e.items.push({slideIndex:n,isFullyVisible:e.summ+r<=E&&e.summ>=S}),e.summ+=r,e}),{summ:0,items:[]}),C=!!O.items.find((function(e){return 0===e.slideIndex})),L=!!O.items.find((function(e){return e.slideIndex===d.length-1}));return{slidesHTMLElements:d,innerMaxWidth:u,itemsListMaxTranslateX:s,activeSlideWidth:l,offsetCorrectionForCenterMode:f,offsetCorrectionForInfiniteMode:m,itemsListTranslateX:x,itemsListTransform:g,visibleSlides:O.items,isFirstSlideVisible:C,isLastSlideVisible:L}}),[vt,Ft,ht,_e]),Bt=C?zt({prevCorrectionSlideIndex:B.current,curActiveSlideIndex:Re,correctionSlideIndex:k}):{},qt=Bt.innerMaxWidth,Ht=void 0===qt?0:qt,Rt=Bt.itemsListMaxTranslateX,Ut=void 0===Rt?0:Rt,$t=Bt.activeSlideWidth,Gt=void 0===$t?0:$t,Jt=Bt.offsetCorrectionForCenterMode,Kt=void 0===Jt?0:Jt,Qt=Bt.offsetCorrectionForInfiniteMode,Yt=void 0===Qt?0:Qt,Zt=Bt.itemsListTranslateX,_t=void 0===Zt?0:Zt,en=Bt.itemsListTransform,tn=void 0===en?"none":en,nn=Bt.visibleSlides,rn=void 0===nn?[]:nn,on=o((function(e){if("forward"===e){var t=Re+tt;return t>Nt?ht?t-Nt-1:Nt:t}if("backward"===e){var n=Re-tt;return n<0?ht?Nt+1+n:0:n}return Re}),[Re,tt,Nt,ht]),cn=o((function(e,t){if(D.current=t,A.current.style.transition=Ge||Ke?"transform ".concat(Ge,"ms ").concat(Ye," ").concat(Ke,"ms"):"none",e!==Re||Et){clearTimeout(F.current);var n=zt({correctionSlideIndex:k,prevCorrectionSlideIndex:k,curActiveSlideIndex:e}),r=n.visibleSlides,i=n.isFirstSlideVisible,o=n.isLastSlideVisible;Ue(e,{visibleSlides:r,isFirstSlideVisible:i,isLastSlideVisible:o})}else N.current=0,A.current.style.transform="translateX(-".concat(Kt+Yt+(ht?0:_t),"px)")}),[Et,Re,Kt,Ke,Ye,Ge,Ue,Yt,ht,_t,k,zt]),an=o((function(){ot&&(clearTimeout(F.current),F.current=setTimeout((function(){cn(on(at),at)}),It||Ke))}),[ot,at,It,cn,on,Ke]),dn=o((function(e){X.current&&(e.preventDefault(),e.stopPropagation(),Q&&Q(e))}),[Q]),ln=o((function(){cn(on("backward"),"backward")}),[cn,on]),un=o((function(e){X.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=N.current-t+Kt+Yt+(ht?0:_t),r=A.current.offsetWidth-W.current.offsetWidth,i=Math.max(Math.min(0,-n),-r);A.current.style.transition="none",A.current.style.transform="translateX(".concat(i,"px)")}),[Kt,Yt,ht,_t]),sn=o((function(e){if(A.current.removeEventListener("mouseout",sn),A.current.removeEventListener("dragstart",sn),document.removeEventListener("mousemove",un),document.removeEventListener("mouseup",sn),document.removeEventListener("touchmove",un),document.removeEventListener("touchend",sn),X.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=N.current-t,r=n>Gt/2?{index:on("forward"),direction:"forward"}:n<-Gt/2?{index:on("backward"),direction:"backward"}:{index:Re,direction:"forward"};r.index===Re&&(X.current=!1),cn(r.index,r.direction)}}),[Re,Gt,cn,on,un]),fn=o((function(e){clearTimeout(F.current),X.current||(N.current=e.clientX,document.addEventListener("mousemove",un),document.addEventListener("mouseup",sn),A.current.addEventListener("mouseout",sn),A.current.addEventListener("dragstart",sn)),ue&&ue(e)}),[un,sn,ue]),vn=o((function(e){clearTimeout(F.current),X.current||(N.current=e.touches[0].clientX,document.addEventListener("touchmove",un),document.addEventListener("touchend",sn)),de&&de(e)}),[un,sn,de]),mn=o((function(e){P(Re),fe&&fe(e)}),[Re,fe]),hn=o((function(){cn(on("forward"),"forward")}),[cn,on]),bn=function(e,t,n){return e.map((function(e,r){var i=e.props,o=void 0===i?{}:i,c=o.className,a=void 0===c?"":c,l=o.onClick,u=void 0===l?null:l,f=o.style,v=void 0===f?{}:f,m=s(o,I),h=s(e,O),b=ht?z.current>=H.length?"forward":"backward":r>=Re?"forward":"backward",p=r+t===Re,y=rn.find((function(e){return e.slideIndex===r+t})),w="".concat(a," ").concat(b," ").concat(p?Pe:""," ").concat(y?Fe:""),x=d(d(d(d({},v),y?ze:{}),p?We:{}),{},{boxSizing:"border-box",margin:0}),g=!n&&He?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){cn(n,t||(Re<n?"forward":"")||(Re>n?"backward":"")),r&&r(e)}}({direction:b,index:r+t,onClick:u}):u,S=d(d(d({role:"tabpanel",className:w,style:x,onClick:g},m),y?Be:{}),p?Ae:{});return z.current+=1,d({props:S},h)}))};return c((function(){return N.current=0,k===Re&&(X.current=!1),D.current="",Re!==k?Ge||Ke||P(Re):(rt&&rt(Re,k),(ht||"forward"===at&&Re!==Nt||"backward"===at&&0!==Re)&&an()),function(){clearTimeout(F.current)}}),[k,Re,rt,Ge,Ke,an,ht,Nt,at]),c((function(){return C&&an(),function(){clearTimeout(F.current)}}),[C]),c((function(){var e=A.current;function t(){clearTimeout(V.current),clearTimeout(F.current),V.current=setTimeout((function(){C!==window.innerWidth&&L(window.innerWidth)}),400)}return C!==window.innerWidth&&L(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(V.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",un),document.removeEventListener("mouseup",sn),document.removeEventListener("touchmove",un),document.removeEventListener("touchend",sn),e.removeEventListener("mouseout",sn),e.removeEventListener("dragstart",sn)}}),[un,sn]),z.current=0,B.current=k,e.createElement("div",u({onClickCapture:dn,style:d({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},J)},Y,{ref:M}),we&&!Dt&&e.createElement("button",u({},xe,{type:"button",onClick:(0===_t&&pt||0===Re&&wt)&&!ht?void 0:ln,disabled:"boolean"==typeof xe.disabled?xe.disabled:!(!(0===_t&&pt||0===Re&&wt)||ht)}),pe),e.createElement("div",u({},ne,{style:d(d({},te),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:Ht?"".concat(Ht,"px"):void 0,flex:Ht?void 0:"1 0"}),ref:W}),e.createElement("div",u({},ve,{style:d(d({},ce),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:Vt,transform:tn}),onTouchStart:Ft?void 0:vn,onMouseDown:Ft?void 0:fn,onTransitionEnd:Ge||Ke?mn:void 0,tabIndex:-1,role:"presentation",ref:A}),ht&&bn(H.slice(k),k,Ft),bn(H,0,Ft),ht&&bn(H,0,Ft),ht&&bn(H.slice(0,k),0,Ft))),Oe&&!Dt&&e.createElement("button",u({},Ce,{type:"button",onClick:(_t===Ut&&pt||Re===Nt&&wt)&&!ht?void 0:hn,disabled:"boolean"==typeof Ce.disabled?Ce.disabled:!(!(_t===Ut&&pt||Re===Nt&&wt)||ht)}),Te),!!Lt&&e.createElement("div",u({style:{width:"100%",display:"flex",justifyContent:"center"}},kt),Array.from({length:Math.ceil(H.length/tt)}).map((function(t,n){return e.createElement("button",u({type:"button",key:n,title:"".concat(n)},Mt,Re>=n*tt&&Re<Math.min(tt*(n+1),Nt+1)?At:{},{onClick:function(){cn(Math.min(n*tt,H.length-1),Math.min(n*tt,H.length-1)>Re?"forward":"backward")}}))}))))}var L=t(C);export{L as default};
|
|
1
|
+
import e,{memo as t,useState as n,useRef as i,Children as r,useCallback as o,useEffect as d}from"react";function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},s.apply(this,arguments)}function l(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}var a=["responsiveProps"],c=["minWidth","maxWidth"],u=["style"],v=["style"],m=["style","onTransitionEnd"],f=["children","show"],h=["children","show"],p=["className","style"],b=["className","style"],w=["className","onClick","style"],x=["props"];function y(t){var y=t.responsiveProps,g=void 0===y?[]:y,S=l(t,a),E=n(0),L=E[0],T=E[1],I=n(S.activeSlideIndex),k=I[0],C=I[1],M=i(null),W=i(null),O=i(null),j=i(!1),P=i(0),X=i(!1),N=i(""),A=i(null),F=i(null),V=i(0),z=i(k),B=g.reduce((function(e,t){var n=void 0===t?{}:t,i=n.minWidth,r=void 0===i?0:i,o=n.maxWidth,d=void 0===o?null:o,s=l(n,c);return L>r&&(!d||L<=d)?Object.assign({},e,s):e}),S),R=r.toArray(B.children),D=L?Object.assign({},B,{activeSlideIndex:Math.max(0,Math.min(B.activeSlideIndex,R.length-1)),itemsToShow:Math.min(R.length,B.itemsToShow||0),itemsToScroll:Math.min(R.length,B.itemsToScroll||1)}):S,q=D.containerProps,H=void 0===q?{}:q,G=H.style,J=void 0===G?{}:G,K=l(H,u),Q=D.innerProps,U=void 0===Q?{}:Q,Y=U.style,Z=void 0===Y?{}:Y,$=l(U,v),_=D.itemsListProps,ee=void 0===_?{}:_,te=ee.style,ne=void 0===te?{}:te,ie=ee.onTransitionEnd,re=void 0===ie?void 0:ie,oe=l(ee,m),de=D.backwardBtnProps,se=void 0===de?{}:de,le=se.children,ae=void 0===le?null:le,ce=se.show,ue=void 0===ce||ce,ve=l(se,f),me=D.forwardBtnProps,fe=void 0===me?{}:me,he=fe.children,pe=void 0===he?null:he,be=fe.show,we=void 0===be||be,xe=l(fe,h),ye=D.activeSlideProps,ge=void 0===ye?{}:ye,Se=ge.className,Ee=void 0===Se?"":Se,Le=ge.style,Te=void 0===Le?{}:Le,Ie=l(ge,p),ke=D.visibleSlideProps,Ce=void 0===ke?{}:ke,Me=Ce.className,We=void 0===Me?"":Me,Oe=Ce.style,je=void 0===Oe?{}:Oe,Pe=l(Ce,b),Xe=D.updateOnItemClick,Ne=void 0!==Xe&&Xe,Ae=D.activeSlideIndex,Fe=D.onRequestChange,Ve=D.speed,ze=void 0===Ve?0:Ve,Be=D.delay,Re=void 0===Be?0:Be,De=D.easing,qe=void 0===De?"linear":De,He=D.itemsToShow,Ge=void 0===He?0:He,Je=D.itemsToScroll,Ke=void 0===Je?1:Je,Qe=D.children,Ue=D.onAfterChange,Ye=D.autoplay,Ze=void 0!==Ye&&Ye,$e=D.autoplayDirection,_e=void 0===$e?"forward":$e,et=D.disableNavIfAllVisible,tt=void 0===et||et,nt=D.hideNavIfAllVisible,it=void 0===nt||nt,rt=D.centerMode,ot=void 0!==rt&&rt,dt=D.infinite,st=void 0===dt||dt,lt=D.disableNavIfEdgeVisible,at=void 0===lt||lt,ct=D.disableNavIfEdgeActive,ut=void 0===ct||ct,vt=D.dotsNav,mt=void 0===vt?{}:vt,ft=D.persistentChangeCallbacks,ht=void 0!==ft&&ft,pt=D.autoplayDelay,bt=void 0===pt?0:pt,wt=D.preventScrollOnSwipe,xt=void 0!==wt&&wt,yt=D.disableSwipeByMouse,gt=void 0!==yt&&yt,St=D.disableSwipeByTouch,Et=void 0!==St&&St,Lt=D.touchSwipeTreshold,Tt=D.mouseSwipeTreshold,It=D.swipeTreshold,kt=D.touchSwipeRatio,Ct=D.mouseSwipeRatio,Mt=D.swipeRatio,Wt=void 0===Mt?1:Mt,Ot=mt||{},jt=Ot.show,Pt=void 0!==jt&&jt,Xt=Ot.containerProps,Nt=void 0===Xt?{}:Xt,At=Ot.itemBtnProps,Ft=void 0===At?{}:At,Vt=Ot.activeItemBtnProps,zt=void 0===Vt?{}:Vt,Bt=r.count(Qe)-1,Rt=Ge===R.length,Dt=it&&Rt,qt=tt&&Rt,Ht=Ae-k==0||!ze&&!Re?"none":"transform "+ze+"ms "+qe+" "+Re+"ms",Gt=o((function(e){var t,n=e.correctionSlideIndex,i=e.prevCorrectionSlideIndex,r=e.curActiveSlideIndex,o=O.current.offsetWidth,d=O.current.children,s=d.length,l=st?[].concat(d).slice(s/3-i,s/3-i+s/3):[].concat(d),a=null==(t=l[r])?void 0:t.offsetWidth,c=Ge?l.reduce((function(e,t,n){return n>=r&&n<r+Ge||n<r&&n<r+Ge-l.length?e+t.offsetWidth:e}),0):W.current.offsetWidth,u=Math.min(c,W.current.offsetWidth),v=o-u,m=ot&&st?-(u-a)/2:0,f=st?o/3:0,h=n-r==0?0:"forward"===N.current&&r<n?f:"backward"===N.current&&r>n?-f:0,p=r-n!=0,b=function(e){var t=l.reduce((function(t,n,i){return i>=e?t:t+(n.offsetWidth||0)}),0);return st?t:Math.min(v,t)},w=p&&st?b(n):0,x=p||!st?b(r):0,y=qt?0:x-w+m+h+f,g="translateX(-"+y+"px)",S=st?f+m:Math.min(v,l.reduce((function(e,t,n){return n<r?e+t.offsetWidth:e}),0)),E=S+u,L=l.map((function(e,t){return{slideIndex:t,htmlElement:e}})),T=st?[].concat(l.slice(r).map((function(e,t){return{slideIndex:t+r,htmlElement:e}})),L,L,l.slice(0,r).map((function(e,t){return{slideIndex:t,htmlElement:e}}))):L,I=T.reduce((function(e,t){var n=t.slideIndex,i=t.htmlElement.offsetWidth;return(e.summ>=S&&e.summ<E||e.summ+i>S&&e.summ+i<=E)&&e.items.push({slideIndex:n,isFullyVisible:e.summ+i<=E&&e.summ>=S}),e.summ+=i,e}),{summ:0,items:[]}),k=!!I.items.find((function(e){return 0===e.slideIndex})),C=!!I.items.find((function(e){return e.slideIndex===l.length-1}));return{slidesHTMLElements:l,innerMaxWidth:c,itemsListMaxTranslateX:v,activeSlideWidth:a,offsetCorrectionForCenterMode:m,offsetCorrectionForInfiniteMode:f,itemsListTranslateX:y,itemsListTransform:g,visibleSlides:I.items,isFirstSlideVisible:k,isLastSlideVisible:C}}),[ot,qt,st,Ge]),Jt=L?Gt({prevCorrectionSlideIndex:z.current,curActiveSlideIndex:Ae,correctionSlideIndex:k}):{},Kt=Jt.innerMaxWidth,Qt=void 0===Kt?0:Kt,Ut=Jt.itemsListMaxTranslateX,Yt=void 0===Ut?0:Ut,Zt=Jt.activeSlideWidth,$t=void 0===Zt?0:Zt,_t=Jt.offsetCorrectionForCenterMode,en=void 0===_t?0:_t,tn=Jt.offsetCorrectionForInfiniteMode,nn=void 0===tn?0:tn,rn=Jt.itemsListTranslateX,on=void 0===rn?0:rn,dn=Jt.itemsListTransform,sn=void 0===dn?"none":dn,ln=Jt.visibleSlides,an=void 0===ln?[]:ln,cn=o((function(e){if("forward"===e){var t=Ae+Ke;return t>Bt?st?t-Bt-1:Bt:t}if("backward"===e){var n=Ae-Ke;return n<0?st?Bt+1+n:0:n}return Ae}),[Ae,Ke,Bt,st]),un=o((function(e,t){if(N.current=t,O.current.style.transition=ze||Re?"transform "+ze+"ms "+qe+" "+Re+"ms":"none",e!==Ae||ht){var n;clearTimeout(A.current);var i=Gt({correctionSlideIndex:k,prevCorrectionSlideIndex:k,curActiveSlideIndex:e}),r=i.visibleSlides,o=i.isFirstSlideVisible,d=i.isLastSlideVisible,s=i.itemsListTransform;e!==Ae&&(null==(n=O.current)?void 0:n.style.transform)===s&&(j.current=!0),O.current.style.transform=s,Fe(e,{visibleSlides:r,isFirstSlideVisible:o,isLastSlideVisible:d})}else O.current.style.transform="translateX(-"+(en+nn+(st?0:on))+"px)"}),[ht,Ae,en,Re,qe,ze,Fe,nn,st,on,k,Gt]),vn=o((function(){Ze&&(clearTimeout(A.current),A.current=setTimeout((function(){un(cn(_e),_e)}),bt||Re))}),[Ze,_e,bt,un,cn,Re]),mn=o((function(){un(cn("backward"),"backward")}),[un,cn]),fn=o((function(e){C(Ae),re&&re(e)}),[Ae,re]),hn=o((function(){un(cn("forward"),"forward")}),[un,cn]),pn=function(e,t,n){return e.map((function(e,i){var r=e.props,o=void 0===r?{}:r,d=o.className,s=void 0===d?"":d,a=o.onClick,c=void 0===a?null:a,u=o.style,v=void 0===u?{}:u,m=l(o,w),f=l(e,x),h=st?V.current>=R.length?"forward":"backward":i>=Ae?"forward":"backward",p=i+t===Ae,b=an.find((function(e){return e.slideIndex===i+t})),y=(s+" "+(p?Ee:"")+" "+(b?We:"")).trim()||void 0,g=Object.assign({},v,b?je:{},p?Te:{},{boxSizing:"border-box",margin:0}),S=!n&&Ne?function(e){var t=e.direction,n=e.index,i=e.onClick;return function(e){un(n,t||(Ae<n?"forward":"")||(Ae>n?"backward":"")),i&&i(e)}}({direction:h,index:i+t,onClick:c}):c,E=Object.assign({role:"tabpanel",className:y,style:g,onClick:S},m,b?Pe:{},p?Ie:{});return V.current+=1,Object.assign({props:E},f)}))};return d((function(){var e=O.current;function t(e){e.preventDefault(),e.stopPropagation()}function n(e){var t,n;X.current=!0;var i=!(null==(t=e.touches)||!t[0]),r=i?null==(n=e.touches)?void 0:n[0].clientX:e.clientX,o=(P.current-r)*((i?kt:Ct)||Wt)+en+nn+(st?0:on),d=O.current.offsetWidth,s=Math.max(-o,-d);O.current.style.transition="none",O.current.style.transform="translateX("+s+"px)"}function i(e){if(document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",i),X.current){var r,o;null==(r=e.target)||r.addEventListener("click",t);var d=!(null==(o=e.changedTouches)||!o[0]),s=d?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,l=(P.current-s)*((d?kt:Ct)||Wt),a=(d?Lt:Tt)||It||$t/2,c=l>a?{index:cn("forward"),direction:"forward"}:l<-a?{index:cn("backward"),direction:"backward"}:{index:Ae,direction:"forward"};un(c.index,c.direction)}else{var u;null==(u=e.target)||u.removeEventListener("click",t)}P.current=0,X.current=!1}function r(e){var t,r;clearTimeout(A.current);var o=!(null==(t=e.touches)||!t[0]);P.current=o?null==(r=e.touches)?void 0:r[0].clientX:e.clientX,o?(document.addEventListener("touchmove",n),document.addEventListener("touchend",i)):(document.addEventListener("mousemove",n),document.addEventListener("mouseup",i))}return qt||(gt||null==e||e.addEventListener("mousedown",r),Et||null==e||e.addEventListener("touchstart",r,{passive:!0}),gt&&Et||null==e||e.addEventListener("dragstart",i)),function(){X.current=!1,P.current=0,null==e||e.removeEventListener("mousedown",r),null==e||e.removeEventListener("touchstart",r),null==e||e.removeEventListener("dragstart",i),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",i)}}),[st,on,sn,en,nn,Ae,$t,cn,un,qt,gt,Et,Lt,Tt,It,kt,Ct,Wt]),d((function(){return Ae!==k?(!ze&&!Re||j.current)&&(j.current=!1,C(Ae)):(Ue&&Ue(Ae,k),(st||"forward"===_e&&Ae!==Bt||"backward"===_e&&0!==Ae)&&vn()),function(){clearTimeout(A.current)}}),[k,Ae,Ue,ze,Re,vn,st,Bt,_e]),d((function(){return L&&vn(),function(){clearTimeout(A.current)}}),[L]),d((function(){function e(){clearTimeout(F.current),clearTimeout(A.current),F.current=setTimeout((function(){L!==window.innerWidth&&T(window.innerWidth)}),400)}return L!==window.innerWidth&&T(window.innerWidth),window.addEventListener("resize",e),function(){clearTimeout(F.current),window.removeEventListener("resize",e)}}),[L]),V.current=0,z.current=k,e.createElement("div",s({style:Object.assign({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},J)},K,{ref:M}),ue&&!Dt&&e.createElement("button",s({},ve,{type:"button",onClick:(0===on&&at||0===Ae&&ut)&&!st?void 0:mn,disabled:"boolean"==typeof ve.disabled?ve.disabled:!(!(0===on&&at||0===Ae&&ut)||st)}),ae),e.createElement("div",s({},$,{style:Object.assign({width:"100%"},Z,{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:Qt?Qt+"px":void 0,flex:Qt?void 0:"1 0"}),ref:W}),e.createElement("div",s({},oe,{style:Object.assign({},ne,{display:"flex",boxSizing:"border-box",outline:"none",transition:Ht,transform:sn,touchAction:xt?"none":"auto"}),"data-transform":sn,onTransitionEnd:ze||Re?fn:re,tabIndex:-1,role:"presentation",ref:O}),st&&pn(R.slice(k),k,qt),pn(R,0,qt),st&&pn(R,0,qt),st&&pn(R.slice(0,k),0,qt))),we&&!Dt&&e.createElement("button",s({},xe,{type:"button",onClick:(on===Yt&&at||Ae===Bt&&ut)&&!st?void 0:hn,disabled:"boolean"==typeof xe.disabled?xe.disabled:!(!(on===Yt&&at||Ae===Bt&&ut)||st)}),pe),!!Pt&&e.createElement("div",s({style:{width:"100%",display:"flex",justifyContent:"center"}},Nt),Array.from({length:Math.ceil(R.length/Ke)}).map((function(t,n){return e.createElement("button",s({type:"button",key:n,title:""+n},Ft,Ae>=n*Ke&&Ae<Math.min(Ke*(n+1),Bt+1)?zt:{},{onClick:function(){un(Math.min(n*Ke,R.length-1),Math.min(n*Ke,R.length-1)>Ae?"forward":"backward")}}))}))))}var g=t(y);export{g as default};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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,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 n(e){for(var n=1;n<arguments.length;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?t(Object(i),!0).forEach((function(t){r(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):t(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function r(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign?Object.assign.bind():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},i.apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}function c(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){var r,i,o,c,l=[],a=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);a=!0);}catch(e){u=!0,i=e}finally{try{if(!a&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(u)throw i}}return l}}(e,t)||a(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 u(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||a(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 a(e,t){if(e){if("string"==typeof e)return u(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)?u(e,t):void 0}}function u(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 s=["responsiveProps"],d=["minWidth","maxWidth"],f=["style","onClickCapture"],v=["style"],m=["style","onTouchStart","onMouseDown","onTransitionEnd"],b=["children","show"],h=["children","show"],p=["className","style"],y=["className","style"],w=["className","onClick","style"],g=["props"];function x(t){var r=t.responsiveProps,a=void 0===r?[]:r,u=o(t,s),x=c(e.useState(0),2),S=x[0],C=x[1],E=c(e.useState(u.activeSlideIndex),2),k=E[0],T=E[1],I=e.useRef(null),O=e.useRef(null),L=e.useRef(null),j=e.useRef(0),P=e.useRef(!1),M=e.useRef(""),W=e.useRef(null),A=e.useRef(null),N=e.useRef(0),R=e.useRef(k),X=a.reduce((function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.minWidth,i=void 0===r?0:r,c=t.maxWidth,l=void 0===c?null:c,a=o(t,d);return S>i&&(!l||S<=l)?n(n({},e),a):e}),u),D=e.Children.toArray(X.children),F=S?n(n({},X),{},{activeSlideIndex:Math.max(0,Math.min(X.activeSlideIndex,D.length-1)),itemsToShow:Math.min(D.length,X.itemsToShow||0),itemsToScroll:Math.min(D.length,X.itemsToScroll||1)}):u,V=F.containerProps,z=void 0===V?{}:V,B=z.style,q=void 0===B?{}:B,H=z.onClickCapture,U=void 0===H?null:H,$=o(z,f),G=F.innerProps,J=void 0===G?{}:G,K=J.style,Q=void 0===K?{}:K,Y=o(J,v),Z=F.itemsListProps,_=void 0===Z?{}:Z,ee=_.style,te=void 0===ee?{}:ee,ne=_.onTouchStart,re=void 0===ne?null:ne,ie=_.onMouseDown,oe=void 0===ie?null:ie,ce=_.onTransitionEnd,le=void 0===ce?null:ce,ae=o(_,m),ue=F.backwardBtnProps,se=void 0===ue?{}:ue,de=se.children,fe=void 0===de?null:de,ve=se.show,me=void 0===ve||ve,be=o(se,b),he=F.forwardBtnProps,pe=void 0===he?{}:he,ye=pe.children,we=void 0===ye?null:ye,ge=pe.show,xe=void 0===ge||ge,Se=o(pe,h),Ce=F.activeSlideProps,Ee=void 0===Ce?{}:Ce,ke=Ee.className,Te=void 0===ke?"":ke,Ie=Ee.style,Oe=void 0===Ie?{}:Ie,Le=o(Ee,p),je=F.visibleSlideProps,Pe=void 0===je?{}:je,Me=Pe.className,We=void 0===Me?"":Me,Ae=Pe.style,Ne=void 0===Ae?{}:Ae,Re=o(Pe,y),Xe=F.updateOnItemClick,De=void 0!==Xe&&Xe,Fe=F.activeSlideIndex,Ve=F.onRequestChange,ze=F.speed,Be=void 0===ze?0:ze,qe=F.delay,He=void 0===qe?0:qe,Ue=F.easing,$e=void 0===Ue?"linear":Ue,Ge=F.itemsToShow,Je=void 0===Ge?0:Ge,Ke=F.itemsToScroll,Qe=void 0===Ke?1:Ke,Ye=F.children,Ze=F.onAfterChange,_e=F.autoplay,et=void 0!==_e&&_e,tt=F.autoplayDirection,nt=void 0===tt?"forward":tt,rt=F.disableNavIfAllVisible,it=void 0===rt||rt,ot=F.hideNavIfAllVisible,ct=void 0===ot||ot,lt=F.centerMode,at=void 0!==lt&<,ut=F.infinite,st=void 0===ut||ut,dt=F.disableNavIfEdgeVisible,ft=void 0===dt||dt,vt=F.disableNavIfEdgeActive,mt=void 0===vt||vt,bt=F.dotsNav,ht=void 0===bt?{}:bt,pt=F.persistentChangeCallbacks,yt=void 0!==pt&&pt,wt=F.autoplayDelay,gt=void 0===wt?0:wt,xt=ht||{},St=xt.show,Ct=void 0!==St&&St,Et=xt.containerProps,kt=void 0===Et?{}:Et,Tt=xt.itemBtnProps,It=void 0===Tt?{}:Tt,Ot=xt.activeItemBtnProps,Lt=void 0===Ot?{}:Ot,jt=e.Children.count(Ye)-1,Pt=Je===D.length,Mt=ct&&Pt,Wt=it&&Pt,At=Fe-k==0||!Be&&!He?"none":"transform ".concat(Be,"ms ").concat($e," ").concat(He,"ms"),Nt=e.useCallback((function(e){var t,n=e.correctionSlideIndex,r=e.prevCorrectionSlideIndex,i=e.curActiveSlideIndex,o=L.current.offsetWidth,c=L.current.children,a=c.length,u=st?l(c).slice(a/3-r,a/3-r+a/3):l(c),s=null===(t=u[i])||void 0===t?void 0:t.offsetWidth,d=Je?u.reduce((function(e,t,n){return n>=i&&n<i+Je||n<i&&n<i+Je-u.length?e+t.offsetWidth:e}),0):O.current.offsetWidth,f=o-d,v=at&&st?-(d-s)/2:0,m=st?o/3:0,b=n-i==0?0:"forward"===M.current&&i<n?m:"backward"===M.current&&i>n?-m:0,h=i-n!=0,p=function(e){var t=u.reduce((function(t,n,r){return r>=e?t:t+(n.offsetWidth||0)}),0);return st?t:Math.min(f,t)},y=h&&st?p(n):0,w=h||!st?p(i):0,g=Wt?0:w-y+v+b+m,x="translateX(-".concat(g,"px)"),S=st?m+v:Math.min(f,u.reduce((function(e,t,n){return n<i?e+t.offsetWidth:e}),0)),C=S+d,E=u.map((function(e,t){return{slideIndex:t,htmlElement:e}})),k=st?[].concat(l(u.slice(i).map((function(e,t){return{slideIndex:t+i,htmlElement:e}}))),l(E),l(E),l(u.slice(0,i).map((function(e,t){return{slideIndex:t,htmlElement:e}})))):E,T=k.reduce((function(e,t){var n=t.slideIndex,r=t.htmlElement.offsetWidth;return(e.summ>=S&&e.summ<C||e.summ+r>S&&e.summ+r<=C)&&e.items.push({slideIndex:n,isFullyVisible:e.summ+r<=C&&e.summ>=S}),e.summ+=r,e}),{summ:0,items:[]}),I=!!T.items.find((function(e){return 0===e.slideIndex})),j=!!T.items.find((function(e){return e.slideIndex===u.length-1}));return{slidesHTMLElements:u,innerMaxWidth:d,itemsListMaxTranslateX:f,activeSlideWidth:s,offsetCorrectionForCenterMode:v,offsetCorrectionForInfiniteMode:m,itemsListTranslateX:g,itemsListTransform:x,visibleSlides:T.items,isFirstSlideVisible:I,isLastSlideVisible:j}}),[at,Wt,st,Je]),Rt=S?Nt({prevCorrectionSlideIndex:R.current,curActiveSlideIndex:Fe,correctionSlideIndex:k}):{},Xt=Rt.innerMaxWidth,Dt=void 0===Xt?0:Xt,Ft=Rt.itemsListMaxTranslateX,Vt=void 0===Ft?0:Ft,zt=Rt.activeSlideWidth,Bt=void 0===zt?0:zt,qt=Rt.offsetCorrectionForCenterMode,Ht=void 0===qt?0:qt,Ut=Rt.offsetCorrectionForInfiniteMode,$t=void 0===Ut?0:Ut,Gt=Rt.itemsListTranslateX,Jt=void 0===Gt?0:Gt,Kt=Rt.itemsListTransform,Qt=void 0===Kt?"none":Kt,Yt=Rt.visibleSlides,Zt=void 0===Yt?[]:Yt,_t=e.useCallback((function(e){if("forward"===e){var t=Fe+Qe;return t>jt?st?t-jt-1:jt:t}if("backward"===e){var n=Fe-Qe;return n<0?st?jt+1+n:0:n}return Fe}),[Fe,Qe,jt,st]),en=e.useCallback((function(e,t){if(M.current=t,L.current.style.transition=Be||He?"transform ".concat(Be,"ms ").concat($e," ").concat(He,"ms"):"none",e!==Fe||yt){clearTimeout(W.current);var n=Nt({correctionSlideIndex:k,prevCorrectionSlideIndex:k,curActiveSlideIndex:e}),r=n.visibleSlides,i=n.isFirstSlideVisible,o=n.isLastSlideVisible;Ve(e,{visibleSlides:r,isFirstSlideVisible:i,isLastSlideVisible:o})}else j.current=0,L.current.style.transform="translateX(-".concat(Ht+$t+(st?0:Jt),"px)")}),[yt,Fe,Ht,He,$e,Be,Ve,$t,st,Jt,k,Nt]),tn=e.useCallback((function(){et&&(clearTimeout(W.current),W.current=setTimeout((function(){en(_t(nt),nt)}),gt||He))}),[et,nt,gt,en,_t,He]),nn=e.useCallback((function(e){P.current&&(e.preventDefault(),e.stopPropagation(),U&&U(e))}),[U]),rn=e.useCallback((function(){en(_t("backward"),"backward")}),[en,_t]),on=e.useCallback((function(e){P.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,n=j.current-t+Ht+$t+(st?0:Jt),r=L.current.offsetWidth-O.current.offsetWidth,i=Math.max(Math.min(0,-n),-r);L.current.style.transition="none",L.current.style.transform="translateX(".concat(i,"px)")}),[Ht,$t,st,Jt]),cn=e.useCallback((function(e){if(L.current.removeEventListener("mouseout",cn),L.current.removeEventListener("dragstart",cn),document.removeEventListener("mousemove",on),document.removeEventListener("mouseup",cn),document.removeEventListener("touchmove",on),document.removeEventListener("touchend",cn),P.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,n=j.current-t,r=n>Bt/2?{index:_t("forward"),direction:"forward"}:n<-Bt/2?{index:_t("backward"),direction:"backward"}:{index:Fe,direction:"forward"};r.index===Fe&&(P.current=!1),en(r.index,r.direction)}}),[Fe,Bt,en,_t,on]),ln=e.useCallback((function(e){clearTimeout(W.current),P.current||(j.current=e.clientX,document.addEventListener("mousemove",on),document.addEventListener("mouseup",cn),L.current.addEventListener("mouseout",cn),L.current.addEventListener("dragstart",cn)),oe&&oe(e)}),[on,cn,oe]),an=e.useCallback((function(e){clearTimeout(W.current),P.current||(j.current=e.touches[0].clientX,document.addEventListener("touchmove",on),document.addEventListener("touchend",cn)),re&&re(e)}),[on,cn,re]),un=e.useCallback((function(e){T(Fe),le&&le(e)}),[Fe,le]),sn=e.useCallback((function(){en(_t("forward"),"forward")}),[en,_t]),dn=function(e,t,r){return e.map((function(e,i){var c=e.props,l=void 0===c?{}:c,a=l.className,u=void 0===a?"":a,s=l.onClick,d=void 0===s?null:s,f=l.style,v=void 0===f?{}:f,m=o(l,w),b=o(e,g),h=st?N.current>=D.length?"forward":"backward":i>=Fe?"forward":"backward",p=i+t===Fe,y=Zt.find((function(e){return e.slideIndex===i+t})),x="".concat(u," ").concat(h," ").concat(p?Te:""," ").concat(y?We:""),S=n(n(n(n({},v),y?Ne:{}),p?Oe:{}),{},{boxSizing:"border-box",margin:0}),C=!r&&De?function(e){var t=e.direction,n=e.index,r=e.onClick;return function(e){en(n,t||(Fe<n?"forward":"")||(Fe>n?"backward":"")),r&&r(e)}}({direction:h,index:i+t,onClick:d}):d,E=n(n(n({role:"tabpanel",className:x,style:S,onClick:C},m),y?Re:{}),p?Le:{});return N.current+=1,n({props:E},b)}))};return e.useEffect((function(){return j.current=0,k===Fe&&(P.current=!1),M.current="",Fe!==k?Be||He||T(Fe):(Ze&&Ze(Fe,k),(st||"forward"===nt&&Fe!==jt||"backward"===nt&&0!==Fe)&&tn()),function(){clearTimeout(W.current)}}),[k,Fe,Ze,Be,He,tn,st,jt,nt]),e.useEffect((function(){return S&&tn(),function(){clearTimeout(W.current)}}),[S]),e.useEffect((function(){var e=L.current;function t(){clearTimeout(A.current),clearTimeout(W.current),A.current=setTimeout((function(){S!==window.innerWidth&&C(window.innerWidth)}),400)}return S!==window.innerWidth&&C(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(A.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",on),document.removeEventListener("mouseup",cn),document.removeEventListener("touchmove",on),document.removeEventListener("touchend",cn),e.removeEventListener("mouseout",cn),e.removeEventListener("dragstart",cn)}}),[on,cn]),N.current=0,R.current=k,e.createElement("div",i({onClickCapture:nn,style:n({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},q)},$,{ref:I}),me&&!Mt&&e.createElement("button",i({},be,{type:"button",onClick:(0===Jt&&ft||0===Fe&&mt)&&!st?void 0:rn,disabled:"boolean"==typeof be.disabled?be.disabled:!(!(0===Jt&&ft||0===Fe&&mt)||st)}),fe),e.createElement("div",i({},Y,{style:n(n({},Q),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:Dt?"".concat(Dt,"px"):void 0,flex:Dt?void 0:"1 0"}),ref:O}),e.createElement("div",i({},ae,{style:n(n({},te),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:At,transform:Qt}),onTouchStart:Wt?void 0:an,onMouseDown:Wt?void 0:ln,onTransitionEnd:Be||He?un:void 0,tabIndex:-1,role:"presentation",ref:L}),st&&dn(D.slice(k),k,Wt),dn(D,0,Wt),st&&dn(D,0,Wt),st&&dn(D.slice(0,k),0,Wt))),xe&&!Mt&&e.createElement("button",i({},Se,{type:"button",onClick:(Jt===Vt&&ft||Fe===jt&&mt)&&!st?void 0:sn,disabled:"boolean"==typeof Se.disabled?Se.disabled:!(!(Jt===Vt&&ft||Fe===jt&&mt)||st)}),we),!!Ct&&e.createElement("div",i({style:{width:"100%",display:"flex",justifyContent:"center"}},kt),Array.from({length:Math.ceil(D.length/Qe)}).map((function(t,n){return e.createElement("button",i({type:"button",key:n,title:"".concat(n)},It,Fe>=n*Qe&&Fe<Math.min(Qe*(n+1),jt+1)?Lt:{},{onClick:function(){en(Math.min(n*Qe,D.length-1),Math.min(n*Qe,D.length-1)>Fe?"forward":"backward")}}))}))))}return e.memo(x)}));
|
|
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(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},t.apply(this,arguments)}function n(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}var i=["responsiveProps"],r=["minWidth","maxWidth"],o=["style"],s=["style"],d=["style","onTransitionEnd"],l=["children","show"],a=["children","show"],c=["className","style"],u=["className","style"],v=["className","onClick","style"],f=["props"];function m(m){var h=m.responsiveProps,b=void 0===h?[]:h,p=n(m,i),w=e.useState(0),x=w[0],y=w[1],S=e.useState(p.activeSlideIndex),g=S[0],E=S[1],T=e.useRef(null),C=e.useRef(null),L=e.useRef(null),k=e.useRef(!1),I=e.useRef(0),M=e.useRef(!1),W=e.useRef(""),R=e.useRef(null),O=e.useRef(null),j=e.useRef(0),P=e.useRef(g),X=b.reduce((function(e,t){var i=void 0===t?{}:t,o=i.minWidth,s=void 0===o?0:o,d=i.maxWidth,l=void 0===d?null:d,a=n(i,r);return x>s&&(!l||x<=l)?Object.assign({},e,a):e}),p),N=e.Children.toArray(X.children),A=x?Object.assign({},X,{activeSlideIndex:Math.max(0,Math.min(X.activeSlideIndex,N.length-1)),itemsToShow:Math.min(N.length,X.itemsToShow||0),itemsToScroll:Math.min(N.length,X.itemsToScroll||1)}):p,F=A.containerProps,V=void 0===F?{}:F,z=V.style,B=void 0===z?{}:z,D=n(V,o),q=A.innerProps,H=void 0===q?{}:q,G=H.style,J=void 0===G?{}:G,K=n(H,s),Q=A.itemsListProps,U=void 0===Q?{}:Q,Y=U.style,Z=void 0===Y?{}:Y,$=U.onTransitionEnd,_=void 0===$?void 0:$,ee=n(U,d),te=A.backwardBtnProps,ne=void 0===te?{}:te,ie=ne.children,re=void 0===ie?null:ie,oe=ne.show,se=void 0===oe||oe,de=n(ne,l),le=A.forwardBtnProps,ae=void 0===le?{}:le,ce=ae.children,ue=void 0===ce?null:ce,ve=ae.show,fe=void 0===ve||ve,me=n(ae,a),he=A.activeSlideProps,be=void 0===he?{}:he,pe=be.className,we=void 0===pe?"":pe,xe=be.style,ye=void 0===xe?{}:xe,Se=n(be,c),ge=A.visibleSlideProps,Ee=void 0===ge?{}:ge,Te=Ee.className,Ce=void 0===Te?"":Te,Le=Ee.style,ke=void 0===Le?{}:Le,Ie=n(Ee,u),Me=A.updateOnItemClick,We=void 0!==Me&&Me,Re=A.activeSlideIndex,Oe=A.onRequestChange,je=A.speed,Pe=void 0===je?0:je,Xe=A.delay,Ne=void 0===Xe?0:Xe,Ae=A.easing,Fe=void 0===Ae?"linear":Ae,Ve=A.itemsToShow,ze=void 0===Ve?0:Ve,Be=A.itemsToScroll,De=void 0===Be?1:Be,qe=A.children,He=A.onAfterChange,Ge=A.autoplay,Je=void 0!==Ge&&Ge,Ke=A.autoplayDirection,Qe=void 0===Ke?"forward":Ke,Ue=A.disableNavIfAllVisible,Ye=void 0===Ue||Ue,Ze=A.hideNavIfAllVisible,$e=void 0===Ze||Ze,_e=A.centerMode,et=void 0!==_e&&_e,tt=A.infinite,nt=void 0===tt||tt,it=A.disableNavIfEdgeVisible,rt=void 0===it||it,ot=A.disableNavIfEdgeActive,st=void 0===ot||ot,dt=A.dotsNav,lt=void 0===dt?{}:dt,at=A.persistentChangeCallbacks,ct=void 0!==at&&at,ut=A.autoplayDelay,vt=void 0===ut?0:ut,ft=A.preventScrollOnSwipe,mt=void 0!==ft&&ft,ht=A.disableSwipeByMouse,bt=void 0!==ht&&ht,pt=A.disableSwipeByTouch,wt=void 0!==pt&&pt,xt=A.touchSwipeTreshold,yt=A.mouseSwipeTreshold,St=A.swipeTreshold,gt=A.touchSwipeRatio,Et=A.mouseSwipeRatio,Tt=A.swipeRatio,Ct=void 0===Tt?1:Tt,Lt=lt||{},kt=Lt.show,It=void 0!==kt&&kt,Mt=Lt.containerProps,Wt=void 0===Mt?{}:Mt,Rt=Lt.itemBtnProps,Ot=void 0===Rt?{}:Rt,jt=Lt.activeItemBtnProps,Pt=void 0===jt?{}:jt,Xt=e.Children.count(qe)-1,Nt=ze===N.length,At=$e&&Nt,Ft=Ye&&Nt,Vt=Re-g==0||!Pe&&!Ne?"none":"transform "+Pe+"ms "+Fe+" "+Ne+"ms",zt=e.useCallback((function(e){var t,n=e.correctionSlideIndex,i=e.prevCorrectionSlideIndex,r=e.curActiveSlideIndex,o=L.current.offsetWidth,s=L.current.children,d=s.length,l=nt?[].concat(s).slice(d/3-i,d/3-i+d/3):[].concat(s),a=null==(t=l[r])?void 0:t.offsetWidth,c=ze?l.reduce((function(e,t,n){return n>=r&&n<r+ze||n<r&&n<r+ze-l.length?e+t.offsetWidth:e}),0):C.current.offsetWidth,u=Math.min(c,C.current.offsetWidth),v=o-u,f=et&&nt?-(u-a)/2:0,m=nt?o/3:0,h=n-r==0?0:"forward"===W.current&&r<n?m:"backward"===W.current&&r>n?-m:0,b=r-n!=0,p=function(e){var t=l.reduce((function(t,n,i){return i>=e?t:t+(n.offsetWidth||0)}),0);return nt?t:Math.min(v,t)},w=b&&nt?p(n):0,x=b||!nt?p(r):0,y=Ft?0:x-w+f+h+m,S="translateX(-"+y+"px)",g=nt?m+f:Math.min(v,l.reduce((function(e,t,n){return n<r?e+t.offsetWidth:e}),0)),E=g+u,T=l.map((function(e,t){return{slideIndex:t,htmlElement:e}})),k=nt?[].concat(l.slice(r).map((function(e,t){return{slideIndex:t+r,htmlElement:e}})),T,T,l.slice(0,r).map((function(e,t){return{slideIndex:t,htmlElement:e}}))):T,I=k.reduce((function(e,t){var n=t.slideIndex,i=t.htmlElement.offsetWidth;return(e.summ>=g&&e.summ<E||e.summ+i>g&&e.summ+i<=E)&&e.items.push({slideIndex:n,isFullyVisible:e.summ+i<=E&&e.summ>=g}),e.summ+=i,e}),{summ:0,items:[]}),M=!!I.items.find((function(e){return 0===e.slideIndex})),R=!!I.items.find((function(e){return e.slideIndex===l.length-1}));return{slidesHTMLElements:l,innerMaxWidth:c,itemsListMaxTranslateX:v,activeSlideWidth:a,offsetCorrectionForCenterMode:f,offsetCorrectionForInfiniteMode:m,itemsListTranslateX:y,itemsListTransform:S,visibleSlides:I.items,isFirstSlideVisible:M,isLastSlideVisible:R}}),[et,Ft,nt,ze]),Bt=x?zt({prevCorrectionSlideIndex:P.current,curActiveSlideIndex:Re,correctionSlideIndex:g}):{},Dt=Bt.innerMaxWidth,qt=void 0===Dt?0:Dt,Ht=Bt.itemsListMaxTranslateX,Gt=void 0===Ht?0:Ht,Jt=Bt.activeSlideWidth,Kt=void 0===Jt?0:Jt,Qt=Bt.offsetCorrectionForCenterMode,Ut=void 0===Qt?0:Qt,Yt=Bt.offsetCorrectionForInfiniteMode,Zt=void 0===Yt?0:Yt,$t=Bt.itemsListTranslateX,_t=void 0===$t?0:$t,en=Bt.itemsListTransform,tn=void 0===en?"none":en,nn=Bt.visibleSlides,rn=void 0===nn?[]:nn,on=e.useCallback((function(e){if("forward"===e){var t=Re+De;return t>Xt?nt?t-Xt-1:Xt:t}if("backward"===e){var n=Re-De;return n<0?nt?Xt+1+n:0:n}return Re}),[Re,De,Xt,nt]),sn=e.useCallback((function(e,t){if(W.current=t,L.current.style.transition=Pe||Ne?"transform "+Pe+"ms "+Fe+" "+Ne+"ms":"none",e!==Re||ct){var n;clearTimeout(R.current);var i=zt({correctionSlideIndex:g,prevCorrectionSlideIndex:g,curActiveSlideIndex:e}),r=i.visibleSlides,o=i.isFirstSlideVisible,s=i.isLastSlideVisible,d=i.itemsListTransform;e!==Re&&(null==(n=L.current)?void 0:n.style.transform)===d&&(k.current=!0),L.current.style.transform=d,Oe(e,{visibleSlides:r,isFirstSlideVisible:o,isLastSlideVisible:s})}else L.current.style.transform="translateX(-"+(Ut+Zt+(nt?0:_t))+"px)"}),[ct,Re,Ut,Ne,Fe,Pe,Oe,Zt,nt,_t,g,zt]),dn=e.useCallback((function(){Je&&(clearTimeout(R.current),R.current=setTimeout((function(){sn(on(Qe),Qe)}),vt||Ne))}),[Je,Qe,vt,sn,on,Ne]),ln=e.useCallback((function(){sn(on("backward"),"backward")}),[sn,on]),an=e.useCallback((function(e){E(Re),_&&_(e)}),[Re,_]),cn=e.useCallback((function(){sn(on("forward"),"forward")}),[sn,on]),un=function(e,t,i){return e.map((function(e,r){var o=e.props,s=void 0===o?{}:o,d=s.className,l=void 0===d?"":d,a=s.onClick,c=void 0===a?null:a,u=s.style,m=void 0===u?{}:u,h=n(s,v),b=n(e,f),p=nt?j.current>=N.length?"forward":"backward":r>=Re?"forward":"backward",w=r+t===Re,x=rn.find((function(e){return e.slideIndex===r+t})),y=(l+" "+(w?we:"")+" "+(x?Ce:"")).trim()||void 0,S=Object.assign({},m,x?ke:{},w?ye:{},{boxSizing:"border-box",margin:0}),g=!i&&We?function(e){var t=e.direction,n=e.index,i=e.onClick;return function(e){sn(n,t||(Re<n?"forward":"")||(Re>n?"backward":"")),i&&i(e)}}({direction:p,index:r+t,onClick:c}):c,E=Object.assign({role:"tabpanel",className:y,style:S,onClick:g},h,x?Ie:{},w?Se:{});return j.current+=1,Object.assign({props:E},b)}))};return e.useEffect((function(){var e=L.current;function t(e){e.preventDefault(),e.stopPropagation()}function n(e){var t,n;M.current=!0;var i=!(null==(t=e.touches)||!t[0]),r=i?null==(n=e.touches)?void 0:n[0].clientX:e.clientX,o=(I.current-r)*((i?gt:Et)||Ct)+Ut+Zt+(nt?0:_t),s=L.current.offsetWidth,d=Math.max(-o,-s);L.current.style.transition="none",L.current.style.transform="translateX("+d+"px)"}function i(e){if(document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",i),M.current){var r,o;null==(r=e.target)||r.addEventListener("click",t);var s=!(null==(o=e.changedTouches)||!o[0]),d=s?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,l=(I.current-d)*((s?gt:Et)||Ct),a=(s?xt:yt)||St||Kt/2,c=l>a?{index:on("forward"),direction:"forward"}:l<-a?{index:on("backward"),direction:"backward"}:{index:Re,direction:"forward"};sn(c.index,c.direction)}else{var u;null==(u=e.target)||u.removeEventListener("click",t)}I.current=0,M.current=!1}function r(e){var t,r;clearTimeout(R.current);var o=!(null==(t=e.touches)||!t[0]);I.current=o?null==(r=e.touches)?void 0:r[0].clientX:e.clientX,o?(document.addEventListener("touchmove",n),document.addEventListener("touchend",i)):(document.addEventListener("mousemove",n),document.addEventListener("mouseup",i))}return Ft||(bt||null==e||e.addEventListener("mousedown",r),wt||null==e||e.addEventListener("touchstart",r,{passive:!0}),bt&&wt||null==e||e.addEventListener("dragstart",i)),function(){M.current=!1,I.current=0,null==e||e.removeEventListener("mousedown",r),null==e||e.removeEventListener("touchstart",r),null==e||e.removeEventListener("dragstart",i),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",i)}}),[nt,_t,tn,Ut,Zt,Re,Kt,on,sn,Ft,bt,wt,xt,yt,St,gt,Et,Ct]),e.useEffect((function(){return Re!==g?(!Pe&&!Ne||k.current)&&(k.current=!1,E(Re)):(He&&He(Re,g),(nt||"forward"===Qe&&Re!==Xt||"backward"===Qe&&0!==Re)&&dn()),function(){clearTimeout(R.current)}}),[g,Re,He,Pe,Ne,dn,nt,Xt,Qe]),e.useEffect((function(){return x&&dn(),function(){clearTimeout(R.current)}}),[x]),e.useEffect((function(){function e(){clearTimeout(O.current),clearTimeout(R.current),O.current=setTimeout((function(){x!==window.innerWidth&&y(window.innerWidth)}),400)}return x!==window.innerWidth&&y(window.innerWidth),window.addEventListener("resize",e),function(){clearTimeout(O.current),window.removeEventListener("resize",e)}}),[x]),j.current=0,P.current=g,e.createElement("div",t({style:Object.assign({display:"flex",flexFlow:"row wrap",boxSizing:"border-box",justifyContent:"center",width:"100%"},B)},D,{ref:T}),se&&!At&&e.createElement("button",t({},de,{type:"button",onClick:(0===_t&&rt||0===Re&&st)&&!nt?void 0:ln,disabled:"boolean"==typeof de.disabled?de.disabled:!(!(0===_t&&rt||0===Re&&st)||nt)}),re),e.createElement("div",t({},K,{style:Object.assign({width:"100%"},J,{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:qt?qt+"px":void 0,flex:qt?void 0:"1 0"}),ref:C}),e.createElement("div",t({},ee,{style:Object.assign({},Z,{display:"flex",boxSizing:"border-box",outline:"none",transition:Vt,transform:tn,touchAction:mt?"none":"auto"}),"data-transform":tn,onTransitionEnd:Pe||Ne?an:_,tabIndex:-1,role:"presentation",ref:L}),nt&&un(N.slice(g),g,Ft),un(N,0,Ft),nt&&un(N,0,Ft),nt&&un(N.slice(0,g),0,Ft))),fe&&!At&&e.createElement("button",t({},me,{type:"button",onClick:(_t===Gt&&rt||Re===Xt&&st)&&!nt?void 0:cn,disabled:"boolean"==typeof me.disabled?me.disabled:!(!(_t===Gt&&rt||Re===Xt&&st)||nt)}),ue),!!It&&e.createElement("div",t({style:{width:"100%",display:"flex",justifyContent:"center"}},Wt),Array.from({length:Math.ceil(N.length/De)}).map((function(n,i){return e.createElement("button",t({type:"button",key:i,title:""+i},Ot,Re>=i*De&&Re<Math.min(De*(i+1),Xt+1)?Pt:{},{onClick:function(){sn(Math.min(i*De,N.length-1),Math.min(i*De,N.length-1)>Re?"forward":"backward")}}))}))))}return e.memo(m)}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-simply-carousel",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.5.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
5
|
"files": [
|
|
6
6
|
"dist/"
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
65
65
|
"husky": ">=6",
|
|
66
66
|
"lint-staged": ">=13.1.0",
|
|
67
|
-
"prettier": "2.8.
|
|
67
|
+
"prettier": "2.8.4",
|
|
68
68
|
"react": "^18.2.0",
|
|
69
69
|
"react-dom": "^18.2.0",
|
|
70
70
|
"rollup": "^3.13.0",
|