@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/esm/address.taro-1a8ab3f1.js

@@ -0,0 +1,470 @@
+import React, { useEffect, useState, useRef } from "react";
+import { Check, Location2, Left, CircleClose } from "@nutui/icons-react-taro";
+import { P as Popup } from "./popup.taro-e756f3fc.js";
+import { c as cn } from "./bem-cdccae08.js";
+import { useConfig } from "./ConfigProvider.js";
+import { createSelectorQuery } from "@tarojs/taro";
+import { E as Elevator } from "./elevator.taro-df8fde9d.js";
+import { u as useConfig$1 } from "./configprovider.taro-25758d9f.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps$2 = {
+  type: "custom",
+  existAddress: [],
+  defaultIcon: null,
+  selectedIcon: null,
+  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 onSwitch = () => {
+    onSwitchModule && onSwitchModule({ type: type === "exist" ? "custom" : "exist" });
+  };
+  useEffect(() => {
+  }, [existAddress]);
+  return React.createElement(
+    "div",
+    { className: b("exist") },
+    React.createElement(
+      "div",
+      { className: b("exist-group") },
+      React.createElement("ul", { className: b("exist-ul") }, existAddress.map((item, index) => {
+        return React.createElement(
+          "li",
+          { className: b("exist-item"), key: index },
+          React.createElement(
+            "div",
+            { onClick: () => selectedExist(item) },
+            item.selectedAddress ? selectedIcon : defaultIcon,
+            React.createElement(
+              "div",
+              { className: b("exist-item-info") },
+              item.name && item.phone && React.createElement(
+                "div",
+                { className: "exist-item-info-top" },
+                React.createElement("div", { className: "exist-item-info-name" }, item.name),
+                React.createElement("div", { className: "exist-item-info-phone" }, item.phone)
+              ),
+              React.createElement(
+                "div",
+                { className: "exist-item-info-bottom" },
+                React.createElement("div", null, item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail)
+              )
+            )
+          )
+        );
+      }))
+    ),
+    isShowCustomAddress && React.createElement(
+      "div",
+      { className: b("choose-other"), onClick: onSwitch },
+      React.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$1();
+  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, b2) => {
+      return a.title.localeCompare(b2.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) => {
+    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();
+    }
+  };
+  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: province2 } = { ...defaultProps$1, ...props };
+    setRegionList({
+      ...regionList,
+      province: isCustom2() ? transformData(province2) : province2
+    });
+  }, [province]);
+  useEffect(() => {
+    const { city: city2 } = { ...defaultProps$1, ...props };
+    setRegionList({
+      ...regionList,
+      city: isCustom2() ? transformData(city2) : city2
+    });
+  }, [city]);
+  useEffect(() => {
+    const { country: country2 } = { ...defaultProps$1, ...props };
+    setRegionList({
+      ...regionList,
+      country: isCustom2() ? transformData(country2) : country2
+    });
+  }, [country]);
+  useEffect(() => {
+    const { town: town2 } = { ...defaultProps$1, ...props };
+    setRegionList({
+      ...regionList,
+      town: isCustom2() ? transformData(town2) : town2
+    });
+  }, [town]);
+  useEffect(() => {
+    initCustomSelected();
+  }, [modelValue]);
+  return React.createElement(
+    "div",
+    { className: b("custom") },
+    React.createElement(
+      "div",
+      { className: b("region-tab") },
+      selectedRegion && Object.keys(selectedRegion).map((key, index) => {
+        return React.createElement("div", { className: `${b("tab-item")} ${index === tabIndex ? "active" : ""} ${tabName[index]}`, key: index, onClick: () => changeRegionTab(selectedRegion[key], index, key) }, index <= tabIndex && React.createElement("div", null, getTabName(selectedRegion[key], index)));
+      }),
+      React.createElement("div", { className: b("tab-line"), ref: regionLine, style: { left: `${lineDistance}px` } })
+    ),
+    privateType === "custom" && React.createElement(
+      "div",
+      { className: b("region-con") },
+      React.createElement("ul", { className: b("region-group") }, regionList[tabName[tabIndex]].map((item, index) => {
+        return React.createElement(
+          "li",
+          { key: index, className: b("region-item") },
+          React.createElement(
+            "div",
+            { onClick: () => {
+              nextAreaList(item);
+            } },
+            selectedRegion && selectedRegion[tabName[tabIndex]].id === item.id && React.createElement(Check, { className: b("region-item--icon"), color: "#FA2C19", size: "13px" }),
+            item.name
+          )
+        );
+      }))
+    ),
+    privateType === "custom2" && React.createElement(
+      "div",
+      { className: b("elevator-group") },
+      React.createElement(Elevator, { height, list: 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: null,
+  selectedIcon: null,
+  closeBtnIcon: null,
+  backBtnIcon: null
+};
+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, onCancel, onSwitch, onTabChecked, style, className, ...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({});
+  const handClose = () => {
+    setShowPopup(false);
+  };
+  const clickOverlay = () => {
+    onCancel && onCancel({ closeWay: "mask" });
+  };
+  const nextAreaList = (item) => {
+    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: province2, city: city2, country: country2, town: town2 } = resCopy;
+      resCopy.addressIdStr = [
+        province2.id || 0,
+        city2.id || 0,
+        country2.id || 0,
+        town2.id || 0
+      ].join("_");
+      resCopy.addressStr = [
+        province2.name,
+        city2.name,
+        country2.name,
+        town2.name
+      ].join("");
+      res.data = resCopy;
+    } else {
+      res.data = selectedExistAddress;
+    }
+    initAddress();
+    onClose && onClose(res);
+  };
+  const onSwitchModule = () => {
+    if (privateType === "exist") {
+      setPrivateType("custom");
+    } else {
+      setPrivateType("exist");
+    }
+    initAddress();
+    onSwitch && onSwitch({ type: privateType });
+  };
+  const headerRender = () => {
+    return React.createElement(
+      "div",
+      { className: b("header") },
+      React.createElement("div", { className: "arrow-back", onClick: onSwitchModule }, privateType === "custom" && (React.isValidElement(backBtnIcon) ? backBtnIcon : React.createElement(Left, { color: "#cccccc" }))),
+      React.createElement("div", { className: b("header__title") }, privateType === "custom" ? customAddressTitle || locale.address.selectRegion : existAddressTitle || locale.address.deliveryTo),
+      React.createElement("div", { onClick: () => handClose() }, React.isValidElement(closeBtnIcon) ? closeBtnIcon : React.createElement(CircleClose, { size: 18, color: "#ccc" }))
+    );
+  };
+  useEffect(() => {
+    setShowPopup(modelValue);
+  }, [modelValue]);
+  useEffect(() => {
+    if (!showPopup) {
+      closeFun();
+    }
+  }, [showPopup]);
+  return React.createElement(React.Fragment, null, showPopup && React.createElement(
+    Popup,
+    { visible: showPopup, position: "bottom", onClickOverlay: clickOverlay, onClose: () => {
+      closeFun();
+    } },
+    React.createElement(
+      "div",
+      { className: `${b()} ${className || ""}`, style: { ...style }, ...rest },
+      headerRender(),
+      (privateType === "custom" || privateType === "custom2") && React.createElement(CustomRender, { modelValue: modelSelect, type: privateType, province, city, country, town, height, onNextArea: (cal) => {
+        nextAreaList && nextAreaList(cal);
+      }, onTabClick: (type2) => {
+        onTabChecked && onTabChecked(type2);
+      }, onClose: handClose }),
+      privateType === "exist" && React.createElement(ExistRender, { type: privateType, existAddress, selectedIcon: React.isValidElement(selectedIcon) ? selectedIcon : React.createElement(Check, { color: "#FA2C19" }), defaultIcon: React.isValidElement(defaultIcon) ? defaultIcon : React.createElement(Location2, null), isShowCustomAddress, customAndExistTitle: customAndExistTitle || locale.address.chooseAnotherAddress, onSelected: selectedExist, onSwitchModule })
+    )
+  ));
+};
+Address.defaultProps = defaultProps;
+Address.displayName = "NutAddress";
+export {
+  Address as A
+};

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

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  type: "shake",
+  action: "initial",
+  loop: false,
+  onClick: (event) => {
+  }
+};
+const classPrefix = `nut-animate`;
+const Animate = (props) => {
+  const { className, type, action, loop, onClick, children, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [clicked, setClicked] = useState(false);
+  const classes = classNames({
+    "nut-ani-container": true,
+    [`${classPrefix}-${type}`]: action === "initial" || clicked ? type : false,
+    loop
+  });
+  const cls = classNames(classes, className);
+  const handleClick = (event) => {
+    setClicked(true);
+    if (!loop) {
+      setTimeout(() => {
+        setClicked(false);
+      }, 1e3);
+    }
+    onClick && onClick(event);
+  };
+  return React.createElement(
+    "div",
+    { className: "nut-animate" },
+    React.createElement("div", { className: cls, onClick: handleClick, ...rest }, children)
+  );
+};
+Animate.defaultProps = defaultProps;
+Animate.displayName = "NutAnimate";
+export {
+  Animate as A
+};

package/dist/esm/animatingnumbers.taro-c2a52dbd.js

@@ -0,0 +1,103 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import React, { useRef, useState, useEffect, Component } from "react";
+import { createSelectorQuery } from "@tarojs/taro";
+import { c as cn } from "./bem-cdccae08.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) {
+            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.createElement(
+    "div",
+    { className: `${b()} ${className}`, ref: countupRef },
+    React.createElement("ul", { className: b("list") }, numerArr.map((item, idx) => {
+      return React.createElement("li", { className: `${b("listitem", {
+        number: !Number.isNaN(Number(item))
+      })}`, key: idx }, !Number.isNaN(Number(item)) ? React.createElement("span", { className: b("number"), style: numberEaseStyle(idx) }, [...numbers, ...numbers].map((number, subidx) => {
+        return React.createElement("span", { key: subidx }, number);
+      })) : React.createElement("span", { className: b("separator") }, item));
+    }))
+  );
+};
+CountUp.defaultProps = defaultProps$1;
+CountUp.displayName = "NutCountUp";
+const defaultProps = {};
+class AnimatingNumbers extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return React.createElement("div", { className: "nut-animatingnumbers" });
+  }
+}
+__publicField(AnimatingNumbers, "defaultProps", defaultProps);
+__publicField(AnimatingNumbers, "displayName", "NutAnimatingNumbers");
+__publicField(AnimatingNumbers, "CountUp", CountUp);
+export {
+  AnimatingNumbers as A
+};