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

package/dist/esm/address.taro-3a9b6396.js

@@ -0,0 +1,461 @@
+import React__default, { useEffect, useState, useRef } from 'react';
+import { I as Icon$1 } from './icon.taro-296a1bec.js';
+import { P as Popup } from './popup.taro-01676bff.js';
+import { c as cn } from './bem-350c1702.js';
+import { I as Icon } from './icon-296a1bec.js';
+import { u as useConfig } from './configprovider-67d19d3a.js';
+import { createSelectorQuery } from '@tarojs/taro';
+import { E as Elevator } from './elevator.taro-6019669e.js';
+import { u as useConfig$1 } from './configprovider.taro-8d71eb49.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps$2 = {
+    type: 'custom',
+    existAddress: [],
+    defaultIcon: 'location2',
+    selectedIcon: 'Check',
+    isShowCustomAddress: true,
+    customAndExistTitle: '',
+};
+const ExistRender = (props) => {
+    const { locale } = useConfig();
+    const { children, type, existAddress, selectedIcon, defaultIcon, isShowCustomAddress, customAndExistTitle, onSelected, onClose, onSwitchModule, ...rest } = { ...defaultProps$2, ...props };
+    const b = cn('address');
+    // 选择现有地址
+    const selectedExist = (item) => {
+        const copyExistAdd = existAddress;
+        let prevExistAdd = {
+            provinceName: '',
+            cityName: '',
+            countyName: '',
+            townName: '',
+            addressDetail: '',
+            selectedAddress: false,
+        };
+        copyExistAdd.forEach((list, index) => {
+            if (list && list.selectedAddress) {
+                prevExistAdd = list;
+            }
+            list.selectedAddress = false;
+        });
+        item.selectedAddress = true;
+        onSelected && onSelected(prevExistAdd, item, copyExistAdd);
+    };
+    // 选择其他地址
+    const switchModule = () => {
+        onSwitchModule &&
+            onSwitchModule({ type: type === 'exist' ? 'custom' : 'exist' });
+    };
+    useEffect(() => { }, [existAddress]);
+    return (React__default.createElement("div", { className: b('exist') },
+        React__default.createElement("div", { className: b('exist-group') },
+            React__default.createElement("ul", { className: b('exist-ul') }, existAddress.map((item, index) => {
+                return (React__default.createElement("li", { className: b('exist-item'), key: index },
+                    React__default.createElement("div", { onClick: () => selectedExist(item) },
+                        React__default.createElement(Icon, { className: b('exist-item-icon'), name: item.selectedAddress ? selectedIcon : defaultIcon, color: item.selectedAddress ? '#FA2C19' : '', size: "13px" }),
+                        React__default.createElement("div", { className: b('exist-item-info') },
+                            item.name && item.phone && (React__default.createElement("div", { className: "exist-item-info-top" },
+                                React__default.createElement("div", { className: "exist-item-info-name" }, item.name),
+                                React__default.createElement("div", { className: "exist-item-info-phone" }, item.phone))),
+                            React__default.createElement("div", { className: "exist-item-info-bottom" },
+                                React__default.createElement("div", null, item.provinceName +
+                                    item.cityName +
+                                    item.countyName +
+                                    item.townName +
+                                    item.addressDetail))))));
+            }))),
+        isShowCustomAddress && (React__default.createElement("div", { className: b('choose-other'), onClick: switchModule },
+            React__default.createElement("div", { className: b('choose-other-btn') }, customAndExistTitle || locale.address.chooseAnotherAddress)))));
+};
+
+const defaultProps$1 = {
+    modelValue: [],
+    type: 'custom',
+    province: [],
+    city: [],
+    country: [],
+    town: [],
+    height: '200px',
+};
+const CustomRender = (props) => {
+    const { locale } = useConfig();
+    const { children, type, modelValue, height, province, city, country, town, onNextArea, onTabClick, onClose, ...rest } = {
+        ...defaultProps$1,
+        ...props,
+    };
+    const b = cn('address');
+    const [privateType] = useState(type);
+    const [tabIndex, setTabIndex] = useState(0);
+    const [tabName] = useState(['province', 'city', 'country', 'town']);
+    useRef(null);
+    useRef(null);
+    useRef(null);
+    useRef(null);
+    const regionLine = useRef(null);
+    const isCustom2 = () => {
+        return type === 'custom2';
+    };
+    const transformData = (data) => {
+        if (!Array.isArray(data))
+            throw new TypeError('params muse be array.');
+        if (!data.length)
+            return [];
+        data.forEach((item) => {
+            if (!item.title) {
+                console.error('[NutUI] <Address> 请检查数组选项的 title 值是否有设置 ,title 为必填项 .');
+            }
+        });
+        const newData = [];
+        data = data.sort((a, b) => {
+            return a.title.localeCompare(b.title);
+        });
+        data.forEach((item) => {
+            const index = newData.findIndex((value) => value.title === item.title);
+            if (index <= -1) {
+                newData.push({
+                    title: item.title,
+                    list: [].concat(item),
+                });
+            }
+            else {
+                newData[index] = {
+                    title: item.title,
+                    list: newData[index].list.concat(item),
+                };
+            }
+        });
+        return newData;
+    };
+    const [regionList, setRegionList] = useState({
+        province: isCustom2() ? transformData(province) : province,
+        city: isCustom2() ? transformData(city) : city,
+        country: isCustom2() ? transformData(country) : country,
+        town: isCustom2() ? transformData(town) : town,
+    });
+    // 已选择的 省、市、县、镇
+    const [selectedRegion, setSelectedRegion] = useState({
+        province: { name: '' },
+        city: { name: '' },
+        country: { name: '' },
+        town: { name: '' },
+    });
+    const [lineDistance, setLineDistance] = useState(20);
+    // 获取已选地区列表名称
+    const getTabName = (item, index) => {
+        if (tabIndex > index) {
+            return item.name;
+        }
+        return locale.select;
+    };
+    // 移动下面的红线
+    const lineAnimation = (index) => {
+        setTimeout(() => {
+            const name = tabName[index];
+            createSelectorQuery()
+                .selectAll(`.${name}`)
+                .boundingClientRect((rects) => {
+                rects &&
+                    rects.length > 0 &&
+                    rects.forEach((rect) => {
+                        if (rect.width > 0)
+                            setLineDistance(rect.left || 20);
+                    });
+            })
+                .exec();
+        }, 100);
+    };
+    // 切换下一级列表
+    const nextAreaList = (item) => {
+        // onchange 接收的参数
+        const calBack = {
+            next: '',
+            value: '',
+            custom: tabName[tabIndex],
+        };
+        const bbselectedRegion = selectedRegion ? { ...selectedRegion } : null;
+        if (bbselectedRegion) {
+            setSelectedRegion({
+                ...bbselectedRegion,
+                [tabName[tabIndex]]: item,
+            });
+            calBack.selectedRegion = {
+                ...bbselectedRegion,
+                [tabName[tabIndex]]: item,
+            };
+            for (let i = tabIndex; i < tabIndex - 1; i++) {
+                setSelectedRegion({
+                    ...bbselectedRegion,
+                    [tabName[i + 1]]: null,
+                });
+                calBack.selectedRegion = {
+                    ...bbselectedRegion,
+                    [tabName[i + 1]]: {},
+                };
+            }
+        }
+        if (tabIndex < 4) {
+            // 切换下一个
+            if (tabIndex === 3) {
+                calBack.next = '';
+            }
+            else {
+                setTabIndex(() => tabIndex + 1);
+                lineAnimation(tabIndex + 1);
+                calBack.next = tabName[tabIndex + 1];
+            }
+            calBack.value = item;
+            onNextArea && onNextArea(calBack);
+        }
+        else {
+            onClose && onClose();
+        }
+    };
+    // 切换地区Tab
+    const changeRegionTab = (item, index, key) => {
+        if (getTabName(item, index)) {
+            setTabIndex(index);
+            lineAnimation(index);
+        }
+        onTabClick && onTabClick(key);
+    };
+    // 默认选中项
+    const initCustomSelected = () => {
+        if (modelValue.length > 0) {
+            let tagIndex = 0;
+            const selectedRegionC = selectedRegion && Object.assign(selectedRegion);
+            for (let index = 0; index < modelValue.length; index++) {
+                if (regionList[tabName[index]].length === 0) {
+                    tagIndex = index - 1;
+                    setTabIndex(index - 1);
+                    break;
+                }
+                else {
+                    const val = modelValue[index];
+                    const arr = regionList[tabName[index]];
+                    if (privateType === 'custom') {
+                        selectedRegionC[[tabName[index]]] = arr.filter((item) => item.id === val)[0];
+                    }
+                    else if (privateType === 'custom2') {
+                        const sumArr = [];
+                        arr.forEach((item) => {
+                            sumArr.push(...item.list);
+                        });
+                        selectedRegionC[[tabName[index]]] = sumArr.filter((item) => item.id === val)[0];
+                    }
+                    tagIndex = index;
+                    setSelectedRegion(selectedRegionC);
+                }
+            }
+            setTabIndex(tagIndex);
+            lineAnimation(tagIndex);
+        }
+    };
+    const handleElevatorItem = (key, item) => {
+        nextAreaList(item);
+    };
+    useEffect(() => {
+        const { province } = { ...defaultProps$1, ...props };
+        setRegionList({
+            ...regionList,
+            province: isCustom2() ? transformData(province) : province,
+        });
+    }, [province]);
+    useEffect(() => {
+        const { city } = { ...defaultProps$1, ...props };
+        setRegionList({
+            ...regionList,
+            city: isCustom2() ? transformData(city) : city,
+        });
+    }, [city]);
+    useEffect(() => {
+        const { country } = { ...defaultProps$1, ...props };
+        setRegionList({
+            ...regionList,
+            country: isCustom2() ? transformData(country) : country,
+        });
+    }, [country]);
+    useEffect(() => {
+        const { town } = { ...defaultProps$1, ...props };
+        setRegionList({
+            ...regionList,
+            town: isCustom2() ? transformData(town) : town,
+        });
+    }, [town]);
+    useEffect(() => {
+        initCustomSelected();
+    }, [modelValue]);
+    return (React__default.createElement("div", { className: b('custom') },
+        React__default.createElement("div", { className: b('region-tab') },
+            selectedRegion &&
+                Object.keys(selectedRegion).map((key, index) => {
+                    return (React__default.createElement("div", { className: `${b('tab-item')} ${index === tabIndex ? 'active' : ''} ${tabName[index]}`, key: index, onClick: () => changeRegionTab(selectedRegion[key], index, key) }, index <= tabIndex && (React__default.createElement("div", null, getTabName(selectedRegion[key], index)))));
+                }),
+            React__default.createElement("div", { className: b('tab-line'), ref: regionLine, style: { left: `${lineDistance}px` } })),
+        privateType === 'custom' && (React__default.createElement("div", { className: b('region-con') },
+            React__default.createElement("ul", { className: b('region-group') }, regionList[tabName[tabIndex]].map((item, index) => {
+                return (React__default.createElement("li", { key: index, className: b('region-item') },
+                    React__default.createElement("div", { onClick: () => {
+                            nextAreaList(item);
+                        } },
+                        selectedRegion &&
+                            selectedRegion[tabName[tabIndex]]
+                                .id === item.id && (React__default.createElement(Icon, { className: b('region-item--icon'), name: "Check", color: "#FA2C19", size: "13px" })),
+                        item.name)));
+            })))),
+        privateType === 'custom2' && (React__default.createElement("div", { className: b('elevator-group') },
+            React__default.createElement(Elevator, { height: height, indexList: regionList[tabName[tabIndex]], onClickItem: handleElevatorItem })))));
+};
+
+const defaultProps = {
+    ...ComponentDefaults,
+    modelValue: false,
+    modelSelect: [],
+    type: 'custom',
+    customAddressTitle: '',
+    province: [],
+    city: [],
+    country: [],
+    town: [],
+    isShowCustomAddress: true,
+    existAddress: [],
+    existAddressTitle: '',
+    customAndExistTitle: '',
+    height: '200px',
+    defaultIcon: 'location2',
+    selectedIcon: 'Check',
+    closeBtnIcon: 'circle-close',
+    backBtnIcon: 'left',
+};
+const Address = (props) => {
+    const { locale } = useConfig$1();
+    const { modelValue, modelSelect, children, type, height, customAddressTitle, existAddress, existAddressTitle, province, city, country, town, isShowCustomAddress, customAndExistTitle, selectedIcon, defaultIcon, closeBtnIcon, backBtnIcon, onChange, onSelected, onClose, closeMask, switchModule, onTabChecked, style, className, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('address');
+    const [privateType, setPrivateType] = useState(type);
+    const [tabName] = useState(['province', 'city', 'country', 'town']);
+    const [showPopup, setShowPopup] = useState(modelValue);
+    const [selectedRegion, setSelectedRegion] = useState({
+        province: { name: '' },
+        city: { name: '' },
+        country: { name: '' },
+        town: { name: '' },
+    }); // 已选择的 省、市、县、镇
+    const [selectedExistAddress, setSelectedExistAddress] = useState({}); // 当前选择的地址
+    // 手动关闭 点击叉号(cross)，或者蒙层(mask)
+    const handClose = () => {
+        setShowPopup(false);
+    };
+    // 点击遮罩层关闭
+    const clickOverlay = () => {
+        closeMask && closeMask({ closeWay: 'mask' });
+    };
+    // 切换下一级列表
+    const nextAreaList = (item) => {
+        // onchange 接收的参数
+        const callbackParams = {
+            next: item.next,
+            value: item.value,
+            custom: item.custom,
+        };
+        setSelectedRegion({
+            ...item.selectedRegion,
+        });
+        onChange && onChange(callbackParams);
+    };
+    // 选择现有地址
+    const selectedExist = (prevExistAdd, item, copyExistAdd) => {
+        setSelectedExistAddress(item);
+        onSelected && onSelected(prevExistAdd, item, copyExistAdd);
+        handClose();
+    };
+    // 初始化
+    const initAddress = () => {
+        for (let i = 0; i < tabName.length; i++) {
+            setSelectedRegion({
+                ...selectedRegion,
+                [tabName[i]]: {},
+            });
+        }
+    };
+    // 关闭
+    const closeFun = () => {
+        const resCopy = {
+            addressIdStr: '',
+            addressStr: '',
+            ...selectedRegion,
+        };
+        const res = {
+            data: {
+                addressIdStr: '',
+                addressStr: '',
+                ...selectedRegion,
+            },
+            type: privateType,
+        };
+        if (privateType === 'custom' || privateType === 'custom2') {
+            const { province, city, country, town } = resCopy;
+            resCopy.addressIdStr = [
+                province.id || 0,
+                city.id || 0,
+                country.id || 0,
+                town.id || 0,
+            ].join('_');
+            resCopy.addressStr = [
+                province.name,
+                city.name,
+                country.name,
+                town.name,
+            ].join('');
+            res.data = resCopy;
+        }
+        else {
+            res.data = selectedExistAddress;
+        }
+        initAddress();
+        onClose && onClose(res);
+    };
+    // 选择其他地址
+    const onSwitchModule = () => {
+        if (privateType === 'exist') {
+            setPrivateType('custom');
+        }
+        else {
+            setPrivateType('exist');
+        }
+        initAddress();
+        switchModule && switchModule({ type: privateType });
+    };
+    const headerRender = () => {
+        return (React__default.createElement("div", { className: b('header') },
+            React__default.createElement("div", { className: "arrow-back", onClick: onSwitchModule }, privateType === 'custom' && backBtnIcon && (React__default.createElement(Icon$1, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: backBtnIcon, color: "#cccccc" }))),
+            React__default.createElement("div", { className: b('header__title') }, privateType === 'custom'
+                ? customAddressTitle || locale.address.selectRegion
+                : existAddressTitle || locale.address.deliveryTo),
+            React__default.createElement("div", { onClick: () => handClose() }, closeBtnIcon && (React__default.createElement(Icon$1, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: closeBtnIcon, color: "#cccccc", size: "18px" })))));
+    };
+    useEffect(() => {
+        setShowPopup(modelValue);
+    }, [modelValue]);
+    useEffect(() => {
+        if (!showPopup) {
+            closeFun();
+        }
+    }, [showPopup]);
+    return (React__default.createElement(React__default.Fragment, null, showPopup && (React__default.createElement(Popup, { visible: showPopup, position: "bottom", onClickOverlay: clickOverlay, onClose: () => {
+            closeFun();
+        } },
+        React__default.createElement("div", { className: `${b()} ${className || ''}`, style: { ...style }, ...rest },
+            headerRender(),
+            (privateType === 'custom' || privateType === 'custom2') && (React__default.createElement(CustomRender, { modelValue: modelSelect, type: privateType, province: province, city: city, country: country, town: town, height: height, onNextArea: (cal) => {
+                    nextAreaList && nextAreaList(cal);
+                }, onTabClick: (type) => {
+                    onTabChecked && onTabChecked(type);
+                }, onClose: handClose })),
+            privateType === 'exist' && (React__default.createElement(ExistRender, { type: privateType, existAddress: existAddress, selectedIcon: selectedIcon, defaultIcon: defaultIcon, isShowCustomAddress: isShowCustomAddress, customAndExistTitle: customAndExistTitle || locale.address.chooseAnotherAddress, onSelected: selectedExist, onSwitchModule: onSwitchModule })))))));
+};
+Address.defaultProps = defaultProps;
+Address.displayName = 'NutAddress';
+
+export { Address as A };

