From 35ccebeea27ea9d58d7e1b66e195c2ede38b904b Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 11 Jul 2019 19:35:06 +0800 Subject: [PATCH] [improvement] Picker: add class for selected item (#3830) --- src/area/test/__snapshots__/demo.spec.js.snap | 16 +++--- .../test/__snapshots__/index.spec.js.snap | 52 +++++++++---------- .../test/__snapshots__/demo.spec.js.snap | 28 +++++----- src/picker/PickerColumn.js | 16 +++--- .../test/__snapshots__/demo.spec.js.snap | 16 +++--- .../test/__snapshots__/index.spec.js.snap | 4 +- 6 files changed, 65 insertions(+), 67 deletions(-) diff --git a/src/area/test/__snapshots__/demo.spec.js.snap b/src/area/test/__snapshots__/demo.spec.js.snap index 8bb4b977a..c5953b61e 100644 --- a/src/area/test/__snapshots__/demo.spec.js.snap +++ b/src/area/test/__snapshots__/demo.spec.js.snap @@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
    -
  • 北京市
    • +
  • 北京市
  • 天津市
  • 河北省
  • 山西省
    • @@ -51,12 +51,12 @@ exports[`renders demo correctly 1`] = `
    -
  • 北京市
    • +
  • 北京市
    -
  • 东城区
    • +
  • 东城区
  • 西城区
  • 朝阳区
  • 丰台区
    • @@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = `
  • 黑龙江省
  • 上海市
  • 江苏省
    • -
  • 浙江省
    • +
  • 浙江省
  • 安徽省
  • 福建省
  • 江西省
    • @@ -131,7 +131,7 @@ exports[`renders demo correctly 1`] = `
    • 杭州市
    • 宁波市
      • -
    • 温州市
      • +
    • 温州市
    • 嘉兴市
    • 湖州市
    • 绍兴市
      • @@ -144,7 +144,7 @@ exports[`renders demo correctly 1`] = `
    -
  • 鹿城区
    • +
  • 鹿城区
  • 龙湾区
  • 瓯海区
  • 洞头区
    • @@ -174,7 +174,7 @@ exports[`renders demo correctly 1`] = `
      -
    • 北京市
      • +
    • 北京市
    • 天津市
    • 河北省
    • 山西省
      • @@ -213,7 +213,7 @@ exports[`renders demo correctly 1`] = `
      -
    • 北京市
      • +
    • 北京市
    diff --git a/src/area/test/__snapshots__/index.spec.js.snap b/src/area/test/__snapshots__/index.spec.js.snap index 15e07ccc9..7d05b31f5 100644 --- a/src/area/test/__snapshots__/index.spec.js.snap +++ b/src/area/test/__snapshots__/index.spec.js.snap @@ -10,19 +10,19 @@ exports[`change option 1`] = `
      -
    • 北京市
      • +
    • 北京市
    • 天津市
      -
    • 北京市
      • +
    • 北京市
    • 县
      -
    • 东城区
      • +
    • 东城区
    • 西城区
    @@ -44,18 +44,18 @@ exports[`change option 2`] = `
    • 北京市
      • -
    • 天津市
      • +
    • 天津市
      -
    • 天津市
      • +
    • 天津市
    • 县
      -
    • 和平区
      • +
    • 和平区
    • 河东区
    @@ -77,19 +77,19 @@ exports[`change option 3`] = `
    • 北京市
      • -
    • 天津市
      • +
    • 天津市
      -
    • 天津市
      • +
    • 天津市
    • 县
    • 和平区
      • -
    • 河东区
      • +
    • 河东区
    @@ -109,13 +109,13 @@ exports[`columns-num prop 1`] = `
      -
    • 北京市
      • +
    • 北京市
    • 天津市
      -
    • 北京市
      • +
    • 北京市
    • 县
    @@ -137,18 +137,18 @@ exports[`reset method 1`] = `
    • 北京市
      • -
    • 天津市
      • +
    • 天津市
    • 天津市
      • -
    • 县
      • +
    • 县
      -
    • 蓟县
      • +
    • 蓟县
    @@ -168,19 +168,19 @@ exports[`reset method 2`] = `
      -
    • 北京市
      • +
    • 北京市
    • 天津市
      -
    • 北京市
      • +
    • 北京市
    • 县
      -
    • 东城区
      • +
    • 东城区
    • 西城区
    @@ -201,19 +201,19 @@ exports[`watch areaList & code 1`] = `
      -
    • 北京市
      • +
    • 北京市
    • 天津市
      -
    • 北京市
      • +
    • 北京市
    • 县
      -
    • 东城区
      • +
    • 东城区
    • 西城区
    @@ -234,19 +234,19 @@ exports[`watch areaList & code 2`] = `
      -
    • 北京市
      • +
    • 北京市
    • 天津市
      -
    • 北京市
      • +
    • 北京市
    • 县
      -
    • 东城区
      • +
    • 东城区
    • 西城区
    @@ -267,19 +267,19 @@ exports[`watch areaList & code 3`] = `
      -
    • 北京市
      • +
    • 北京市
    • 天津市
      -
    • 北京市
      • +
    • 北京市
    • 县
      -
    • 东城区
      • +
    • 东城区
    • 西城区
    diff --git a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap index 9dfa89788..f6511f935 100644 --- a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap +++ b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap @@ -12,13 +12,13 @@ exports[`renders demo correctly 1`] = `
      -
    • 2018
      • +
    • 2018
    • 2019
      -
    • 01
      • +
    • 01
    • 02
    • 03
    • 04
      • @@ -34,7 +34,7 @@ exports[`renders demo correctly 1`] = `
      -
    • 01
      • +
    • 01
    • 02
    • 03
    • 04
      • @@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
      -
    • 00
      • +
    • 00
    • 01
    • 02
    • 03
      • @@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
      -
    • 00
      • +
    • 00
    • 01
    • 02
    • 03
      • @@ -175,7 +175,7 @@ exports[`renders demo correctly 1`] = `
        -
      • 2018
        • +
      • 2018
      • 2019
      • 2020
      • 2021
        • @@ -191,7 +191,7 @@ exports[`renders demo correctly 1`] = `
        -
      • 01
        • +
      • 01
      • 02
      • 03
      • 04
        • @@ -207,7 +207,7 @@ exports[`renders demo correctly 1`] = `
        -
      • 01
        • +
      • 01
      • 02
      • 03
      • 04
        • @@ -256,7 +256,7 @@ exports[`renders demo correctly 1`] = `
          -
        • 2018年
          • +
        • 2018年
        • 2019年
        • 2020年
        • 2021年
          • @@ -272,7 +272,7 @@ exports[`renders demo correctly 1`] = `
          -
        • 01月
          • +
        • 01月
        • 02月
        • 03月
        • 04月
          • @@ -304,7 +304,7 @@ exports[`renders demo correctly 1`] = `
          • 10
          • 11
            • -
          • 12
            • +
          • 12
          • 13
          • 14
          • 15
            • @@ -317,7 +317,7 @@ exports[`renders demo correctly 1`] = `
          -
        • 00
          • +
        • 00
        • 01
        • 02
        • 03
          • @@ -407,7 +407,7 @@ exports[`renders demo correctly 1`] = `
        • 09
        • 10
        • 11
          • -
        • 12
          • +
        • 12
        • 13
        • 14
        • 15
          • @@ -423,7 +423,7 @@ exports[`renders demo correctly 1`] = `
          -
        • 00
          • +
        • 00
        • 05
        • 10
        • 15
          • diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js index ca4236381..0a4529a77 100644 --- a/src/picker/PickerColumn.js +++ b/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={() => { diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap index 8c298ad26..78184b9e2 100644 --- a/src/picker/test/__snapshots__/demo.spec.js.snap +++ b/src/picker/test/__snapshots__/demo.spec.js.snap @@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
            -
          • 杭州
            • +
          • 杭州
          • 宁波
          • 温州
          • 嘉兴
            • @@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
            • 杭州
            • 宁波
              • -
            • 温州
              • +
            • 温州
            • 嘉兴
            • 湖州
            @@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
              -
            • 杭州
              • +
            • 杭州
            • 宁波
            • 温州
            • 嘉兴
              • @@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
              • 杭州
                • -
              • 宁波
                • +
              • 宁波
              • 温州
              @@ -96,7 +96,7 @@ exports[`renders demo correctly 1`] = `
                -
              • 浙江
                • +
              • 浙江
              • 福建
              @@ -104,7 +104,7 @@ exports[`renders demo correctly 1`] = `
              • 杭州
              • 宁波
                • -
              • 温州
                • +
              • 温州
              • 嘉兴
              • 湖州
              @@ -121,7 +121,7 @@ exports[`renders demo correctly 1`] = `
                -
              • 浙江
                • +
              • 浙江
              • 福建
              @@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
              • 杭州
              • 宁波
                • -
              • 温州
                • +
              • 温州
              • 嘉兴
              • 湖州
              diff --git a/src/picker/test/__snapshots__/index.spec.js.snap b/src/picker/test/__snapshots__/index.spec.js.snap index 295864757..c88983ee1 100644 --- a/src/picker/test/__snapshots__/index.spec.js.snap +++ b/src/picker/test/__snapshots__/index.spec.js.snap @@ -3,7 +3,7 @@ exports[`column watch default index 1`] = `
                -
              • 1
                • +
              • 1
              • 1990
              • 1991
              • 1992
                • @@ -19,7 +19,7 @@ exports[`column watch default index 2`] = `
                • 1
                • 1990
                  • -
                • 1991
                  • +
                • 1991
                • 1992
                • 1993
                • 1994