From 8307012ad80ff2c6de1ed56b054f4dbace203f05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=B9=BF?= Date: Thu, 29 Feb 2024 21:14:56 +0800 Subject: [PATCH] refactor: optimize code --- .../picker-view/components/cascader.tsx | 6 ++ .../picker-view/components/picker-cell.tsx | 6 ++ .../components/picker-view/index.tsx | 96 ++++--------------- .../components/picker/demo/cascader.md | 4 +- .../components/picker/demo/title.md | 4 +- .../arcodesign/components/picker/index.tsx | 8 +- 6 files changed, 40 insertions(+), 84 deletions(-) diff --git a/packages/arcodesign/components/picker-view/components/cascader.tsx b/packages/arcodesign/components/picker-view/components/cascader.tsx index 5fcbebde..fd8afd0f 100644 --- a/packages/arcodesign/components/picker-view/components/cascader.tsx +++ b/packages/arcodesign/components/picker-view/components/cascader.tsx @@ -23,6 +23,7 @@ export interface CascaderRef { getCellMovingStatus: () => PickerCellMovingStatus[]; scrollToCurrentIndex: () => void; getAllCellsValue: () => ValueType[]; + getAllCellsData: () => PickerData[]; } const Cascader = forwardRef((props: CascaderProps, ref: Ref) => { @@ -47,6 +48,7 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref) => { getCellMovingStatus, scrollToCurrentIndex, getAllCellsValue, + getAllCellsData, })); function getCellMovingStatus() { @@ -61,6 +63,10 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref) => { return pickerCellsRef.current.map(cell => cell.getCurrentCellValue()); } + function getAllCellsData() { + return pickerCellsRef.current.map(cell => cell.getCurrentCellData()); + } + function _onValueChange(value: ValueType[], index: number, newData: PickerData[]) { const children: PickerData[] = arrayTreeFilter( data, diff --git a/packages/arcodesign/components/picker-view/components/picker-cell.tsx b/packages/arcodesign/components/picker-view/components/picker-cell.tsx index fb544a4c..9137fcca 100644 --- a/packages/arcodesign/components/picker-view/components/picker-cell.tsx +++ b/packages/arcodesign/components/picker-view/components/picker-cell.tsx @@ -35,6 +35,7 @@ export interface PickerCellRef { movingStatus: PickerCellMovingStatus; scrollToCurrentIndex: () => void; getCurrentCellValue: () => ValueType; + getCurrentCellData: () => PickerData; } const PickerCell = forwardRef((props: PickerCellProps, ref: Ref) => { @@ -305,6 +306,10 @@ const PickerCell = forwardRef((props: PickerCellProps, ref: Ref) return data[currentIndex]?.value; } + function getCurrentCellData() { + return data[currentIndex]; + } + function _clearTimer() { timeRef.current && clearTimeout(timeRef.current); timeRef.current = null; @@ -371,6 +376,7 @@ const PickerCell = forwardRef((props: PickerCellProps, ref: Ref) movingStatus: movingStatusRef.current, scrollToCurrentIndex, getCurrentCellValue, + getCurrentCellData, })); return !hideEmptyCols || (data && data.length) ? ( diff --git a/packages/arcodesign/components/picker-view/index.tsx b/packages/arcodesign/components/picker-view/index.tsx index 8ab1f516..adfdbf7c 100644 --- a/packages/arcodesign/components/picker-view/index.tsx +++ b/packages/arcodesign/components/picker-view/index.tsx @@ -75,71 +75,6 @@ const isArray = ( const isStrOrNum = (dt: ValueType[][] | PickerData[][]): dt is ValueType[][] => typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number'; -const getInitValue = ( - data: PickerData[] | PickerData[][] | ValueType[][], - value: ValueType[] | undefined, -): ValueType[] => { - if (value === undefined) { - let newValue: ValueType[]; - if (isArray(data)) { - if (isStrOrNum(data)) { - newValue = data.map((item: ValueType[]) => { - return item[0]; - }); - } else { - newValue = data.map((item: PickerData[]) => { - return item[0].value; - }); - } - } else { - newValue = data.map((item: PickerData) => { - return item.value; - }); - } - return newValue; - } - return value; -}; - -const getInitData = ( - data: PickerData[] | PickerData[][] | ValueType[][], - value: ValueType[] | undefined, -): PickerData[] => { - const initValue = getInitValue(data, value); - let newData: PickerData[]; - if (isArray(data)) { - if (isStrOrNum(data)) { - newData = initValue.map((item: ValueType) => { - return { - label: item, - value: item, - }; - }); - } else { - newData = initValue.map((item: ValueType, index: number) => { - let newItem = data[index][0]; - data[index].forEach((dataItem: PickerData) => { - if (dataItem.value === item) { - newItem = dataItem; - } - }); - return newItem; - }); - } - } else { - newData = initValue.map((item: ValueType) => { - let newItem = data[0]; - data.forEach((dataItem: PickerData) => { - if (dataItem.value === item) { - newItem = dataItem; - } - }); - return newItem; - }); - } - return newData; -}; - const PickerView = forwardRef((props: PickerViewProps, ref: Ref) => { const { className = '', @@ -159,6 +94,7 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref) const [itemHeight, setItemHeight] = useState(0); const [wrapperHeight, setWrapperHeight] = useState(0); const [scrollValue, setScrollValue] = useMountedState(value); + const [scrollIndex, setScrollIndex] = useMountedState(0); const wrapperRef = useRef(null); const domRef = useRef(null); const barRef = useRef(null); @@ -196,12 +132,6 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref) return newData; }, [data]); - const selectedPickerCellDataRef = useRef({ - value: getInitValue(data, value), - index: 0, - data: getInitData(data, value), - }); - const getAllColumnValues = () => { const curValues = cascade ? cascaderRef.current?.getAllCellsValue() || [] @@ -211,6 +141,21 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref) return curValues.filter(v => v !== undefined); }; + const getAllColumnData = () => { + const curValues = cascade + ? cascaderRef.current?.getAllCellsData() || [] + : pickerCellsRef.current.map(cell => cell.getCurrentCellData()); + return curValues.filter(v => v !== undefined); + }; + + const getSelectedPickerCellData = () => { + return { + value: getAllColumnValues(), + index: scrollIndex, + data: getAllColumnData(), + }; + }; + function getColumnValue(index = 0) { return getAllColumnValues()[index]; } @@ -237,16 +182,12 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref) updateLayout, resetValue, scrollToCurrentIndex, - getSelectedPickerCellData: () => selectedPickerCellDataRef.current, + getSelectedPickerCellData, })); function _onValueChange(val: ValueType[], index: number, newData: PickerData[]) { setScrollValue(val); - selectedPickerCellDataRef.current = { - value: val, - index, - data: newData, - }; + setScrollIndex(index); if (onPickerChange) { onPickerChange(val, index, newData); @@ -280,6 +221,7 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref) function resetValue() { setScrollValue(value); + setScrollIndex(0); } const newItemStyle = { diff --git a/packages/arcodesign/components/picker/demo/cascader.md b/packages/arcodesign/components/picker/demo/cascader.md index c57e0cdf..9b9e5a4e 100644 --- a/packages/arcodesign/components/picker/demo/cascader.md +++ b/packages/arcodesign/components/picker/demo/cascader.md @@ -95,8 +95,8 @@ export default function PickerDemo() { console.log('------cell status', pickerRef.current.getCellMovingStatus()); setVisible(false); }} - onOk={(value) => { - console.log('on ok', value); + onOk={(value, index, data) => { + console.log('on ok', value, index, data); setPickerValue(value) }} onPickerChange={() => { diff --git a/packages/arcodesign/components/picker/demo/title.md b/packages/arcodesign/components/picker/demo/title.md index 23b4cc50..ae3bf4bb 100644 --- a/packages/arcodesign/components/picker/demo/title.md +++ b/packages/arcodesign/components/picker/demo/title.md @@ -93,8 +93,8 @@ export default function PickerDemo() { onHide={() => { setVisible(false); }} - onOk={(value) => { - console.log('on ok', value); + onOk={(value, index, data) => { + console.log('on ok', value, index, data); }} onPickerChange={() => { if (pickerRef.current) { diff --git a/packages/arcodesign/components/picker/index.tsx b/packages/arcodesign/components/picker/index.tsx index 79772a2b..2f7f8661 100644 --- a/packages/arcodesign/components/picker/index.tsx +++ b/packages/arcodesign/components/picker/index.tsx @@ -96,9 +96,11 @@ const Picker = forwardRef((props: PickerProps, ref: Ref) => { pickerViewRef.current?.scrollToCurrentIndex(); nextTick(() => { const val = pickerViewRef.current?.getAllColumnValues() || scrollValueRef.current || []; - const selectedData = pickerViewRef.current?.getSelectedPickerCellData(); - if (onOk && selectedData) { - onOk(val, selectedData?.index, selectedData?.data); + const selectedDataIndex = + pickerViewRef.current?.getSelectedPickerCellData()?.index || 0; + const selectedDataData = pickerViewRef.current?.getSelectedPickerCellData()?.data || []; + if (onOk) { + onOk(val, selectedDataIndex, selectedDataData); } if (onChange) { onChange(val);