[improvement] Picker: add class for selected item (#3830)

src/picker/PickerColumn.js

@@ -118,8 +118,7 @@ export default createComponent({
       const distance = this.offset - this.momentumOffset;
       const duration = Date.now() - this.touchStartTime;
       const allowMomentum =
-        duration < MOMENTUM_LIMIT_TIME &&
-        Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
+        duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
 
       if (allowMomentum) {
         this.momentum(distance, duration);
@@ -195,17 +194,13 @@ export default createComponent({
     },
 
     getIndexByOffset(offset) {
-      return range(
-        Math.round(-offset / this.itemHeight),
-        0,
-        this.count - 1
-      );
+      return range(Math.round(-offset / this.itemHeight), 0, this.count - 1);
     },
 
     momentum(distance, duration) {
       const speed = Math.abs(distance / duration);
 
-      distance = this.offset + speed / 0.002 * (distance < 0 ? -1 : 1);
+      distance = this.offset + (speed / 0.002) * (distance < 0 ? -1 : 1);
 
       const index = this.getIndexByOffset(distance);
 
@@ -259,7 +254,10 @@ export default createComponent({
               style={optionStyle}
               class={[
                 'van-ellipsis',
-                bem('item', { disabled: isOptionDisabled(option) })
+                bem('item', {
+                  disabled: isOptionDisabled(option),
+                  selected: index === this.currentIndex
+                })
               ]}
               domPropsInnerHTML={this.getOptionText(option)}
               onClick={() => {

src/picker/test/__snapshots__/demo.spec.js.snap

@@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
@@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>
@@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
@@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
           </ul>
         </div>
@@ -96,7 +96,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
@@ -104,7 +104,7 @@ exports[`renders demo correctly 1`] = `
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>
@@ -121,7 +121,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
           </ul>
         </div>
@@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
             <li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
           </ul>

src/picker/test/__snapshots__/index.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`column watch default index 1`] = `
 <div class="van-picker-column">
   <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
-    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">1</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
@@ -19,7 +19,7 @@ exports[`column watch default index 2`] = `
   <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
     <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
-    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
+    <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>