@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/picker/type.d.ts

@@ -0,0 +1,131 @@
+import React, { ReactNode } from 'react';
+import { PickerData, ValueType } from '../picker-view/type';
+import { PopupProps } from '../popup';
+export declare type DataType = PickerData[] | PickerData[][] | ValueType[][];
+export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction' | 'maskClosable'> {
+    /**
+     * 数据源，非级联时data数组的长度决定picker列数，级联时以cols决定 pick列数
+     * @en Data source, the length of the data list determines the number of picker columns when not cascading, and is determined by cols when cascading
+     */
+    data: PickerData[] | PickerData[][] | ValueType[][];
+    /**
+     * 是否联动
+     * @en Whether to cascade
+     * @default true
+     */
+    cascade?: boolean;
+    /**
+     * 列数(最大为5；cascade=true时才使用)
+     * @en Number of columns (maximum 5; only used when cascade=true)
+     * @default 3
+     */
+    cols?: number;
+    /**
+     * 行数(一列可选项的行数)，必须是奇数，最小为3个
+     * @en The number of rows (the number of rows in a column of optional items), must be an odd number, the minimum is 3
+     * @default 5
+     */
+    rows?: number;
+    /**
+     * 是否不可用
+     * @en Whether t be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 值, 格式是[value1, value2, value3], 对应数据源的相应级层value，如果不传默认选每一列的第一个值
+     * @en 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
+     */
+    value?: ValueType[];
+    /**
+     * 点击遮罩层或取消、确定按钮的隐藏回调
+     * @en Callback for clicking on mask layer or cancel button, OK button
+     */
+    onHide?: (scene?: string) => void;
+    /**
+     * 选中后的回调
+     * @en Callback after selection
+     */
+    onChange?: (selectedValue: ValueType[]) => void;
+    /**
+     * 每列数据选择变化后的回调函数
+     * @en The callback after each column data selection changes
+     */
+    onPickerChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
+    /**
+     * 每列样式
+     * @en Stylesheet per column
+     */
+    itemStyle?: React.CSSProperties;
+    /**
+     * 是否展示选择器
+     * @en whether to show the picker
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 弹窗确认已选值的文案
+     * @en Text of confirmed selected value of the popup
+     * @default "确定"
+     * @default_en "OK"
+     */
+    okText?: string;
+    /**
+     * 弹窗取消的文案
+     * @en Popup canceled text
+     * @default "取消"
+     * @default_en "Cancel"
+     */
+    dismissText?: string;
+    /**
+     * 点击选中时执行的回调
+     * @en Callback when clicking on Ok
+     */
+    onOk?: (value: ValueType[], data: PickerData[]) => void;
+    /**
+     * 点击取消时执行的回调
+     * @en Callback when clicking to cancel
+     */
+    onDismiss?: () => void;
+    /**
+     * 是否可通过点击操作选择内容
+     * @en Whether content can be selected by clicking
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 是否隐藏无数据的空列，常用于级联选择
+     * @en Whether to hide empty columns without data, often used for cascading selection
+     * @default false
+     */
+    hideEmptyCols?: boolean;
+    /**
+     * 选择器标题
+     * @en Picker title
+     * @default ""
+     */
+    title?: string;
+    /**
+     * 点击蒙层是否关闭菜单
+     * @en Whether to click the mask to close the menu
+     * @default false
+     */
+    maskClosable?: boolean;
+    /**
+     * 是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥
+     * @en Whether to stop sliding by long-pressing, inputing in the number x means that the touch exceeds x milliseconds to count as long-pressing, inputing true means that x=100, the long-press event and the click event are mutually exclusive
+     * @default false
+     */
+    touchToStop?: boolean | number;
+    /**
+     * 是否禁用滚动容器手势判断，禁用后交给业务方自己判断
+     * @en Whether to disable the scrolling container gesture judgment, leave it to users to judge
+     * @default true
+     */
+    gestureOutOfControl?: boolean;
+    /**
+     * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
+     * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
+     */
+    renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
+}

