Skip to content

Commit

Permalink
upgrade 2.4.0 (kidjp85#355)
Browse files Browse the repository at this point in the history 
* upgrade 2.4.0
  • Loading branch information
@kidjp85
kidjp85 authored Nov 6, 2019
1 parent e4641f6 commit e13cace
Show file tree
Hide file tree
Showing 13 changed files with 1,749 additions and 2,773 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,9 @@
},
"rules": {
"import/no-unresolved": "error",
"import/order": "error",
"import/order": "off",
"import/named": "off",
"import/default": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-explicit-any": ["off"],
"react/display-name": ["off"],
Expand Down
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Change Log for React-id-swiper

## [v2.4.0](https://github.com/kidjp85/react-id-swiper/compare/2.4.0...2.3.2) - Released on Nov 7th, 2019
* Upgrade to support `Swiper` version 5.x
* Drop support for `Swiper`'s stylesheet
* Upgrade npm packages

## [v2.3.2](https://github.com/kidjp85/react-id-swiper/compare/2.3.2...2.3.1) - Released on July 24th, 2019
* Upgrade npm packages
* Replace `tslint` with `eslint`
Expand Down
75 changes: 56 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
[![npm Version](https://img.shields.io/npm/v/react-id-swiper.svg?style=flat-square)](https://npmjs.org/package/react-id-swiper)
[![Coverage Status](https://img.shields.io/codecov/c/github/moroshko/react-autosuggest/master.svg?style=flat-square)](https://codecov.io/gh/kidjp85/react-id-swiper)
[![npm Downloads](https://img.shields.io/npm/dm/react-id-swiper.svg?style=flat-square)](https://npmjs.org/package/react-id-swiper)
[![Weekly download](https://img.shields.io/npm/dw/react-id-swiper.svg?style=flat-square)](https://npmjs.org/package/react-id-swiper)
[![Total Downloads](https://img.shields.io/npm/dt/react-id-swiper.svg?style=flat-square)](https://npmjs.org/package/react-id-swiper)
[![Build Status](https://travis-ci.org/kidjp85/react-id-swiper.svg?branch=master)](https://travis-ci.org/kidjp85/react-id-swiper)
[![Greenkeeper badge](https://badges.greenkeeper.io/kidjp85/react-id-swiper.svg)](https://greenkeeper.io/)

[![Package Quality](http://npm.packagequality.com/badge/react-id-swiper.png)](http://packagequality.com/#?package=react-id-swiper)

react-id-swiper ( Newest version 2.3.2 )
react-id-swiper ( Newest version 2.4.0 )
========================================
> A library to use [Swiper](http://www.idangero.us/swiper/get-started/) as a ReactJs component
Expand Down Expand Up @@ -52,6 +53,7 @@ Swiper is not compatible with all platforms, it is a modern touch slider which i


**NOTE:**

* You can also use Swiper's original params too. Swiper API documentation [HERE](http://idangero.us/swiper/api/)
* Find more info about Swiper custom build [HERE](https://idangero.us/swiper/api/#custom-build)

Expand All @@ -64,7 +66,8 @@ Swiper is not compatible with all platforms, it is a modern touch slider which i

# Installation and setup

From version 2.0.0, it requires **React & ReactDOM ver >=16.8.0** to use [Hooks](https://reactjs.org/docs/hooks-intro.html)
- From version 2.0.0, it requires **React & ReactDOM ver >=16.8.0** to use [Hooks](https://reactjs.org/docs/hooks-intro.html)
- From version 2.4.0, it requires **Swiper ver >= 5.0.0**

## Npm package

Expand All @@ -83,11 +86,11 @@ yarn add react-id-swiper@latest swiper@latest
## CDN

```html
<script src="https://unpkg.com/react-id-swiper@2.3.2/lib/react-id-swiper.js"></script>
<script src="https://unpkg.com/react-id-swiper@2.4.0/lib/react-id-swiper.js"></script>
```

```html
<script src="https://unpkg.com/react-id-swiper@2.3.2/lib/react-id-swiper.min.js"></script>
<script src="https://unpkg.com/react-id-swiper@2.4.0/lib/react-id-swiper.min.js"></script>
```

# Styling
Expand All @@ -97,21 +100,49 @@ yarn add react-id-swiper@latest swiper@latest
Use Swiper stylesheet file from CDN

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.css">
```

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.min.css">
```

Or `react-id-swiper/lib/styles/` (supporting CSS and SCSS)
**For version <=2.3.2**

You can import direct from `react-id-swiper/lib/styles/` (supporting css, scss)

```js
import 'react-id-swiper/lib/styles/scss/swiper.scss';
> css
```javascript
import 'react-id-swiper/lib/styles/css/swiper.css'
```

```js
import 'react-id-swiper/lib/styles/css/swiper.css';
> scss
```javascript
import 'react-id-swiper/lib/styles/scss/swiper.scss'
```

**For version >=2.4.0**

You should import directly from `Swiper` packages which supports css, scss and less

> css
```javascript
import 'swiper/css/swiper.css'
```

> scss
```javascript
import 'swiper/swiper.scss'
```

> less
```javascript
import 'swiper/swiper.less'
```

# Examples
Expand All @@ -125,7 +156,10 @@ import 'react-id-swiper/lib/styles/css/swiper.css';
```javascript
import React from 'react';
import Swiper from 'react-id-swiper';
import 'react-id-swiper/lib/styles/css/swiper.css'; // or `/scss/swiper.scss`
// Version <= 2.3.2
import 'react-id-swiper/lib/styles/css/swiper.css';
// Version >= 2.4.0
import 'swiper/css/swiper.css';

const SimpleSwiper = () => (
<Swiper>
Expand Down Expand Up @@ -219,8 +253,11 @@ You can find the [WORKING DEMO REPO HERE](https://github.com/kidjp85/react-id-sw

```javascript
import React from 'react';
import { Swiper, Navigation, Pagination } from 'swiper/dist/js/swiper.esm.js';
import ReactIdSwiperCustom from 'react-id-swiper/lib/ReactIdSwiper.custom';
// For swiper version 4.x
import { Swiper, Navigation, Pagination } from 'swiper/dist/js/swiper.esm';
// For swiper version 5.x
import { Swiper, Navigation, Pagination } from 'swiper/js/swiper.esm';

const CustomBuildSwiper = () => {
const params = {
Expand Down Expand Up @@ -257,7 +294,7 @@ export default CustomBuildSwiper;
**NOTE**:
* If you use Webpack & Babel you need to setup Babel loader config in `webpack.config.js` like below:

```js
```javascript
module: {
rules: [
{
Expand Down Expand Up @@ -303,17 +340,17 @@ const params = {

Each slide should be wrapped by HTML element

> BAD CODE
> BAD CODE :thumbsdown:
```js
```javascript
<Swiper {...params}>
Slide content // notice no HTML element
</Swiper>
```

> GOOD CODE
> GOOD CODE :thumbsup:
```js
```javascript
<Swiper {...params}>
<span>Slide content</span>
</Swiper>
Expand Down
68 changes: 33 additions & 35 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-id-swiper",
"version": "2.3.2",
"version": "2.4.0",
"description": "ReactJs component for iDangerous Swiper",
"main": "lib/index",
"types": "lib/index.d.ts",
Expand All @@ -11,11 +11,9 @@
"build:cleanup": "rimraf lib",
"build:lib": "yarn build:cleanup && tsc",
"build:standalone": "cross-env BABEL_ENV=production webpack",
"build": "yarn build:lib && yarn build:standalone && yarn copy:stylesheet",
"build": "yarn build:lib && yarn build:standalone",
"lint:ts": "eslint 'src/**/*.ts?(x)'",
"lint:ts:fix": "eslint --fix 'src/**/*.ts?(x)'",
"copy:package": "cp -rf package.json lib",
"copy:stylesheet": "cp -rf src/styles lib",
"test": "jest",
"test:dev": "jest --watch --coverage",
"test:coverage": "jest --coverage",
Expand Down Expand Up @@ -55,53 +53,53 @@
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"swiper": ">=4.0.0"
"swiper": ">=5.0.0"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/core": "^7.7.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-env": "^7.7.1",
"@babel/preset-react": "^7.7.0",
"@types/enzyme": "^3.10.3",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/jest": "^24.0.15",
"@types/jest": "^24.0.22",
"@types/jsdom": "^12.2.4",
"@types/object-assign": "^4.0.30",
"@types/react": "^16.8.23",
"@types/react-dom": "^16.8.5",
"@types/swiper": "^4.4.3",
"@typescript-eslint/eslint-plugin": "^2.0.0",
"@typescript-eslint/parser": "^2.0.0",
"@types/react": "^16.9.11",
"@types/react-dom": "^16.9.4",
"@types/swiper": "^5.2.0",
"@typescript-eslint/eslint-plugin": "^2.6.1",
"@typescript-eslint/parser": "^2.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-jest": "^24.8.0",
"babel-jest": "^24.9.0",
"babel-plugin-dynamic-import-node": "^2.3.0",
"cross-env": "^6.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"eslint": "^6.1.0",
"eslint-config-prettier": "^6.0.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.4.3",
"eslint": "^6.6.0",
"eslint-config-prettier": "^6.5.0",
"eslint-config-react": "^1.1.7",
"eslint-import-resolver-typescript": "^1.1.1",
"eslint-import-resolver-typescript": "^2.0.0",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jest": "^22.11.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-jest": "^23.0.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^2.0.0",
"husky": "^3.0.1",
"jest": "^24.8.0",
"lint-staged": "^9.2.0",
"husky": "^3.0.9",
"jest": "^24.9.0",
"lint-staged": "^9.4.2",
"prettier": "^1.18.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"rimraf": "^3.0.0",
"swiper": "^4.5.0",
"ts-jest": "^24.0.2",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "^4.37.0",
"webpack-cli": "^3.3.6"
"swiper": "^5.2.0",
"ts-jest": "^24.1.0",
"ts-loader": "^6.2.1",
"typescript": "^3.7.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"jest": {
"resetMocks": true,
Expand Down
9 changes: 5 additions & 4 deletions src/ReactIdSwiper.custom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,6 @@ const ReactIdSwiperCustom: FunctionComponent<ReactIdSwiperCustomProps> = props =
const buildSwiper = () => {
if (swiperNodeRef.current && swiperInstanceRef.current === null) {
swiperInstanceRef.current = new Swiper(swiperNodeRef.current, objectAssign({}, props));
getSwiperInstance(swiperInstanceRef.current);
}
};

Expand All @@ -105,7 +104,6 @@ const ReactIdSwiperCustom: FunctionComponent<ReactIdSwiperCustomProps> = props =
if (swiperInstanceRef.current !== null) {
swiperInstanceRef.current.destroy(true, true);
swiperInstanceRef.current = null;
getSwiperInstance(swiperInstanceRef.current);
}
};

Expand All @@ -119,7 +117,6 @@ const ReactIdSwiperCustom: FunctionComponent<ReactIdSwiperCustomProps> = props =
const updateSwiper = () => {
if (swiperInstanceRef.current !== null) {
swiperInstanceRef.current.update();
getSwiperInstance(swiperInstanceRef.current);
}
};

Expand Down Expand Up @@ -178,6 +175,10 @@ const ReactIdSwiperCustom: FunctionComponent<ReactIdSwiperCustomProps> = props =
}
});

useEffect(() => {
getSwiperInstance(swiperInstanceRef.current);
}, [swiperInstanceRef]);

// Check modules are loaded before rendering contents
const shouldRenderParallax = isModuleAvailable(modules, 'parallax') && parallax && parallaxEl;
const shouldRenderPagination =
Expand Down Expand Up @@ -222,6 +223,6 @@ ReactIdSwiperCustom.defaultProps = {
modules: []
};

ReactIdSwiperCustom.displayName = 'ReactIdSwiperCustom';
ReactIdSwiperCustom.displayName = 'ReactIdSwiper';

export default ReactIdSwiperCustom;
31 changes: 16 additions & 15 deletions src/ReactIdSwiper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,18 +46,6 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
// Define swiper instance ref
const swiperInstanceRef = useRef<SwiperInstance>(null);

// No render if wrapper elements are not provided
if (!children || !ContainerEl || !WrapperEl) {
return null;
}

// Validate children props
if (!validateChildren(children)) {
console.warn('Children should be react element or an array of react element!!');

return null;
}

// Get current active slide key
const getActiveSlideIndexFromProps = () => {
if (!activeSlideKey) {
Expand Down Expand Up @@ -92,15 +80,13 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
if (swiperInstanceRef.current !== null) {
swiperInstanceRef.current.destroy(true, true);
swiperInstanceRef.current = null;
getSwiperInstance(swiperInstanceRef.current);
}
};

// Initialize swiper
const buildSwiper = () => {
if (swiperNodeRef.current && swiperInstanceRef.current === null) {
swiperInstanceRef.current = new Swiper(swiperNodeRef.current, objectAssign({}, props));
getSwiperInstance(swiperInstanceRef.current);
}
};

Expand All @@ -114,7 +100,6 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
const updateSwiper = () => {
if (swiperInstanceRef.current !== null) {
swiperInstanceRef.current.update();
getSwiperInstance(swiperInstanceRef.current);
}
};

Expand Down Expand Up @@ -173,6 +158,22 @@ const ReactIdSwiper: FunctionComponent<ReactIdSwiperProps> = props => {
}
});

useEffect(() => {
getSwiperInstance(swiperInstanceRef.current);
}, [swiperInstanceRef]);

// No render if wrapper elements are not provided
if (!children || !ContainerEl || !WrapperEl) {
return null;
}

// Validate children props
if (!validateChildren(children)) {
console.warn('Children should be react element or an array of react element!!');

return null;
}

return (
<ContainerEl className={containerClass} dir={rtl && 'rtl'} ref={swiperNodeRef}>
{parallax && parallaxEl && renderParallax && renderParallax(props)}
Expand Down
Loading

0 comments on commit e13cace

Please sign in to comment.