@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/picker-view/index.js

@@ -0,0 +1,135 @@
+import React, { useRef, forwardRef, useImperativeHandle, useState, useMemo, useCallback, useEffect, } from 'react';
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import MultiPicker from '../picker-view/components/multi-picker';
+import PickerCell from '../picker-view/components/picker-cell';
+import Cascader from '../picker-view/components/cascader';
+import { useMountedState } from '../_helpers';
+export * from './type';
+export { MultiPicker, PickerCell, Cascader };
+const isArray = (dt) => (dt ? Array.isArray(dt[0]) : false);
+const isStrOrNum = (dt) => typeof dt[0][0] === 'string' || typeof dt[0][0] === 'number';
+const PickerView = forwardRef((props, ref) => {
+    const { className = '', itemStyle, cascade = true, cols = 3, rows = 5, data, disabled = false, clickable = true, value, hideEmptyCols = false, onPickerChange, touchToStop = false, } = props;
+    const [itemHeight, setItemHeight] = useState(0);
+    const [wrapperHeight, setWrapperHeight] = useState(0);
+    const [scrollValue, setScrollValue] = useMountedState(value);
+    const wrapperRef = useRef(null);
+    const domRef = useRef(null);
+    const barRef = useRef(null);
+    const pickerCellsRef = useRef([]);
+    const cascaderRef = useRef(null);
+    // itemStyle height 同时对 selection-bar 生效，这里不单独抛出 selection-bar 的高度设置属性
+    // @en The height of itemStyle applies to the selection-bar as well, without separately exposing the height setting property for the selection-bar.
+    const selectionBarHeight = useMemo(() => itemStyle?.height
+        ? {
+            height: itemStyle.height,
+        }
+        : {}, [itemStyle]);
+    const innerData = useMemo(() => {
+        let newData;
+        if (isArray(data)) {
+            if (isStrOrNum(data)) {
+                newData = data.map(item => item.map(cell => ({
+                    label: cell,
+                    value: cell,
+                })));
+            }
+            else {
+                newData = data;
+            }
+        }
+        else {
+            newData = [data];
+        }
+        return newData;
+    }, [data]);
+    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 !== undefined);
+    };
+    const getAllColumnData = () => {
+        const curValues = cascade
+            ? cascaderRef.current?.getAllCellsData() || []
+            : pickerCellsRef.current.map(cell => cell.getCurrentCellData());
+        return curValues.filter(v => v !== undefined);
+    };
+    function getColumnValue(index = 0) {
+        return getAllColumnValues()[index];
+    }
+    function getCellMovingStatus() {
+        return cascade
+            ? cascaderRef.current?.getCellMovingStatus() || []
+            : pickerCellsRef.current.map(cell => cell.movingStatus);
+    }
+    function scrollToCurrentIndex() {
+        if (cascade) {
+            cascaderRef.current?.scrollToCurrentIndex();
+            return;
+        }
+        pickerCellsRef.current.forEach(cell => cell.scrollToCurrentIndex());
+    }
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        getCellMovingStatus,
+        getAllColumnValues,
+        getColumnValue,
+        updateLayout,
+        resetValue,
+        scrollToCurrentIndex,
+        getAllColumnData,
+    }));
+    function _onValueChange(val, index, newData) {
+        setScrollValue(val);
+        if (onPickerChange) {
+            onPickerChange(val, index, newData);
+        }
+    }
+    useEffect(() => {
+        setScrollValue(value);
+    }, [value]);
+    const updateWrapperHeight = useCallback(() => {
+        if (wrapperRef && wrapperRef.current) {
+            setWrapperHeight(wrapperRef.current.offsetHeight);
+        }
+    }, [wrapperRef, setWrapperHeight]);
+    const updateItemHeight = () => {
+        if (barRef.current) {
+            setItemHeight(barRef.current.getBoundingClientRect().height);
+        }
+    };
+    useEffect(() => {
+        updateLayout();
+    }, []);
+    function updateLayout() {
+        updateWrapperHeight();
+        updateItemHeight();
+    }
+    function resetValue() {
+        setScrollValue(value);
+    }
+    const newItemStyle = {
+        height: `${itemHeight}px`,
+        ...itemStyle,
+    };
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: `${prefixCls}-picker-view all-border-box ${className}`, style: { height: `${itemHeight * rows}px` }, ref: wrapperRef },
+        cascade ? (React.createElement(Cascader, { prefixCls: prefixCls || '', cols: cols, itemStyle: newItemStyle, data: data, selectedValue: scrollValue, onValueChange: _onValueChange, clickable: clickable, itemHeight: itemHeight, wrapperHeight: wrapperHeight, disabled: disabled, rows: rows, hideEmptyCols: hideEmptyCols, ref: cascaderRef, touchToStop: touchToStop })) : (React.createElement(MultiPicker, { prefixCls: `${prefixCls}-picker`, data: innerData, itemHeight: itemHeight, selectedValue: scrollValue, onValueChange: _onValueChange }, innerData.map((item, index) => (React.createElement(PickerCell, { key: `${index}_picker_cell_normal`, data: item, style: newItemStyle, prefixCls: `${prefixCls}-picker`, clickable: clickable, itemHeight: itemHeight, wrapperHeight: wrapperHeight, disabled: disabled, rows: rows, hideEmptyCols: hideEmptyCols, ref: cellRef => cellRef && (pickerCellsRef.current[index] = cellRef), touchToStop: touchToStop }))))),
+        React.createElement("div", { className: `${prefixCls}-picker-selection` },
+            React.createElement("div", { className: `${prefixCls}-picker-selection-mask ${prefixCls}-picker-selection-mask-top` }),
+            React.createElement("div", { ref: barRef, className: `${prefixCls}-picker-selection-bar`, style: selectionBarHeight }),
+            React.createElement("div", { className: `${prefixCls}-picker-selection-mask ${prefixCls}-picker-selection-mask-bottom` }))))));
+});
+/**
+ * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
+ * @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 componentWrapper(PickerView, 'PickerView');