package/esnext/picker/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/picker-view/components/cascader.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PickerData, ValueType, PickerCellMovingStatus } from '../type';
+export interface CascaderProps {
+    prefixCls: string;
+    cols: number;
+    itemStyle?: React.CSSProperties;
+    data: PickerData[];
+    clickable: boolean;
+    disabled: boolean;
+    itemHeight: number;
+    wrapperHeight: number;
+    selectedValue?: ValueType[];
+    rows?: number;
+    hideEmptyCols?: boolean;
+    onValueChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
+    touchToStop?: boolean | number;
+}
+export interface CascaderRef {
+    getCellMovingStatus: () => PickerCellMovingStatus[];
+    scrollToCurrentIndex: () => void;
+    getAllCellsValue: () => ValueType[];
+    getAllCellsData: () => PickerData[];
+}
+declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<CascaderRef>>;
+export default Cascader;

package/esnext/picker-view/components/cascader.js

@@ -0,0 +1,54 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { arrayTreeFilter } from '@arco-design/mobile-utils';
+import MultiPicker from './multi-picker';
+import PickerCell from './picker-cell';
+const Cascader = forwardRef((props, ref) => {
+    const { prefixCls, itemStyle, cols, data, disabled, clickable, itemHeight, wrapperHeight, rows, hideEmptyCols, onValueChange, selectedValue = [], touchToStop, } = props;
+    const pickerCellsRef = useRef([]);
+    useImperativeHandle(ref, () => ({
+        getCellMovingStatus,
+        scrollToCurrentIndex,
+        getAllCellsValue,
+        getAllCellsData,
+    }));
+    function getCellMovingStatus() {
+        return pickerCellsRef.current.map(cell => cell.movingStatus);
+    }
+    function scrollToCurrentIndex() {
+        pickerCellsRef.current.forEach(cell => cell.scrollToCurrentIndex());
+    }
+    function getAllCellsValue() {
+        return pickerCellsRef.current.map(cell => cell.getCurrentCellValue());
+    }
+    function getAllCellsData() {
+        return pickerCellsRef.current.map(cell => cell.getCurrentCellData());
+    }
+    function _onValueChange(value, index, newData) {
+        const children = arrayTreeFilter(data, (item, level) => level <= index && item.value === value[level]);
+        let child = children[index];
+        let i;
+        for (i = index + 1; i < cols && child && child.children; i++) {
+            child = child.children[0];
+            value[i] = child.value;
+            newData[i] = child;
+        }
+        value.length = i;
+        newData.length = i;
+        onValueChange?.(value, index, newData);
+    }
+    function _formatData() {
+        const childrenTree = arrayTreeFilter(data, (item, level) => item.value === selectedValue?.[level], { fallbackChildIndex: 0 }).map(item => item.children);
+        const needPad = cols - childrenTree.length;
+        if (needPad > 0) {
+            for (let i = 0; i < needPad; i++) {
+                childrenTree.push([]);
+            }
+        }
+        childrenTree.length = cols - 1;
+        childrenTree.unshift(data);
+        return childrenTree;
+    }
+    const formatData = useMemo(() => _formatData(), [data, selectedValue]);
+    return (React.createElement(MultiPicker, { prefixCls: `${prefixCls}-picker`, data: formatData, selectedValue: selectedValue, itemHeight: itemHeight, onValueChange: _onValueChange }, formatData.map((item, index) => (React.createElement(PickerCell, { key: `${index}_picker_cell_cascader`, data: item || [], style: itemStyle, prefixCls: `${prefixCls}-picker`, clickable: clickable, itemHeight: itemHeight, wrapperHeight: wrapperHeight, disabled: disabled, rows: rows, hideEmptyCols: hideEmptyCols, ref: cellRef => cellRef && (pickerCellsRef.current[index] = cellRef), touchToStop: touchToStop })))));
+});
+export default Cascader;

package/esnext/picker-view/components/multi-picker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PickerData, ValueType } from '../type';
+export interface MultiPickerProps {
+    prefixCls: string;
+    data: PickerData[][];
+    selectedValue?: ValueType[];
+    children: any;
+    itemHeight: number;
+    onValueChange: (value: ValueType[], index: number, data: PickerData[]) => void;
+}
+export default function MultiPicker(props: MultiPickerProps): JSX.Element;

package/esnext/picker-view/components/multi-picker.js

