|
|
@@ -0,0 +1,214 @@
|
|
|
+import { MovableArea, MovableView, View, ScrollView, Text, Image } from '@tarojs/components'
|
|
|
+import './schedule_move_list.scss'
|
|
|
+import { useEffect, useRef, useState } from 'react';
|
|
|
+import { ColorType, MainColorType } from '@/context/themes/color';
|
|
|
+import Taro from '@tarojs/taro';
|
|
|
+import { IconDrag } from '@/components/basic/Icons';
|
|
|
+import { rpxToPx } from '@/utils/tools';
|
|
|
+import StatusIndicator, { StatusType } from '../base/status_indicator';
|
|
|
+
|
|
|
+export default function ScheduleMoveList(props: { array: any, itemHeight: number, color?: string, update: Function }) {
|
|
|
+ const [list, setList] = useState(props.array)
|
|
|
+ const [movaleViewY, setMovaleViewY] = useState(0)
|
|
|
+ const [dragElement, setDragElement] = useState(null)
|
|
|
+ const [lastTarget, setLastTarget] = useState(null)
|
|
|
+ const [startOffsetY, setStartOffsetY] = useState(0)
|
|
|
+ const [startPageY, setStartPageY] = useState(0)
|
|
|
+ const [dragIndex, setDragIndex] = useState(-1)
|
|
|
+ const [scrollThreshold, setScrollThreshold] = useState(0.5)
|
|
|
+ const upperThreshold = 100
|
|
|
+ const lowThreshold = 100
|
|
|
+ const [canScroll, setCanScroll] = useState(true)
|
|
|
+ const [changedIndex, setChangedIndex] = useState(-1)
|
|
|
+ const [hiddenContent, setHiddenContent] = useState(false)
|
|
|
+
|
|
|
+ const [scrollTop, setScrollTop] = useState(0)
|
|
|
+ const [contentY, setContentY] = useState(0)
|
|
|
+ const [contentHeight, setContentHeight] = useState(0)
|
|
|
+ const ref = useRef(null)
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ const query = Taro.createSelectorQuery();
|
|
|
+ query.select('#myScrollView').boundingClientRect();
|
|
|
+ query.exec((res) => {
|
|
|
+ setContentY(res[0].top)
|
|
|
+ setContentHeight(res[0].height)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ function longPress(e, index) {
|
|
|
+ setChangedIndex(index)
|
|
|
+ setStartOffsetY(e.target.offsetTop)
|
|
|
+ setStartPageY(e.touches[0].pageY)
|
|
|
+ setDragIndex(index)
|
|
|
+ setDragElement(list[index])
|
|
|
+ setMovaleViewY(e.target.offsetTop)
|
|
|
+ setCanScroll(false)
|
|
|
+ setHiddenContent(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function touchMove(e) {
|
|
|
+ if (dragElement) {
|
|
|
+ let clientY = e.touches[0].clientY;
|
|
|
+ pageScroll(clientY);
|
|
|
+ let pageY = e.touches[0].pageY;
|
|
|
+ let targetMoveDistance = pageY - startPageY
|
|
|
+ let movaleViewY2 = startOffsetY + targetMoveDistance
|
|
|
+
|
|
|
+ let targetIndex = computeFutureIndex(targetMoveDistance, dragIndex)
|
|
|
+ if (targetIndex !== false && targetIndex != changedIndex) {
|
|
|
+ debugger
|
|
|
+ var temps = swapListItems(list, targetIndex, changedIndex)
|
|
|
+ setList(temps)
|
|
|
+ setChangedIndex(targetIndex)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (targetIndex === false && targetIndex != changedIndex) {
|
|
|
+ var temps = swapListItems(list, dragIndex, changedIndex)
|
|
|
+ setList(temps)
|
|
|
+ setChangedIndex(dragIndex)
|
|
|
+ }
|
|
|
+
|
|
|
+ setMovaleViewY(movaleViewY2)
|
|
|
+ setLastTarget(targetIndex as any)
|
|
|
+ setHiddenContent(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function pageScroll(clientY) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ function swapListItems<T>(list: T[], index1: number, index2: number): T[] {
|
|
|
+ const newList = [...list];
|
|
|
+ const temp = newList[index1];
|
|
|
+ newList[index1] = newList[index2];
|
|
|
+ newList[index2] = temp;
|
|
|
+
|
|
|
+ return newList;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function touchEnd(e) {
|
|
|
+ if (dragElement) {
|
|
|
+ setDragElement(null)
|
|
|
+ setLastTarget(null)
|
|
|
+ setDragIndex(-1)
|
|
|
+
|
|
|
+ }
|
|
|
+ setChangedIndex(-1)
|
|
|
+ setCanScroll(true)
|
|
|
+ setHiddenContent(false)
|
|
|
+ setMovaleViewY(-100)
|
|
|
+
|
|
|
+ props.update(list)
|
|
|
+ }
|
|
|
+
|
|
|
+ function computeFutureIndex(targetMoveDistance, dragElementIndex) {
|
|
|
+ let willInsertAfter = getSwapDirection(targetMoveDistance);
|
|
|
+ if (willInsertAfter !== false) {
|
|
|
+ /** 偏移索引 */
|
|
|
+ let offsetElementIndex = dragElementIndex + willInsertAfter;
|
|
|
+ /** 移动步数 */
|
|
|
+ let step = targetMoveDistance / props.itemHeight;
|
|
|
+ /** 步数补偿，当只有移动距离超过单项 _scrollThreshold 时才算有效 */
|
|
|
+ if (step <= -1) {
|
|
|
+ step += scrollThreshold;
|
|
|
+ } else if (step >= 1) {
|
|
|
+ step -= scrollThreshold;
|
|
|
+ }
|
|
|
+ /** 目标索引 */
|
|
|
+ let futureIndex = parseInt(step + '') + offsetElementIndex;
|
|
|
+
|
|
|
+ // 避免越界
|
|
|
+ if (futureIndex < 0) {
|
|
|
+ futureIndex = 0;
|
|
|
+ } else if (futureIndex > list.length - 1) {
|
|
|
+ futureIndex = list.length - 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ return futureIndex;
|
|
|
+ } else {
|
|
|
+ return willInsertAfter;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getSwapDirection(targetMoveDistance) {
|
|
|
+ if (Math.abs(targetMoveDistance) < props.itemHeight / 2) {
|
|
|
+ // 轻轻拂动，滑动距离小于1/2单项高度
|
|
|
+ return false;
|
|
|
+ } else if (targetMoveDistance >= props.itemHeight / 2) {
|
|
|
+ // console.log('[_getSwapDirection] 👇👇👇');
|
|
|
+ return 1; // 下滑
|
|
|
+ } else if (targetMoveDistance <= props.itemHeight / -2) {
|
|
|
+ // console.log('[_getSwapDirection] 👆👆👆');
|
|
|
+ return -1; // 上滑
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return <View id="myScrollView" ref={ref} style={{ height: '100%', overflow: canScroll ? 'scroll' : 'hidden' }} catchMove>
|
|
|
+ <MovableArea style={{ height: list.length * props.itemHeight, width: rpxToPx(700) }}>
|
|
|
+ <View>
|
|
|
+ {
|
|
|
+ list.map((item, index) => {
|
|
|
+ return <View key={index} style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight, width: rpxToPx(700) }}
|
|
|
+ onLongPress={(e) => longPress(e, index)}
|
|
|
+ onTouchMove={(e) => touchMove(e)}
|
|
|
+ onTouchEnd={(e) => touchEnd(e)}
|
|
|
+ >
|
|
|
+ <View className='schedule_item' style={{ width: rpxToPx(700), height: rpxToPx(128), boxSizing: 'border-box' }}>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', flex: 1 }}>
|
|
|
+ <View className='item_left2'>
|
|
|
+ <StatusIndicator type={StatusType.normal} color={MainColorType.active} text={item.title} fontSize={rpxToPx(34)} />
|
|
|
+ </View>
|
|
|
+ <View className="h22" style={{ color: MainColorType.g02, marginLeft: rpxToPx(26), marginTop: rpxToPx(10) }}>{item.time_label}</View>
|
|
|
+ </View>
|
|
|
+ <Image src={require('@assets/_health/drag.png')} style={{
|
|
|
+ width: rpxToPx(34),
|
|
|
+ height: rpxToPx(34)
|
|
|
+ }} />
|
|
|
+ <View className='border_footer_line' style={{ left: rpxToPx(66), flexShrink: 0 }} />
|
|
|
+
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ <MovableView style={{ height: changedIndex >= 0 ? props.itemHeight : 0, width: rpxToPx(700) }}
|
|
|
+ direction='vertical'
|
|
|
+ disabled
|
|
|
+ animation={false}
|
|
|
+ y={movaleViewY}
|
|
|
+ >
|
|
|
+ <View className='drag_item2' style={{ backgroundColor: props.color }}>
|
|
|
+ {
|
|
|
+ dragIndex >= 0 && <View className='modal_sel_item2' style={{ height: props.itemHeight, border: 'none' }}>
|
|
|
+ <View className='schedule_item' style={{ width: rpxToPx(700), height: rpxToPx(128), boxSizing: 'border-box' }}>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', flex: 1 }}>
|
|
|
+ <View className='item_left2'>
|
|
|
+ <StatusIndicator type={StatusType.normal} color={MainColorType.active} text={list[changedIndex].title} fontSize={rpxToPx(34)} />
|
|
|
+ </View>
|
|
|
+ <View className="h22" style={{ color: MainColorType.g02, marginLeft: rpxToPx(26), marginTop: rpxToPx(10) }}>{list[changedIndex].time_label}</View>
|
|
|
+ </View>
|
|
|
+ <Image src={require('@assets/_health/drag.png')} style={{
|
|
|
+ width: rpxToPx(34),
|
|
|
+ height: rpxToPx(34)
|
|
|
+ }} />
|
|
|
+ <View className='border_footer_line' style={{ left: rpxToPx(66), flexShrink: 0 }} />
|
|
|
+
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ </MovableView>
|
|
|
+ </View>
|
|
|
+ </MovableArea>
|
|
|
+ </View>
|
|
|
+}
|
