react-simply-carousel 5.1.4 → 6.0.1

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 (4) hide show
  1. package/README.md +96 -37
  2. package/dist/index.d.ts +46 -0
  3. package/dist/index.js +1 -1
  4. package/package.json +55 -53
package/README.md CHANGED
@@ -1,10 +1,11 @@
1
1
  # react-simply-carousel
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/react-simply-carousel.svg?style=flat)](https://www.npmjs.com/package/react-simply-carousel)
4
- ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-simply-carousel@latest?label=size)
3
+ [![npm version](https://badgen.net/npm/v/react-simply-carousel)](https://www.npmjs.com/package/react-simply-carousel)
4
+ [![minified + gzip](https://badgen.net/bundlephobia/minzip/react-simply-carousel)](https://bundlephobia.com/package/react-simply-carousel@latest)
5
+ [![typescript](https://badgen.net/npm/types/react-simply-carousel)](https://unpkg.com/react-simply-carousel@6.0.0/dist/index.d.ts)
5
6
  [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vadymshymko/react-simply-carousel/blob/master/LICENSE)
6
7
 
7
- Simple && small controlled React.js carousel component (touch enabled, infnite and responsive)
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)
8
9
 
9
10
  ## Table of contents
10
11
 
@@ -32,42 +33,100 @@ yarn add react-simply-carousel
32
33
  #### Basic Example:
33
34
 
34
35
  ```js
35
- import React, { Component } from "react";
36
- import Carousel from "react-simply-carousel";
37
-
38
- class App extends Component {
39
- state = {
40
- activeSlideIndex: 0,
41
- };
42
-
43
- setActiveSlideIndex = (newActiveSlideIndex) => {
44
- this.setState({
45
- activeSlideIndex: newActiveSlideIndex,
46
- });
47
- };
48
-
49
- render() {
50
- return (
51
- <Carousel
52
- activeSlideIndex={this.state.activeSlideIndex}
53
- onRequestChange={this.setActiveSlideIndex}
54
- itemsToShow={3}
55
- itemsToScroll={3}
36
+ import { useState } from 'react';
37
+ import ReactSimplyCarousel from 'react-simply-carousel';
38
+
39
+ function ReactSimplyCarouselExample() {
40
+ const [activeSlideIndex, setActiveSlideIndex] = useState(0);
41
+
42
+ return (
43
+ <div>
44
+ <ReactSimplyCarousel
45
+ activeSlideIndex={activeSlideIndex}
46
+ onRequestChange={setActiveSlideIndex}
47
+ itemsToShow={1}
48
+ itemsToScroll={1}
49
+ forwardBtnProps={{
50
+ //here you can also pass className, or any other button element attributes
51
+ style: {
52
+ alignSelf: 'center',
53
+ background: 'black',
54
+ border: 'none',
55
+ borderRadius: '50%',
56
+ color: 'white',
57
+ cursor: 'pointer',
58
+ fontSize: '20px',
59
+ height: 30,
60
+ lineHeight: 1,
61
+ textAlign: 'center',
62
+ width: 30,
63
+ },
64
+ children: <span>{`>`}</span>,
65
+ }}
66
+ backwardBtnProps={{
67
+ //here you can also pass className, or any other button element attributes
68
+ style: {
69
+ alignSelf: 'center',
70
+ background: 'black',
71
+ border: 'none',
72
+ borderRadius: '50%',
73
+ color: 'white',
74
+ cursor: 'pointer',
75
+ fontSize: '20px',
76
+ height: 30,
77
+ lineHeight: 1,
78
+ textAlign: 'center',
79
+ width: 30,
80
+ },
81
+ children: <span>{`<`}</span>,
82
+ }}
83
+ responsiveProps={[
84
+ {
85
+ itemsToShow: 2,
86
+ itemsToScroll: 2,
87
+ minWidth: 768,
88
+ },
89
+ ]}
90
+ speed={400}
91
+ easing="linear"
56
92
  >
57
- <div style={{ width: 300, height: 300 }}>slide 0</div>
58
- <div style={{ width: 300, height: 300 }}>slide 1</div>
59
- <div style={{ width: 300, height: 300 }}>slide 2</div>
60
- <div style={{ width: 300, height: 300 }}>slide 3</div>
61
- <div style={{ width: 300, height: 300 }}>slide 4</div>
62
- <div style={{ width: 300, height: 300 }}>slide 5</div>
63
- <div style={{ width: 300, height: 300 }}>slide 6</div>
64
- <div style={{ width: 300, height: 300 }}>slide 7</div>
65
- <div style={{ width: 300, height: 300 }}>slide 8</div>
66
- <div style={{ width: 300, height: 300 }}>slide 9</div>
67
- </Carousel>
68
- );
69
- }
93
+ {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
94
+ <div style={{ width: 300, height: 300, background: '#ff80ed' }}>
95
+ slide 0
96
+ </div>
97
+ <div style={{ width: 300, height: 300, background: '#065535' }}>
98
+ slide 1
99
+ </div>
100
+ <div style={{ width: 300, height: 300, background: '#000000' }}>
101
+ slide 2
102
+ </div>
103
+ <div style={{ width: 300, height: 300, background: '#133337' }}>
104
+ slide 3
105
+ </div>
106
+ <div style={{ width: 300, height: 300, background: '#ffc0cb' }}>
107
+ slide 4
108
+ </div>
109
+ <div style={{ width: 300, height: 300, background: '#ffffff' }}>
110
+ slide 5
111
+ </div>
112
+ <div style={{ width: 300, height: 300, background: '#ffe4e1' }}>
113
+ slide 6
114
+ </div>
115
+ <div style={{ width: 300, height: 300, background: '#008080' }}>
116
+ slide 7
117
+ </div>
118
+ <div style={{ width: 300, height: 300, background: '#ff0000' }}>
119
+ slide 8
120
+ </div>
121
+ <div style={{ width: 300, height: 300, background: '#e6e6fa' }}>
122
+ slide 9
123
+ </div>
124
+ </ReactSimplyCarousel>
125
+ </div>
126
+ );
70
127
  }
128
+
129
+ export default ReactSimplyCarouselExample;
71
130
  ```
72
131
 
73
132
  ## Props
package/dist/index.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import React, { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
2
+ declare type NavDirection = 'forward' | 'backward';
3
+ declare type NavBtnProps = ButtonHTMLAttributes<HTMLButtonElement> & {
4
+ show?: boolean;
5
+ };
6
+ declare type ReactSimplyCarouselStaticProps = {
7
+ activeSlideIndex: number;
8
+ activeSlideProps?: HTMLAttributes<any>;
9
+ autoplay?: boolean;
10
+ autoplayDirection?: NavDirection;
11
+ backwardBtnProps?: NavBtnProps;
12
+ children?: ReactNode;
13
+ containerProps?: HTMLAttributes<HTMLDivElement>;
14
+ delay?: number;
15
+ disableNavIfAllVisible?: boolean;
16
+ easing?: string;
17
+ forwardBtnProps?: NavBtnProps;
18
+ hideNavIfAllVisible?: boolean;
19
+ innerProps?: HTMLAttributes<HTMLDivElement>;
20
+ itemsListProps?: HTMLAttributes<HTMLDivElement>;
21
+ itemsToScroll?: number;
22
+ itemsToShow?: number;
23
+ onAfterChange?: (activeSlideIndex: number, deprecated_positionSlideIndex: number) => void;
24
+ onRequestChange: (newActiveSlideIndex: number) => void;
25
+ speed?: number;
26
+ updateOnItemClick?: boolean;
27
+ centerMode?: boolean;
28
+ infinite?: boolean;
29
+ disableNavIfEdgeVisible?: boolean;
30
+ disableNavIfEdgeActive?: boolean;
31
+ dotsNav?: {
32
+ show?: boolean;
33
+ activeClassName?: string;
34
+ } & ButtonHTMLAttributes<HTMLButtonElement>;
35
+ dotsNavWrapperProps?: HTMLAttributes<HTMLDivElement>;
36
+ };
37
+ declare type ReactSimplyCarouselResponsiveProps = (Omit<Omit<ReactSimplyCarouselStaticProps, 'activeSlideIndex'>, 'onRequestChange'> & {
38
+ minWidth?: number;
39
+ maxWidth?: number;
40
+ })[];
41
+ declare type ReactSimplyCarouselProps = ReactSimplyCarouselStaticProps & {
42
+ responsiveProps?: ReactSimplyCarouselResponsiveProps;
43
+ };
44
+ declare function ReactSimplyCarousel({ responsiveProps, ...props }: ReactSimplyCarouselProps): JSX.Element;
45
+ declare const _default: React.MemoExoticComponent<typeof ReactSimplyCarousel>;
46
+ export default _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(["react"],t):"object"==typeof exports?exports.ReactSimplyCarousel=t(require("react")):e.ReactSimplyCarousel=t(e.React)}(this,(function(e){return(()=>{"use strict";var t={383: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),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{default:()=>C});var e=n(383),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"],m=["className","onClick","style"],p=["props"];function v(){return(v=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}).apply(this,arguments)}function b(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)||E(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){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?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(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)||E(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 E(e,t){if(e){if("string"==typeof e)return S(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)?S(e,t):void 0}}function S(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 k(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 x(n){var o=n.responsiveProps,h=k(n,r),w=g((0,e.useState)(0),2),E=w[0],S=w[1],x=g((0,e.useState)(h.activeSlideIndex),2),C=x[0],O=x[1],P=(0,e.useRef)(null),T=(0,e.useRef)(null),j=(0,e.useRef)(null),L=(0,e.useRef)(null),M=(0,e.useRef)(!1),I=(0,e.useRef)(""),N=(0,e.useRef)(null),A=(0,e.useRef)(null),W=(0,e.useRef)(0),R=o.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=k(t,i);return E>n&&(!a||E<=a)?y(y({},e),c):e}),h),D=e.Children.toArray(R.children),X=E?y(y({},R),{},{activeSlideIndex:Math.max(0,Math.min(R.activeSlideIndex,D.length-1)),itemsToShow:Math.min(D.length,R.itemsToShow),itemsToScroll:Math.min(D.length,R.itemsToScroll)}):h,z=X.containerProps,V=z.style,B=z.onClickCapture,_=k(z,a),q=X.innerProps,F=q.style,U=k(q,c),$=X.itemsListProps,G=$.style,H=($.onTouchStart,$.onMouseDown,$.onTransitionEnd,k($,u)),J=X.backwardBtnProps,K=J.children,Q=void 0===K?null:K,Y=J.show,Z=void 0===Y||Y,ee=k(J,l),te=X.forwardBtnProps,re=te.children,ne=void 0===re?null:re,oe=te.show,ie=void 0===oe||oe,ae=k(te,s),ce=X.activeSlideProps,ue=ce.className,le=void 0===ue?"":ue,se=ce.style,de=void 0===se?{}:se,fe=k(ce,d),me=X.updateOnItemClick,pe=X.activeSlideIndex,ve=X.onRequestChange,be=X.speed,he=X.delay,ye=X.easing,we=X.itemsToShow,ge=X.itemsToScroll,Ee=X.children,Se=X.onAfterChange,ke=X.autoplay,xe=X.autoplayDirection,Ce=X.disableNavIfAllVisible,Oe=X.hideNavIfAllVisible,Pe=X.centerMode,Te=X.infinite,je=X.disableNavIfEdgeVisible,Le=X.disableNavIfEdgeActive,Me=X.dotsNav,Ie=X.dotsNavWrapperProps,Ne=Me||{},Ae=Ne.show,We=void 0!==Ae&&Ae,Re=Ne.activeClassName,De=void 0===Re?"":Re,Xe=k(Ne,f),ze=(0,e.useMemo)((function(){return E?Te?b(j.current.children).slice(D.length-C,D.length-C+D.length):b(j.current.children):[]}),[C,D.length,E,Te]),Ve=E?j.current.offsetWidth-T.current.offsetWidth:0,Be=function(e){var t=ze.reduce((function(t,r,n){return n>=e?t:t+(r.offsetWidth||0)}),0);return Te?t:Math.min(Ve,t)},_e=(0,e.useMemo)((function(){return E&&we?ze.reduce((function(e,t,r){return r>=pe&&r<pe+we||r<pe&&r<pe+we-ze.length?e+t.offsetWidth:e}),0):null}),[pe,we,ze,E]),qe=e.Children.count(Ee)-1,Fe=we===D.length,Ue=Oe&&Fe,$e=Ce&&Fe,Ge=pe-C!=0,He=E&&Ge&&Te?Be(C):0,Je=!E||!Ge&&Te?0:Be(pe),Ke=E?ze[pe].offsetWidth:0,Qe=E&&Pe&&Te?-(Math.min(_e||T.current.offsetWidth,T.current.offsetWidth)-Ke)/2:0,Ye=(0,e.useMemo)((function(){return Te&&E?j.current.offsetWidth/3:0}),[E,Te]),Ze=C-pe!=0&&j.current?"forward"===I.current.toLowerCase()&&pe<C?Ye:"backward"===I.current.toLowerCase()&&pe>C?-Ye:0:0,et=Ge&&(be||he)?"transform ".concat(be,"ms ").concat(ye," ").concat(he,"ms"):null,tt=$e||!E?0:Je-He+Qe+Ze+Ye,rt=E?"translateX(-".concat(tt,"px)"):null,nt=(0,e.useCallback)((function(e){if("forward"===e){var t=pe+ge;return t>qe?Te?t-qe-1:pe:t}if("backward"===e){var r=pe-ge;return r<0?Te?qe+1+r:pe:r}return pe}),[pe,ge,qe,Te]),ot=(0,e.useCallback)((function(e,t){I.current=t,j.current.style.transition=be||he?"transform ".concat(be,"ms ").concat(ye," ").concat(he,"ms"):null,e!==pe?(clearTimeout(N.current),ve(e)):(L.current=null,M.current=!1,j.current.style.transform="translateX(-".concat(Qe+Ye+(Te?0:tt),"px)"))}),[pe,Qe,he,ye,be,ve,Ye,Te,tt]),it=(0,e.useCallback)((function(){ke&&(clearTimeout(N.current),N.current=setTimeout((function(){ot(nt(xe),xe)}),he))}),[ke,xe,ot,nt,he]),at=(0,e.useCallback)((function(e){M.current&&(e.preventDefault(),e.stopPropagation(),B&&B(e))}),[B]),ct=(0,e.useCallback)((function(){ot(nt("backward"),"backward")}),[ot,nt]),ut=(0,e.useCallback)((function(e){M.current=!0;var t=e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX,r=L.current-t+Qe+Ye+(Te?0:tt),n=j.current.offsetWidth-T.current.offsetWidth,o=Math.max(Math.min(0,-r),-n);j.current.style.transition=null,j.current.style.transform="translateX(".concat(o,"px)")}),[Qe,Ye,Te,tt]),lt=(0,e.useCallback)((function(e){if(j.current.removeEventListener("mouseout",lt),j.current.removeEventListener("dragstart",lt),document.removeEventListener("mousemove",ut),document.removeEventListener("mouseup",lt),document.removeEventListener("touchmove",ut),document.removeEventListener("touchend",lt),M.current){var t=e.changedTouches&&e.changedTouches.length?e.changedTouches[e.changedTouches.length-1].clientX:e.clientX,r=L.current-t;r>Ke/2?ot(nt("forward"),"forward"):r<-Ke/2?ot(nt("backward"),"backward"):ot(pe,"forward")}}),[pe,Ke,ot,nt,ut]),st=(0,e.useCallback)((function(e){clearTimeout(N.current),M.current||(L.current=e.clientX,document.addEventListener("mousemove",ut),document.addEventListener("mouseup",lt),j.current.addEventListener("mouseout",lt),j.current.addEventListener("dragstart",lt))}),[ut,lt]),dt=(0,e.useCallback)((function(e){clearTimeout(N.current),M.current||(L.current=e.touches[0].clientX,document.addEventListener("touchmove",ut),document.addEventListener("touchend",lt))}),[ut,lt]),ft=(0,e.useCallback)((function(){O(pe)}),[pe]),mt=(0,e.useCallback)((function(){ot(nt("forward"),"forward")}),[ot,nt]),pt=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=o.style,l=void 0===u?{}:u,s=k(o,m),d=k(e,p),f=Te?W.current>=D.length?"forward":"backward":n>=pe?"forward":"backward",v=n+t===pe,b="".concat(a," ").concat(f," ").concat(v?le:""),h=y(y(y({},l),v?de:{}),{},{boxSizing:"border-box",margin:0}),w=y(y({role:"tabpanel",className:b,style:h,onClick:!r&&me?function(e){var t=e.direction,r=e.index,n=e.onClick;return function(e){ot(r,t||(pe<r?"forward":"")||(pe>r?"backward":"")),n&&n(e)}}({direction:f,index:n+t,onClick:c}):c},s),v?fe:{});return W.current+=1,y({props:w},d)}))};return(0,e.useEffect)((function(){return L.current=null,M.current=!1,I.current="",pe!==C?be||he||O(pe):(Se&&Se(pe,C),(Te||"forward"===xe&&pe!==qe||"backward"===xe&&0!==pe)&&it()),function(){clearTimeout(N.current)}}),[C,pe,Se,be,he,it,Te,qe,xe]),(0,e.useEffect)((function(){return E&&it(),function(){clearTimeout(N.current)}}),[E]),(0,e.useEffect)((function(){var e=j.current;function t(){clearTimeout(A.current),clearTimeout(N.current),A.current=setTimeout((function(){S(window.innerWidth)}),400)}return S(window.innerWidth),window.addEventListener("resize",t),function(){clearTimeout(A.current),window.removeEventListener("resize",t),document.removeEventListener("mousemove",ut),document.removeEventListener("mouseup",lt),document.removeEventListener("touchmove",ut),document.removeEventListener("touchend",lt),e.removeEventListener("mouseout",lt),e.removeEventListener("dragstart",lt)}}),[ut,lt]),W.current=0,E&&(j.current.style.transform=rt),t().createElement("div",v({onClickCapture:at,style:y({display:"flex",boxSizing:"border-box",justifyContent:"center"},V||{})},_,{ref:P}),Z&&!Ue&&t().createElement("button",v({},ee,{type:"button",onClick:(0===tt&&je||0===pe&&Le)&&!Te?null:ct,disabled:"boolean"==typeof ee.disabled?ee.disabled:!(!(0===tt&&je||0===pe&&Le)||Te)}),Q),t().createElement("div",v({},U,{style:y(y({},F||{}),{},{display:"flex",boxSizing:"border-box",flexFlow:"row wrap",padding:"0",overflow:"hidden",maxWidth:_e?"".concat(_e,"px"):"100%"}),ref:T}),t().createElement("div",v({},H,{style:y(y({},G||{}),{},{display:"flex",boxSizing:"border-box",outline:"none",transition:et,transform:rt}),"data-transform":rt,onTouchStart:$e?null:dt,onMouseDown:$e?null:st,onTransitionEnd:be||he?ft:null,tabIndex:"-1",role:"presentation",ref:j}),!$e&&Te&&pt(D.slice(C),C),pt(D,0,$e),!$e&&Te&&pt(D,0),!$e&&Te&&pt(D.slice(0,C),0))),ie&&!Ue&&t().createElement("button",v({},ae,{type:"button",onClick:(tt===Ve&&je||pe===qe&&Le)&&!Te?null:mt,disabled:"boolean"==typeof ae.disabled?ae.disabled:!(!(tt===Ve&&je||pe===qe&&Le)||Te)}),ne),!Te&&!!We&&t().createElement("div",Ie,Array.from({length:Math.ceil(D.length/ge)}).map((function(e,r){return t().createElement("button",v({type:"button",key:r,title:r},Xe,{className:"".concat(Xe.className||""," ").concat(r*ge===pe?De:""),onClick:function(){ot(Math.min(r*ge,D.length-1),Math.min(r*ge,D.length-1)>pe?"forward":"backward")}}))}))))}x.defaultProps={activeSlideProps:{},autoplay:!1,autoplayDirection:"forward",backwardBtnProps:{},children:null,containerProps:{},delay:0,disableNavIfAllVisible:!0,easing:"linear",forwardBtnProps:{},hideNavIfAllVisible:!0,innerProps:{},itemsListProps:{},itemsToScroll:1,itemsToShow:0,onAfterChange:null,responsiveProps:[],speed:0,updateOnItemClick:!1,centerMode:!1,infinite:!0,disableNavIfEdgeVisible:!0,disableNavIfEdgeActive:!0,dotsNav:{},dotsNavWrapperProps:{}};const C=(0,e.memo)(x)})(),o})()}));
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})()));
package/package.json CHANGED
@@ -1,46 +1,38 @@
1
1
  {
2
2
  "name": "react-simply-carousel",
3
- "version": "5.1.4",
4
- "description": "Simple react.js carousel component",
3
+ "version": "6.0.1",
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
  "main": "dist/index.js",
6
6
  "files": [
7
7
  "dist/"
8
8
  ],
9
9
  "unpkg": "dist/index.js",
10
10
  "module": "dist/index.js",
11
+ "types": "dist/index.d.ts",
11
12
  "sideEffects": false,
12
13
  "scripts": {
13
- "build": "webpack --mode=production",
14
- "build:dev": "webpack --mode=development",
15
- "lint": "eslint --ext .js,.jsx --fix && prettier --write .",
16
- "prepublish": "npm run lint && npm run build"
17
- },
18
- "husky": {
19
- "hooks": {
20
- "pre-commit": "lint-staged"
21
- }
22
- },
23
- "lint-staged": {
24
- "*.jsx": [
25
- "eslint --fix",
26
- "prettier --write"
27
- ],
28
- "*.js": [
29
- "eslint --fix",
30
- "prettier --write"
31
- ]
14
+ "build": "rm -rf dist && yarn lint && yarn generate-types && webpack --mode=production",
15
+ "build:dev": "yarn generate-types && webpack --mode=development",
16
+ "generate-types": "tsc --emitDeclarationOnly",
17
+ "lint": "eslint . --ext .tsx",
18
+ "prepare": "husky install",
19
+ "prepublish": "yarn build",
20
+ "check-types": "tsc --noEmit"
32
21
  },
33
22
  "keywords": [
34
23
  "react",
35
24
  "react-component",
36
25
  "react-carousel",
26
+ "react-slider",
37
27
  "carousel",
28
+ "slider",
38
29
  "carousel-component",
39
- "carousel-plugin",
40
- "carousel-slider",
30
+ "slider-component",
41
31
  "responsive-carousel",
42
32
  "touch-enabled-carousel",
43
- "infinite-carousel"
33
+ "infinite-carousel",
34
+ "typescript-carousel",
35
+ "typescript"
44
36
  ],
45
37
  "author": "Vadym Shymko <vadymshymko@gmail.com>",
46
38
  "license": "MIT",
@@ -53,40 +45,50 @@
53
45
  },
54
46
  "homepage": "https://github.com/vadymshymko/react-simply-carousel#readme",
55
47
  "devDependencies": {
56
- "@babel/cli": "^7.12.10",
57
- "@babel/core": "^7.12.10",
58
- "@babel/preset-env": "^7.12.11",
59
- "@babel/preset-react": "^7.12.10",
60
- "babel-eslint": "^10.1.0",
61
- "babel-loader": "^8.2.2",
62
- "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
48
+ "@babel/cli": "^7.17.10",
49
+ "@babel/core": "^7.17.10",
50
+ "@babel/preset-env": "^7.17.10",
51
+ "@babel/preset-react": "^7.16.7",
52
+ "@babel/preset-typescript": "^7.16.7",
53
+ "@types/react": "^18.0.8",
54
+ "@types/react-dom": "^18.0.3",
55
+ "@typescript-eslint/eslint-plugin": "^5.21.0",
56
+ "@typescript-eslint/parser": "^5.21.0",
57
+ "babel-loader": "^8.2.5",
63
58
  "babel-plugin-transform-remove-console": "^6.9.4",
64
59
  "clean-webpack-plugin": "^3.0.0",
65
- "eslint": "^7.16.0",
66
- "eslint-config-airbnb": "^18.2.1",
67
- "eslint-config-prettier": "^7.1.0",
68
- "eslint-import-resolver-webpack": "^0.13.0",
69
- "eslint-plugin-import": "^2.22.1",
70
- "eslint-plugin-jsx-a11y": "^6.4.1",
71
- "eslint-plugin-react": "^7.21.5",
72
- "eslint-plugin-react-hooks": "^4.2.0",
73
- "eslint-webpack-plugin": "^2.4.1",
74
- "husky": "^4.3.6",
75
- "lint-staged": "^10.5.3",
76
- "path": "^0.12.7",
77
- "prettier": "^2.2.1",
78
- "react": "^17.0.1",
79
- "react-dom": "^17.0.1",
80
- "webpack": "^5.11.1",
81
- "webpack-bundle-analyzer": "^4.3.0",
82
- "webpack-cli": "^4.3.0"
60
+ "eslint": "^8.14.0",
61
+ "eslint-config-airbnb": "^19.0.4",
62
+ "eslint-config-prettier": "^8.5.0",
63
+ "eslint-plugin-import": "^2.26.0",
64
+ "eslint-plugin-jsx-a11y": "^6.5.1",
65
+ "eslint-plugin-react": "^7.29.4",
66
+ "eslint-plugin-react-hooks": "^4.5.0",
67
+ "husky": ">=6",
68
+ "lint-staged": ">=10",
69
+ "prettier": "2.6.2",
70
+ "react": "^18.1.0",
71
+ "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"
83
76
  },
84
77
  "dependencies": {
85
- "core-js": "^3.8.1",
86
- "prop-types": "^15.7.2"
78
+ "core-js": "^3.8.1"
87
79
  },
88
80
  "peerDependencies": {
89
- "react": "^16.8 || ^17",
90
- "react-dom": "^16.8 || ^17"
81
+ "@types/react": "^16.8 || ^17 || ^18",
82
+ "react": "^16.8 || ^17 || ^18",
83
+ "react-dom": "^16.8 || ^17 || ^18"
84
+ },
85
+ "peerDependenciesMeta": {
86
+ "@types/react": {
87
+ "optional": true
88
+ }
89
+ },
90
+ "lint-staged": {
91
+ "*.{js,jsx,tsx}": "eslint --cache --fix",
92
+ ".": "prettier --write"
91
93
  }
92
94
  }