@@ -0,0 +1,32 @@
+import React from 'react';
+export default function MultiPicker(props) {
+    const { prefixCls, onValueChange, children, itemHeight, selectedValue, data } = props;
+    function getCurrentData() {
+        return (data || []).map((item, itemIndex) => {
+            const curSelected = selectedValue?.[itemIndex];
+            const cur = curSelected ? (item || []).find(i => i.value === curSelected) : undefined;
+            return cur || item?.[0];
+        });
+    }
+    function onChange({ index, value, changedData, callback, }) {
+        const newData = getCurrentData().concat();
+        newData[index] = changedData;
+        const newValue = newData.map(d => d?.value);
+        newValue[index] = value;
+        if (callback) {
+            callback(newValue, index, newData);
+        }
+    }
+    function _onValueChange(value, index, changedData) {
+        onChange({ index, value, callback: onValueChange, changedData });
+    }
+    function renderChild() {
+        const curData = getCurrentData();
+        const value = curData.map(d => d?.value);
+        return React.Children.map(children, (col, index) => React.cloneElement(col, {
+            onValueChange: (val, changedData) => _onValueChange(val, index, changedData),
+            selectedValue: value[index],
+        }));
+    }
+    return (React.createElement("div", { className: `${prefixCls}-multi`, style: { lineHeight: `${itemHeight}px` } }, renderChild()));
+}

package/esnext/picker-view/components/picker-cell.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ValueType, PickerData, PickerCellMovingStatus } from '../type';
+export interface PickerCellProps {
+    prefixCls: string;
+    style?: React.CSSProperties;
+    data: PickerData[];
+    clickable: boolean;
+    itemHeight: number;
+    wrapperHeight: number;
+    selectedValue?: ValueType;
+    onValueChange?: (value: ValueType, data: PickerData) => void;
+    disabled: boolean;
+    hideEmptyCols?: boolean;
+    /**
+     * 一列展示可选项的个数，默认是5，最小为3
+     * @en The number of options displayed in a column, the default is 5, the minimum is 3
+     */
+    rows?: number;
+    touchToStop?: boolean | number;
+}
+export interface PickerCellRef {
+    movingStatus: PickerCellMovingStatus;
+    scrollToCurrentIndex: () => void;
+    getCurrentCellValue: () => ValueType;
+    getCurrentCellData: () => PickerData;
+}
+declare const PickerCell: React.ForwardRefExoticComponent<PickerCellProps & React.RefAttributes<PickerCellRef>>;
+export default PickerCell;

package/esnext/picker-view/components/picker-cell.js

