Merge pull request #172 from arco-design/fix-picker-tab

packages/arcodesign/components/picker-view/README.en-US.md

@@ -15,8 +15,8 @@ The picker view component, not has contain popup, which is convenient for the us
 |cols|Number of columns (maximum 5; only used when cascade=true)|number|3|
 |rows|The number of rows (the number of rows in a column of optional items), must be an odd number, the minimum is 3|number|5|
 |disabled|Disabled|boolean|false|
-|value|Value, the format is \[value1, value2, value3\], corresponding to the corresponding level value of the data source|ValueType\[\]|required|
-|onPickerChange|The callback function after each column data selection changes|(value: ValueType\[\], index: number) =\> void|-|
+|value|Value, the format is \[value1, value2, value3\], corresponding to the corresponding level value of the data source|ValueType\[\]|-|
+|onPickerChange|The callback function after each column data selection changes|(value: ValueType\[\], index: number, data: PickerData\[\]) =\> void|-|
 |itemStyle|Stylesheet per column|CSSProperties|-|
 |className|Custom classname|string|-|
 |clickable|Whether content can be selected by clicking|boolean|true|

packages/arcodesign/components/picker-view/README.md

@@ -15,8 +15,8 @@
 |cols|列数(最大为5；cascade=true时才使用)|number|3|
 |rows|行数(一列可选项的行数)，必须是奇数，最小为3个|number|5|
 |disabled|是否不可用|boolean|false|
-|value|值, 格式是\[value1, value2, value3\], 对应数据源的相应级层value|ValueType\[\]|必填|
-|onPickerChange|每列数据选择变化后的回调函数|(value: ValueType\[\], index: number) =\> void|-|
+|value|值, 格式是\[value1, value2, value3\], 对应数据源的相应级层value|ValueType\[\]|-|
+|onPickerChange|每列数据选择变化后的回调函数|(value: ValueType\[\], index: number, data: PickerData\[\]) =\> void|-|
 |itemStyle|每列样式|CSSProperties|-|
 |className|自定义类名|string|-|
 |clickable|是否可通过点击操作选择内容|boolean|true|

packages/arcodesign/components/picker-view/__ast__/index.ast.json

@@ -120,7 +120,7 @@
                 "fileName": "arcom-github/packages/arcodesign/components/picker-view/type.ts",
                 "name": "PickerViewProps"
             },
-            "required": true,
+            "required": false,
             "type": {
                 "name": "ValueType[]"
             }