package/dist/esm/animate.taro-fb7986d6.js

@@ -0,0 +1,40 @@
+import React__default, { useState } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    type: 'shake',
+    action: 'initial',
+    loop: false,
+    onClick: (event) => { },
+};
+const Animate = (props) => {
+    const { className, type, action, loop, onClick, children, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [clicked, setClicked] = useState(false);
+    const b = cn('animate');
+    const classes = classNames({
+        'nut-ani-container': true,
+        [`${b('')}-${type}`]: action === 'initial' || clicked ? type : false,
+        loop: loop,
+    });
+    const cls = classNames(classes, className);
+    const handleClick = (event) => {
+        setClicked(true);
+        //如果不是无限循环，清除类名
+        if (!loop) {
+            setTimeout(() => {
+                setClicked(false);
+            }, 1000);
+        }
+        onClick && onClick(event);
+    };
+    return (React__default.createElement("div", { className: "nut-animate" },
+        React__default.createElement("div", { className: cls, onClick: handleClick, ...rest }, children)));
+};
+Animate.defaultProps = defaultProps;
+Animate.displayName = 'NutAnimate';
+
+export { Animate as A };

package/dist/esm/animatingnumbers.taro-03e5d61d.js

@@ -0,0 +1,104 @@
+import React__default, { useRef, useState, useEffect, Component } from 'react';
+import { createSelectorQuery } from '@tarojs/taro';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps$1 = {
+    maxLen: 0,
+    endNumber: '',
+    delaySpeed: 300,
+    easeSpeed: 1,
+    thousands: false,
+    className: '',
+};
+const CountUp = (props) => {
+    const { maxLen, endNumber, delaySpeed, easeSpeed, className, thousands, ...reset } = {
+        ...defaultProps$1,
+        ...props,
+    };
+    const b = cn('countup');
+    const countupRef = useRef(null);
+    const timerRef = useRef(0);
+    const numbers = Array.from({ length: 10 }, (v, i) => i);
+    const getShowNumber = () => {
+        const splitArr = endNumber.split('.');
+        const intNumber = maxLen && splitArr[0].length < maxLen
+            ? (Array(maxLen).join('0') + splitArr[0]).slice(-maxLen)
+            : splitArr[0];
+        const currNumber = `${thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber}${splitArr[1] ? '.' : ''}${splitArr[1] || ''}`;
+        return currNumber.split('');
+    };
+    const [numerArr, setNumerArr] = useState([]);
+    const [transformArr, setTransformArr] = useState([]);
+    const isLoaded = useRef(false);
+    const setNumberTransform = () => {
+        if (countupRef.current && numerArr.length) {
+            createSelectorQuery()
+                .selectAll('.nut-countup__listitem')
+                .node((numberItems) => {
+                const transformArrCache = [];
+                Object.keys(numberItems).forEach((key) => {
+                    const elem = numberItems[Number(key)];
+                    const idx = Number(numerArr[Number(key)]);
+                    if (elem) {
+                        // 计算规则：父元素和实际列表高度的百分比，分割成20等份
+                        const transform = idx || idx === 0
+                            ? `translate(0, -${(idx === 0 ? 10 : idx) * 5}%)`
+                            : '';
+                        transformArrCache.push(transform);
+                    }
+                });
+                setTransformArr([...transformArrCache]);
+            })
+                .exec();
+        }
+    };
+    const numberEaseStyle = (idx) => {
+        return {
+            transition: `transform ${easeSpeed}s ease-in-out`,
+            transform: transformArr[idx] ? transformArr[idx] : null,
+        };
+    };
+    useEffect(() => {
+        setNumberTransform();
+    }, [numerArr]);
+    useEffect(() => {
+        if (!isLoaded.current) {
+            isLoaded.current = true;
+            timerRef.current = window.setTimeout(() => {
+                setNumerArr(getShowNumber());
+            }, delaySpeed);
+        }
+        else {
+            setNumerArr(getShowNumber());
+        }
+        return () => {
+            window.clearTimeout(timerRef.current);
+        };
+    }, [endNumber]);
+    return (React__default.createElement("div", { className: `${b()} ${className}`, ref: countupRef },
+        React__default.createElement("ul", { className: b('list') }, numerArr.map((item, idx) => {
+            return (React__default.createElement("li", { className: `${b('listitem', {
+                    number: !Number.isNaN(Number(item)),
+                })}`, key: idx }, !Number.isNaN(Number(item)) ? (React__default.createElement("span", { className: b('number'), style: numberEaseStyle(idx) }, [...numbers, ...numbers].map((number, subidx) => {
+                return React__default.createElement("span", { key: subidx }, number);
+            }))) : (React__default.createElement("span", { className: b('separator') }, item))));
+        }))));
+};
+CountUp.defaultProps = defaultProps$1;
+CountUp.displayName = 'NutCountUp';
+
+const defaultProps = {};
+class AnimatingNumbers extends Component {
+    static defaultProps = defaultProps;
+    static displayName = 'NutAnimatingNumbers';
+    static CountUp = CountUp;
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    render() {
+        return React__default.createElement("div", { className: "nut-animatingnumbers" });
+    }
+}
+
+export { AnimatingNumbers as A };