Skip to content
This repository has been archived by the owner on Jan 8, 2025. It is now read-only.

Commit

Permalink
feat(ui/date-picker): suport touchable
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayangweb
ayangweb committed Mar 17, 2022
1 parent 942830e commit f619e58
Show file tree
Hide file tree
Showing 13 changed files with 290 additions and 68 deletions.
2 changes: 1 addition & 1 deletion packages/varlet-vue2-cli/site/components/snackbar/snackbar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
position: absolute;
}

&-fade-enter-from,
&-fade-enter,
&-fade-leave-to {
opacity: 0;
transform: translateY(-30px);
Expand Down
71 changes: 67 additions & 4 deletions packages/varlet-vue2-ui/src/date-picker/DatePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,33 +45,40 @@
</transition>
</div>
</div>
<div class="var-date-picker-body">
<div
class="var-date-picker-body"
@touchstart="handleTouchstart"
@touchmove="handleTouchmove"
@touchend="handleTouchend"
>
<transition name="var-date-picker-panel-fade">
<year-picker-panel
:component-props="componentProps"
:preview="previewYear"
@choose-year="getChooseYear"
v-if="isYearPanel"
v-if="getPanelType === 'year'"
/>
<month-picker-panel
ref="monthPanelEl"
:current="currentDate"
:choose="getChoose"
:preview="getPreview"
:click-year="() => clickEl('year')"
:component-props="componentProps"
@choose-month="getChooseMonth"
@check-preview="checkPreview"
v-else-if="(!isYearPanel && type === 'month') || isMonthPanel"
v-else-if="getPanelType === 'month'"
/>
<day-picker-panel
ref="dayPanelEl"
:current="currentDate"
:choose="getChoose"
:preview="getPreview"
:component-props="componentProps"
:click-month="() => clickEl('month')"
@choose-day="getChooseDay"
@check-preview="checkPreview"
v-else-if="!isYearPanel && !isMonthPanel && type === 'date'"
v-else-if="getPanelType === 'date'"
/>
</transition>
</div>
Expand All @@ -86,8 +93,13 @@ import YearPickerPanel from './src/year-picker-panel.vue'
import DayPickerPanel from './src/day-picker-panel.vue'
import { props, MONTH_LIST, WEEK_HEADER } from './props'
import { isArray, toNumber } from '../utils/shared'
import { nextTickFrame } from '../utils/elements'
import { pack } from '../locale'
let startX = 0
let startY = 0
let checkType = ''
let touchDirection
const currentDate = dayjs().format('YYYY-MM-D')
const [currentYear, currentMonth] = currentDate?.split('-')
const monthDes = MONTH_LIST.find((month) => month.index === currentMonth)
Expand Down Expand Up @@ -223,6 +235,17 @@ export default defineComponent({
isSameMonth() {
return this.chooseMonth?.index === this.previewMonth.index
},
getPanelType() {
if (this.isYearPanel) return 'year'
if (this.type === 'month' || this.isMonthPanel) return 'month'
if (this.type === 'date') return 'date'
return ''
},
isUntouchable() {
return !this.touchable || ['', 'year'].includes(this.getPanelType)
},
},
watch: {
Expand All @@ -245,6 +268,10 @@ export default defineComponent({
},
immediate: true,
},
getPanelType() {
this.resetState()
},
},
methods: {
Expand Down Expand Up @@ -441,6 +468,42 @@ export default defineComponent({
this.previewMonth = monthDes
this.previewYear = yearValue
},
handleTouchstart(event) {
if (this.isUntouchable) return
const { clientX, clientY } = event.touches[0]
startX = clientX
startY = clientY
},
getDirection(x, y) {
return x >= y && x > 20 ? 'x' : 'y'
},
handleTouchmove(event) {
if (this.isUntouchable) return
const { clientX, clientY } = event.touches[0]
const x = clientX - startX
const y = clientY - startY
touchDirection = this.getDirection(Math.abs(x), Math.abs(y))
checkType = x > 0 ? 'prev' : 'next'
},
handleTouchend() {
if (this.isUntouchable || touchDirection !== 'x') return
const componentRef = this.getPanelType === 'month' ? 'monthPanelEl' : 'dayPanelEl'
nextTickFrame(() => {
this.$refs[componentRef].forwardRef(checkType)
this.resetState()
})
},
resetState() {
startY = 0
startX = 0
checkType = ''
touchDirection = undefined
},
},
})
</script>
Expand Down
114 changes: 114 additions & 0 deletions packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,120 @@ exports[`test allowedDates prop 1`] = `
</div>"
`;
exports[`test datePicker style and month 1`] = `
"<div class=\\"var-date-picker var-elevation--2\\">
<div class=\\"var-date-picker-title\\" style=\\"background: purple;\\">
<div class=\\"var-date-picker-title__year\\">
2021
</div>
<div class=\\"var-date-picker-title__date var-date-picker-title__date--active\\">
<transition-stub name=\\"var-date-picker-translatey\\">
<div>
四月
</div>
</transition-stub>
</div>
</div>
<div class=\\"var-date-picker-body\\">
<transition-stub name=\\"var-date-picker-panel-fade\\">
<div class=\\"var-month-picker__panel\\">
<div class=\\"var-month-picker__content\\">
<div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
<!---->
<div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></div>
</button>
<div class=\\"var-picker-header__value\\">
<transition-stub name=\\"var-date-picker-translatex\\">
<div>2021</div>
</transition-stub>
</div> <button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
<!---->
<div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></div>
</button>
</div>
<transition-stub name=\\"var-date-picker-translatex\\">
<ul>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
一月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
二月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
三月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--primary var-elevation--2\\" style=\\"background: rgb(123, 184, 114);\\" var-month-picker-cover=\\"\\">
<!---->
<div class=\\"var-button__content\\">
四月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
五月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
六月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
七月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
八月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
九月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
十月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
十一月
</div>
</button></li>
<li><button class=\\"var-button var--box var-month-picker__button var-button--normal var--inline-flex var-button--text-primary var-button--text\\" var-month-picker-cover=\\"\\" var-date-picker-color-cover=\\"true\\">
<!---->
<div class=\\"var-button__content\\">
十二月
</div>
</button></li>
</ul>
</transition-stub>
</div>
</div>
</transition-stub>
</div>
</div>"
`;
exports[`test datePicker style and type 1`] = `
"<div class=\\"var-date-picker var-elevation--2\\">
<div class=\\"var-date-picker-title\\" style=\\"background: purple;\\">
Expand Down
47 changes: 24 additions & 23 deletions packages/varlet-vue2-ui/src/date-picker/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ describe('test datePicker style and type', () => {

expect(wrapper.html()).toMatchSnapshot()
})

test('test datePicker style and month', async () => {
const template = `
<var-date-picker
Expand Down Expand Up @@ -289,29 +290,29 @@ test('test datePicker readonly', async () => {
expect(wrapper.vm.date).toBe('2021-05-19')
})

// test('test datePicker touchable prop', async () => {
// const wrapper = mount({
// components: {
// [VarDatePicker.name]: VarDatePicker,
// },
// data() {
// return {
// date: '2021-04-08',
// type: 'date',
// }
// },
// template: `<var-date-picker v-model="date" :type="type" />`,
// })

// const pickBodyEl = wrapper.findComponent('.var-date-picker-body')
// const headerEl = wrapper.findComponent('.var-picker-header__value')

// await triggerDrag(pickBodyEl, 0, 100)
// expect(headerEl.text()).toBe('2021 四月')
// await triggerDrag(pickBodyEl, 100, 0)
// await delay(300)
// expect(headerEl.text()).toBe('2021 三月')
// })
test('test datePicker touchable prop', async () => {
const wrapper = mount({
components: {
[VarDatePicker.name]: VarDatePicker,
},
data() {
return {
date: '2021-04-08',
type: 'date',
}
},
template: `<var-date-picker v-model="date" :type="type" />`,
})

const pickBodyEl = wrapper.findComponent('.var-date-picker-body')
const headerEl = wrapper.findComponent('.var-picker-header__value')

await triggerDrag(pickBodyEl, 0, 100)
expect(headerEl.text()).toBe('2021 四月')
await triggerDrag(pickBodyEl, 100, 0)
await delay(300)
expect(headerEl.text()).toBe('2021 三月')
})

test('test value legal', async () => {
const fn = jest.fn()
Expand Down
21 changes: 16 additions & 5 deletions packages/varlet-vue2-ui/src/date-picker/date-picker.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@
overflow: hidden;
font-weight: 700;
cursor: pointer;
user-select: none;

div {
width: 100%;
Expand Down Expand Up @@ -196,6 +197,11 @@
&__button[var-date-picker-color-cover='true'] {
color: var(--date-picker-main-color);
}

&__button-disabled {
color: var(--color-text-disabled) !important;
cursor: not-allowed;
}
}

.var-year-picker {
Expand Down Expand Up @@ -258,9 +264,14 @@
&__button[var-date-picker-color-cover='true'] {
color: var(--date-picker-main-color);
}

&__button-disabled {
color: var(--color-text-disabled) !important;
cursor: not-allowed;
}
}

&-translatey-enter-from {
&-translatey-enter {
opacity: 0;
transform: translateY(100%);
}
Expand All @@ -281,7 +292,7 @@
transform: translateY(-100%);
}

&-reverse-translatey-enter-from {
&-reverse-translatey-enter {
opacity: 0;
transform: translateY(-100%);
}
Expand All @@ -291,7 +302,7 @@
transform: translateY(100%);
}

&-panel-fade-enter-from,
&-panel-fade-enter,
&-panel-fade-leave-to {
transition: 0.3s var(--cubic-bezier);
opacity: 0;
Expand All @@ -301,12 +312,12 @@
position: absolute;
}

&-translatex-enter-from {
&-translatex-enter {
opacity: 0;
transform: translateX(100%);
}

&-reverse-translatex-enter-from {
&-reverse-translatex-enter {
opacity: 0;
transform: translateX(-100%);
}
Expand Down
Loading

0 comments on commit f619e58

Please sign in to comment.