@@ -139,7 +139,7 @@
             },
             "required": false,
             "type": {
-                "name": "(value: ValueType[], index: number) => void"
+                "name": "(value: ValueType[], index: number, data: PickerData[]) => void"
             }
         },
         "itemStyle": {

packages/arcodesign/components/picker-view/components/cascader.tsx

@@ -22,6 +22,7 @@ export interface CascaderProps {
 export interface CascaderRef {
     getCellMovingStatus: () => PickerCellMovingStatus[];
     scrollToCurrentIndex: () => void;
+    getAllCellsValue: () => ValueType[];
 }
 
 const Cascader = forwardRef((props: CascaderProps, ref: Ref<CascaderRef>) => {
@@ -45,6 +46,7 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref<CascaderRef>) => {
     useImperativeHandle(ref, () => ({
         getCellMovingStatus,
         scrollToCurrentIndex,
+        getAllCellsValue,
     }));
 
     function getCellMovingStatus() {
@@ -55,6 +57,10 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref<CascaderRef>) => {
         pickerCellsRef.current.forEach(cell => cell.scrollToCurrentIndex());
     }
 
+    function getAllCellsValue() {
+        return pickerCellsRef.current.map(cell => cell.getCurrentCellValue());
+    }
+
     function _onValueChange(value: ValueType[], index: number, newData: PickerData[]) {
         const children: PickerData[] = arrayTreeFilter(
             data,

packages/arcodesign/components/picker-view/components/picker-cell.tsx

@@ -34,6 +34,7 @@ export interface PickerCellProps {
 export interface PickerCellRef {
     movingStatus: PickerCellMovingStatus;
     scrollToCurrentIndex: () => void;
+    getCurrentCellValue: () => ValueType;
 }
 
 const PickerCell = forwardRef((props: PickerCellProps, ref: Ref<PickerCellRef>) => {
@@ -300,6 +301,10 @@ const PickerCell = forwardRef((props: PickerCellProps, ref: Ref<PickerCellRef>)
         _scrollToIndexWithChange(nowIndex, 0);
     }
 
+    function getCurrentCellValue() {
+        return currentValue || data[currentIndex]?.value;
+    }
+
     function _clearTimer() {
         timeRef.current && clearTimeout(timeRef.current);
         timeRef.current = null;
@@ -365,6 +370,7 @@ const PickerCell = forwardRef((props: PickerCellProps, ref: Ref<PickerCellRef>)
     useImperativeHandle(ref, () => ({
         movingStatus: movingStatusRef.current,
         scrollToCurrentIndex,
+        getCurrentCellValue,
     }));
 
     return !hideEmptyCols || (data && data.length) ? (

packages/arcodesign/components/picker-view/index.tsx

@@ -14,7 +14,7 @@ import MultiPicker from '../picker-view/components/multi-picker';
 import PickerCell, { PickerCellRef } from '../picker-view/components/picker-cell';
 import Cascader, { CascaderRef } from '../picker-view/components/cascader';
 import { PickerViewProps, ValueType, PickerData, PickerCellMovingStatus } from './type';
-import { useLatestRef, useMountedState } from '../_helpers';
+import { useMountedState } from '../_helpers';
 
 export * from './type';
 export { MultiPicker, PickerCell, Cascader };
@@ -79,7 +79,6 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref<PickerViewRef>)
     const wrapperRef = useRef<HTMLDivElement>(null);
     const domRef = useRef<HTMLDivElement | null>(null);
     const barRef = useRef<HTMLDivElement | null>(null);
-    const scrollValueRef = useLatestRef(scrollValue);
     const pickerCellsRef = useRef<PickerCellRef[]>([]);
     const cascaderRef = useRef<CascaderRef>(null);
 
@@ -121,10 +120,17 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref<PickerViewRef>)
         return newData;
     }, [data]);
 
-    const getAllColumnValues = () => scrollValueRef.current || [];
+    const getAllColumnValues = () => {
+        const curValues = cascade
+            ? cascaderRef.current?.getAllCellsValue() || []
+            : pickerCellsRef.current.map(cell => cell.getCurrentCellValue());
+        // 移除级联带来的空列值，理论上非首尾列不会有空值
+        // @en Remove empty values from cascader
+        return curValues.filter(v => v);
+    };
 
     function getColumnValue(index = 0) {
-        return scrollValueRef.current?.[index];
+        return getAllColumnValues()[index];
     }
 
     function getCellMovingStatus() {

packages/arcodesign/components/picker/README.en-US.md

@@ -18,7 +18,7 @@ The selector component, in the form of a popup layer.
 |value|Value, the format is \[value1, value2, value3\], corresponding to the corresponding level value of the data source, if not passed, the first value of each column is selected by default|ValueType\[\]|-|
 |onHide|Callback for clicking on mask layer or cancel button, OK button|(scene?: string) =\> void|-|
 |onChange|Callback after selection|(selectedValue: ValueType\[\]) =\> void|-|
-|onPickerChange|The callback after each column data selection changes|(value: ValueType\[\], index: number) =\> void|-|
+|onPickerChange|The callback after each column data selection changes|(value: ValueType\[\], index: number, data: PickerData\[\]) =\> void|-|
 |itemStyle|Stylesheet per column|CSSProperties|-|
 |visible|whether to show the picker|boolean|false|
 |okText|Text of confirmed selected value of the popup|string|"OK"|

packages/arcodesign/components/picker/README.md

@@ -18,7 +18,7 @@
 |value|值, 格式是\[value1, value2, value3\], 对应数据源的相应级层value，如果不传默认选每一列的第一个值|ValueType\[\]|-|
 |onHide|点击遮罩层或取消、确定按钮的隐藏回调|(scene?: string) =\> void|-|
 |onChange|选中后的回调|(selectedValue: ValueType\[\]) =\> void|-|
-|onPickerChange|每列数据选择变化后的回调函数|(value: ValueType\[\], index: number) =\> void|-|
+|onPickerChange|每列数据选择变化后的回调函数|(value: ValueType\[\], index: number, data: PickerData\[\]) =\> void|-|
 |itemStyle|每列样式|CSSProperties|-|
 |visible|是否展示选择器|boolean|false|
 |okText|弹窗确认已选值的文案|string|"确定"|

packages/arcodesign/components/picker/__ast__/index.ast.json

@@ -173,7 +173,7 @@
             },
             "required": false,
             "type": {
-                "name": "(value: ValueType[], index: number) => void"
+                "name": "(value: ValueType[], index: number, data: PickerData[]) => void"
             }
         },
         "itemStyle": {

packages/arcodesign/components/picker/demo/index.md

@@ -74,6 +74,9 @@ export default function PickerDemo() {
                 onDismiss={() => {
                     console.log('------demo onDismiss');
                 }}
+                onOk={(val) => {
+                    console.log('------demo onOk', val);
+                }}
                 onPickerChange={(value) => {
                     console.info('-----demo onPickerChange', value);
                     if (pickerRef.current) {

packages/arcodesign/components/picker/index.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import React, { useEffect, useRef, forwardRef, Ref, useImperativeHandle } from 'react';
 import { cls, componentWrapper, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Popup from '../popup';
 import PickerView, { PickerViewRef, ValueType, PickerCellMovingStatus } from '../picker-view';
 import { PickerProps } from './type';
-import { useListenResize } from '../_helpers';
+import { useLatestRef, useListenResize } from '../_helpers';
 
 export * from './type';
 export { MultiPicker, PickerCell, Cascader } from '../picker-view';
@@ -70,7 +70,7 @@ const Picker = forwardRef((props: PickerProps, ref: Ref<PickerRef>) => {
         ...otherProps
     } = props;
 
-    const [scrollValue, setScrollValue] = useState(value);
+    const scrollValueRef = useLatestRef(value);
     const domRef = useRef<HTMLDivElement | null>(null);
     const pickerViewRef = useRef<PickerViewRef>(null);
 
@@ -95,7 +95,7 @@ const Picker = forwardRef((props: PickerProps, ref: Ref<PickerRef>) => {
     const handleConfirm = () => {
         pickerViewRef.current?.scrollToCurrentIndex();
         nextTick(() => {
-            const val = pickerViewRef.current?.getAllColumnValues() || scrollValue || [];
+            const val = pickerViewRef.current?.getAllColumnValues() || scrollValueRef.current || [];
             if (onOk) {
                 onOk(val);
             }
@@ -108,10 +108,6 @@ const Picker = forwardRef((props: PickerProps, ref: Ref<PickerRef>) => {
         });
     };
 
-    useEffect(() => {
-        setScrollValue(value);
-    }, [value, setScrollValue]);
-
     useListenResize(updateLayoutByVisible, [visible]);
 
     // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值（初始值）