Skip to content

Commit f214931

Browse files
gl0gl0gl0gl0
authored
Merge pull request #57 from leaffm/develop
Updated dependencies
2 parents aa7c6f5 + 03891f3 commit f214931

9 files changed

Lines changed: 8944 additions & 13078 deletions

‎.eslintrc.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
module.exports = {
2-
parser: 'babel-eslint',
2+
parser: '@babel/eslint-parser',
33
env: {
44
browser: true,
55
node: true,
66
es6: true,
77
jest: true,
88
},
9+
parserOptions: { ecmaVersion: 8 }, // to enable features such as async/await
910
settings: {
1011
'import/resolver': {
1112
node: {
@@ -15,11 +16,10 @@ module.exports = {
1516
},
1617
extends: [
1718
'airbnb',
19+
'eslint:recommended',
1820
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
19-
'prettier/react',
20-
'prettier/standard',
2121
],
22-
plugins: ['prettier'],
22+
// plugins: ['prettier'],
2323
rules: {
2424
'jsx-a11y/href-no-hash': 'off',
2525
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],

‎lib/react-infinite-carusel.min.js‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-infinite-carusel.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 8878 additions & 13011 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-leaf-carousel",
3-
"version": "2.0.3",
3+
"version": "3.0.0",
44
"description": "React simple infinite carousel with lazy loading and responsive support",
55
"scripts": {
66
"build": "WEBPACK_ENV=build webpack --mode production",
@@ -30,45 +30,45 @@
3030
"homepage": "https://github.com/leaffm/react-infinite-carousel#readme",
3131
"devDependencies": {
3232
"@babel/cli": "*",
33-
"@babel/core": "^7.7.5",
34-
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
35-
"@babel/preset-env": "^7.7.6",
36-
"@babel/preset-es2015": "*",
37-
"@babel/preset-react": "^7.7.4",
33+
"@babel/core": "^7.16.0",
34+
"@babel/eslint-parser": "^7.16.3",
35+
"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
36+
"@babel/preset-env": "^7.16.0",
37+
"@babel/preset-react": "^7.16.0",
3838
"@babel/preset-stage-0": "*",
39-
"@semantic-release/npm": "^5.3.4",
40-
"babel-eslint": "*",
41-
"babel-loader": "^8.0.6",
39+
"@semantic-release/npm": "^8.0.3",
40+
"babel-loader": "^8.2.3",
4241
"babel-plugin-transform-class-properties": "*",
43-
"css-loader": "^3.2.0",
44-
"eslint": "^6.7.2",
45-
"eslint-config-airbnb": "*",
46-
"eslint-config-airbnb-base": "*",
47-
"eslint-config-prettier": "^6.7.0",
42+
"css-loader": "^6.5.1",
43+
"eslint": "^8.2.0",
44+
"eslint-config-airbnb": "^19.0.0",
45+
"eslint-config-airbnb-base": "^15.0.0",
46+
"eslint-config-prettier": "^8.3.0",
4847
"eslint-config-react-app": "*",
49-
"eslint-loader": "*",
5048
"eslint-plugin-flowtype": "*",
51-
"eslint-plugin-import": "*",
52-
"eslint-plugin-jsx-a11y": "*",
53-
"eslint-plugin-prettier": "^3.1.2",
54-
"eslint-plugin-react": "^7.17.0",
49+
"eslint-plugin-import": "^2.25.3",
50+
"eslint-plugin-jsx-a11y": "^6.5.1",
51+
"eslint-plugin-prettier": "^4.0.0",
52+
"eslint-plugin-react": "^7.27.0",
53+
"eslint-plugin-react-hooks": "^4.3.0",
54+
"eslint-webpack-plugin": "^3.1.1",
5555
"extract-text-webpack-plugin": "*",
5656
"gm-base64": "*",
57-
"html-webpack-plugin": "^3.2.0",
58-
"prettier": "^1.19.1",
59-
"semantic-release": "^15.13.31",
60-
"style-loader": "^1.0.0",
61-
"uglifyjs-webpack-plugin": "^2.2.0",
62-
"webpack": "^4.41.3",
63-
"webpack-cli": "^3.3.10",
64-
"webpack-dev-server": "^3.9.0"
57+
"html-webpack-plugin": "^5.5.0",
58+
"prettier": "^2.4.1",
59+
"semantic-release": "^18.0.0",
60+
"style-loader": "^3.3.1",
61+
"terser-webpack-plugin": "^5.2.5",
62+
"webpack": "^5.64.0",
63+
"webpack-cli": "^4.9.1",
64+
"webpack-dev-server": "^4.5.0"
6565
},
6666
"dependencies": {
6767
"prop-types": "^15.7.2",
68-
"react": "^16.12.0",
69-
"react-dom": "^16.12.0",
68+
"react": "^17.0.2",
69+
"react-dom": "^17.0.2",
7070
"react-responsive-mixin": "^0.4.0",
71-
"uniqid": "^5.2.0"
71+
"uniqid": "^5.4.0"
7272
},
7373
"npmName": "react-leaf-carousel",
7474
"npmFileMap": [

‎src/components/InfiniteCarouselArrow.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import './InfiniteCarousel.css';
44

5-
function InfiniteCarouselArrow({ carouselName, next, onClick }) {
5+
const InfiniteCarouselArrow = function ({ carouselName, next, onClick }) {
66
const arrowClassName = 'InfiniteCarouselArrow';
77
let typeClassName;
88
if (next) {
@@ -34,7 +34,7 @@ function InfiniteCarouselArrow({ carouselName, next, onClick }) {
3434
<i className={classNameIcon} />
3535
</button>
3636
);
37-
}
37+
};
3838

3939
InfiniteCarouselArrow.propTypes = {
4040
carouselName: PropTypes.string.isRequired,

‎src/components/InfiniteCarouselDots.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import './InfiniteCarousel.css';
44

5-
function InfiniteCarouselDots({ carouselName, numberOfDots, activePage, onClick }) {
5+
const InfiniteCarouselDots = function ({ carouselName, numberOfDots, activePage, onClick }) {
66
const dots = [];
77
let classNameIcon;
88
let dotName;
@@ -32,7 +32,7 @@ function InfiniteCarouselDots({ carouselName, numberOfDots, activePage, onClick
3232
{dots}
3333
</ul>
3434
);
35-
}
35+
};
3636

3737
InfiniteCarouselDots.propTypes = {
3838
carouselName: PropTypes.string.isRequired,

‎src/index.js‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,9 @@ class InfiniteCarousel extends Component {
8585
breakpoints: breakpointsSettings,
8686
} = this.props;
8787
const { scrollOnDeviceProps: stateScrollOnDeviceProps } = this.state;
88-
const breakpoints = breakpointsSettings.map(element => element.breakpoint);
88+
const breakpoints = breakpointsSettings.map((element) => element.breakpoint);
8989
const settings = {};
90-
breakpointsSettings.forEach(element => {
90+
breakpointsSettings.forEach((element) => {
9191
settings[element.breakpoint] = element.settings;
9292
});
9393
if (breakpoints.length > 0) {
@@ -117,7 +117,7 @@ class InfiniteCarousel extends Component {
117117
...scrollOnDeviceProps,
118118
};
119119
const children = this.getChildrenList(propChildren, newSettings.slidesToShow);
120-
const slideUniqueIds = children.map(child => uniqid('slide-')); // eslint-disable-line no-unused-vars
120+
const slideUniqueIds = children.map((child) => uniqid('slide-')); // eslint-disable-line no-unused-vars
121121
this.setState(
122122
{
123123
settings: newSettings,
@@ -143,7 +143,7 @@ class InfiniteCarousel extends Component {
143143
...scrollOnDeviceProps,
144144
};
145145
const children = this.getChildrenList(propChildren, newSettings.slidesToShow);
146-
const slideUniqueIds = children.map(child => uniqid('slide-')); // eslint-disable-line no-unused-vars
146+
const slideUniqueIds = children.map((child) => uniqid('slide-')); // eslint-disable-line no-unused-vars
147147
this.setState(
148148
{
149149
settings: newSettings,
@@ -175,7 +175,8 @@ class InfiniteCarousel extends Component {
175175
};
176176

177177
setDimensions = () => {
178-
const { settings, lowerBreakpoint, higherBreakpoint, children, currentIndex } = this.state;
178+
const { settings, lowerBreakpoint, higherBreakpoint, children, currentIndex, autoCycleTimer } =
179+
this.state;
179180
const { children: propChildren, scrollOnDevice: propScrollOnDevice } = this.props;
180181
const scrollOnDevice = propScrollOnDevice && isTouchDevice();
181182
const currentScreenWidth = getScreenWidth();
@@ -203,6 +204,7 @@ class InfiniteCarousel extends Component {
203204
visibleSlideList = this.getVisibleIndexes(propChildren, currentIndex);
204205
}
205206

207+
clearInterval(autoCycleTimer);
206208
this.setState(
207209
{
208210
activePage,
@@ -214,6 +216,8 @@ class InfiniteCarousel extends Component {
214216
lazyLoadedList,
215217
visibleSlideList,
216218
sideSize,
219+
// clear autocycle
220+
autoCycleTimer: null,
217221
},
218222
() => {
219223
this.playAutoCycle();
@@ -353,7 +357,7 @@ class InfiniteCarousel extends Component {
353357
return targetIndex;
354358
};
355359

356-
onDotClick = event => {
360+
onDotClick = (event) => {
357361
event.preventDefault();
358362
const { settings, animating, autoCycleTimer } = this.state;
359363
const { slidesToShow, autoCycle } = settings;
@@ -406,7 +410,7 @@ class InfiniteCarousel extends Component {
406410
}
407411
};
408412

409-
onSwipeStart = e => {
413+
onSwipeStart = (e) => {
410414
const {
411415
settings: { swipe, draggable },
412416
} = this.state;
@@ -433,7 +437,7 @@ class InfiniteCarousel extends Component {
433437
return true;
434438
};
435439

436-
onSwipeMove = e => {
440+
onSwipeMove = (e) => {
437441
const { dragging, animating } = this.state;
438442
if (!dragging) {
439443
e.preventDefault();
@@ -527,15 +531,8 @@ class InfiniteCarousel extends Component {
527531

528532
getTrackStyles = () => {
529533
const { settings } = this.state;
530-
const {
531-
touchObject,
532-
singlePage,
533-
sideSize,
534-
animating,
535-
slidesWidth,
536-
slidesCount,
537-
currentIndex,
538-
} = this.state;
534+
const { touchObject, singlePage, sideSize, animating, slidesWidth, slidesCount, currentIndex } =
535+
this.state;
539536
let trackWidth = slidesWidth + settings.slidesSpacing * 2;
540537
trackWidth *= slidesCount + settings.slidesToShow * 2;
541538
const totalSlideWidth = slidesWidth + settings.slidesSpacing * 2;
@@ -579,7 +576,7 @@ class InfiniteCarousel extends Component {
579576
MozBoxSizing: 'border-box',
580577
};
581578

582-
getSlideStyles = isVisible => {
579+
getSlideStyles = (isVisible) => {
583580
const { slidesWidth, settings } = this.state;
584581
const { scrollOnDevice } = this.props;
585582
const isScrollTouch = scrollOnDevice && isTouchDevice();
@@ -745,7 +742,7 @@ class InfiniteCarousel extends Component {
745742
}
746743
};
747744

748-
moveToNext = event => {
745+
moveToNext = (event) => {
749746
const { onNextClick } = this.props;
750747
const { animating, settings, currentIndex, autoCycleTimer } = this.state;
751748
event.preventDefault();
@@ -770,7 +767,7 @@ class InfiniteCarousel extends Component {
770767
}
771768
};
772769

773-
moveToPrevious = event => {
770+
moveToPrevious = (event) => {
774771
const { onPreviousClick } = this.props;
775772
const { animating, settings, currentIndex, autoCycleTimer } = this.state;
776773
event.preventDefault();
@@ -826,7 +823,7 @@ class InfiniteCarousel extends Component {
826823
const settings = this.getSettingsForScrollOnDevice();
827824
const { slidesToShow } = settings;
828825
const newChildren = this.getChildrenList(children, slidesToShow);
829-
const slideUniqueIds = newChildren.map(child => uniqid('slide-')); // eslint-disable-line no-unused-vars
826+
const slideUniqueIds = newChildren.map((child) => uniqid('slide-')); // eslint-disable-line no-unused-vars
830827
this.setState(
831828
{
832829
children: newChildren,
@@ -840,7 +837,7 @@ class InfiniteCarousel extends Component {
840837
}
841838
};
842839

843-
storeFrameRef = f => {
840+
storeFrameRef = (f) => {
844841
if (f !== null) {
845842
this.frame = f;
846843
}

‎webpack.config.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ const path = require('path');
33
const HtmlWebpackPlugin = require('html-webpack-plugin');
44
const React = require('react');
55
const ReactDOM = require('react-dom');
6-
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
6+
const ESLintPlugin = require('eslint-webpack-plugin');
7+
const TerserPlugin = require("terser-webpack-plugin");
78

89
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
910
template: './public/index.html',
@@ -26,7 +27,8 @@ if (env === 'build') {
2627
libraryTarget: 'umd',
2728
},
2829
optimization: {
29-
minimizer: [new UglifyJsPlugin()],
30+
minimize: true,
31+
minimizer: [new TerserPlugin()],
3032
},
3133
externals: [
3234
{
@@ -47,7 +49,7 @@ if (env === 'build') {
4749
};
4850
} else {
4951
envConfig = {
50-
plugins: [HtmlWebpackPluginConfig],
52+
plugins: [HtmlWebpackPluginConfig, new ESLintPlugin()],
5153
entry: './public/app.js',
5254
output: {
5355
path: path.resolve('dist'),
@@ -71,8 +73,7 @@ const config = {
7173
presets: ['@babel/preset-env'],
7274
plugins: ['@babel/plugin-proposal-object-rest-spread'],
7375
},
74-
},
75-
'eslint-loader',
76+
}
7677
],
7778
exclude: /node_modules/,
7879
},

0 commit comments

Comments
 (0)