feat: pick-view add active class (#6427)

* feat: pick-view add active class * feat: test update
ant-design · Nov 23, 2023 · b4489f3 · b4489f3
1 parent 20b70ba
commit b4489f3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git 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'))
   })

diff --git 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' : ''}