From d81f114f1e504b27391cc0bc083ea439c4004f27 Mon Sep 17 00:00:00 2001 From: Nguyen Hoang Phuc Date: Wed, 13 Mar 2019 19:34:58 +1100 Subject: [PATCH] 2.0.0 (#254) * removed libs * updated README & update types --- CHANGELOG.md | 6 +++- README.md | 94 +++++++++++++++++++++++++++++++-------------------- lib/index.js | 8 ----- lib/utils.js | 33 ------------------ package.json | 5 +-- src/types.ts | 3 +- test-setup.js | 10 ------ 7 files changed, 68 insertions(+), 91 deletions(-) delete mode 100644 lib/index.js delete mode 100644 lib/utils.js delete mode 100644 test-setup.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 4753d56..4a3e616 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # Change Log for React-id-swiper -## [*v2.0.0-beta*](https://github.com/kidjp85/react-id-swiper/compare/2.0.0-beta...1.6.9) - Released on Mar 13th, 2019 +## [v2.0.0](https://github.com/kidjp85/react-id-swiper/compare/2.0.0...2.0.0-beta) - Released on Mar 14th, 2019 + * Add tests + * Update README + +## [*v2.0.0-beta*](https://github.com/kidjp85/react-id-swiper/compare/2.0.0...1.6.9) - Released on Mar 13th, 2019 * Rewrite completely new package with Typescript + React Hooks Apis * Use `swiper` as peer-dependencies * Add new prop `getSwiper` function that returns `Swiper` instance. diff --git a/README.md b/README.md index d671fa5..ca03043 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,16 @@ [![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) +[![Build Status](https://travis-ci.org/kidjp85/react-id-swiper.svg?branch=master)](https://travis-ci.org/kidjp85/react-id-swiper) [![Package Quality](http://npm.packagequality.com/badge/react-id-swiper.png)](http://packagequality.com/#?package=react-id-swiper) -react-id-swiper ( Newest version 2.0.0-beta ) +react-id-swiper ( Newest version 2.0.0 ) ======================================== > A library to use [Swiper](http://www.idangero.us/swiper/get-started/) as a ReactJs component ![Demo](https://media.giphy.com/media/mByDrCTcJch4HVhmfi/giphy.gif) -## :warning: IMPORTANT NOTICE: Version 2.x requires React & ReactDOM's version >=16.8.0 to use [Hooks](https://reactjs.org/docs/hooks-intro.html) - What is Swiper? =============== @@ -41,41 +40,43 @@ React-id-swiper's original props | getSwiper | function | | Callback function that returns Swiper instance | -NOTE: You can also use Swiper's original params too.Swiper API documentation [HERE](http://idangero.us/swiper/api/) +NOTE: You can also use Swiper's original params too. Swiper API documentation [HERE](http://idangero.us/swiper/api/) + +## :warning: Important -DEMO -==== +From version 2.x.x requires React & ReactDOM ver >=16.8.0 to use [Hooks](https://reactjs.org/docs/hooks-intro.html) -You can see the demo with example code [HERE](http://kidjp85.github.io/react-id-swiper/) +## Installation and setup -## Installation -By npm +### Npm package + +> By npm ```bash npm install --save react-id-swiper ``` -By Yarn +> By Yarn ```bash yarn add react-id-swiper ``` -## You can also use the standalone UMD build +### CDN ```html - + ``` ```html - + ``` -## Recommendation +## Styling ->Swiper stylesheet file is required +**Swiper stylesheet file is required** -### Use Swiper stylesheet file from CDN +Use Swiper stylesheet file from CDN or `src/styles/` (supporting css, scss) ```html @@ -85,15 +86,11 @@ yarn add react-id-swiper ``` -### OR - -Use stylesheet file from src/styles/ folder (supporting css, scss) +## Examples -## Usage +Find more examples [here](http://kidjp85.github.io/react-id-swiper/) -### Example with default - ->Example with default params +### Default ```javascript import React from 'react'; @@ -112,9 +109,7 @@ const SimpleSwiper = () => ( export default SimpleSwiper; ``` -### Example with params - ->Example with navigation buttons +### Using params ```javascript import React from 'react'; @@ -148,9 +143,7 @@ const SimpleSwiperWithParams = () => { export default SimpleSwiperWithParams; ``` -### Example with manipulating swiper from outside swiper component - ->Example with navigation button using Hook +### Manipulating swiper from outside swiper component ```javascript import React, { useState } from 'react'; @@ -189,9 +182,7 @@ const ManipulatingSwiper = () => { export default ManipulatingSwiper; ``` -### How to add customized css classes for swiper? - ->Example with navigation button +### Adding customized css classes ```javascript const params = { @@ -206,9 +197,7 @@ const params = { } ``` -### How to add customized components? - ->Example with customized navigation button +### Adding customized components For customized rendering to work, you have to use same classname with params el. @@ -223,6 +212,39 @@ const params = { } ``` +### Workable slides + +Each slide should be wrapped by HTML element + +> BAD CODE + +```javascript + + Slide content + +``` + +> GOOD CODE + +```javascript + + Slide content + +``` + +## Bug report + +**Please use the prepared Codesanbox below to reproduce your issue. Thank you!!** + +[![Edit ReactIdSwiper - DEMO](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p8j61y7j7?fontsize=14) + + +## Authors + +* **Phuc Hoang Nguyen** - *Initial work* - [Phuc Hoang Nguyen](https://github.com/kidjp85) + +See also the list of [contributors](https://github.com/kidjp85/react-id-swiper/contributors) who participated in this project. + ## License -MIT +This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details diff --git a/lib/index.js b/lib/index.js deleted file mode 100644 index fcc5802..0000000 --- a/lib/index.js +++ /dev/null @@ -1,8 +0,0 @@ -"use strict"; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -var ReactIdSwiper_1 = __importDefault(require("./ReactIdSwiper")); -// React-id-swiper -exports.default = ReactIdSwiper_1.default; diff --git a/lib/utils.js b/lib/utils.js deleted file mode 100644 index 3c10325..0000000 --- a/lib/utils.js +++ /dev/null @@ -1,33 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -var react_1 = require("react"); -exports.classNames = function (el) { - if (typeof el === 'string') { - return el - .split('.') - .join(' ') - .trim(); - } - else if (el instanceof HTMLElement) { - return el.className; - } - return ''; -}; -exports.validateChildren = function (children) { - var isValid = true; - if (Array.isArray(children)) { - react_1.Children.forEach(children, function (child) { - if (!react_1.isValidElement(child)) { - isValid = false; - } - }); - } - else { - isValid = react_1.isValidElement(children); - } - return isValid; -}; -exports.isReactElement = function (element) { - return react_1.isValidElement(element) && - (typeof element.type === 'string' || typeof element.type === 'function'); -}; diff --git a/package.json b/package.json index c9d6b89..361d393 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { "name": "react-id-swiper", - "version": "2.0.0-beta", + "version": "2.0.0", "description": "ReactJs component for iDangerous Swiper", "main": "lib/index", "types": "lib/index.d.ts", "files": [ - "lib/**/*" + "lib/**/*", + "src/styles/**/*" ], "scripts": { "build:cleanup": "rimraf lib", diff --git a/src/types.ts b/src/types.ts index 78667dc..4ad7ce4 100644 --- a/src/types.ts +++ b/src/types.ts @@ -12,10 +12,11 @@ export interface ReactIdSwiperProps extends SwiperOptions { WrapperEl?: WrappedElementType; containerClass?: string; wrapperClass?: string; + slideClass?: string; rebuildOnUpdate?: boolean; shouldSwiperUpdate?: boolean; getSwiper?: (swiper: SwiperInstance) => void; - activeSlideKey?: string | number; + activeSlideKey?: string; renderScrollbar?: ReactIdSwiperRenderProps; renderPagination?: ReactIdSwiperRenderProps; renderPrevButton?: ReactIdSwiperRenderProps; diff --git a/test-setup.js b/test-setup.js deleted file mode 100644 index 1242616..0000000 --- a/test-setup.js +++ /dev/null @@ -1,10 +0,0 @@ -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -global.window = window; -global.document = window.document; -global.navigator = { - userAgent: 'node.js' -}; - -configure({ adapter: new Adapter() });