diff --git a/packages/arcodesign/components/picker-view/README.en-US.md b/packages/arcodesign/components/picker-view/README.en-US.md index b212e7ff..8a5d07d6 100644 --- a/packages/arcodesign/components/picker-view/README.en-US.md +++ b/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| diff --git a/packages/arcodesign/components/picker-view/README.md b/packages/arcodesign/components/picker-view/README.md index 37629f91..8627c329 100644 --- a/packages/arcodesign/components/picker-view/README.md +++ b/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| diff --git a/packages/arcodesign/components/picker-view/__ast__/index.ast.json b/packages/arcodesign/components/picker-view/__ast__/index.ast.json index fbddefad..03b6c899 100644 --- a/packages/arcodesign/components/picker-view/__ast__/index.ast.json +++ b/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": { diff --git a/packages/arcodesign/components/picker-view/components/cascader.tsx b/packages/arcodesign/components/picker-view/components/cascader.tsx index 1ea0ed35..5fcbebde 100644 --- a/packages/arcodesign/components/picker-view/components/cascader.tsx +++ b/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) => { @@ -45,6 +46,7 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref) => { useImperativeHandle(ref, () => ({ getCellMovingStatus, scrollToCurrentIndex, + getAllCellsValue, })); function getCellMovingStatus() { @@ -55,6 +57,10 @@ const Cascader = forwardRef((props: CascaderProps, ref: Ref) => { 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, diff --git a/packages/arcodesign/components/picker-view/components/picker-cell.tsx b/packages/arcodesign/components/picker-view/components/picker-cell.tsx index 335087e4..54379a34 100644 --- a/packages/arcodesign/components/picker-view/components/picker-cell.tsx +++ b/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) => { @@ -300,6 +301,10 @@ const PickerCell = forwardRef((props: PickerCellProps, ref: Ref) _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) useImperativeHandle(ref, () => ({ movingStatus: movingStatusRef.current, scrollToCurrentIndex, + getCurrentCellValue, })); return !hideEmptyCols || (data && data.length) ? ( diff --git a/packages/arcodesign/components/picker-view/index.tsx b/packages/arcodesign/components/picker-view/index.tsx index 032edcca..5bcedd62 100644 --- a/packages/arcodesign/components/picker-view/index.tsx +++ b/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) const wrapperRef = useRef(null); const domRef = useRef(null); const barRef = useRef(null); - const scrollValueRef = useLatestRef(scrollValue); const pickerCellsRef = useRef([]); const cascaderRef = useRef(null); @@ -121,10 +120,17 @@ const PickerView = forwardRef((props: PickerViewProps, ref: Ref) 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() { diff --git a/packages/arcodesign/components/picker/README.en-US.md b/packages/arcodesign/components/picker/README.en-US.md index 980c3e84..26af1a51 100644 --- a/packages/arcodesign/components/picker/README.en-US.md +++ b/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"| diff --git a/packages/arcodesign/components/picker/README.md b/packages/arcodesign/components/picker/README.md index a1cabc34..0ddd215a 100644 --- a/packages/arcodesign/components/picker/README.md +++ b/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|"确定"| diff --git a/packages/arcodesign/components/picker/__ast__/index.ast.json b/packages/arcodesign/components/picker/__ast__/index.ast.json index 9d093f1e..6213f93c 100644 --- a/packages/arcodesign/components/picker/__ast__/index.ast.json +++ b/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": { diff --git a/packages/arcodesign/components/picker/demo/index.md b/packages/arcodesign/components/picker/demo/index.md index 13608b53..f0031346 100644 --- a/packages/arcodesign/components/picker/demo/index.md +++ b/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) { diff --git a/packages/arcodesign/components/picker/index.tsx b/packages/arcodesign/components/picker/index.tsx index 1f543146..7ae9598a 100644 --- a/packages/arcodesign/components/picker/index.tsx +++ b/packages/arcodesign/components/picker/index.tsx @@ -110,7 +110,7 @@ const Picker = forwardRef((props: PickerProps, ref: Ref) => { useEffect(() => { setScrollValue(value); - }, [value, setScrollValue]); + }, [value]); useListenResize(updateLayoutByVisible, [visible]); diff --git a/packages/arcodesign/components/tabs/index.tsx b/packages/arcodesign/components/tabs/index.tsx index a9f2c8fb..98505181 100644 --- a/packages/arcodesign/components/tabs/index.tsx +++ b/packages/arcodesign/components/tabs/index.tsx @@ -130,6 +130,7 @@ const Tabs = forwardRef((props: TabsProps, ref: Ref) => { const touchStartXRef = useRef(0); const touchStartYRef = useRef(0); const touchStartTimeRef = useRef(0); + const touchMovedRef = useRef(false); const scrollingRef = useRef(null); const touchStoppedRef = useRef(false); const changeFromRef = useRef(''); @@ -231,6 +232,7 @@ const Tabs = forwardRef((props: TabsProps, ref: Ref) => { 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) => { 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) => { 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;