Repository: ant-design/ant-design-mobile
Pull request #6427 (2023-11-10 02:38:28)

feat: pick-view add active class
resolved: #6390

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Attention: `54 lines` in your changes are missing coverage. Please review.
> Comparison is base [(`9d0edaa`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/9d0edaa29a098f9a30bb4ef5d6cd8d6a326ec40c?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 92.36% compared to head [(`21ec85a`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 92.08%.
> Report is 33 commits behind head on feature.

<details><summary>Additional details and impacted files</summary>


```diff
@@             Coverage Diff             @@
##           feature    #6427      +/-   ##
===========================================
- Coverage    92.36%   92.08%   -0.29%     
===========================================
  Files          307      316       +9     
  Lines         6617     6859     +242     
  Branches      1636     1717      +81     
===========================================
+ Hits          6112     6316     +204     
- Misses         470      505      +35     
- Partials        35       38       +3     
```


| [Files](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/action-sheet/action-sheet.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvYWN0aW9uLXNoZWV0L2FjdGlvbi1zaGVldC50c3g=) | `100.00% <100.00%> (ø)` | |
| [src/components/auto-center/auto-center.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvYXV0by1jZW50ZXIvYXV0by1jZW50ZXIudHN4) | `100.00% <100.00%> (ø)` | |
| [src/components/avatar/avatar.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvYXZhdGFyL2F2YXRhci50c3g=) | `100.00% <100.00%> (ø)` | |
| [src/components/badge/badge.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvYmFkZ2UvYmFkZ2UudHN4) | `100.00% <100.00%> (ø)` | |
| [src/components/button/button.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi50c3g=) | `93.54% <100.00%> (-0.21%)` | :arrow_down: |
| [src/components/calendar-picker-view/convert.ts](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXItcGlja2VyLXZpZXcvY29udmVydC50cw==) | `100.00% <100.00%> (ø)` | |
| [src/components/calendar-picker-view/index.ts](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXItcGlja2VyLXZpZXcvaW5kZXgudHM=) | `100.00% <100.00%> (ø)` | |
| [src/components/calendar-picker/index.ts](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXItcGlja2VyL2luZGV4LnRz) | `100.00% <100.00%> (ø)` | |
| [src/components/calendar/calendar.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXIvY2FsZW5kYXIudHN4) | `85.90% <100.00%> (+0.38%)` | :arrow_up: |
| [src/components/capsule-tabs/capsule-tabs.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2Fwc3VsZS10YWJzL2NhcHN1bGUtdGFicy50c3g=) | `97.91% <100.00%> (ø)` | |
| ... and [125 more](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | |


</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6427?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6427.surge.sh
zombieJ: 缺 test case 😼
1587315093: > 缺 test case 😼

好的 
github-actions[bot]: Deploy PR preview failed.
1587315093: > 缺 test case 😼

done ~

Patch:
diff --git a/src/components/picker-view/wheel.tsx b/src/components/picker-view/wheel.tsx
index 9283ec423..fea128293 100644
--- a/src/components/picker-view/wheel.tsx
+++ b/src/components/picker-view/wheel.tsx
@@ -14,6 +14,7 @@ import isEqual from 'lodash/isEqual'
 import { useIsomorphicLayoutEffect } from 'ahooks'
 import { measureCSSLength } from '../../utils/measure-css-length'
 import { supportsPassive } from '../../utils/supports-passive'
+import classNames from 'classnames'
 
 const classPrefix = `adm-picker-view`
 
@@ -271,15 +272,19 @@ export const Wheel = memo<Props>(
           {column.map((item, index) => {
             const selected = props.value === item.value
             if (selected) selectedIndex = index
+
             function handleClick() {
               draggingRef.current = false
               scrollSelect(index)
             }
+
             return (
               <div
                 key={item.key ?? item.value}
-                data-selected={item.value === value}
-                className={`${classPrefix}-column-item`}
+                data-selected={selected}
+                className={classNames(`${classPrefix}-column-item`, {
+                  [`${classPrefix}-column-item-active`]: selected,
+                })}
                 onClick={handleClick}
                 aria-hidden={!selected}
                 aria-label={selected ? 'active' : ''}


Test patch:
diff --git a/src/components/picker-view/tests/picker-view.test.tsx b/src/components/picker-view/tests/picker-view.test.tsx
index adf876d46..1ce93ee17 100644
--- a/src/components/picker-view/tests/picker-view.test.tsx
+++ b/src/components/picker-view/tests/picker-view.test.tsx
@@ -89,6 +89,11 @@ describe('PickerView', () => {
     const wheelEl = document.body.querySelectorAll(
       `.${classPrefix}-column-wheel`
     )[0]
+
+    const itemList = document.body.querySelectorAll(
+      `.${classPrefix}-column-item`
+    )
+
     fireEvent.mouseDown(wheelEl, {
       clientY: 0,
       buttons: 1,
@@ -99,6 +104,8 @@ describe('PickerView', () => {
     })
     fireEvent.mouseUp(wheelEl)
     expect(wheelEl).toHaveStyle('transform: translateY(-68px)')
+    // 滚到了第3个item
+    expect(itemList[2]).toHaveClass(`${classPrefix}-column-item-active`)
     fireEvent.click(screen.getByText('change'))
     await waitFor(() => expect(wheelEl).toHaveStyle('transform: none'))
   })