gui-one-nutui-react-taro/dist/esm/address.taro-8d642b4a.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "type", "existAddress", "selectedIcon", "defaultIcon", "isShowCustomAddress", "customAndExistTitle", "onSelected", "onClose", "onSwitchModule"],
  _excluded2 = ["children", "type", "modelValue", "height", "province", "city", "country", "town", "onNextArea", "onTabClick", "onClose"],
  _excluded3 = ["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"];
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, { useEffect, useState, useRef } from 'react';
import { I as Icon$1 } from './icon.taro-1d0d4fb7.js';
import { P as Popup } from './popup.taro-33d0bbc8.js';
import { c as cn } from './bem-893ad28d.js';
import { I as Icon } from './icon-8dc4de10.js';
import { u as useConfig } from './configprovider-3e87d67a.js';
import { E as Elevator } from './elevator.taro-d7d65470.js';
import Taro from '@tarojs/taro';
import { u as useConfig$1 } from './configprovider.taro-6c7b3056.js';
import { C as ComponentDefaults } from './typings-1c5f2628.js';
var defaultProps$2 = {
  type: 'custom',
  existAddress: [],
  defaultIcon: 'location2',
  selectedIcon: 'Check',
  isShowCustomAddress: true,
  customAndExistTitle: '选择其他地址'
};
var ExistRender = function ExistRender(props) {
  var _useConfig = useConfig(),
    locale = _useConfig.locale;
  var _defaultProps$2$props = _objectSpread(_objectSpread({}, defaultProps$2), props),
    children = _defaultProps$2$props.children,
    type = _defaultProps$2$props.type,
    existAddress = _defaultProps$2$props.existAddress,
    selectedIcon = _defaultProps$2$props.selectedIcon,
    defaultIcon = _defaultProps$2$props.defaultIcon,
    isShowCustomAddress = _defaultProps$2$props.isShowCustomAddress,
    customAndExistTitle = _defaultProps$2$props.customAndExistTitle,
    onSelected = _defaultProps$2$props.onSelected,
    onClose = _defaultProps$2$props.onClose,
    onSwitchModule = _defaultProps$2$props.onSwitchModule,
    rest = _objectWithoutProperties(_defaultProps$2$props, _excluded);
  var b = cn('address');
  // 选择现有地址
  var selectedExist = function selectedExist(item) {
    var copyExistAdd = existAddress;
    var prevExistAdd = {
      provinceName: '',
      cityName: '',
      countyName: '',
      townName: '',
      addressDetail: '',
      selectedAddress: false
    };
    copyExistAdd.forEach(function (list, index) {
      if (list && list.selectedAddress) {
        prevExistAdd = list;
      }
      list.selectedAddress = false;
    });
    item.selectedAddress = true;
    onSelected && onSelected(prevExistAdd, item, copyExistAdd);
  };
  // 选择其他地址
  var switchModule = function switchModule() {
    onSwitchModule && onSwitchModule({
      type: type === 'exist' ? 'custom' : 'exist'
    });
  };
  useEffect(function () {}, [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(function (item, index) {
    return React__default.createElement("li", {
      className: b('exist-item'),
      key: index
    }, React__default.createElement("div", {
      onClick: function onClick() {
        return 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)));
};
var defaultProps$1 = {
  modelValue: [],
  type: 'custom',
  province: [],
  city: [],
  country: [],
  town: [],
  height: '200px'
};
var CustomRender = function CustomRender(props) {
  var _useConfig2 = useConfig(),
    locale = _useConfig2.locale;
  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props),
    children = _defaultProps$1$props.children,
    type = _defaultProps$1$props.type,
    modelValue = _defaultProps$1$props.modelValue,
    height = _defaultProps$1$props.height,
    province = _defaultProps$1$props.province,
    city = _defaultProps$1$props.city,
    country = _defaultProps$1$props.country,
    town = _defaultProps$1$props.town,
    onNextArea = _defaultProps$1$props.onNextArea,
    onTabClick = _defaultProps$1$props.onTabClick,
    onClose = _defaultProps$1$props.onClose,
    rest = _objectWithoutProperties(_defaultProps$1$props, _excluded2);
  var b = cn('address');
  var _useState = useState(type),
    _useState2 = _slicedToArray(_useState, 1),
    privateType = _useState2[0];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    tabIndex = _useState4[0],
    setTabIndex = _useState4[1];
  var _useState5 = useState(['province', 'city', 'country', 'town']),
    _useState6 = _slicedToArray(_useState5, 1),
    tabName = _useState6[0];
  useRef(null);
  useRef(null);
  useRef(null);
  useRef(null);
  var regionLine = useRef(null);
  var isCustom2 = function isCustom2() {
    return type === 'custom2';
  };
  var transformData = function transformData(data) {
    if (!Array.isArray(data)) throw new TypeError('params muse be array.');
    if (!data.length) return [];
    data.forEach(function (item) {
      if (!item.title) {
        console.error('[NutUI] <Address> 请检查数组选项的 title 值是否有设置 ,title 为必填项 .');
      }
    });
    var newData = [];
    data = data.sort(function (a, b) {
      return a.title.localeCompare(b.title);
    });
    data.forEach(function (item) {
      var index = newData.findIndex(function (value) {
        return 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;
  };
  var _useState7 = useState({
      province: isCustom2() ? transformData(province) : province,
      city: isCustom2() ? transformData(city) : city,
      country: isCustom2() ? transformData(country) : country,
      town: isCustom2() ? transformData(town) : town
    }),
    _useState8 = _slicedToArray(_useState7, 2),
    regionList = _useState8[0],
    setRegionList = _useState8[1];
  // 已选择的 省、市、县、镇
  var _useState9 = useState({
      province: {
        name: ''
      },
      city: {
        name: ''
      },
      country: {
        name: ''
      },
      town: {
        name: ''
      }
    }),
    _useState10 = _slicedToArray(_useState9, 2),
    selectedRegion = _useState10[0],
    setSelectedRegion = _useState10[1];
  var _useState11 = useState(20),
    _useState12 = _slicedToArray(_useState11, 2),
    lineDistance = _useState12[0],
    setLineDistance = _useState12[1];
  // 获取已选地区列表名称
  var getTabName = function getTabName(item, index) {
    if (tabIndex > index) {
      return item.name;
    }
    return locale.select;
  };
  // 移动下面的红线
  var lineAnimation = function lineAnimation(index) {
    setTimeout(function () {
      var name = tabName[index];
      Taro.createSelectorQuery().selectAll(".".concat(name)).boundingClientRect(function (rects) {
        rects && rects.length > 0 && rects.forEach(function (rect) {
          if (rect.width > 0) setLineDistance(rect.left || 20);
        });
      }).exec();
    }, 100);
  };
  // 切换下一级列表
  var nextAreaList = function nextAreaList(item) {
    // onchange 接收的参数
    var calBack = {
      next: '',
      value: '',
      custom: tabName[tabIndex]
    };
    var bbselectedRegion = selectedRegion ? _objectSpread({}, selectedRegion) : null;
    if (bbselectedRegion) {
      setSelectedRegion(_objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[tabIndex], item)));
      calBack.selectedRegion = _objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[tabIndex], item));
      for (var i = tabIndex; i < tabIndex - 1; i++) {
        setSelectedRegion(_objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[i + 1], null)));
        calBack.selectedRegion = _objectSpread(_objectSpread({}, bbselectedRegion), {}, _defineProperty({}, tabName[i + 1], {}));
      }
    }
    if (tabIndex < 4) {
      // 切换下一个
      if (tabIndex === 3) {
        calBack.next = '';
      } else {
        setTabIndex(function () {
          return tabIndex + 1;
        });
        lineAnimation(tabIndex + 1);
        calBack.next = tabName[tabIndex + 1];
      }
      calBack.value = item;
      onNextArea && onNextArea(calBack);
    } else {
      onClose && onClose();
    }
  };
  // 切换地区Tab
  var changeRegionTab = function changeRegionTab(item, index, key) {
    if (getTabName(item, index)) {
      setTabIndex(index);
      lineAnimation(index);
    }
    onTabClick && onTabClick(key);
  };
  // 默认选中项
  var initCustomSelected = function initCustomSelected() {
    if (modelValue.length > 0) {
      var tagIndex = 0;
      var selectedRegionC = selectedRegion && Object.assign(selectedRegion);
      for (var index = 0; index < modelValue.length; index++) {
        if (regionList[tabName[index]].length === 0) {
          tagIndex = index - 1;
          setTabIndex(index - 1);
          break;
        } else {
          (function () {
            var val = modelValue[index];
            var arr = regionList[tabName[index]];
            if (privateType === 'custom') {
              selectedRegionC[[tabName[index]]] = arr.filter(function (item) {
                return item.id === val;
              })[0];
            } else if (privateType === 'custom2') {
              var sumArr = [];
              arr.forEach(function (item) {
                sumArr.push.apply(sumArr, _toConsumableArray(item.list));
              });
              selectedRegionC[[tabName[index]]] = sumArr.filter(function (item) {
                return item.id === val;
              })[0];
            }
            tagIndex = index;
            setSelectedRegion(selectedRegionC);
          })();
        }
      }
      setTabIndex(tagIndex);
      lineAnimation(tagIndex);
    }
  };
  var handleElevatorItem = function handleElevatorItem(key, item) {
    nextAreaList(item);
  };
  useEffect(function () {
    var _defaultProps$1$props2 = _objectSpread(_objectSpread({}, defaultProps$1), props),
      province = _defaultProps$1$props2.province;
    setRegionList(_objectSpread(_objectSpread({}, regionList), {}, {
      province: isCustom2() ? transformData(province) : province
    }));
  }, [province]);
  useEffect(function () {
    var _defaultProps$1$props3 = _objectSpread(_objectSpread({}, defaultProps$1), props),
      city = _defaultProps$1$props3.city;
    setRegionList(_objectSpread(_objectSpread({}, regionList), {}, {
      city: isCustom2() ? transformData(city) : city
    }));
  }, [city]);
  useEffect(function () {
    var _defaultProps$1$props4 = _objectSpread(_objectSpread({}, defaultProps$1), props),
      country = _defaultProps$1$props4.country;
    setRegionList(_objectSpread(_objectSpread({}, regionList), {}, {
      country: isCustom2() ? transformData(country) : country
    }));
  }, [country]);
  useEffect(function () {
    var _defaultProps$1$props5 = _objectSpread(_objectSpread({}, defaultProps$1), props),
      town = _defaultProps$1$props5.town;
    setRegionList(_objectSpread(_objectSpread({}, regionList), {}, {
      town: isCustom2() ? transformData(town) : town
    }));
  }, [town]);
  useEffect(function () {
    initCustomSelected();
  }, [modelValue]);
  return React__default.createElement("div", {
    className: b('custom')
  }, React__default.createElement("div", {
    className: b('region-tab')
  }, selectedRegion && Object.keys(selectedRegion).map(function (key, index) {
    return React__default.createElement("div", {
      className: "".concat(b('tab-item'), " ").concat(index === tabIndex ? 'active' : '', " ").concat(tabName[index]),
      key: index,
      onClick: function onClick() {
        return 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: "".concat(lineDistance, "px")
    }
  })), privateType === 'custom' && React__default.createElement("div", {
    className: b('region-con')
  }, React__default.createElement("ul", {
    className: b('region-group')
  }, regionList[tabName[tabIndex]].map(function (item, index) {
    return React__default.createElement("li", {
      key: index,
      className: b('region-item')
    }, React__default.createElement("div", {
      onClick: function 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
  })));
};
var defaultProps = _objectSpread(_objectSpread({}, 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'
});
var Address = function Address(props) {
  var _useConfig$ = useConfig$1(),
    locale = _useConfig$.locale;
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    modelValue = _defaultProps$props.modelValue,
    modelSelect = _defaultProps$props.modelSelect,
    children = _defaultProps$props.children,
    type = _defaultProps$props.type,
    height = _defaultProps$props.height,
    customAddressTitle = _defaultProps$props.customAddressTitle,
    existAddress = _defaultProps$props.existAddress,
    existAddressTitle = _defaultProps$props.existAddressTitle,
    province = _defaultProps$props.province,
    city = _defaultProps$props.city,
    country = _defaultProps$props.country,
    town = _defaultProps$props.town,
    isShowCustomAddress = _defaultProps$props.isShowCustomAddress,
    customAndExistTitle = _defaultProps$props.customAndExistTitle,
    selectedIcon = _defaultProps$props.selectedIcon,
    defaultIcon = _defaultProps$props.defaultIcon,
    closeBtnIcon = _defaultProps$props.closeBtnIcon,
    backBtnIcon = _defaultProps$props.backBtnIcon,
    onChange = _defaultProps$props.onChange,
    onSelected = _defaultProps$props.onSelected,
    onClose = _defaultProps$props.onClose,
    closeMask = _defaultProps$props.closeMask,
    switchModule = _defaultProps$props.switchModule,
    onTabChecked = _defaultProps$props.onTabChecked,
    style = _defaultProps$props.style,
    className = _defaultProps$props.className,
    iconClassPrefix = _defaultProps$props.iconClassPrefix,
    iconFontClassName = _defaultProps$props.iconFontClassName,
    rest = _objectWithoutProperties(_defaultProps$props, _excluded3);
  var b = cn('address');
  var _useState13 = useState(type),
    _useState14 = _slicedToArray(_useState13, 2),
    privateType = _useState14[0],
    setPrivateType = _useState14[1];
  var _useState15 = useState(['province', 'city', 'country', 'town']),
    _useState16 = _slicedToArray(_useState15, 1),
    tabName = _useState16[0];
  var _useState17 = useState(modelValue),
    _useState18 = _slicedToArray(_useState17, 2),
    showPopup = _useState18[0],
    setShowPopup = _useState18[1];
  var _useState19 = useState({
      province: {
        name: ''
      },
      city: {
        name: ''
      },
      country: {
        name: ''
      },
      town: {
        name: ''
      }
    }),
    _useState20 = _slicedToArray(_useState19, 2),
    selectedRegion = _useState20[0],
    setSelectedRegion = _useState20[1]; // 已选择的 省、市、县、镇
  var _useState21 = useState({}),
    _useState22 = _slicedToArray(_useState21, 2),
    selectedExistAddress = _useState22[0],
    setSelectedExistAddress = _useState22[1]; // 当前选择的地址
  // 手动关闭 点击叉号(cross)，或者蒙层(mask)
  var handClose = function handClose() {
    setShowPopup(false);
  };
  // 点击遮罩层关闭
  var clickOverlay = function clickOverlay() {
    closeMask && closeMask({
      closeWay: 'mask'
    });
  };
  // 切换下一级列表
  var nextAreaList = function nextAreaList(item) {
    // onchange 接收的参数
    var callbackParams = {
      next: item.next,
      value: item.value,
      custom: item.custom
    };
    setSelectedRegion(_objectSpread({}, item.selectedRegion));
    onChange && onChange(callbackParams);
  };
  // 选择现有地址
  var selectedExist = function selectedExist(prevExistAdd, item, copyExistAdd) {
    setSelectedExistAddress(item);
    onSelected && onSelected(prevExistAdd, item, copyExistAdd);
    handClose();
  };
  // 初始化
  var initAddress = function initAddress() {
    for (var i = 0; i < tabName.length; i++) {
      setSelectedRegion(_objectSpread(_objectSpread({}, selectedRegion), {}, _defineProperty({}, tabName[i], {})));
    }
  };
  // 关闭
  var closeFun = function closeFun() {
    var resCopy = _objectSpread({
      addressIdStr: '',
      addressStr: ''
    }, selectedRegion);
    var res = {
      data: _objectSpread({
        addressIdStr: '',
        addressStr: ''
      }, selectedRegion),
      type: privateType
    };
    if (privateType === 'custom' || privateType === 'custom2') {
      var _province = resCopy.province,
        _city = resCopy.city,
        _country = resCopy.country,
        _town = resCopy.town;
      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);
  };
  // 选择其他地址
  var onSwitchModule = function onSwitchModule() {
    if (privateType === 'exist') {
      setPrivateType('custom');
    } else {
      setPrivateType('exist');
    }
    initAddress();
    switchModule && switchModule({
      type: privateType
    });
  };
  var headerRender = function 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: function onClick() {
        return handClose();
      }
    }, closeBtnIcon && React__default.createElement(Icon$1, {
      classPrefix: iconClassPrefix,
      fontClassName: iconFontClassName,
      name: closeBtnIcon,
      color: "#cccccc",
      size: "18px"
    })));
  };
  useEffect(function () {
    setShowPopup(modelValue);
  }, [modelValue]);
  useEffect(function () {
    if (!showPopup) {
      closeFun();
    }
  }, [showPopup]);
  return React__default.createElement(React__default.Fragment, null, showPopup && React__default.createElement(Popup, {
    visible: showPopup,
    position: "bottom",
    onClickOverlay: clickOverlay,
    onClose: function onClose() {
      closeFun();
    }
  }, React__default.createElement("div", _objectSpread({
    className: "".concat(b(), " ").concat(className || ''),
    style: _objectSpread({}, 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: function onNextArea(cal) {
      nextAreaList && nextAreaList(cal);
    },
    onTabClick: function 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 };