[feat] cascade-picker: async (#175)

* [feat] cascade-picker: aync

* [test]

Author: AmyFoxFN

example/pages/cascade-picker.vue

@@ -5,6 +5,7 @@
         <cube-button @click="showCascadePicker">Cascade Picker</cube-button>
         <cube-button @click="showCityPicker">City Picker</cube-button>
         <cube-button @click="showSetDataPicker">Set Data</cube-button>
+        <cube-button @click="showAsyncPicker">Async Cascade</cube-button>
       </cube-button-group>
     </div>
   </cube-page>
@@ -16,14 +17,19 @@
   import { provinceList, cityList, areaList } from 'example/data/area'
   import { cascadeData } from 'example/data/cascade'
 
-  const cityData = provinceList
+  const cityData = provinceList.slice()
   cityData.forEach(province => {
     province.children = cityList[province.value]
     province.children.forEach(city => {
       city.children = areaList[city.value]
     })
   })
 
+  const asyncData = provinceList.slice()
+  const asyncSelectedIndex = [0, 0, 0]
+  asyncData[0].children = cityList[asyncData[0].value]
+  asyncData[0].children[0].children = areaList[asyncData[0].children[0].value]
+
   export default {
     mounted() {
       this.cascadePicker = this.$createCascadePicker({
@@ -51,6 +57,34 @@
         onSelect: this.selectHandle,
         onCancel: this.cancelHandle
       })
+
+      this.asyncPicker = this.$createCascadePicker({
+        title: 'Async Cascade',
+        async: true,
+        data: asyncData,
+        selectedIndex: asyncSelectedIndex.slice(),
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle,
+        onChange: (i, newIndex) => {
+          if (newIndex !== asyncSelectedIndex[i]) {
+            asyncSelectedIndex.splice(i, 1, newIndex)
+            if (i < 2) {
+              setTimeout(() => {
+                if (i === 0) {
+                  const current = asyncData[newIndex]
+                  current.children = current.children || cityList[current.value]
+                }
+
+                if (i === 1) {
+                  const current = asyncData[asyncSelectedIndex[0]].children[newIndex]
+                  current.children = current.children || areaList[current.value]
+                }
+                this.asyncPicker.setData(asyncData, asyncSelectedIndex)
+              }, 500)
+            }
+          }
+        }
+      })
     },
     methods: {
       showCascadePicker() {
@@ -69,6 +103,9 @@
           this.setDataPicker.setData(cityData, [1, 1, 0])
         }, 1000)
       },
+      showAsyncPicker() {
+        this.asyncPicker.show()
+      },
       selectHandle(selectedVal, selectedIndex, selectedText) {
         this.$createDialog({
           type: 'warn',

src/components/cascade-picker/cascade-picker.vue

@@ -1,18 +1,20 @@
 <template>
   <cube-picker
-      ref="picker"
-      v-model="isVisible"
-      :data="pickerData"
-      :selected-index="pickerSelectedIndex"
-      :title="title"
-      :subtitle="subtitle"
-      :z-index="zIndex"
-      :cancel-txt="cancelTxt"
-      :confirm-txt="confirmTxt"
-      :swipe-time="swipeTime"
-      @select="_pickerSelect"
-      @cancel="_pickerCancel"
-      @change="_pickerChange"></cube-picker>
+    ref="picker"
+    v-model="isVisible"
+    :data="pickerData"
+    :selected-index="pickerSelectedIndex"
+    :pending="pending"
+    :title="title"
+    :subtitle="subtitle"
+    :z-index="zIndex"
+    :cancel-txt="cancelTxt"
+    :confirm-txt="confirmTxt"
+    :swipe-time="swipeTime"
+    @select="_pickerSelect"
+    @cancel="_pickerCancel"
+    @change="_pickerChange">
+  </cube-picker>
 </template>
 
 <script type="text/ecmascript-6">
@@ -30,20 +32,28 @@
   export default {
     name: COMPONENT_NAME,
     mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin],
+    props: {
+      async: {
+        type: Boolean,
+        default: false
+      }
+    },
     data () {
       return {
         cascadeData: this.data.slice(),
         pickerSelectedIndex: this.selectedIndex.slice(),
-        pickerData: []
+        pickerData: [],
+        pending: false
       }
     },
     created() {
       this._updatePickerData()
     },
     methods: {
       setData(data, selectedIndex = []) {
-        this.cascadeData = data
-        this.pickerSelectedIndex = selectedIndex
+        this.pending = false
+        this.cascadeData = data.slice()
+        this.pickerSelectedIndex = selectedIndex.slice()
         this._updatePickerData()
       },
       _pickerSelect(selectedVal, selectedIndex, selectedText) {
@@ -55,7 +65,9 @@
       _pickerChange(i, newIndex) {
         if (newIndex !== this.pickerSelectedIndex[i]) {
           this.pickerSelectedIndex.splice(i, 1, newIndex)
-          this._updatePickerData(i + 1)
+          this.async
+            ? (this.pending = i !== this.pickerData.length - 1)
+            : this._updatePickerData(i + 1)
         }
         this.$emit(EVENT_CHANGE, i, newIndex)
       },

src/components/picker/picker.vue

@@ -58,6 +58,12 @@
   export default {
     name: COMPONENT_NAME,
     mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin],
+    props: {
+      pending: {
+        type: Boolean,
+        default: false
+      }
+    },
     data() {
       return {
         pickerData: this.data.slice(),
@@ -249,7 +255,7 @@
         }
       },
       _canConfirm() {
-        return this.wheels.every((wheel) => {
+        return !this.pending && this.wheels.every((wheel) => {
           return !wheel.isInTransition
         })
       }

test/unit/specs/cascade-picker.spec.js

@@ -158,6 +158,74 @@ describe('CascadePicker', () => {
     }, 100)
   })
 
+  it('should support async cascade', function (done) {
+    this.timeout(10000)
+
+    const data = [
+      { value: 1,
+        text: '1',
+        children: [{value: 11, text: '11'}]
+      }, {
+        value: 2,
+        text: '2'
+      }
+    ]
+
+    const selectedIndex = [0, 0]
+    const selectHandle = sinon.spy()
+
+    vm = createCascadePicker({
+      async: true,
+      data: data,
+      selectedIndex: selectedIndex.slice()
+    }, {
+      select: selectHandle,
+      change: (i, newIndex) => {
+        if (newIndex !== selectedIndex[i]) {
+          selectedIndex.splice(i, 1, newIndex)
+          if (i < 1) {
+            expect(selectHandle)
+              .to.be.callCount(0)
+            vm.$nextTick(() => {
+              const confirmBtn = vm.$el.querySelector('.cube-picker-confirm')
+              confirmBtn.click()
+              expect(selectHandle)
+                .to.be.callCount(0)
+
+              setTimeout(() => {
+                data[1].children = [{value: 21, text: '21'}]
+                vm.setData(data, selectedIndex)
+                vm.$nextTick(() => {
+                  confirmBtn.click()
+                  expect(selectHandle)
+                    .to.be.callCount(1)
+
+                  done()
+                })
+              }, 500)
+            })
+          }
+        }
+      }
+    })
+    vm.show()
+    setTimeout(() => {
+      const wheels = vm.$el.querySelectorAll('.cube-picker-wheel-wrapper > div')
+      const firstWheelItems = wheels[0].querySelectorAll('li')
+
+      dispatchSwipe(firstWheelItems[1], [
+        {
+          pageX: firstWheelItems[1].offsetLeft + 10,
+          pageY: firstWheelItems[1].offsetTop + 10
+        },
+        {
+          pageX: firstWheelItems[1].offsetLeft + 10,
+          pageY: 60
+        }
+      ], 100)
+    }, 150)
+  })
+
   it('$updateProps', function (done) {
     this.timeout(10000)
 
@@ -190,6 +258,7 @@ describe('CascadePicker', () => {
     console.warn = function (...args) {
       msgs.push(args.join('#'))
     }
+
     vm = app.$createCascadePicker({}, true)
     expect(msgs.length)
       .to.equal(1)