refactor(Carousel): refactor `Carousel` #2061

nooooooom · 2021-12-28T12:00:50Z

closes #1931, #1462, #1159, #1892, #1866, #1882, #1777.

vercel · 2021-12-28T12:00:54Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tusimple/naive-ui/AXvmaZM3PGLJ9hJrRXMrzFRD21aA
✅ Preview: https://naive-ui-git-fork-nooooooom-refactor-carousel-tusimple.vercel.app

lgtm-com · 2021-12-28T12:05:58Z

This pull request introduces 1 alert when merging 7ca2a6b into 2870228 - view on LGTM.com

new alerts:

1 for Useless assignment to local variable

XieZongChen · 2021-12-28T14:38:38Z

更新一下测试

nooooooom · 2021-12-28T14:39:46Z

更新一下测试

😉想一块去了

codecov · 2021-12-28T14:48:33Z

Codecov Report

Merging #2061 (9d840b3) into main (6046df1) will increase coverage by 0.13%.
The diff coverage is 53.83%.

@@            Coverage Diff             @@
##             main    #2061      +/-   ##
==========================================
+ Coverage   64.51%   64.64%   +0.13%     
==========================================
  Files         898      905       +7     
  Lines       17622    18129     +507     
  Branches     4176     4326     +150     
==========================================
+ Hits        11368    11719     +351     
- Misses       5464     5588     +124     
- Partials      790      822      +32

Impacted Files	Coverage Δ
src/carousel/src/styles/index.cssr.ts	`100.00% <ø> (ø)`
src/carousel/styles/light.ts	`100.00% <ø> (ø)`
src/modal/src/BodyWrapper.tsx	`47.56% <ø> (ø)`
src/carousel/src/CarouselDots.tsx	`29.31% <29.31%> (ø)`
src/carousel/src/utils.ts	`52.94% <52.94%> (ø)`
src/carousel/src/Carousel.tsx	`54.98% <53.09%> (+17.25%)`	⬆️
src/carousel/src/CarouselItem.tsx	`82.85% <82.85%> (ø)`
src/carousel/src/CarouselArrow.tsx	`87.50% <87.50%> (ø)`
src/_utils/vue/keep.ts	`83.33% <100.00%> (ø)`
src/carousel/index.ts	`100.00% <100.00%> (ø)`
... and 80 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6046df1...9d840b3. Read the comment docs.

07akioni · 2021-12-30T16:48:08Z

2021-12-31.12.47.32.mov

每次 refresh 的时候都会默认播放一下，需要处理

07akioni · 2021-12-30T16:52:11Z

Card 缺少点击左和点击右图切换的效果

07akioni · 2021-12-30T16:53:42Z

Outline �需要干掉

07akioni · 2021-12-30T16:54:41Z

这个用起来感觉不是很正常的样子

用 left arrow, right arrow, tab, enter 感觉都不太对

nooooooom · 2021-12-31T01:45:55Z

2021-12-31.12.47.32.mov
每次 refresh 的时候都会默认播放一下，需要处理

是有这个问题，我处理一下

07akioni · 2022-01-04T18:28:07Z

2022-01-05.2.26.47.mov

2022-01-05.2.27.32.mov

Transition 还是有问题

你应该是需要使用 isMounted 来判断一下应不应该 apply transtion

naive 很多地地方都会针对性的在 mounted 的时候关掉 transition

07akioni

PC 上默认还是把拖拽关掉
方格没法 focus，需要支持 a11y

控制一下用户的点击速度，不然动画会出问题，不应该出现从右往左跳的

正确：

2022-01-05.2.50.58.mov

错误：

2022-01-05.2.46.32.mov

07akioni · 2022-01-04T18:31:29Z

src/carousel/src/Carousel.tsx

 import { useConfig, useTheme } from '../../_mixins'
-import type { ThemeProps } from '../../_mixins'
+import { on, off } from 'evtd'


package import 都放在最前面

07akioni · 2022-01-04T18:31:40Z

src/carousel/src/Carousel.tsx

+  isTouchEvent,
+  getRealityIndex
+} from './utils'
+import { VResizeObserver } from 'vueuc'


package import 都放在最前面

07akioni · 2022-01-04T18:36:08Z

src/carousel/src/Carousel.tsx

