Skip to content

Commit

Permalink
chore(picker): optimize array handle
Browse files Browse the repository at this point in the history
  • Loading branch information
@AmyFoxFN
AmyFoxFN committed Aug 28, 2018
1 parent e8d7b34 commit 0a1d63e
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 47 deletions.
77 changes: 36 additions & 41 deletions src/components/picker/picker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<i class="border-bottom-1px"></i>
<i class="border-top-1px"></i>
<div class="cube-picker-wheel-wrapper" ref="wheelWrapper">
<div v-for="(data,index) in pickerData" :key="index">
<div v-for="(data,index) in finalData" :key="index">
<!-- The class name of the ul and li need be configured to BetterScroll. -->
<ul class="cube-picker-wheel-scroll">
<li v-for="(item,index) in data" class="cube-picker-wheel-item" :key="index" v-html="item[textKey]">
Expand Down Expand Up @@ -67,18 +67,15 @@
},
data() {
return {
pickerData: this.data.slice(),
pickerSelectedIndex: this.selectedIndex
finalData: this.data.slice()
}
},
created() {
this.pickerSelectedVal = []
if (!this.pickerSelectedIndex.length) {
this.pickerSelectedIndex = []
for (let i = 0; i < this.pickerData.length; i++) {
this.pickerSelectedIndex[i] = 0
}
}
this._values = []
this._indexes = this.selectedIndex
const diff = this.finalData.length - this._indexes.length
diff > 0 && this._indexes.fill(0, diff)
},
methods: {
confirm() {
Expand All @@ -90,38 +87,36 @@
let changed = false
let pickerSelectedText = []
const dataLength = this.pickerData.length
const selectedValLength = this.pickerSelectedVal.length
const length = this.finalData.length
const oldLength = this._values.length
if (selectedValLength !== dataLength) {
if (selectedValLength > dataLength) {
this.pickerSelectedVal.splice(dataLength)
this.pickerSelectedIndex.splice(dataLength)
}
// when column count has changed.
if (oldLength !== length) {
changed = true
oldLength > length && (this._values.length = this._indexes.length = length)
}
for (let i = 0; i < dataLength; i++) {
for (let i = 0; i < length; i++) {
let index = this.wheels[i].getSelectedIndex()
this.pickerSelectedIndex[i] = index
this._indexes[i] = index
let value = null
let text = ''
if (this.pickerData[i].length) {
value = this.pickerData[i][index][this.valueKey]
text = this.pickerData[i][index][this.textKey]
if (this.finalData[i].length) {
value = this.finalData[i][index][this.valueKey]
text = this.finalData[i][index][this.textKey]
}
if (this.pickerSelectedVal[i] !== value) {
if (this._values[i] !== value) {
changed = true
}
this.pickerSelectedVal[i] = value
this._values[i] = value
pickerSelectedText[i] = text
}
this.$emit(EVENT_SELECT, this.pickerSelectedVal, this.pickerSelectedIndex, pickerSelectedText)
this.$emit(EVENT_SELECT, this._values, this._indexes, pickerSelectedText)
if (changed) {
this.$emit(EVENT_VALUE_CHANGE, this.pickerSelectedVal, this.pickerSelectedIndex, pickerSelectedText)
this.$emit(EVENT_VALUE_CHANGE, this._values, this._indexes, pickerSelectedText)
}
},
maskClick() {
Expand All @@ -141,17 +136,17 @@
this.$nextTick(() => {
this.wheels = this.wheels || []
let wheelWrapper = this.$refs.wheelWrapper
for (let i = 0; i < this.pickerData.length; i++) {
for (let i = 0; i < this.finalData.length; i++) {
this._createWheel(wheelWrapper, i).enable()
this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
this.wheels[i].wheelTo(this._indexes[i])
}
this.dirty && this._destroyExtraWheels()
this.dirty = false
})
} else {
for (let i = 0; i < this.pickerData.length; i++) {
for (let i = 0; i < this.finalData.length; i++) {
this.wheels[i].enable()
this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
this.wheels[i].wheelTo(this._indexes[i])
}
}
},
Expand All @@ -161,19 +156,19 @@
}
this.isVisible = false
for (let i = 0; i < this.pickerData.length; i++) {
for (let i = 0; i < this.finalData.length; i++) {
this.wheels[i].disable()
}
},
setData(data, selectedIndex) {
this.pickerSelectedIndex = selectedIndex ? [...selectedIndex] : []
this.pickerData = data.slice()
this._indexes = selectedIndex ? [...selectedIndex] : []
this.finalData = data.slice()
if (this.isVisible) {
this.$nextTick(() => {
const wheelWrapper = this.$refs.wheelWrapper
this.pickerData.forEach((item, i) => {
this.finalData.forEach((item, i) => {
this._createWheel(wheelWrapper, i)
this.wheels[i].wheelTo(this.pickerSelectedIndex[i])
this.wheels[i].wheelTo(this._indexes[i])
})
this._destroyExtraWheels()
})
Expand All @@ -197,8 +192,8 @@
let wheel = this.wheels ? this.wheels[index] : false
let dist = 0
if (scroll && wheel) {
let oldData = this.pickerData[index]
this.$set(this.pickerData, index, data)
let oldData = this.finalData[index]
this.$set(this.finalData, index, data)
let selectedIndex = wheel.getSelectedIndex()
if (oldData.length) {
let oldValue = oldData[selectedIndex][this.valueKey]
Expand All @@ -209,7 +204,7 @@
}
}
}
this.pickerSelectedIndex[index] = dist
this._indexes[index] = dist
this.$nextTick(() => {
// recreate wheel so that the wrapperHeight will be correct.
wheel = this._createWheel(wheelWrapper, index)
Expand All @@ -220,7 +215,7 @@
},
scrollTo(index, dist) {
const wheel = this.wheels[index]
this.pickerSelectedIndex[index] = dist
this._indexes[index] = dist
wheel.wheelTo(dist)
},
refresh() {
Expand All @@ -234,7 +229,7 @@
if (!this.wheels[i]) {
const wheel = this.wheels[i] = new BScroll(wheelWrapper.children[i], {
wheel: {
selectedIndex: this.pickerSelectedIndex[i] || 0,
selectedIndex: this._indexes[i] || 0,
wheelWrapperClass: 'cube-picker-wheel-scroll',
wheelItemClass: 'cube-picker-wheel-item'
},
Expand All @@ -250,7 +245,7 @@
return this.wheels[i]
},
_destroyExtraWheels() {
const dataLength = this.pickerData.length
const dataLength = this.finalData.length
if (this.wheels.length > dataLength) {
const extraWheels = this.wheels.splice(dataLength)
extraWheels.forEach((wheel) => {
Expand Down
12 changes: 6 additions & 6 deletions test/unit/specs/picker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,8 +209,8 @@ describe('Picker', () => {
setTimeout(() => {
vm.scrollTo(0, 2)
vm.confirm()
expect(vm.pickerSelectedIndex[0]).to.equal(2)
expect(vm.pickerSelectedVal[0]).to.equal(data2[2].value)
expect(vm._indexes[0]).to.equal(2)
expect(vm._values[0]).to.equal(data2[2].value)
done()
})
}, 150)
Expand Down Expand Up @@ -240,8 +240,8 @@ describe('Picker', () => {
vm.show()
setTimeout(() => {
vm.confirm()
expect(vm.pickerSelectedIndex[0]).to.equal(1)
expect(vm.pickerSelectedVal[0]).to.equal(data1[1].value)
expect(vm._indexes[0]).to.equal(1)
expect(vm._values[0]).to.equal(data1[1].value)
done()
}, 150)
})
Expand All @@ -256,8 +256,8 @@ describe('Picker', () => {
vm.setData([data2], [2])
setTimeout(() => {
vm.confirm()
expect(vm.pickerSelectedIndex[0]).to.equal(2)
expect(vm.pickerSelectedVal[0]).to.equal(data2[2].value)
expect(vm._indexes[0]).to.equal(2)
expect(vm._values[0]).to.equal(data2[2].value)
done()
}, 150)
}, 150)
Expand Down

0 comments on commit 0a1d63e

Please sign in to comment.