@nutui/nutui-react-taro 1.4.4 → 1.4.5

package/dist/esm/address.taro-79cc7c96.js

@@ -0,0 +1,461 @@
+import React__default, { useEffect, useState, useRef } from 'react';
+import { I as Icon$1 } from './icon.taro-1d0d4fb7.js';
+import { P as Popup } from './popup.taro-cb777e09.js';
+import { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-8dc4de10.js';
+import { u as useConfig } from './configprovider-5eea4f5d.js';
+import { E as Elevator } from './elevator.taro-d7d65470.js';
+import Taro from '@tarojs/taro';
+import { u as useConfig$1 } from './configprovider.taro-26882dd2.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.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') }, locale.address.chooseAnotherAddress || customAndExistTitle)))));
+};
+
+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];
+            Taro.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'
+                ? locale.address.selectRegion || customAddressTitle
+                : locale.address.deliveryTo || existAddressTitle),
+            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: locale.address.chooseAnotherAddress || customAndExistTitle, onSelected: selectedExist, onSwitchModule: onSwitchModule })))))));
+};
+Address.defaultProps = defaultProps;
+Address.displayName = 'NutAddress';
+
+export { Address as A };

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

@@ -1,54 +1,40 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "type", "action", "loop", "onClick", "children"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React__default, { useState } from 'react';
 import classNames from 'classnames';
 import { c as cn } from './bem-893ad28d.js';
-var defaultProps = {
-  type: 'shake',
-  action: 'initial',
-  loop: false,
-  onClick: function onClick(event) {}
+
+const defaultProps = {
+    type: 'shake',
+    action: 'initial',
+    loop: false,
+    onClick: (event) => { },
 };
-var Animate = function Animate(props) {
-  var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    className = _defaultProps$props.className,
-    type = _defaultProps$props.type,
-    action = _defaultProps$props.action,
-    loop = _defaultProps$props.loop,
-    onClick = _defaultProps$props.onClick,
-    children = _defaultProps$props.children,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    clicked = _useState2[0],
-    setClicked = _useState2[1];
-  var b = cn('animate');
-  var classes = classNames((_classNames = {
-    'nut-ani-container': true
-  }, _defineProperty(_classNames, "".concat(b(''), "-").concat(type), action === 'initial' || clicked ? type : false), _defineProperty(_classNames, "loop", loop), _classNames));
-  var cls = classNames(classes, className);
-  var handleClick = function handleClick(event) {
-    setClicked(true);
-    //如果不是无限循环，清除类名
-    if (!loop) {
-      setTimeout(function () {
-        setClicked(false);
-      }, 1000);
-    }
-    onClick && onClick(event);
-  };
-  return React__default.createElement("div", {
-    className: "nut-animate"
-  }, React__default.createElement("div", _objectSpread({
-    className: cls,
-    onClick: handleClick
-  }, rest), children));
+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 };