From 883f1cec70f2af4c402b51ed3c0d9c7f455ea61e Mon Sep 17 00:00:00 2001 From: zzx Date: Wed, 15 Jun 2022 16:07:11 +0800 Subject: [PATCH 1/6] bugfix --- README.md | 70 +++++++++++++++++++++++++++++++++ src/components/image/index.tsx | 4 +- src/components/swiper/index.tsx | 30 ++++---------- 3 files changed, 80 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 74f3b27..0b45a56 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,76 @@ export default function Default() { } ``` +## API + +### Swiper props + +| props | description | type | default | +| :-- | :-- | :-- | :-- | --- | +| className | - | string | - | +| style | - | CSSProperties | - | +| theme | theme | `default` \| `light` \ | `dark` \| `bar` | default | +| effect | transition effect | [EffectType](./#effecttype) | random | +| slices | swiper slice | number | 15 | +| boxCols | box col num | number | 8 | +| boxRows | - | number | 4 | +| animSpeed | animation duration(ms) | number | 500 | +| pauseTime | - | number | 3000 | +| startSlide | - | number | 0 | +| directionNav | show directionNav | boolean | true | +| controlNav | show controlNav | boolean | true | +| controlNavThumbs | show controlNavThumbs | boolean | false | +| pauseOnHover | - | boolean | true | +| manualAdvance | - | boolean | false | +| prevText | prev button text | string | Prev | +| nextText | next button text | string | nextText | +| randomStart | - | boolean | false | +| beforeChange | before slide change | function | - | +| afterChange | after slide change | function | - | +| afterLoad | after swiper init | function | - | +| lastSlide | before last slide start animation | function | - | +| slideshowEnd | on last slide show | function | - | + +### Image + +| props | description | type | default | +| :-- | :-- | :-- | :-- | +| className | - | string | - | +| style | - | CSSProperties | - | +| alt | - | string | - | +| title | caption inner text or node | string \| node | - | +| transition | - | [EffectType](./#effecttype) | - | +| thumb | thumb image src when controlNavThumbs it's true | string | - | + +### Link + +same as a tag + +### EffectType + +```tsx +type EffectType = + | 'random' + | `fade` + | `fold` + | `sliceDown` + | `sliceDownRight` + | `sliceDownLeft` + | `sliceUp` + | `sliceUpRight` + | `sliceUpLeft` + | `sliceUpDown` + | `sliceUpDownLeft` + | `sliceUpDownRight` + | `slideInRight` + | `slideInLeft` + | `boxRandom` + | `boxRain` + | `boxRainReverse` + | `boxRainGrow` + | `boxRainGrowReverse`; +``` + ## Support By [Nivo-Slider-jQuery](https://github.com/Codeinwp/Nivo-Slider-jQuery) diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx index 5629356..5bcfc5c 100644 --- a/src/components/image/index.tsx +++ b/src/components/image/index.tsx @@ -3,7 +3,7 @@ import { clsx } from '../../utils'; import { EffectType, SwiperContext } from '../swiper'; function Image(props: ImageProps) { - const { src, alt, title, className, style, transition, ...rest } = props; + const { src, alt, title, className, style, transition, thumb, ...rest } = props; const { swiperWidth: width } = useContext(SwiperContext); return ( ); @@ -27,6 +28,7 @@ interface ImageProps { alt?: string; title?: string; transition?: EffectType; + thumb?: string; } export default Image; diff --git a/src/components/swiper/index.tsx b/src/components/swiper/index.tsx index 35bbcf6..419f013 100644 --- a/src/components/swiper/index.tsx +++ b/src/components/swiper/index.tsx @@ -275,22 +275,11 @@ function Swiper(props: SwiperProps) { // Trigger the beforeChange callback beforeChange && beforeChange(); // Set current background before change - if (!nudge) { - setSliderImage((prevState) => ({ ...prevState, src: variablesRef.current.currentImage.src })); - } else { - if (nudge === 'prev') { - setSliderImage((prevState) => ({ - ...prevState, - src: variablesRef.current.currentImage.src, - })); - } - if (nudge === 'next') { - setSliderImage((prevState) => ({ - ...prevState, - src: variablesRef.current.currentImage.src, - })); - } - } + setSliderImage({ + height: 'auto', + src: variablesRef.current.currentImage.src, + alt: variablesRef.current.currentImage.alt || '', + }); variablesRef.current.currentSlide++; // Trigger the slideshowEnd callback if (variablesRef.current.currentSlide === variablesRef.current.totalSlides) { @@ -685,11 +674,6 @@ function Swiper(props: SwiperProps) { if (e.target.dataset.src === currentImage.src) return false; clearInterval(timer.current); timer.current = 0; - setSliderImage({ - height: 'auto', - src: variablesRef.current.currentImage.src, - alt: variablesRef.current.currentImage.alt || '', - }); variablesRef.current.currentSlide = e.target.dataset.rel - 1; nivoRun('control'); } @@ -795,7 +779,7 @@ function Swiper(props: SwiperProps) { {controlNav && (
{slides.map((item, index) => { - if (item.props['data-thumb']) { + if (controlNavThumbs) { return ( - thumb + thumb ); } From 51fda32aa04d4278d28b1c012368d6f957e530af Mon Sep 17 00:00:00 2001 From: zzx Date: Wed, 15 Jun 2022 16:29:30 +0800 Subject: [PATCH 2/6] bugfix controlNavThumbs click error --- src/components/swiper/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/swiper/index.tsx b/src/components/swiper/index.tsx index 419f013..4fd0ca4 100644 --- a/src/components/swiper/index.tsx +++ b/src/components/swiper/index.tsx @@ -670,11 +670,15 @@ function Swiper(props: SwiperProps) { // controlEl Click function onControlElClick(e: any) { e.persist(); + let target = e.target; + if (target.tagName === `IMG`) { + target = target.parentNode; + } if (variablesRef.current.running) return false; - if (e.target.dataset.src === currentImage.src) return false; + if (target.dataset.src === currentImage.src) return false; clearInterval(timer.current); timer.current = 0; - variablesRef.current.currentSlide = e.target.dataset.rel - 1; + variablesRef.current.currentSlide = target.dataset.rel - 1; nivoRun('control'); } // onresize From db33689b1ad9ff2e496236225b494036f629b234 Mon Sep 17 00:00:00 2001 From: zzx Date: Wed, 15 Jun 2022 16:45:40 +0800 Subject: [PATCH 3/6] readme --- README.md | 2 +- docs/control-nav.md | 10 ++++ docs/demo/Default.tsx | 2 +- docs/demo/control-nav.tsx | 18 +++++++ docs/demo/custom-effect.tsx | 2 +- docs/demo/effect.tsx | 2 +- docs/demo/theme.tsx | 2 +- docs/effect.md | 15 ++++++ docs/index.md | 96 +------------------------------------ docs/theme.md | 10 ++++ 10 files changed, 60 insertions(+), 99 deletions(-) create mode 100644 docs/control-nav.md create mode 100644 docs/demo/control-nav.tsx create mode 100644 docs/effect.md create mode 100644 docs/theme.md diff --git a/README.md b/README.md index 0b45a56..93b2af2 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ same as a tag ```tsx type EffectType = - | 'random' + | `random` | `fade` | `fold` | `sliceDown` diff --git a/docs/control-nav.md b/docs/control-nav.md new file mode 100644 index 0000000..a5ceace --- /dev/null +++ b/docs/control-nav.md @@ -0,0 +1,10 @@ +# controlNav + +`controlNav` default it's `true`, `controlNavThumbs` default it's `false` + +set `controlNavThumbs` `true` to show custom thumbs + + diff --git a/docs/demo/Default.tsx b/docs/demo/Default.tsx index 041e5c0..8566b5c 100644 --- a/docs/demo/Default.tsx +++ b/docs/demo/Default.tsx @@ -7,7 +7,7 @@ import { NemoJpg, ToyStoryJpg, UpJpg, WalleJpg } from './img'; export default function Default() { return ( - + 图片1 图片2 diff --git a/docs/demo/control-nav.tsx b/docs/demo/control-nav.tsx new file mode 100644 index 0000000..35443a9 --- /dev/null +++ b/docs/demo/control-nav.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Image, Link, Swiper } from 'react-nivo-slider'; +import 'react-nivo-slider/es/style'; +import 'react-nivo-slider/es/style/default'; +import { NemoJpg, ToyStoryJpg, UpJpg, WalleJpg } from './img'; + +export default function Default() { + return ( + + + 图片1 + + 图片2 + 图片3 + 图片4 + + ); +} diff --git a/docs/demo/custom-effect.tsx b/docs/demo/custom-effect.tsx index 88ccbbf..53e21f9 100644 --- a/docs/demo/custom-effect.tsx +++ b/docs/demo/custom-effect.tsx @@ -7,7 +7,7 @@ import { NemoJpg, ToyStoryJpg, UpJpg, WalleJpg } from './img'; export default function CustomEffect() { return ( - + 图片1 图片2 diff --git a/docs/demo/effect.tsx b/docs/demo/effect.tsx index 693ed88..ece3452 100644 --- a/docs/demo/effect.tsx +++ b/docs/demo/effect.tsx @@ -7,7 +7,7 @@ import { NemoJpg, ToyStoryJpg, UpJpg, WalleJpg } from './img'; export default function Effect() { return ( - + 图片1 图片2 diff --git a/docs/demo/theme.tsx b/docs/demo/theme.tsx index 96473fa..d37fefe 100644 --- a/docs/demo/theme.tsx +++ b/docs/demo/theme.tsx @@ -10,7 +10,7 @@ import { NemoJpg, ToyStoryJpg, UpJpg, WalleJpg } from './img'; export default function Theme() { return ( - + 图片1 图片2 diff --git a/docs/effect.md b/docs/effect.md new file mode 100644 index 0000000..af535de --- /dev/null +++ b/docs/effect.md @@ -0,0 +1,15 @@ +# Effect + +set effect on swiper config + + + +set effect on custom slide + + diff --git a/docs/index.md b/docs/index.md index e874100..cec1610 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,100 +1,8 @@ -# react-nivo-slider +# Basic -## Introduce - -### Basic +the default swiper settings - -### Theme - - - -### Effect - - - -### Custom Effect - - - -## API - -### Swiper props - -| props | description | type | default | -| :-- | :-- | :-- | :-- | -| className | - | string | - | -| style | - | CSSProperties | - | -| theme | theme | `default` \| `light` \| `dark` \| `bar` | default | -| effect | transition effect | [EffectType](./#effecttype) | random | -| slices | swiper slice | number | 15 | -| boxCols | box col num | number | 8 | -| boxRows | - | number | 4 | -| animSpeed | animation duration(ms) | number | 500 | -| pauseTime | - | number | 3000 | -| startSlide | - | number | 0 | -| directionNav | show directionNav | boolean | true | -| controlNav | show controlNav | boolean | true | -| controlNavThumbs | show controlNavThumbs | boolean | false | -| pauseOnHover | - | boolean | true | -| manualAdvance | - | boolean | false | -| prevText | prev button text | string | Prev | -| nextText | next button text | string | nextText | -| randomStart | - | boolean | false | -| beforeChange | before slide change | function | - | -| afterChange | after slide change | function | - | -| afterLoad | after swiper init | function | - | -| lastSlide | before last slide start animation | function | - | -| slideshowEnd | on last slide show | function | - | - -### Link - -same as a tag - -### Image - -| props | description | type | default | -| :--------- | :------------------------- | :-------------------------- | :------ | -| className | - | string | - | -| style | - | CSSProperties | - | -| alt | - | string | - | -| title | caption inner text or node | string \| node | - | -| transition | - | [EffectType](./#effecttype) | - | - -### EffectType - -``` -type EffectType = - | 'random' - | `fade` - | `fold` - | `sliceDown` - | `sliceDownRight` - | `sliceDownLeft` - | `sliceUp` - | `sliceUpRight` - | `sliceUpLeft` - | `sliceUpDown` - | `sliceUpDownLeft` - | `sliceUpDownRight` - | `slideInRight` - | `slideInLeft` - | `boxRandom` - | `boxRain` - | `boxRainReverse` - | `boxRainGrow` - | `boxRainGrowReverse`; -``` diff --git a/docs/theme.md b/docs/theme.md new file mode 100644 index 0000000..82ecac3 --- /dev/null +++ b/docs/theme.md @@ -0,0 +1,10 @@ +# Theme + +theme includes **`'bar' 'dark' 'light' 'default'`** + +set theme on swiper config, default it's `'default'` + + From 78d8bd162d073ebd6d3f85a2fc6c8ed655932906 Mon Sep 17 00:00:00 2001 From: zzx Date: Wed, 15 Jun 2022 16:53:13 +0800 Subject: [PATCH 4/6] readme --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 93b2af2..6c0f9ba 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # react-nivo-slider -![version](https://img.shields.io/github/package-json/v/happy-func/react-nivo-slider/main) ![typescript](https://img.shields.io/npm/types/react-nivo-slider) ![esm](https://img.shields.io/static/v1?label=build&message=esm&color=blue) ![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-nivo-slider/1.0.0) ![GitHub Repo stars](https://img.shields.io/github/stars/happy-func/react-swim-button?style=social) +![version](https://img.shields.io/github/package-json/v/happy-func/react-nivo-slider/main) ![typescript](https://img.shields.io/npm/types/react-nivo-slider) ![esm](https://img.shields.io/static/v1?label=build&message=esm&color=blue) ![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-nivo-slider/1.0.1) ![GitHub Repo stars](https://img.shields.io/github/stars/happy-func/react-swim-button?style=social) ## Getting Started diff --git a/package.json b/package.json index b6b76cb..24a6775 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "license": "MIT", "name": "react-nivo-slider", - "version": "1.0.0", + "version": "1.0.1", "scripts": { "start": "dumi dev", "docs:build": "dumi build", From 9db58bcf673dfbea5b509b808eca5c855a89c5a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=B0=94=E7=8E=8B?= <46747508+happy-func@users.noreply.github.com> Date: Wed, 15 Jun 2022 16:55:26 +0800 Subject: [PATCH 5/6] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6c0f9ba..92f6652 100644 --- a/README.md +++ b/README.md @@ -42,10 +42,10 @@ export default function Default() { ### Swiper props | props | description | type | default | -| :-- | :-- | :-- | :-- | --- | +| :-- | :-- | :-- | :-- | | className | - | string | - | | style | - | CSSProperties | - | -| theme | theme | `default` \| `light` \ | `dark` \| `bar` | default | +| theme | theme | `default` \| `light` \| `dark` \| `bar` | default | | effect | transition effect | [EffectType](./#effecttype) | random | | slices | swiper slice | number | 15 | | boxCols | box col num | number | 8 | From 64b1f573ebe84549bcf45622c171aa195dc1347c Mon Sep 17 00:00:00 2001 From: zzx Date: Wed, 15 Jun 2022 17:24:11 +0800 Subject: [PATCH 6/6] workflow --- .github/workflows/docs.yml | 40 +++++++++++++++++++++++++++++++++++ .github/workflows/release.yml | 35 ++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 .github/workflows/docs.yml create mode 100644 .github/workflows/release.yml diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 0000000..9d845f2 --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,40 @@ +name: Document + +on: + workflow_dispatch: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build: + runs-on: ${{ matrix.os }} # runs a test on Ubuntu, Windows and macOS + + strategy: + matrix: + node: [12] + os: [ubuntu-latest] + + steps: + - uses: actions/checkout@v1 + - name: Use Node.js 16.x + uses: actions/setup-node@v1 + with: + node-version: 16.x + + - name: yarn install, build + run: | + yarn + yarn docs:build + - name: Deploy + uses: JamesIves/github-pages-deploy-action@3.7.1 + with: + ACCESS_TOKEN: ${{ secrets.DEPLOY_KEY }} + BRANCH: gh-pages + FOLDER: docs-dist + REPOSITORY_NAME: happy-func/react-nivo-slider + TARGET_FOLDER: ./ + + env: + CI: true diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..a565410 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,35 @@ +name: Release + +on: + push: + tags: + - 'v*' + +jobs: + build: + name: Build Package + runs-on: ubuntu-latest + strategy: + matrix: + node: [ 12 ] + os: [ ubuntu-latest ] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js 16.x + uses: actions/setup-node@v1 + with: + node-version: 16.x + + - name: yarn install, build + run: | + yarn + yarn build + tar -zcvf release.tar.gz es src .fatherrc.ts .prettierignore .prettierrc.js .umirc.ts package.json tsconfig.json typings.d.ts + + - name: Create Release + uses: softprops/action-gh-release@v1 + with: + files: "release.tar.gz" + env: + GITHUB_TOKEN: ${{ secrets.DEPLOY_KEY }}