feat(carousel): add arrow prop (#451)

* feat:n-input Support hidden password * feat(form): support require-mark-placement(#171) * Revert "feat(form): support require-mark-placement(#171)" This reverts commit 0627777. * Revert "feat:n-input Support hidden password" This reverts commit ea64917. * WIP * feat(carousel): add arrow prop * feat(carousel): fix code * feat(carousel): fix code and add test * feat(carousel): fix style * feat(carousel): add test
tusen-ai · Jul 9, 2021 · b3a3497 · b3a3497
1 parent 47761e3
commit b3a3497
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 0 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -18,6 +18,7 @@
 - `n-tree` exports `TreeDragInfo` & `TreeDropInfo` type.
 - `n-empty` export `icon` slot.
 - `useDialog` option add `maskClosable` prop, closes [#420](https://github.com/TuSimple/naive-ui/issues/420).
+- `n-carousel` add `show-arrow` prop.
 
 ### Fixes
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -18,6 +18,7 @@
 - `n-tree` 导出 `TreeDragInfo` & `TreeDropInfo` 类型
 - `n-empty` 导出 `icon` slot
 - `useDialog` 选项增加 `maskClosable` 属性，关闭 [#420](https://github.com/TuSimple/naive-ui/issues/420)
+- `n-carousel` 新增 `show-arrow` 属性
 
 ### Fixes
 

diff --git a/src/carousel/demos/enUS/index.demo-entry.md b/src/carousel/demos/enUS/index.demo-entry.md
@@ -9,6 +9,7 @@ basic
 autoplay
 hover
 dot-placement
+show-arrow
 ```
 
 ## API
@@ -17,6 +18,7 @@ dot-placement
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| show-arrow | `boolean` | `false` | Whether to show arrow button. |
 | autoplay | `boolean` | `false` | Whether to scroll automatically. |
 | interval | `number` | `5000` | Auto play interval. |
 | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Dot placement in the panel. |

diff --git a/src/carousel/demos/enUS/show-arrow.demo.md b/src/carousel/demos/enUS/show-arrow.demo.md
@@ -0,0 +1,30 @@
+# Show Arrow Button
+
+```html
+<n-carousel show-arrow>
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/fav/1623979004.jpg!/fw/600/quality/77/ignore-error/true"
+  />
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/news/1623372884.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
+  />
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/news/1623177220.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
+  />
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/news/1623152423.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
+  />
+</n-carousel>
+```
+
+```css
+.carousel-img {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+}
+```
diff --git a/src/carousel/demos/zhCN/index.demo-entry.md b/src/carousel/demos/zhCN/index.demo-entry.md
@@ -9,6 +9,7 @@ basic
 autoplay
 hover
 dot-placement
+show-arrow
 ```
 
 ## API
@@ -17,6 +18,7 @@ dot-placement
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| show-arrow | `boolean` | `false` | 是否显示箭头按钮 |
 | autoplay | `boolean` | `false` | 是否自动播放 |
 | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | 轮播指示点位置 |
 | interval | `number` | `5000` | 自动播放的间隔 |

diff --git a/src/carousel/demos/zhCN/show-arrow.demo.md b/src/carousel/demos/zhCN/show-arrow.demo.md
@@ -0,0 +1,30 @@
+# 显示箭头按钮
+
+```html
+<n-carousel show-arrow>
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/fav/1623979004.jpg!/fw/600/quality/77/ignore-error/true"
+  />
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/news/1623372884.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
+  />
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/news/1623177220.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
+  />
+  <img
+    class="carousel-img"
+    src="https://s.anw.red/news/1623152423.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
+  />
+</n-carousel>
+```
+
+```css
+.carousel-img {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+}
+```
diff --git a/src/carousel/src/Carousel.tsx b/src/carousel/src/Carousel.tsx
@@ -18,12 +18,14 @@ import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { flatten } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
+import { BackwardIcon, ForwardIcon } from '../../_internal/icons'
 import { carouselLight } from '../styles'
 import type { CarouselTheme } from '../styles'
 import style from './styles/index.cssr'
 
 const carouselProps = {
   ...(useTheme.props as ThemeProps<CarouselTheme>),
+  showArrow: Boolean,
   autoplay: Boolean,
   dotPlacement: {
     type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
@@ -271,6 +273,7 @@ export default defineComponent({
   },
   render () {
     const {
+      showArrow,
       dotPlacement,
       mergedClsPrefix,
       current,
@@ -350,6 +353,34 @@ export default defineComponent({
             )
           })}
         </div>
+        {showArrow && [
+          <div
+            class={[
+              `${mergedClsPrefix}-carousel__arrow`,
+              `${mergedClsPrefix}-carousel__arrow--${
+                vertical ? 'bottom' : 'right'
+              }`
+            ]}
+            role="button"
+            onClick={() => {
+              this.next()
+            }}
+          >
+            <ForwardIcon />
+          </div>,
+          <div
+            class={[
+              `${mergedClsPrefix}-carousel__arrow`,
+              `${mergedClsPrefix}-carousel__arrow--${vertical ? 'top' : 'left'}`
+            ]}
+            role="button"
+            onClick={() => {
+              this.prev()
+            }}
+          >
+            <BackwardIcon />
+          </div>
+        ]}
       </div>
     )
   }

diff --git a/src/carousel/src/styles/index.cssr.ts b/src/carousel/src/styles/index.cssr.ts
@@ -47,6 +47,55 @@ export default cB('carousel', `
       margin-right: 0;
     `)
   ]),
+  cE('arrow', `
+    position: absolute;
+    transition: transform .1s var(--bezier);
+    transform: scale(1);
+    cursor: pointer;
+    height: 50px;
+    width: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dot-color-active);
+  `, [
+    cM('right', `
+      transform: translateY(-50%);
+      top: 50%;
+      right: 0;
+    `, [
+      c('&:hover', {
+        transform: 'translateY(-50%) scale(1.1)'
+      })
+    ]),
+    cM('left', `
+      transform: translateY(-50%);
+      top: 50%;
+      left: 0;
+    `, [
+      c('&:hover', {
+        transform: 'translateY(-50%) scale(1.1)'
+      })
+    ]),
+    cM('top', `
+      transform: translateX(-50%) rotate(90deg);
+      top: 0;
+      left: 50%;
+    `, [
+      c('&:hover', {
+        transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
+      })
+    ]),
+    cM('bottom', `
+      transform: translateX(-50%) rotate(90deg);
+      bottom: 0;
+      left: 50%;
+    `, [
+      c('&:hover', {
+        transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
+      })
+    ])
+  ]),
   cM('left', [
     cE('slides', `
       flex-direction: column;

diff --git a/src/carousel/tests/Carousel.spec.ts b/src/carousel/tests/Carousel.spec.ts
@@ -1,5 +1,7 @@
+import { h, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { NCarousel } from '../index'
+import { sleep } from 'seemly'
 
 describe('n-carousel', () => {
   it('should work with import on demand', () => {
@@ -15,4 +17,75 @@ describe('n-carousel', () => {
       )
     }
   })
+
+  it('should work with `showArrow` prop', async () => {
+    const wrapper = mount(NCarousel)
+
+    const dotToArrow = [
+      {
+        dot: ['top', 'bottom'],
+        arrow: ['left', 'right']
+      },
+      {
+        dot: ['left', 'right'],
+        arrow: ['top', 'bottom']
+      }
+    ]
+
+    for (const item of dotToArrow) {
+      for (const dotItem of item.dot) {
+        await wrapper.setProps({ showArrow: true, dotPlacement: dotItem })
+
+        expect(
+          wrapper.find(`.n-carousel__arrow--${item.arrow[0]}`).exists()
+        ).toBe(true)
+        expect(
+          wrapper.find(`.n-carousel__arrow--${item.arrow[1]}`).exists()
+        ).toBe(true)
+      }
+    }
+  })
+
+  it('arrow button should work', async () => {
+    const wrapper = mount(NCarousel, {
+      slots: {
+        default: () => {
+          return [
+            h('img', {
+              style: 'width: 100%; height: 240px; object-fit: cover;',
+              src: 'https://s.anw.red/news/1623152423.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true'
+            }),
+            h('img', {
+              style: 'width: 100%; height: 240px; object-fit: cover;',
+              src: 'https://s.anw.red/news/1623152423.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true'
+            })
+          ]
+        }
+      }
+    })
+
+    await wrapper.setProps({
+      showArrow: true
+    })
+
+    const slidesDOMArray = wrapper.find('.n-carousel__slides').findAll('div')
+
+    expect(slidesDOMArray[1].attributes('aria-hidden')).toBe('false')
+
+    wrapper
+      .find('.n-carousel__arrow--right')
+      .trigger('click')
+      .then(async () => {
+        expect(slidesDOMArray[2].attributes('aria-hidden')).toBe('false')
+        await sleep(1000)
+        nextTick(() => {
+          wrapper
+            .find('.n-carousel__arrow--left')
+            .trigger('click')
+            .then(() => {
+              expect(slidesDOMArray[1].attributes('aria-hidden')).toBe('false')
+            })
+        })
+      })
+  })
 })