refactor: optimize code

arco-design · Feb 29, 2024 · 8307012 · 8307012
1 parent d6244fa
commit 8307012
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 84 deletions.
diff --git 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<CascaderRef>) => {
@@ -47,6 +48,7 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref<CascaderRef>) => {
         getCellMovingStatus,
         scrollToCurrentIndex,
         getAllCellsValue,
+        getAllCellsData,
     }));
 
     function getCellMovingStatus() {
@@ -61,6 +63,10 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref<CascaderRef>) => {
         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
@@ -35,6 +35,7 @@ export interface PickerCellRef {
     movingStatus: PickerCellMovingStatus;
     scrollToCurrentIndex: () => void;
     getCurrentCellValue: () => ValueType;
+    getCurrentCellData: () => PickerData;
 }
 
 const PickerCell = forwardRef((props: PickerCellProps, ref: Ref<PickerCellRef>) => {
@@ -305,6 +306,10 @@ const PickerCell = forwardRef((props: PickerCellProps, ref: Ref<PickerCellRef>)
         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<PickerCellRef>)
         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
@@ -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<PickerViewRef>) => {
     const {
         className = '',
@@ -159,6 +94,7 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref<PickerViewRef>)
     const [itemHeight, setItemHeight] = useState(0);
     const [wrapperHeight, setWrapperHeight] = useState(0);
     const [scrollValue, setScrollValue] = useMountedState(value);
+    const [scrollIndex, setScrollIndex] = useMountedState(0);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const domRef = useRef<HTMLDivElement | null>(null);
     const barRef = useRef<HTMLDivElement | null>(null);
@@ -196,12 +132,6 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref<PickerViewRef>)
         return newData;
     }, [data]);
 
-    const selectedPickerCellDataRef = useRef<ISelectedPickerCellData>({
-        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<PickerViewRef>)
         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<PickerViewRef>)
         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<PickerViewRef>)
 
     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
@@ -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
@@ -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
@@ -96,9 +96,11 @@ const Picker = forwardRef((props: PickerProps, ref: Ref<PickerRef>) => {
         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);