@@ -0,0 +1,284 @@
+import React, { useState, useLayoutEffect, useMemo, useRef, useCallback, useEffect, forwardRef, useImperativeHandle, } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { getStyleWithVendor, useMountedState, useRefState } from '../../_helpers';
+const PickerCell = forwardRef((props, ref) => {
+    const { prefixCls, style, data, clickable, itemHeight, wrapperHeight, selectedValue, onValueChange, disabled, hideEmptyCols, rows = 5, touchToStop = false, } = props;
+    const [transitionDuration, setTransitionDuration] = useMountedState('');
+    const [bezier, setBezier] = useState('');
+    const [currentIndex, setCurrentIndex] = useMountedState(0);
+    const [currentValue, setCurrentValue] = useMountedState(selectedValue);
+    // 是否开始touch
+    // @en whether to start touch
+    const [transformY, transformYRef, setTransformY] = useRefState(0);
+    const lastTransformYRef = useRef(0);
+    const touchStartTimeRef = useRef(0);
+    const latestCallbackTimer = useRef(0);
+    const touchStartXRef = useRef(0);
+    const touchStartYRef = useRef(0);
+    const touchingRef = useRef(false);
+    const touchingXRef = useRef(null);
+    const wrapRef = useRef(null);
+    const movingStatusRef = useRef('normal');
+    const rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
+    const isTouchMoveRef = useRef(false);
+    const isTouchStopped = useRef(false);
+    const unmountCallbackRef = useRef();
+    const timeRef = useRef(null);
+    const colStyle = useMemo(() => getStyleWithVendor({
+        transform: `translate3d(0px, ${transformY || 0}px, 0px)`,
+        ...(transitionDuration ? { transitionDuration } : {}),
+        transitionTimingFunction: bezier,
+        paddingBottom: `${((rowCount - 1) / 2) * itemHeight}px`,
+        paddingTop: `${((rowCount - 1) / 2) * itemHeight}px`,
+    }), [transitionDuration, transformY, bezier, itemHeight, rowCount]);
+    function _scrollingComplete(nowItemIndex) {
+        // index有改变时再抛出
+        // @en Throws again when index changes
+        if (currentIndex !== nowItemIndex) {
+            setCurrentIndex(Math.max(nowItemIndex, 0));
+            const newData = data[nowItemIndex];
+            const newValue = newData?.value;
+            if (newValue !== currentValue) {
+                setCurrentValue(newValue);
+                if (onValueChange) {
+                    onValueChange(newValue, newData);
+                }
+            }
+        }
+    }
+    function _scrollTo(transY, transDuration = 0, callback = () => { }) {
+        setTransitionDuration(transDuration ? `${transDuration}ms` : '');
+        setTransformY(transY);
+        // 处理连续滑动的情况：如果上一次callback还未执行，先cancel掉上一次回调
+        // @en handle the case of continuous sliding: If the last callback has not been executed, cancel the last callback first
+        if (latestCallbackTimer.current) {
+            clearTimeout(latestCallbackTimer.current);
+        }
+        const setNormalStatus = () => {
+            // 如果timer顺利执行，则在unmount时不再重复执行
+            // @en If the timer is successfully executed, it will not be repeated when unmounting
+            unmountCallbackRef.current = undefined;
+            movingStatusRef.current = 'normal';
+            setTransitionDuration('');
+            callback();
+        };
+        unmountCallbackRef.current = setNormalStatus;
+        latestCallbackTimer.current = window.setTimeout(setNormalStatus, transDuration);
+    }
+    function _scrollToIndex(itemIndex, transDuration = 0, callback = () => { }) {
+        _scrollTo(-1 * itemIndex * itemHeight, transDuration, callback);
+    }
+    function _scrollToIndexWithChange(itemIndex, transDuration = 0) {
+        _scrollToIndex(itemIndex, transDuration, () => {
+            _scrollingComplete(itemIndex);
+        });
+    }
+    const _handleColumnTouchStart = useCallback((e) => {
+        if (disabled) {
+            return;
+        }
+        isTouchMoveRef.current = false;
+        movingStatusRef.current = 'moving';
+        const x = e.touches[0].screenX;
+        const y = e.touches[0].screenY;
+        touchStartTimeRef.current = Date.now();
+        touchingRef.current = true;
+        touchingXRef.current = null;
+        touchStartXRef.current = x;
+        touchStartYRef.current = y;
+        lastTransformYRef.current = transformYRef.current;
+    }, [disabled]);
+    const _handleColumnTouchMove = useCallback((e) => {
+        if (disabled || !touchingRef.current) {
+            return;
+        }
+        isTouchMoveRef.current = true;
+        const lastTransformY = lastTransformYRef.current;
+        const touchMoveX = e.touches[0].screenX;
+        const touchMoveY = e.touches[0].screenY;
+        const distanceX = touchMoveX - touchStartXRef.current;
+        const distance = touchMoveY - touchStartYRef.current;
+        if (touchingXRef.current === null) {
+            touchingXRef.current = Math.abs(distanceX) > Math.abs(distance);
+        }
+        if (touchingXRef.current) {
+            return;
+        }
+        e.cancelable && e.preventDefault();
+        const newPos = lastTransformY + distance;
+        const maxPos = -1 * (data.length - 1) * itemHeight;
+        // 当滚动到上边界或下边界时增加阻尼效果
+        // @en Add damping effect when scrolling to the upper or lower border
+        setTransformY((lastTransformY >= 0 && distance > 0) || (lastTransformY <= maxPos && distance < 0)
+            ? lastTransformY + distance / 4
+            : newPos);
+    }, [data.length, disabled, itemHeight]);
+    function _handleScrollEnd() {
+        const maxIndex = data.length - 1;
+        const nowIndex = Math.max(0, Math.min(maxIndex, Math.round((-1 * transformY) / itemHeight)));
+        // 滚动（包括加动量的滚动）完成之后定位到最近的一个index上
+        // @en After scrolling (including scrolling with momentum) is completed, it is positioned on the nearest index
+        _scrollToIndexWithChange(nowIndex, 200);
+    }
+    // Reference: https://juejin.im/post/6844904185121488910
+    function momentum(current, start, duration, minY, maxY) {
+        const durationMap = {
+            noBounce: 400,
+            weekBounce: 100,
+            strongBounce: 75,
+        };
+        const bezierMap = {
+            noBounce: 'cubic-bezier(.17, .89, .45, 1)',
+            weekBounce: 'cubic-bezier(.25, .46, .45, .94)',
+            strongBounce: 'cubic-bezier(.25, .46, .45, .94)',
+        };
+        let type = 'noBounce';
+        // 惯性滑动加速度
+        // @en inertial sliding acceleration
+        const deceleration = 0.003;
+        // 回弹阻力
+        // @en rebound resistance
+        const bounceRate = 5;
+        // 强弱回弹的分割值
+        // @en Split value of strong and weak rebound
+        const bounceThreshold = 300;
+        // 回弹的最大限度
+        // @en maximum rebound
+        const maxOverflowY = wrapperHeight / 6;
+        let overflowY;
+        const distance = current - start;
+        const speed = (2 * Math.abs(distance)) / duration;
+        let destination = current + (speed / deceleration) * (distance < 0 ? -1 : 1);
+        if (destination < minY) {
+            overflowY = minY - destination;
+            type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+            destination = Math.max(minY - maxOverflowY, minY - overflowY / bounceRate);
+        }
+        else if (destination > maxY) {
+            overflowY = destination - maxY;
+            type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+            destination = Math.min(maxY + maxOverflowY, maxY + overflowY / bounceRate);
+        }
+        return {
+            destination,
+            duration: durationMap[type],
+            bezier: bezierMap[type],
+        };
+    }
+    function _handleColumnTouchEnd() {
+        _clearTimer();
+        movingStatusRef.current = 'normal';
+        const lastTransformY = lastTransformYRef.current;
+        if (!isTouchMoveRef.current || transformY === lastTransformY) {
+            return;
+        }
+        touchingRef.current = false;
+        const endTime = Date.now();
+        const scrollerHeight = (data.length + rowCount - 1) * itemHeight;
+        const duration = endTime - touchStartTimeRef.current;
+        const absDistY = Math.abs(transformY - lastTransformY);
+        // 计算动量，保证滚动顺畅，条件：手势时间小于300ms && 移动距离绝对值大于30时
+        // @en Calculate the momentum to ensure smooth scrolling, condition: the gesture time is less than 300ms && the absolute value of the moving distance is greater than 30
+        if (duration < 300 && absDistY > 90) {
+            const momentumY = momentum(transformY, lastTransformY, duration, wrapperHeight - scrollerHeight, 0);
+            const newItemIndex = Math.max(0, Math.min(data.length - 1, Math.round((-1 * momentumY.destination) / itemHeight)));
+            setBezier(momentumY.bezier);
+            movingStatusRef.current = 'scrolling';
+            _scrollToIndex(newItemIndex, momentumY.duration, () => {
+                _scrollingComplete(newItemIndex);
+            });
+        }
+        else {
+            _handleScrollEnd();
+        }
+    }
+    function scrollToCurrentIndex() {
+        if (!wrapRef.current) {
+            return;
+        }
+        const curStyle = window.getComputedStyle(wrapRef.current);
+        const transformMatrix = curStyle.transform || curStyle.webkitTransform || '';
+        const transY = Number(transformMatrix
+            .replace(/matrix\((.*?)\)/, '$1')
+            .split(/,\s*/)
+            .slice(-1)[0]) || 0;
+        const maxIndex = data.length - 1;
+        const nowIndex = Math.max(0, Math.min(maxIndex, Math.round((-1 * transY) / itemHeight)));
+        // 滚动（包括加动量的滚动）完成之后定位到最近的一个index上
+        // @en After scrolling (including scrolling with momentum) is completed, it is positioned on the nearest index
+        _scrollToIndexWithChange(nowIndex, 0);
+    }
+    function getCurrentCellValue() {
+        return data[currentIndex]?.value;
+    }
+    function getCurrentCellData() {
+        return data[currentIndex];
+    }
+    function _clearTimer() {
+        timeRef.current && clearTimeout(timeRef.current);
+        timeRef.current = null;
+    }
+    function _handleItemTouchStart() {
+        if (touchToStop === false) {
+            return;
+        }
+        isTouchStopped.current = false;
+        timeRef.current = window.setTimeout(() => {
+            if (!isTouchMoveRef.current) {
+                isTouchStopped.current = true;
+                scrollToCurrentIndex();
+            }
+        }, touchToStop === true ? 100 : touchToStop);
+    }
+    function _handleItemClick(itemIndex) {
+        if (!clickable || disabled || (touchToStop !== false && isTouchStopped.current)) {
+            return;
+        }
+        _scrollToIndexWithChange(itemIndex, 200);
+    }
+    useEffect(() => {
+        return () => {
+            // 卸载组件时，如果timer中还有未执行的onchange操作，则立刻执行该操作并移除timer
+            // @en When unloading the component, if there is an unexecuted onchange operation in the timer, execute it immediately and remove the timer
+            const timerId = latestCallbackTimer.current;
+            unmountCallbackRef.current?.();
+            timerId && clearTimeout(timerId);
+        };
+    }, []);
+    useEffect(() => {
+        if (wrapRef.current) {
+            wrapRef.current.addEventListener('touchstart', _handleColumnTouchStart);
+            wrapRef.current.addEventListener('touchmove', _handleColumnTouchMove);
+        }
+        return () => {
+            if (wrapRef.current) {
+                wrapRef.current.removeEventListener('touchstart', _handleColumnTouchStart);
+                wrapRef.current.removeEventListener('touchmove', _handleColumnTouchMove);
+            }
+        };
+    }, [_handleColumnTouchStart, _handleColumnTouchMove]);
+    useLayoutEffect(() => {
+        if ('selectedValue' in props) {
+            const curIndex = data.findIndex((item) => item.value === selectedValue);
+            setCurrentIndex(Math.max(curIndex, 0));
+            if (curIndex >= 0) {
+                _scrollToIndexWithChange(curIndex);
+            }
+        }
+    }, [selectedValue, itemHeight, data]);
+    useImperativeHandle(ref, () => ({
+        movingStatus: movingStatusRef.current,
+        scrollToCurrentIndex,
+        getCurrentCellValue,
+        getCurrentCellData,
+    }));
+    return !hideEmptyCols || (data && data.length) ? (React.createElement("div", { className: `${prefixCls}-column` },
+        React.createElement("div", { className: `${prefixCls}-column-item-wrap`, style: colStyle, ref: wrapRef, onTouchStart: _handleItemTouchStart, onTouchEnd: _handleColumnTouchEnd, onTouchCancel: _handleColumnTouchEnd, "aria-disabled": disabled }, data.map((item, index) => {
+            const dis = Math.abs(index - currentIndex);
+            return (React.createElement("div", { "aria-label": index === currentIndex ? `${item.value}` : '', key: `${index}_${item.value}`, className: cls(`${prefixCls}-column-item`, {
+                    selected: index === currentIndex,
+                    [`selected-neighbor-${dis}`]: dis && dis <= Math.floor(rowCount / 2),
+                }), style: style, onClick: () => _handleItemClick(index) }, item.label));
+        })))) : null;
+});
+export default PickerCell;

