diff --git a/packages/antd-taro-react/src/PickerView/picker-view-column.tsx b/packages/antd-taro-react/src/PickerView/picker-view-column.tsx index 375b3cb..7fa9a48 100644 --- a/packages/antd-taro-react/src/PickerView/picker-view-column.tsx +++ b/packages/antd-taro-react/src/PickerView/picker-view-column.tsx @@ -7,91 +7,102 @@ import {PickerColumnOption} from "./types"; const pickerViewCls = "triones-antm-picker-view"; type PickerViewColumnProps = { - options?: PickerColumnOption[] - labelInValue?: boolean - value?: any - onChange?: (value: any, index?: number) => void + options?: PickerColumnOption[] + labelInValue?: boolean + value?: any + onChange?: (value: any, index?: number) => void } export const PickerViewColumn: FC = React.memo( - ({ - options, - labelInValue, - value, - onChange, - }) => { - const [internalValue, setInternalValue] = useState(value || null); - const itemHeight = 34; - const [touchPoint, setTouchPoint] = React.useState(); - const [translateY, setTranslateY] = useState(0) + ({ + options, + labelInValue, + value, + onChange, + }) => { + const [internalValue, setInternalValue] = useState(value || null); + const itemHeight = 34; + const max = 0; + const min = 0 - (itemHeight * (_.size(options) - 1)); + const [touching, setTouching] = useState(false); + const [touchPoint, setTouchPoint] = React.useState(); + const [translateY, setTranslateY] = useState(0) - const handleSelectOption = (selectValue: any) => { - const valueIndex = _.findIndex(options, (option) => { - if (labelInValue) { - return option.value === selectValue.value; + const handleSelectOption = (selectValue: any) => { + const valueIndex = _.findIndex(options, (option) => { + if (labelInValue) { + return option.value === selectValue.value; + } + return option.value === selectValue + }) + setTranslateY(0 - (valueIndex * itemHeight)); } - return option.value === selectValue - }) - setTranslateY(0 - (valueIndex * itemHeight)); - } - useEffect(() => { - if (value == undefined) { - return; - } - if (value == internalValue) { - return; - } - setInternalValue(value) - handleSelectOption(value) - }, [value]); + useEffect(() => { + if (value == undefined) { + return; + } + if (value == internalValue) { + return; + } + setInternalValue(value) + handleSelectOption(value) + }, [value]); - useEffect(() => { - if (!value) { - const selectValue = labelInValue ? options?.[0] : options?.[0].value - setInternalValue(selectValue || null); - onChange?.(selectValue || null); - handleSelectOption(selectValue); - } else { - handleSelectOption(value); - } - }, [options]); + useEffect(() => { + if (!value) { + const selectValue = labelInValue ? options?.[0] : options?.[0].value + setInternalValue(selectValue || null); + onChange?.(selectValue || null); + handleSelectOption(selectValue); + } else { + handleSelectOption(value); + } + }, [options]); - return
-
{ - const startPoint = {clientX: event.touches[0].clientX, clientY: event.touches[0].clientY} - setTouchPoint(startPoint); - }} - onTouchMove={(event) => { - const movePoint = {clientX: event.touches[0].clientX, clientY: event.touches[0].clientY} - setTranslateY(translateY + (movePoint.clientY - touchPoint.clientY)); - setTouchPoint(movePoint); - }} - onTouchEnd={(event) => { - let selectIndex = 0; - if (translateY > 0) { - setTranslateY(0); - selectIndex = 0; - } else if (translateY < (0 - itemHeight * (_.size(options) - 1))) { - setTranslateY(0 - itemHeight * (_.size(options) - 1)); - selectIndex = _.size(options) - 1; - } else { - const num = Math.abs(Math.round(translateY / itemHeight)); - setTranslateY(0 - num * itemHeight); - selectIndex = num; - } - console.log("selectIndex", selectIndex) - const selectValue = labelInValue ? options?.[selectIndex] : options?.[selectIndex].value - setInternalValue(selectValue); - onChange?.(selectValue); - }} - > - {!_.isEmpty(options) && options?.map((option: any, index: number) => { - return - })} -
-
- } + return
+
{ + setTouching(true); + const startPoint = {clientX: event.touches[0].clientX, clientY: event.touches[0].clientY} + setTouchPoint(startPoint); + }} + onTouchMove={(event) => { + if (touching) { + const movePoint = {clientX: event.touches[0].clientX, clientY: event.touches[0].clientY} + if (translateY > max || translateY < min) { + return; + } + setTranslateY(translateY + (movePoint.clientY - touchPoint.clientY)); + setTouchPoint(movePoint); + console.log(movePoint) + } + }} + onTouchEnd={(event) => { + setTouching(false); + let selectIndex = 0; + if (translateY > 0) { + setTranslateY(0); + selectIndex = 0; + } else if (translateY < (0 - itemHeight * (_.size(options) - 1))) { + setTranslateY(0 - itemHeight * (_.size(options) - 1)); + selectIndex = _.size(options) - 1; + } else { + const num = Math.abs(Math.round(translateY / itemHeight)); + setTranslateY(0 - num * itemHeight); + selectIndex = num; + } + console.log("selectIndex", selectIndex) + const selectValue = labelInValue ? options?.[selectIndex] : options?.[selectIndex].value + setInternalValue(selectValue); + onChange?.(selectValue); + }} + > + {!_.isEmpty(options) && options?.map((option: any, index: number) => { + return + })} +
+
+ } )