+      const nextRealityIndex = getNextRealityIndex(index)
+      return nextRealityIndex !== null && nextRealityIndex === index
+    }
+    function isDisabledPrev (): boolean {


isPrevDisabled

07akioni · 2022-01-04T18:40:54Z

src/carousel/src/CarouselArrow.tsx

+            {
+              [`${mergedClsPrefix}-carousel__arrow--disabled`]: this.isDisabledPrev()
+            }


this.isDisabledPrev() && ${mergedClsPrefix}-carousel__arrow--disabled

这么搞行数少，好看点

2022-01-05.2.26.47.mov
2022-01-05.2.27.32.mov
Transition 还是有问题

你应该是需要使用 isMounted 来判断一下应不应该 apply transtion

naive 很多地地方都会针对性的在 mounted 的时候关掉 transition

好，这个应该是监听size的时候动的。不得不说你的电脑刷新好快，我都复现不出这种效果。

M1 还是牛逼的 😂

nooooooom · 2022-01-05T03:19:28Z

PC 上默认还是把拖拽关掉

方格没法 focus，需要支持 a11y

控制一下用户的点击速度，不然动画会出问题，不应该出现从右往左跳的

正确：

2022-01-05.2.50.58.mov
错误：

2022-01-05.2.46.32.mov

了解，内部其实做了切换的缓冲处理，只是丢给用户的 method 上面没有处理

PC 上默认还是把拖拽关掉

方格没法 focus，需要支持 a11y

控制一下用户的点击速度，不然动画会出问题，不应该出现从右往左跳的

正确：

2022-01-05.2.50.58.mov
错误：

2022-01-05.2.46.32.mov

这个实例是自己自定义的，用的作用域插槽，所以部分事件没有内部的处理，内部的点可以focus

src/carousel/src/Carousel.tsx

nooooooom · 2022-01-09T08:34:51Z

给 DEMO 搞一个套 <a /> 的，看看点击之后能不能跳走，有没有被咱们的时间处理器影响

没影响到，我们只对拖拽时的点击事件进行了阻止

07akioni · 2022-01-09T09:16:47Z

Preview

OK

07akioni · 2022-01-09T09:17:19Z

键盘控制的时候切换一下焦点，现在焦点会一直停留在聚焦的地方

这个还没有解决

07akioni · 2022-01-09T09:18:24Z

这个类型写的不是合法的 ts 类型

({ x: string }) => void 不合法

(info: { x: string }) => void 合法

07akioni · 2022-01-09T09:19:29Z

改成 prev，next 和 to 吧

07akioni · 2022-01-09T09:20:16Z

格式上缺空格 { xxx: y }

07akioni · 2022-01-09T09:23:46Z

Card 切换模式的感觉有点问题。

2022-01-09.5.21.45.mov

2022-01-09.5.22.22.mov

07akioni · 2022-01-09T09:24:05Z

Card 模式还有一个问题，从第一个会直接切换到第三个

2022-01-09.5.23.37.mov

07akioni · 2022-01-09T09:25:25Z

这个 DEMO 在不同模式切换的效果不好，给 carousel 来个 key 吧，强行切换 DOM

<n-carousel :key="type" />

2022-01-09.5.24.13.mov

lgtm-com · 2022-01-09T15:37:59Z

This pull request introduces 1 alert when merging 04264d5 into 71fa285 - view on LGTM.com

new alerts:

1 for Useless conditional

nooooooom added 2 commits December 28, 2021 19:37

refactor(Carousel): refactor Carousel

247ecf1

fix(Carousel): calc total view on auto slides size

7ca2a6b

vercel bot deployed to Preview December 28, 2021 12:00 View deployment

test(Carousel): udpate test

e01f33a

vercel bot deployed to Preview December 28, 2021 14:39 View deployment

test(Carousel): update test

317ebc2

vercel bot deployed to Preview December 28, 2021 15:34 View deployment

chore(Carousel)

07f19a5

vercel bot deployed to Preview January 4, 2022 08:47 View deployment

docs(Carousel): supplementary demo

af0d0af

vercel bot deployed to Preview January 4, 2022 08:55 View deployment

nooooooom added 2 commits January 4, 2022 17:03

fix(Carousel): server test

4ea295e

fix(Carousel): server test

705dc5d

vercel bot deployed to Preview January 4, 2022 09:06 View deployment

07akioni reviewed Jan 4, 2022

View reviewed changes

nooooooom added 2 commits January 5, 2022 12:08

chore(Carousel): docs and style

e2ebaa3

fix(Carousel): fix transitionend listen

790cc71

vercel bot had a problem deploying to Preview January 5, 2022 04:50 Failure

07akioni reviewed Jan 9, 2022

View reviewed changes

src/carousel/src/Carousel.tsx Outdated Show resolved Hide resolved

This was linked to issues Jan 9, 2022

<n-carousel> can't respond quickly and repeatedly on touch #1892

Closed

<n-carousel> 在触屏下，轮播内容无法点击 #1882

Closed

The style of Carousel boundary #1866

Closed

refactor(Carousel): transition and style

56fbd88

vercel bot deployed to Preview January 9, 2022 08:33 View deployment

feat(Carousel): dot focus and effect

12406cb

vercel bot deployed to Preview January 9, 2022 10:34 View deployment

test

4f44026

vercel bot deployed to Preview January 9, 2022 10:56 View deployment

chore: disabled transition duration on mounted instant

9d7a8b1

vercel bot deployed to Preview January 9, 2022 15:17 View deployment

fix(Carousel): autoplay

04264d5

vercel bot deployed to Preview January 9, 2022 15:29 View deployment

fix(Carousel): calc slide size

59b610a

vercel bot deployed to Preview January 9, 2022 16:29 View deployment

chore(Carousel): normalize

9d840b3

vercel bot deployed to Preview January 9, 2022 16:33 View deployment

07akioni merged commit c0d62e3 into tusen-ai:main Jan 9, 2022

nooooooom deleted the refactor-carousel branch February 16, 2022 14:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(Carousel): refactor `Carousel` #2061

refactor(Carousel): refactor `Carousel` #2061

nooooooom commented Dec 28, 2021 •

edited

Loading

vercel bot commented Dec 28, 2021 •

edited

Loading

lgtm-com bot commented Dec 28, 2021

XieZongChen commented Dec 28, 2021

nooooooom commented Dec 28, 2021

codecov bot commented Dec 28, 2021 •

edited

Loading

07akioni commented Dec 30, 2021

07akioni commented Dec 30, 2021

07akioni commented Dec 30, 2021 •

edited

Loading

07akioni commented Dec 30, 2021 •

edited

Loading

nooooooom commented Dec 31, 2021

07akioni commented Jan 4, 2022 •

edited

Loading

07akioni left a comment •

edited

Loading

07akioni Jan 4, 2022

07akioni Jan 4, 2022 •

edited

Loading

07akioni Jan 4, 2022

07akioni Jan 4, 2022

07akioni Jan 4, 2022

nooooooom Jan 5, 2022

07akioni Jan 5, 2022

nooooooom commented Jan 5, 2022 •

edited

Loading

nooooooom commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

lgtm-com bot commented Jan 9, 2022

refactor(Carousel): refactor Carousel #2061

refactor(Carousel): refactor Carousel #2061

Conversation

nooooooom commented Dec 28, 2021 • edited Loading

vercel bot commented Dec 28, 2021 • edited Loading

lgtm-com bot commented Dec 28, 2021

XieZongChen commented Dec 28, 2021

nooooooom commented Dec 28, 2021

codecov bot commented Dec 28, 2021 • edited Loading

Codecov Report

07akioni commented Dec 30, 2021

07akioni commented Dec 30, 2021

07akioni commented Dec 30, 2021 • edited Loading

07akioni commented Dec 30, 2021 • edited Loading

nooooooom commented Dec 31, 2021

07akioni commented Jan 4, 2022 • edited Loading

07akioni left a comment • edited Loading

Choose a reason for hiding this comment

07akioni Jan 4, 2022

Choose a reason for hiding this comment

07akioni Jan 4, 2022 • edited Loading

Choose a reason for hiding this comment

07akioni Jan 4, 2022

Choose a reason for hiding this comment

07akioni Jan 4, 2022

Choose a reason for hiding this comment

07akioni Jan 4, 2022

Choose a reason for hiding this comment

nooooooom Jan 5, 2022

Choose a reason for hiding this comment

07akioni Jan 5, 2022

Choose a reason for hiding this comment

nooooooom commented Jan 5, 2022 • edited Loading

nooooooom commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

07akioni commented Jan 9, 2022

lgtm-com bot commented Jan 9, 2022

refactor(Carousel): refactor `Carousel` #2061

refactor(Carousel): refactor `Carousel` #2061

nooooooom commented Dec 28, 2021 •

edited

Loading

vercel bot commented Dec 28, 2021 •

edited

Loading

codecov bot commented Dec 28, 2021 •

edited

Loading

07akioni commented Dec 30, 2021 •

edited

Loading

07akioni commented Dec 30, 2021 •

edited

Loading

07akioni commented Jan 4, 2022 •

edited

Loading

07akioni left a comment •

edited

Loading

07akioni Jan 4, 2022 •

edited

Loading

nooooooom commented Jan 5, 2022 •

edited

Loading