Merge pull request #3 from happy-func/bugfix_control_click

Bugfix control click #2
happy-func · Jun 15, 2022 · 357ee58 · 357ee58
2 parents e2e2303 + 2092daa
commit 357ee58
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 126 deletions.
diff --git a/.github/workflows/docs.yml 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/[email protected]
+        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
@@ -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 }}
diff --git 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
 
@@ -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/docs/control-nav.md 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
+
+<code
+  src="./demo/control-nav.tsx"
+  title="control nav"
+/>
diff --git 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 (
     <Swiper>
-      <Link href="//baidu.com">
+      <Link href="https://baidu.com">
         <Image src={NemoJpg} alt="图片1" />
       </Link>
       <Image src={ToyStoryJpg} alt="图片2" title="图片2" />

diff --git a/docs/demo/control-nav.tsx 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 (
+    <Swiper controlNavThumbs>
+      <Link href="https://baidu.com">
+        <Image src={NemoJpg} alt="图片1" thumb={NemoJpg} />
+      </Link>
+      <Image src={ToyStoryJpg} alt="图片2" title="图片2" thumb={ToyStoryJpg} />
+      <Image src={WalleJpg} alt="图片3" thumb={WalleJpg} />
+      <Image src={UpJpg} alt="图片4" thumb={UpJpg} />
+    </Swiper>
+  );
+}
diff --git 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 (
     <Swiper theme="bar" effect="boxRain">
-      <Link href="//baidu.com">
+      <Link href="https://baidu.com">
         <Image src={NemoJpg} alt="图片1" transition="fold" />
       </Link>
       <Image src={ToyStoryJpg} alt="图片2" title="图片2" />

diff --git 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 (
     <Swiper theme="bar" effect="boxRandom">
-      <Link href="//baidu.com">
+      <Link href="https://baidu.com">
         <Image src={NemoJpg} alt="图片1" />
       </Link>
       <Image src={ToyStoryJpg} alt="图片2" title="图片2" />

diff --git 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 (
     <Swiper theme="bar">
-      <Link href="//baidu.com">
+      <Link href="https://baidu.com">
         <Image src={NemoJpg} alt="图片1" />
       </Link>
       <Image src={ToyStoryJpg} alt="图片2" title="图片2" />

diff --git a/docs/effect.md b/docs/effect.md
@@ -0,0 +1,15 @@
+# Effect
+
+set effect on swiper config
+
+<code
+  src="./demo/effect.tsx"
+  title="effect"
+/>
+
+set effect on custom slide
+
+<code
+  src="./demo/custom-effect.tsx"
+  title="custom effect"
+/>
diff --git a/docs/index.md b/docs/index.md
@@ -1,100 +1,8 @@
-# react-nivo-slider
+# Basic
 
-## Introduce
-
-### Basic
+the default swiper settings
 
 <code
   src="./demo/Default.tsx"
   title="basic"
 />
-
-### Theme
-
-<code
-  src="./demo/theme.tsx"
-  title="theme"
-/>
-
-### Effect
-
-<code
-  src="./demo/effect.tsx"
-  title="effect"
-/>
-
-### Custom Effect
-
-<code
-  src="./demo/custom-effect.tsx"
-  title="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
@@ -0,0 +1,10 @@
+# Theme
+
+theme includes **`'bar' 'dark' 'light' 'default'`**
+
+set theme on swiper config, default it's `'default'`
+
+<code
+  src="./demo/theme.tsx"
+  title="theme"
+/>
diff --git 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",

diff --git 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 (
     <img
@@ -13,6 +13,7 @@ function Image(props: ImageProps) {
       style={{ ...(style || {}), width, visibility: 'hidden', display: 'inline' }}
       className={clsx(`nivo-slider-image`, className)}
       data-transition={transition}
+      data-thumb={thumb}
       {...rest}
     />
   );
@@ -27,6 +28,7 @@ interface ImageProps {
   alt?: string;
   title?: string;
   transition?: EffectType;
+  thumb?: string;
 }
 
 export default Image;