package/esnext/picker-view/index.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import MultiPicker from '../picker-view/components/multi-picker';
+import PickerCell from '../picker-view/components/picker-cell';
+import Cascader from '../picker-view/components/cascader';
+import { PickerViewProps, ValueType, PickerData, PickerCellMovingStatus } from './type';
+export * from './type';
+export { MultiPicker, PickerCell, Cascader };
+export interface PickerViewRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 每一列的滑动状态
+     * @en Sliding state of each column
+     */
+    getCellMovingStatus: () => PickerCellMovingStatus[];
+    /**
+     * 获取所有列的值
+     * @en Get all column values
+     */
+    getAllColumnValues: () => ValueType[];
+    /**
+     * 获取第 n 列的值
+     * @en Get the value of the nth column
+     */
+    getColumnValue: (index: number) => ValueType | undefined;
+    /**
+     * 手动更新元素布局
+     * @en Manually update the element layout
+     */
+    updateLayout: () => void;
+    /**
+     * 重置选择器的值为传入的`value`值
+     * @en Reset the selector's value to the input value `value`
+     */
+    resetValue: () => void;
+    /**
+     * 直接跳到当前最近一行（调用时将中断滚动）
+     * @en Jump directly to the current most recent line (will break scrolling when called)
+     */
+    scrollToCurrentIndex: () => void;
+    /**
+     * 获取所有列的 data
+     * @en Get all column data
+     */
+    getAllColumnData: () => PickerData[];
+}
+declare const _default: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<PickerViewRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
+ * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 选择器视图
+ * @name_en PickerView
+ * @displayName PickerView
+ */
+export default _default;