Skip to content

Add CascadePicker component #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Dec 14, 2017
Merged

Add CascadePicker component #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9bd5bb2
init linkage component and example
AmyFoxFN Dec 11, 2017
906e0e4
add linkage-picker: data handle
AmyFoxFN Dec 11, 2017
53206ec
add linkage and remain same value
AmyFoxFN Dec 12, 2017
33401d4
LinkagePicker: add propx selectedIndex
AmyFoxFN Dec 12, 2017
f689c60
LinkagePicker: update base demo
AmyFoxFN Dec 12, 2017
63ea087
LinkagePicker: update city picker
AmyFoxFN Dec 12, 2017
806b664
LinkagePicker: update Date Picker
AmyFoxFN Dec 12, 2017
0621444
Picker: remove linkage picker examples
AmyFoxFN Dec 12, 2017
9e3c0f5
LinkagePicker: add setData
AmyFoxFN Dec 12, 2017
831ee27
optimize code
AmyFoxFN Dec 12, 2017
5d351b7
use cascade replace linkage
AmyFoxFN Dec 13, 2017
77b7709
remove tempIndex
AmyFoxFN Dec 13, 2017
8cb2105
use refillColumn
AmyFoxFN Dec 13, 2017
23bf932
skip needless loop
AmyFoxFN Dec 13, 2017
a189511
update setData
AmyFoxFN Dec 13, 2017
2632cf5
update variable name + add default argument
AmyFoxFN Dec 13, 2017
bb57101
add picker setData test
AmyFoxFN Dec 13, 2017
28495d8
add cascade test
AmyFoxFN Dec 13, 2017
382228d
add test change, setData
AmyFoxFN Dec 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions example/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@
path: '/picker',
text: 'Picker'
},
{
path: '/cascade-picker',
text: 'CascadePicker'
},
{
path: '/time-picker',
text: 'TimePicker'
Expand Down
135 changes: 34 additions & 101 deletions example/components/date-picker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<template>
<cube-picker
ref="picker"
title="Choose Date"
:data="dateData"
<cube-cascade-picker
ref="cascadePicker"
title="Date Picker"
:data="data"
:selectedIndex="selectedIndex"
@change="change"
@select="select"
@cancel="cancel">
</cube-picker>
</cube-cascade-picker>
</template>

<script>
Expand Down Expand Up @@ -39,115 +38,49 @@
},
data() {
return {
dateData: [],
tempIndex: [0, 0, 0],
years: [],
months: [],
days: [],
year: 0,
month: 0,
day: 0
}
},
watch: {
year() {
this.updateMonths()
},
month() {
this.updateDays()
computed: {
data() {
let data = range(this.min[0], this.max[0], false, '年')

data.forEach(year => {
let minMonth = year.value === this.min[0] ? this.min[1] : 1
let maxMonth = year.value === this.max[0] ? this.max[1] : 12

year.children = range(minMonth, maxMonth, false, '月')
year.children.forEach(month => {
let day = 30
if ([1, 3, 5, 7, 8, 10, 12].includes(month.value)) {
day = 31
} else {
if (month.value === 2) {
day = !(year.value % 400) || (!(year.value % 4) && year.value % 100) ? 29 : 28
}
}

let minDay = year.value === this.min[0] && month.value === this.min[1] ? this.min[2] : 1
let maxDay = year.value === this.max[0] && month.value === this.max[1] ? this.max[2] : day

month.children = range(minDay, maxDay, false, '日')
})
})

return data
}
},
methods: {
show() {
this.$refs.picker.show()
this.years = range(this.min[0], this.max[0], false, '年')
this.year = this.years[this.selectedIndex[0]].value
this.updateMonths()
this.month = this.months[this.selectedIndex[1]].value
this.updateDays()
this.day = this.days[this.selectedIndex[2]].value
this.tempIndex = this.selectedIndex
this.$refs.cascadePicker.show()
},
hide() {
this.$refs.picker.hide()
},
change(i, newIndex) {
if (newIndex !== this.tempIndex[i]) {
this.tempIndex[i] = newIndex
}
const keyMap = ['year', 'month', 'day']
if (this.dateData[i][newIndex] !== this[keyMap[i]]) {
this[keyMap[i]] = this.dateData[i][newIndex].value
}
this.$refs.cascadePicker.hide()
},
select(selectedVal, selectedIndex, selectedText) {
this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
},
cancel() {
this.$emit(EVENT_CANCEL)
},
updateMonths() {
let minMonth = this.year === this.min[0] ? this.min[1] : 1
let maxMonth = this.year === this.max[0] ? this.max[1] : 12

this.months = range(minMonth, maxMonth, false, '月')

/* Try to keep the same month */
const findIndex = this.months.findIndex((item) => {
return item.value === this.month
})
if (findIndex !== -1) {
this.tempIndex.splice(1, 1, findIndex)
this.updateDays()
} else {
if (this.month < this.months[0].value) {
this.month = this.months[0].value
this.tempIndex[1] = 0
} else {
this.month = this.months[this.months.length - 1].value
this.tempIndex[1] = this.months.length - 1
}
}
},
updateDays() {
let day = 30
if ([1, 3, 5, 7, 8, 10, 12].includes(this.month)) {
day = 31
} else {
if (this.month === 2) {
day = !(this.year % 400) || (!(this.year % 4) && this.year % 100) ? 29 : 28
}
}

let minDay = this.year === this.min[0] && this.month === this.min[1] ? this.min[2] : 1
let maxDay = this.year === this.max[0] && this.month === this.max[1] ? this.max[2] : day

this.days = range(minDay, maxDay, false, '日')

/* Try to keep the same day */
const self = this
const findIndex = this.days.findIndex((item) => {
return item.value === self.day
})
if (findIndex !== -1) {
this.tempIndex[2] = findIndex
} else {
if (this.day < this.days[0].value) {
this.day = this.days[0].value
this.tempIndex[2] = 0
} else {
this.day = this.days[this.days.length - 1].value
this.tempIndex[2] = this.days.length - 1
}
}

this.dateData = [this.years, this.months, this.days]
// make sure picker render before call refillColumn
this.$nextTick(() => {
this.$refs.picker.refresh()
this.$refs.picker.scrollTo(1, this.tempIndex[1])
this.$refs.picker.scrollTo(2, this.tempIndex[2])
})
}
}
}
Expand Down
210 changes: 210 additions & 0 deletions example/data/cascade.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
export const cascadeData = [
{
value: 'Fruit',
text: 'Fruit',
children: [
{
value: 'Apple',
text: 'Apple',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
}
]
},
{
value: 'Orange',
text: 'Orange',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
},
{
value: 4,
text: 'Four'
}
]
},
{
value: 'Lemon',
text: 'Lemon',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
},
{
value: 4,
text: 'Four'
},
{
value: 5,
text: 'Five'
}
]
}
]
},
{
value: 'Drink',
text: 'Drink',
children: [
{
value: 'Coffee',
text: 'Coffee',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
}
]
},
{
value: 'Tea',
text: 'Tea',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
},
{
value: 4,
text: 'Four'
}
]
},
{
value: 'Juice',
text: 'Juice',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
}
]
}
]
},
{
value: 'Dessert',
text: 'Dessert',
children: [
{
value: 'Chocolate',
text: 'Chocolate',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
},
{
value: 4,
text: 'Four'
},
{
value: 5,
text: 'Five'
}
]
},
{
value: 'cheese',
text: 'cheese',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
},
{
value: 4,
text: 'Four'
}
]
},
{
value: 'cake',
text: 'cake',
children: [
{
value: 1,
text: 'One'
},
{
value: 2,
text: 'Two'
},
{
value: 3,
text: 'Three'
}
]
}
]
}
]
Loading