fix: Picker support default values when click confirm button

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 data[currentIndex]?.value || currentValue;
+    }
+
     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

@@ -110,7 +110,7 @@ const Picker = forwardRef((props: PickerProps, ref: Ref<PickerRef>) => {
 
     useEffect(() => {
         setScrollValue(value);
-    }, [value, setScrollValue]);
+    }, [value]);
 
     useListenResize(updateLayoutByVisible, [visible]);
 

packages/arcodesign/components/tabs/index.tsx

@@ -130,6 +130,7 @@ const Tabs = forwardRef((props: TabsProps, ref: Ref<TabsRef>) => {
     const touchStartXRef = useRef(0);
     const touchStartYRef = useRef(0);
     const touchStartTimeRef = useRef(0);
+    const touchMovedRef = useRef(false);
     const scrollingRef = useRef<boolean | null>(null);
     const touchStoppedRef = useRef(false);
     const changeFromRef = useRef('');
@@ -231,6 +232,7 @@ const Tabs = forwardRef((props: TabsProps, ref: Ref<TabsRef>) => {
                 return;
             }
             touchStartedRef.current = true;
+            touchMovedRef.current = false;
             setCellTrans(false);
             setPaneTrans(false);
             const evt = e.touches[0];
@@ -258,6 +260,7 @@ const Tabs = forwardRef((props: TabsProps, ref: Ref<TabsRef>) => {
                 e.cancelable && e.preventDefault();
                 return;
             }
+            touchMovedRef.current = true;
             const evt = e.changedTouches[0];
             const touchMoveX = evt.clientX || 0;
             const touchMoveY = evt.clientY || 0;
@@ -329,7 +332,12 @@ const Tabs = forwardRef((props: TabsProps, ref: Ref<TabsRef>) => {
         if (scrollingRef.current && tabBarResetWhenScroll === 'touchend') {
             cellRef.current && cellRef.current.scrollToCenter();
         }
-        if (!touchStartedRef.current || posAdjustingRef.current || scrollingRef.current) {
+        if (
+            !touchStartedRef.current ||
+            posAdjustingRef.current ||
+            scrollingRef.current ||
+            !touchMovedRef.current
+        ) {
             return;
         }
         touchStartedRef.current = false;