Skip to content
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

refactor(picker): refactor by useTouch #1167

Merged
merged 1 commit into from
Aug 29, 2023
Merged

refactor(picker): refactor by useTouch #1167

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 13 additions & 12 deletions packages/varlet-ui/src/picker/Picker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
:class="n('column')"
v-for="c in scrollColumns"
:key="c.id"
@touchstart.passive="handleTouchstart(c)"
@touchstart.passive="handleTouchstart($event, c)"
@touchmove.prevent="handleTouchmove($event, c)"
@touchend="handleTouchend($event, c)"
>
Expand Down Expand Up @@ -108,6 +108,7 @@ import {
type ComponentPublicInstance,
} from 'vue'
import { props, type CascadeColumn, type NormalColumn } from './props'
import { useTouch } from '@varlet/use'
import { clamp, clampArrayRange, isArray } from '@varlet/shared'
import { dt } from '../utils/shared'
import { toPxNum, getTranslateY, requestAnimationFrame } from '../utils/elements'
Expand Down Expand Up @@ -157,7 +158,7 @@ export default defineComponent({
)
const columnHeight: ComputedRef<number> = computed(() => optionCount.value * optionHeight.value)
let prevIndexes: number[] = []
let dragging = false
const { prevY, moveY, touching, startTouch, moveTouch, endTouch } = useTouch()

const setScrollEl = (el: Element | ComponentPublicInstance | null, scrollColumn: ScrollColumn) => {
scrollColumn.scrollEl = el as HTMLElement
Expand Down Expand Up @@ -204,7 +205,7 @@ export default defineComponent({
}

const handleClick = (scrollColumn: ScrollColumn, index: number) => {
if (dragging) {
if (touching.value) {
return
}

Expand All @@ -213,23 +214,25 @@ export default defineComponent({
scrollTo(scrollColumn, TRANSITION_DURATION)
}

const handleTouchstart = (scrollColumn: ScrollColumn) => {
const handleTouchstart = (event: TouchEvent, scrollColumn: ScrollColumn) => {
scrollColumn.touching = true
scrollColumn.translate = getTranslateY(scrollColumn.scrollEl as HTMLElement)
startTouch(event)
}

const handleTouchmove = (event: TouchEvent, scrollColumn: ScrollColumn) => {
if (!scrollColumn.touching) {
return
}

dragging = true
moveTouch(event)

scrollColumn.scrolling = false
scrollColumn.duration = 0

const { clientY } = event.touches[0]
const deltaY = scrollColumn.prevY !== undefined ? clientY - scrollColumn.prevY : 0
scrollColumn.prevY = clientY
const deltaY = scrollColumn.prevY !== undefined ? moveY.value : 0

scrollColumn.prevY = prevY.value
scrollColumn.translate += deltaY

clampTranslate(scrollColumn)
Expand All @@ -242,6 +245,8 @@ export default defineComponent({
}

const handleTouchend = (event: TouchEvent, scrollColumn: ScrollColumn) => {
endTouch()

scrollColumn.touching = false
scrollColumn.prevY = undefined
const distance = scrollColumn.translate - (scrollColumn.momentumPrevY as number)
Expand All @@ -262,10 +267,6 @@ export default defineComponent({
if (!scrollColumn.scrolling) {
change(scrollColumn)
}

requestAnimationFrame(() => {
dragging = false
})
}

const handleTransitionend = (scrollColumn: ScrollColumn) => {
Expand Down