@nutui/nutui-react-taro 1.5.2 → 1.5.3-beta.0

package/dist/esm/picker.taro-9ad1b7c5.js

@@ -0,0 +1,473 @@
+import React__default, { useState, useRef, useEffect, useImperativeHandle } from 'react';
+import Taro from '@tarojs/taro';
+import { View, PickerView, PickerViewColumn } from '@tarojs/components';
+import { P as Popup } from './popup.taro-01676bff.js';
+import { u as useTouch } from './useTouch-db24bb5c.js';
+import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
+import { p as passiveSupported } from './supports-passive-c85ef996.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { c as cn } from './bem-350c1702.js';
+
+const InternalPickerSlot = (props, ref) => {
+    const { keyIndex = 0, defaultValue, listData = [], threeDimensional = true, swipeDuration = 1000, itemShow = false, chooseItem, } = props;
+    const touch = useTouch();
+    const DEFAULT_DURATION = 200;
+    // 触发惯性滑动条件:
+    // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
+    // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
+    const INERTIA_TIME = 300;
+    const INERTIA_DISTANCE = 15;
+    const [currIndex, setCurrIndex] = useState(1);
+    const lineSpacing = useRef(36);
+    const [touchTime, setTouchTime] = useState(0);
+    const [touchDeg, setTouchDeg] = useState('0deg');
+    const rotation = 20;
+    const moving = useRef(false);
+    let timer;
+    const listRef = useRef(null);
+    const rollerRef = useRef(null);
+    const pickerSlotRef = useRef(null);
+    const [startTime, setStartTime] = useState(0);
+    const [startY, setStartY] = useState(0);
+    const transformY = useRef(0);
+    const [scrollDistance, setScrollDistance] = useState(0);
+    const isHidden = (index) => {
+        if (index >= currIndex + 8 || index <= currIndex - 8) {
+            return true;
+        }
+        return false;
+    };
+    const setTransform = (translateY = 0, type, time = DEFAULT_DURATION, deg) => {
+        let nTime = time;
+        if (type !== 'end') {
+            nTime = 0;
+        }
+        setTouchTime(nTime);
+        setTouchDeg(deg);
+        setScrollDistance(translateY);
+    };
+    const setMove = (move, type, time) => {
+        let updateMove = move + transformY.current;
+        if (type === 'end') {
+            // 限定滚动距离
+            if (updateMove > 0) {
+                updateMove = 0;
+            }
+            if (updateMove < -(listData.length - 1) * lineSpacing.current) {
+                updateMove = -(listData.length - 1) * lineSpacing.current;
+            }
+            // 设置滚动距离为lineSpacing的倍数值
+            const endMove = Math.round(updateMove / lineSpacing.current) * lineSpacing.current;
+            const deg = `${(Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * rotation}deg`;
+            setTransform(endMove, type, time, deg);
+            setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1);
+        }
+        else {
+            let deg = 0;
+            const currentDeg = (-updateMove / lineSpacing.current + 1) * rotation;
+            // picker 滚动的最大角度
+            const maxDeg = (listData.length + 1) * rotation;
+            const minDeg = 0;
+            deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
+            if (minDeg < deg && deg < maxDeg) {
+                setTransform(updateMove, '', undefined, `${deg}deg`);
+                setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing.current)) + 1);
+            }
+        }
+    };
+    const setChooseValue = (move) => {
+        chooseItem &&
+            chooseItem(listData?.[Math.round(-move / lineSpacing.current)], keyIndex);
+    };
+    // 开始滚动
+    const touchStart = (event) => {
+        touch.start(event);
+        setStartY(touch.deltaY);
+        setStartTime(Date.now());
+        transformY.current = scrollDistance;
+    };
+    const touchMove = (event) => {
+        touch.move(event);
+        if (touch.isVertical) {
+            moving.current = true;
+            preventDefault(event, true);
+        }
+        const move = touch.deltaY - startY;
+        setMove(move);
+    };
+    const touchEnd = (event) => {
+        if (!moving.current)
+            return;
+        const move = touch.deltaY - startY;
+        const moveTime = Date.now() - startTime;
+        // 区分是否为惯性滚动
+        if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+            // 惯性滚动
+            const distance = momentum(move, moveTime);
+            setMove(distance, 'end', +swipeDuration);
+        }
+        else {
+            setMove(move, 'end');
+        }
+        setTimeout(() => {
+            touch.reset();
+        }, 0);
+    };
+    // 惯性滚动 距离
+    const momentum = (distance, duration) => {
+        let nDistance = distance;
+        // 惯性滚动的速度
+        const speed = Math.abs(nDistance / duration);
+        // 惯性滚动的距离
+        nDistance = (speed / 0.003) * (nDistance < 0 ? -1 : 1);
+        return nDistance;
+    };
+    const modifyStatus = (type, val) => {
+        const value = val || defaultValue;
+        let index = -1;
+        if (value) {
+            listData.some((item, idx) => {
+                if (item.value === value) {
+                    index = idx;
+                    return true;
+                }
+                return false;
+            });
+        }
+        else {
+            listData.forEach((item, i) => {
+                if (item.value === defaultValue) {
+                    index = i;
+                }
+            });
+        }
+        setCurrIndex(index === -1 ? 1 : index + 1);
+        const move = index === -1 ? 0 : index * lineSpacing.current;
+        type && setChooseValue(-move);
+        setMove(-move);
+    };
+    // 惯性滚动结束
+    const stopMomentum = () => {
+        moving.current = false;
+        setTouchTime(0);
+        setChooseValue(scrollDistance);
+    };
+    // 阻止默认事件
+    const preventDefault = (event, isStopPropagation) => {
+        /* istanbul ignore else */
+        if (!passiveSupported &&
+            (typeof event.cancelable !== 'boolean' || event.cancelable)) {
+            event.preventDefault();
+        }
+        if (isStopPropagation) {
+            event.stopPropagation();
+        }
+    };
+    const getReference = async () => {
+        const refe = await getRectByTaro(listRef?.current);
+        lineSpacing.current = refe.height ? refe.height : 36;
+        modifyStatus(true);
+    };
+    const touchRollerStyle = () => {
+        return {
+            transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+            transform: `rotate3d(1, 0, 0, ${touchDeg})`,
+        };
+    };
+    const touchTileStyle = () => {
+        return {
+            transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+            transform: `translate3d(0, ${scrollDistance}px, 0)`,
+        };
+    };
+    useEffect(() => {
+        setScrollDistance(0);
+        transformY.current = 0;
+        modifyStatus(false);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [listData]);
+    useEffect(() => {
+        if (itemShow) {
+            setTimeout(() => {
+                getReference();
+            }, 200);
+        }
+    }, [itemShow]);
+    useImperativeHandle(ref, () => ({
+        stopMomentum,
+        moving: moving.current,
+    }));
+    return (React__default.createElement("div", { className: "nut-picker-list", ref: pickerSlotRef, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
+        React__default.createElement("div", { className: "nut-picker-roller", ref: rollerRef, style: threeDimensional ? touchRollerStyle() : touchTileStyle(), onTransitionEnd: stopMomentum },
+            threeDimensional &&
+                listData.map((item, index) => {
+                    return (React__default.createElement("div", { className: `nut-picker-roller-item ${isHidden(index + 1) && 'nut-picker-roller-item-hidden'}`, style: {
+                            transform: `rotate3d(1, 0, 0, ${-rotation * (index + 1)}deg) translate3d(0px, 0px, 104px)`,
+                            height: `${lineSpacing.current}px`,
+                            lineHeight: `${lineSpacing.current}px`,
+                        }, key: item.value ? item.value : index },
+                        React__default.createElement(React__default.Fragment, null, item.text ? item.text : item)));
+                }),
+            !threeDimensional &&
+                listData.map((item, index) => {
+                    return (React__default.createElement("div", { className: "nut-picker-roller-item-title", key: item.value ? item.value : index, style: {
+                            height: `${lineSpacing.current}px`,
+                            lineHeight: `${lineSpacing.current}px`,
+                        } },
+                        React__default.createElement(React__default.Fragment, null, item.text ? item.text : item)));
+                })),
+        React__default.createElement("div", { className: "nut-picker-mask" }),
+        React__default.createElement("div", { className: "nut-picker-indicator", ref: listRef })));
+};
+const PickerSlot = React__default.forwardRef(InternalPickerSlot);
+
+function useRefs() {
+    const refs = React__default.useRef([]);
+    const setRefs = React__default.useCallback((index) => (el) => {
+        if (el)
+            refs.current[index] = el;
+    }, []);
+    const reset = React__default.useCallback(() => {
+        refs.current = [];
+    }, []);
+    return [refs.current, setRefs, reset];
+}
+
+const InternalPicker = (props, ref) => {
+    const { locale } = useConfig();
+    const { isVisible, title, listData = [], defaultValueData, onConfirm, onClose, onCloseUpdate, onChange, className, style, threeDimensional, swipeDuration, ...rest } = props;
+    const [chooseValueData, setchooseValueData] = useState([]); // 选择的数据的 value 值, 每一条数据的 value 值
+    const [columnIndex, setcolumnIndex] = useState(0); // 选中列
+    const pickerRef = useRef(null);
+    const [refs, setRefs] = useRefs();
+    const [columnsList, setColumnsList] = useState([]); // 格式化后每一列的数据
+    const b = cn('picker');
+    const isConfirmEvent = useRef(false);
+    // 级联数据格式化
+    const formatCascade = (columns, values) => {
+        const formatted = [];
+        let cursor = {
+            text: '',
+            value: '',
+            children: columns,
+        };
+        let columnIndex = 0;
+        while (cursor && cursor.children) {
+            const options = cursor.children;
+            const value = values[columnIndex];
+            let index = options.findIndex((columnItem) => columnItem.value === value);
+            if (index === -1)
+                index = 0;
+            cursor = cursor.children[index];
+            columnIndex++;
+            formatted.push(options);
+        }
+        return formatted;
+    };
+    // 每一列的类型
+    const columnsType = () => {
+        const firstColumn = listData[0];
+        if (firstColumn) {
+            if (Array.isArray(firstColumn)) {
+                return 'multiple';
+            }
+            if ('children' in firstColumn) {
+                return 'cascade';
+            }
+        }
+        return 'single';
+    };
+    // 传入的数据格式化
+    const normalListData = () => {
+        const type = columnsType();
+        switch (type) {
+            case 'multiple':
+                return listData;
+            case 'cascade':
+                // 级联数据处理
+                return formatCascade(listData, chooseValueData);
+            default:
+                return [listData];
+        }
+    };
+    const init = () => {
+        // const data: (string | number)[] = []
+        const normalData = normalListData();
+        setColumnsList(normalData);
+        // normalData.length > 0 &&
+        //   normalData.map((item) => {
+        //     item[0] && data.push(item[0].value)
+        //     return item
+        //   })
+        // 为何要重置呢？
+        // if (!defaultValueData && chooseValueData.length === 0) {
+        //   setchooseValueData([...data])
+        // }
+    };
+    // 列表格式修改
+    useEffect(() => {
+        init();
+    }, [listData]);
+    // 默认值修改
+    useEffect(() => {
+        if (defaultValueData &&
+            defaultValueData.length !== 0 &&
+            defaultValueData.toString() !== chooseValueData.toString() &&
+            !currentValue.length) {
+            const data = [...defaultValueData];
+            setchooseValueData(data);
+            setColumnsList(normalListData());
+        }
+    }, [defaultValueData]);
+    const selectedOptions = () => {
+        const optins = [];
+        columnsList.map((column, index) => {
+            let currOptions = [];
+            currOptions = column.filter((item) => item.value === chooseValueData[index]);
+            if (currOptions[0]) {
+                optins.push(currOptions[0]);
+            }
+            else {
+                column[0] && optins.push(column[0]);
+            }
+            return column;
+        });
+        return optins;
+    };
+    // 选中值进行修改
+    useEffect(() => {
+        Taro.getEnv() !== 'WEB' && setCurrentValue(defaultValuesConvert());
+        onChange && onChange(columnIndex, chooseValueData, selectedOptions());
+        if (isConfirmEvent.current) {
+            isConfirmEvent.current = false;
+            onConfirm && onConfirm(chooseValueData, selectedOptions());
+        }
+    }, [chooseValueData]);
+    const closeActionSheet = () => {
+        onClose && onClose(chooseValueData, selectedOptions());
+        onCloseUpdate &&
+            onCloseUpdate(chooseValueData, selectedOptions(), pickerRef);
+    };
+    // 选择每一列的数据
+    const chooseItem = (option, columnIndex) => {
+        if (option && Object.keys(option).length) {
+            // 是否移动后是否与之前有差异
+            if (chooseValueData[columnIndex] !== option.value) {
+                if (columnsType() === 'cascade') {
+                    chooseValueData[columnIndex] = option.value ? option.value : '';
+                    setchooseValueData([...chooseValueData]);
+                    let index = columnIndex;
+                    let cursor = option;
+                    while (cursor && cursor.children && cursor.children[0]) {
+                        chooseValueData[index + 1] = cursor.children[0].value;
+                        setchooseValueData([...chooseValueData]);
+                        index++;
+                        cursor = cursor.children[0];
+                    }
+                    // 当前改变列的下一列 children 值为空
+                    if (cursor && cursor.children) {
+                        chooseValueData[index + 1] = '';
+                        setchooseValueData([...chooseValueData]);
+                    }
+                    setColumnsList(normalListData());
+                }
+                else {
+                    setchooseValueData((data) => {
+                        const cdata = [...data];
+                        cdata[columnIndex] = Object.prototype.hasOwnProperty.call(option, 'value')
+                            ? option.value
+                            : '';
+                        return cdata;
+                    });
+                }
+                setcolumnIndex(columnIndex);
+            }
+        }
+    };
+    // 点击确定
+    const confirm = () => {
+        let movings = false;
+        refs.forEach((_ref) => {
+            if (_ref.moving)
+                movings = true;
+            _ref.stopMomentum();
+        });
+        if (movings) {
+            isConfirmEvent.current = true;
+        }
+        else {
+            onConfirm && onConfirm(chooseValueData, selectedOptions());
+        }
+        onClose && onClose(chooseValueData, selectedOptions());
+        setTimeout(() => {
+            isConfirmEvent.current = false;
+        }, 0);
+    };
+    const renderToolbar = () => {
+        return (React__default.createElement("div", { className: b('control') },
+            React__default.createElement("span", { className: b('cancel-btn'), onClick: () => closeActionSheet() }, locale.cancel),
+            React__default.createElement("div", { className: b('title') }, title || ''),
+            React__default.createElement("span", { className: b('confirm-btn'), onClick: confirm }, locale.confirm)));
+    };
+    const [currentValue, setCurrentValue] = useState([]);
+    const [pickingStatus, setPickingStatus] = useState(false);
+    const defaultValuesConvert = () => {
+        const defaultIndexs = [];
+        if (chooseValueData.length > 0) {
+            chooseValueData.forEach((value, index) => {
+                for (let i = 0; i < columnsList[index].length; i++) {
+                    if (columnsList[index][i].value === value) {
+                        defaultIndexs.push(i);
+                        break;
+                    }
+                }
+            });
+        }
+        else if (columnsList && columnsList.length > 0) {
+            columnsList.forEach((item) => {
+                defaultIndexs.push(0);
+                item.length > 0 && chooseValueData.push(item[0].value);
+            });
+        }
+        return defaultIndexs;
+    };
+    const pickerStart = () => {
+        setPickingStatus(true);
+    };
+    const pickerEnd = () => {
+        setPickingStatus(false);
+    };
+    const pickerChange = (data) => {
+        const prevDefaultValue = currentValue;
+        let changeIndex = 0;
+        console.log('chage', data);
+        // 判断变化的是第几个
+        const list = data.detail.value;
+        for (let i = 0, len = list.length; i < len; i++) {
+            if (prevDefaultValue[i] !== list[i]) {
+                changeIndex = i;
+                break;
+            }
+        }
+        // 选择的是哪个 option
+        chooseItem(columnsList[changeIndex][data.detail.value[changeIndex]], changeIndex);
+    };
+    return (React__default.createElement(Popup, { visible: isVisible, position: "bottom", onClose: () => {
+            closeActionSheet();
+        } },
+        React__default.createElement(View, { className: `${b()} ${className || ''}`, style: style, ...rest, catchMove: true },
+            renderToolbar(),
+            React__default.createElement("div", { className: b('panel'), ref: pickerRef }, Taro.getEnv() === 'WEB' ? (columnsList?.map((item, index) => {
+                return (React__default.createElement(PickerSlot, { ref: setRefs(index), defaultValue: chooseValueData?.[index], listData: item, threeDimensional: threeDimensional, chooseItem: (value, index) => chooseItem(value, index), swipeDuration: swipeDuration, key: index, keyIndex: index, itemShow: isVisible }));
+            })) : (React__default.createElement(PickerView, { ref: pickerRef, value: currentValue, immediateChange: true, onPickStart: pickerStart, onChange: pickerChange, onPickEnd: pickerEnd, className: "picker-view-panel" }, columnsList?.map((column, index) => {
+                return (React__default.createElement(PickerViewColumn, { key: `col${index}` }, column.map((item, index) => {
+                    return (React__default.createElement(View, { key: item.value || index, className: "nut-picker-roller-item-title" },
+                        React__default.createElement(React__default.Fragment, null, item.text || item)));
+                })));
+            })))))));
+};
+const Picker = React__default.forwardRef(InternalPicker);
+
+export { Picker as P };

package/dist/esm/popover.taro-ad5e76ea.js

@@ -0,0 +1,156 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { O as Overlay } from './overlay.taro-21e87fb1.js';
+import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+/**
+ * 过滤ref
+ */
+function fillRef(ref, node) {
+    if (typeof ref === 'function') {
+        ref(node);
+    }
+    else if (typeof ref === 'object' && ref && 'current' in ref) {
+        ref.current = node;
+    }
+}
+/**
+ * 将ref合并到一个ref函数中以支持ref传递
+ */
+function composeRef(...refs) {
+    return (node) => {
+        refs.forEach((ref) => {
+            fillRef(ref, node);
+        });
+    };
+}
+class Trigger extends React__default.Component {
+    fireEvents(type, e) {
+        const childCallback = this.props.children.props[type];
+        if (childCallback) {
+            childCallback(e);
+        }
+        const callback = this.props[type];
+        if (callback) {
+            callback(e);
+        }
+    }
+    render() {
+        const { children, className = '' } = this.props;
+        const child = React__default.Children.only(children);
+        const newChildProps = {
+            key: 'trigger',
+        };
+        if (child && child.props && child.props.className) {
+            newChildProps.className = className;
+        }
+        const cloneProps = {
+            ...newChildProps,
+        };
+        cloneProps.ref = composeRef(this.props.forwardedRef, child.ref);
+        const trigger = React__default.cloneElement(child, cloneProps);
+        return trigger;
+    }
+}
+
+const defaultProps = {
+    ...ComponentDefaults,
+    list: [],
+    theme: 'light',
+    location: 'bottom',
+    visible: false,
+    offset: 20,
+    className: '',
+    onClick: (e) => { },
+    onChoose: (item, index) => { },
+};
+const Popover = (props) => {
+    const { children, list, theme, location, visible, offset, className, style, onClick, onChoose, iconClassPrefix, iconFontClassName, ...reset } = {
+        ...defaultProps,
+        ...props,
+    };
+    const goodItem = useRef(null);
+    setTimeout(async () => {
+        if (goodItem.current) {
+            const res = await getRectByTaro(goodItem.current);
+            setElWidth(res?.width);
+            setElHeight(res?.height);
+        }
+    });
+    const [classes, setClasses] = useState('');
+    const [elWidth, setElWidth] = useState(0);
+    const [elHeight, setElHeight] = useState(0);
+    const [popoverContent, setPopoverContent] = useState('');
+    const [popoverArrow, setPopoverArrow] = useState('');
+    useEffect(() => {
+        setClasses(classesSelf());
+        setPopoverContent(popoverContentSelf());
+        setPopoverArrow(popoverArrowSelf());
+    }, [list, theme]);
+    const getStyle = () => {
+        const offNumer = Number(offset) ? Number(offset) : 0;
+        const style = {};
+        if (location.includes('top')) {
+            style.bottom = `${elHeight + offNumer}px`;
+        }
+        else if (location.includes('right')) {
+            style.left = `${elWidth + offNumer}px`;
+        }
+        else if (location.includes('left')) {
+            style.right = `${elWidth + offNumer}px`;
+        }
+        else {
+            style.top = `${elHeight + offNumer}px`;
+        }
+        return style;
+    };
+    const classesSelf = () => {
+        const prefixCls = 'nut-popover';
+        return `${prefixCls} ${theme ? `${prefixCls}--${theme}` : ''}`;
+    };
+    const popoverContentSelf = () => {
+        const prefixCls = 'popover-content';
+        return `${prefixCls}-show ${prefixCls} ${location ? `${prefixCls}--${location}` : ''}`;
+    };
+    const filter = () => {
+        const ms = ['top', 'bottom', 'left', 'right'];
+        return ms.filter((m) => location.includes(m))[0];
+    };
+    const popoverArrowSelf = () => {
+        const prefixCls = 'popover-arrow';
+        return `${prefixCls} ${prefixCls}-${filter()} ${location ? `${prefixCls}--${location}` : ''}`;
+    };
+    const handleClick = (e) => {
+        if (props.onClick) {
+            props.onClick(e);
+        }
+    };
+    const handleChoose = (item, index) => {
+        if (!item.disabled) {
+            onChoose(item, index);
+        }
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: `${classes} ${className}`, style: { ...style }, ...reset },
+            React__default.createElement(Trigger, { forwardedRef: goodItem },
+                React__default.createElement("div", { onClick: (e) => handleClick(e) },
+                    Array.isArray(children) ? children[0] : children,
+                    visible ? (React__default.createElement("div", { className: `${popoverContent}`, style: getStyle() },
+                        React__default.createElement("div", { className: `${popoverArrow}` }),
+                        Array.isArray(children) ? children[1] : '',
+                        React__default.createElement("div", null,
+                            ' ',
+                            list.map((item, i) => {
+                                return (React__default.createElement("div", { key: item.name, className: `popover-menu-item ${item.disabled ? 'disabled' : ''}`, onClick: () => {
+                                        handleChoose(item, i);
+                                    } },
+                                    item.icon ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "popover-menu-item-img", name: item.icon })) : (''),
+                                    React__default.createElement("div", { className: "popover-menu-item-name" }, item.name)));
+                            })))) : null))),
+        visible ? (React__default.createElement(Overlay, { visible: visible, onClick: (e) => handleClick(e), style: { background: 'transparent' } })) : ('')));
+};
+Popover.defaultProps = defaultProps;
+Popover.displayName = 'NutPopover';
+
+export { Popover as P };