@nutui/nutui-react-taro 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/esm/card.taro-92fe9733.js

@@ -0,0 +1,64 @@
+import React from "react";
+import classNames from "classnames";
+import { P as Price } from "./price.taro-479f1b82.js";
+import { T as Tag } from "./tag.taro-614758eb.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  src: "",
+  title: "",
+  price: "",
+  vipPrice: "",
+  shopDescription: "",
+  delivery: "",
+  shopName: "",
+  description: "",
+  tag: "",
+  priceTag: "",
+  extra: ""
+};
+const Card = (props) => {
+  const { className, style, src, title, price, vipPrice, shopDescription, delivery, shopName, tag, priceTag, description, extra, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-card";
+  return React.createElement(
+    "div",
+    { className: classNames(classPrefix, className), style, ...rest },
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__left` },
+      React.createElement("img", { src, alt: "" })
+    ),
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__right` },
+      React.createElement("div", { className: `${classPrefix}__right-title` }, title),
+      description,
+      React.createElement(
+        "div",
+        { className: `${classPrefix}right-price` },
+        React.createElement(Price, { size: "normal", price }),
+        priceTag || React.createElement(Price, { size: "normal", className: `${classPrefix}right-price-origin`, price: vipPrice })
+      ),
+      React.createElement("div", { className: `${classPrefix}right-other` }, tag || React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(Tag, { type: "danger" }, shopDescription),
+        React.createElement(Tag, { plain: true }, delivery)
+      )),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}right-shop` },
+        React.createElement("div", { className: `${classPrefix}right-shop-name` }, shopName),
+        extra
+      )
+    )
+  );
+};
+Card.defaultProps = defaultProps;
+Card.displayName = "NutCard";
+export {
+  Card as C
+};

package/dist/esm/{cascader.taro-fb7a0230.js → cascader.taro-b5c1f5c6.js}

@@ -4,62 +4,13 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import React, { isValidElement, useState, useEffect } from "react";
+import React, { useState, useEffect, isValidElement } from "react";
 import classNames from "classnames";
-import { P as Popup } from "./popup.taro-e756f3fc.js";
-import { T as Tabs } from "./tabs.taro-66164782.js";
 import { Loading, Checklist } from "@nutui/icons-react-taro";
+import { P as Popup } from "./popup.taro-23f882b0.js";
+import { T as Tabs } from "./tabs.taro-66164782.js";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
-const defaultProps$1 = {
-  data: {
-    text: "",
-    value: "",
-    paneKey: "",
-    disabled: false,
-    loading: false,
-    children: []
-  },
-  activeColor: "",
-  checked: false,
-  activeIcon: "checklist",
-  chooseItem: () => {
-  }
-};
-const InternalCascaderItem = (props, ref) => {
-  const { data, checked, activeIcon, chooseItem, activeColor } = {
-    ...defaultProps$1,
-    ...props
-  };
-  const classPrefix = "nut-cascader-item";
-  const classes = classNames({
-    active: checked,
-    disabled: data.disabled
-  }, classPrefix);
-  const classesTitle = classNames({
-    [`${classPrefix}__title`]: true
-  });
-  const renderIcon = () => {
-    if (checked) {
-      if (isValidElement(activeIcon)) {
-        return activeIcon;
-      }
-      return React.createElement(Checklist, { className: `${checked ? `${classPrefix}__icon-check` : ""}` });
-    }
-    return null;
-  };
-  return React.createElement(
-    "div",
-    { style: { color: checked ? activeColor : "" }, className: classes, onClick: () => {
-      chooseItem(data);
-    } },
-    React.createElement("div", { className: classesTitle }, data.text),
-    data.loading ? React.createElement(Loading, { color: "#969799", className: "nut-cascader-item__icon-loading" }) : renderIcon()
-  );
-};
-const CascaderItem = React.forwardRef(InternalCascaderItem);
-CascaderItem.defaultProps = defaultProps$1;
-CascaderItem.displayName = "NutCascaderItem";
 const formatTree = (tree, parent, config) => tree.map((node) => {
   const { value: valueKey = "value", text: textKey = "text", children: childrenKey = "children" } = config;
   const { [valueKey]: value, [textKey]: text, [childrenKey]: children, ...others } = node;
@@ -192,7 +143,6 @@ const defaultProps = {
   popup: true,
   visible: false,
   options: [],
-  title: "",
   optionKey: { textKey: "text", valueKey: "value", childrenKey: "children" },
   format: {},
   closeable: false,
@@ -209,7 +159,7 @@ const defaultProps = {
   }
 };
 const InternalCascader = (props, ref) => {
-  const { className, style, popup, visible, options, value, defaultValue, title, optionKey, format, closeable, closeIconPosition, closeIcon, lazy, onLoad, onClose, onChange, onPathChange } = { ...defaultProps, ...props };
+  const { className, style, activeColor, activeIcon, popup, visible, options, value, defaultValue, optionKey, format, closeable, closeIconPosition, closeIcon, lazy, onLoad, onClose, onChange, onPathChange } = { ...defaultProps, ...props };
   const [tabvalue, setTabvalue] = useState("c1");
   const [optionsData, setOptionsData] = useState([]);
   const isLazy = () => state.configs.lazy && Boolean(state.configs.onLoad);
@@ -408,11 +358,39 @@ const InternalCascader = (props, ref) => {
     }
     setOptionsData(state.panes);
   };
-  const renderItem = () => {
+  const renderItem = (pane, node, index) => {
+    var _a;
+    const classPrefix2 = "nut-cascader-item";
+    const checked = ((_a = pane.selectedNode) == null ? void 0 : _a.value) === node.value;
+    const classes = classNames({
+      active: checked,
+      disabled: node.disabled
+    }, classPrefix2);
+    const classesTitle = classNames({
+      [`${classPrefix2}__title`]: true
+    });
+    const renderIcon = () => {
+      if (checked) {
+        if (isValidElement(activeIcon)) {
+          return activeIcon;
+        }
+        return React.createElement(Checklist, { className: `${checked ? `${classPrefix}__icon-check` : ""}` });
+      }
+      return null;
+    };
+    return React.createElement(
+      "div",
+      { style: { color: checked ? activeColor : "" }, className: classes, key: index, onClick: () => {
+        chooseItem(node, false);
+      } },
+      React.createElement("div", { className: classesTitle }, node.text),
+      node.loading ? React.createElement(Loading, { color: "#969799", className: "nut-cascader-item__icon-loading" }) : renderIcon()
+    );
+  };
+  const renderTabs = () => {
     return React.createElement(
       "div",
       { className: `${classPrefix} ${className}`, style },
-      popup && React.createElement("div", { className: "nut-cascader__title" }, title),
       React.createElement(Tabs, { value: tabvalue, title: () => {
         return optionsData.map((pane, index) => {
           var _a, _b;
@@ -432,36 +410,33 @@ const InternalCascader = (props, ref) => {
             React.createElement("span", { className: "nut-tabs__titles-item__line" })
           );
         });
-      } }, !state.initLoading && state.panes.length ? optionsData.map((pane) => React.createElement(
-        Tabs.TabPane,
-        { key: pane.paneKey, value: pane.paneKey },
-        React.createElement("div", { className: classesPane }, pane.nodes && pane.nodes.map((node, index) => {
-          var _a;
-          return React.createElement(CascaderItem, { key: index, ...props, data: node, checked: ((_a = pane.selectedNode) == null ? void 0 : _a.value) === node.value, chooseItem: (node2) => chooseItem(node2, false) });
-        }))
-      )) : React.createElement(
+      } }, !state.initLoading && state.panes.length ? optionsData.map((pane) => {
+        var _a;
+        return React.createElement(
+          Tabs.TabPane,
+          { key: pane.paneKey, value: pane.paneKey },
+          React.createElement("div", { className: classesPane }, (_a = pane.nodes) == null ? void 0 : _a.map((node, index) => renderItem(pane, node, index)))
+        );
+      }) : React.createElement(
         Tabs.TabPane,
         null,
         React.createElement("div", { className: classesPane })
       ))
     );
   };
-  return React.createElement(React.Fragment, null, popup ? React.createElement(
-    Popup,
-    {
-      // className="nut-cascadar-popup"
-      visible,
-      position: "bottom",
-      round: true,
-      closeIcon,
-      closeable,
-      closeIconPosition,
-      // todo 只关闭，不处理逻辑。和popup的逻辑不一致。关闭时需要增加是否要处理回调
-      onClickOverlay: closePopup,
-      onClickCloseIcon: closePopup
-    },
-    renderItem()
-  ) : renderItem());
+  return React.createElement(React.Fragment, null, popup ? React.createElement(Popup, {
+    visible,
+    position: "bottom",
+    round: true,
+    closeIcon,
+    closeable,
+    closeIconPosition,
+    title: popup && props.title,
+    left: props.left,
+    // todo 只关闭，不处理逻辑。和popup的逻辑不一致。关闭时需要增加是否要处理回调
+    onClickOverlay: closePopup,
+    onClickCloseIcon: closePopup
+  }, renderTabs()) : renderTabs());
 };
 const Cascader = React.forwardRef(InternalCascader);
 Cascader.defaultProps = defaultProps;

package/dist/esm/{checkbox.taro-016074da.js → checkbox.taro-303276d7.js}

@@ -67,9 +67,8 @@ const CheckboxGroup = React.forwardRef((props, ref) => {
         setValue(reduced);
       }
     } },
-    React.createElement("div", { className: classNames(classPrefix$1, {
-      [`nut-checkboxgroup--${props.direction}`]: props.direction,
-      className
+    React.createElement("div", { className: classNames(classPrefix$1, className, {
+      [`nut-checkboxgroup--${props.direction}`]: props.direction
     }), ...rest }, (options == null ? void 0 : options.length) ? renderOptions() : children)
   );
 });

package/dist/esm/collapse.taro-1d9e3bb2.js

@@ -0,0 +1,72 @@
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { a as CollapseContext, C as CollapseItem } from "./collapseitem.taro-eac33538.js";
+import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  defaultActiveName: [],
+  accordion: false,
+  expandIcon: null,
+  rotate: 180
+};
+const Collapse = (props) => {
+  const { className, style, children, activeName, defaultActiveName, accordion, expandIcon, rotate, onChange } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-collapse";
+  const [value, setValue] = usePropsValue({
+    value: activeName,
+    defaultValue: defaultActiveName,
+    finalValue: []
+  });
+  const changeVal = (newValue, name, isOpen2) => {
+    setValue(newValue);
+    onChange && onChange(newValue, name, isOpen2);
+  };
+  const updateValue = (name) => {
+    if (accordion) {
+      if (value === name) {
+        changeVal("", name, false);
+      } else {
+        changeVal(name, name, true);
+      }
+    } else if (Array.isArray(value)) {
+      if (value.includes(name)) {
+        const newValue = value.filter((v) => v !== name);
+        changeVal(newValue, name, false);
+      } else {
+        const newValue = value.concat([name]);
+        changeVal(newValue, name, true);
+      }
+    } else {
+      console.warn("[NutUI] <Collapse> 未开启手风琴模式时 activeName 应为数组");
+    }
+  };
+  const isOpen = useCallback((name) => {
+    if (accordion) {
+      return value === name;
+    }
+    if (Array.isArray(value)) {
+      return value.includes(name);
+    }
+    return false;
+  }, [accordion, value]);
+  return React.createElement(
+    CollapseContext.Provider,
+    { value: {
+      isOpen,
+      updateValue,
+      expandIcon,
+      rotate
+    } },
+    React.createElement("div", { className: classNames(classPrefix, className), style }, children)
+  );
+};
+Collapse.defaultProps = defaultProps;
+Collapse.displayName = "NutCollapse";
+Collapse.Item = CollapseItem;
+export {
+  Collapse as C
+};

package/dist/esm/collapseitem.taro-eac33538.js

@@ -0,0 +1,134 @@
+import React, { createContext, useContext, useRef, useState, useMemo, useEffect } from "react";
+import classNames from "classnames";
+import Taro from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const collapseContext = {
+  isOpen: (name) => {
+    return true;
+  },
+  updateValue: (name) => {
+  },
+  expandIcon: null,
+  rotate: 180
+};
+const CollapseContext = createContext(collapseContext);
+const defaultProps = {
+  ...ComponentDefaults,
+  title: null,
+  name: "",
+  expandIcon: null,
+  disabled: false,
+  extra: null
+};
+const CollapseItem = (props) => {
+  const { children, title, name, disabled, expandIcon, rotate, extra, style, className, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-collapse-item";
+  const context = useContext(CollapseContext);
+  const wrapperRef = useRef(null);
+  const contentRef = useRef(null);
+  const [refRandomId] = useState(() => Math.random().toString(36).slice(-8));
+  const target = `#nut-collapse__content-${refRandomId}`;
+  const expanded = useMemo(() => {
+    if (context) {
+      return context.isOpen(name);
+    }
+    return false;
+  }, [name, context.isOpen]);
+  const iconStyle = useMemo(() => {
+    return expanded ? { transform: `translateY(-50%) rotate(${rotate || context.rotate}deg)` } : { transform: "translateY(-50%)" };
+  }, [expanded, rotate]);
+  const handleClick = () => {
+    if (!disabled) {
+      context.updateValue(name);
+    }
+  };
+  const [timer, setTimer] = useState(null);
+  const [currentHeight, setCurrentHeight] = useState("auto");
+  const inAnimation = useRef(false);
+  const [wrapperHeight, setWrapperHeight] = useState(() => expanded ? "auto" : "0px");
+  const getRect = (selector) => {
+    return new Promise((resolve) => {
+      Taro.createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+        resolve(rect[0]);
+      });
+    });
+  };
+  useEffect(() => {
+    setTimeout(() => {
+      getRect(target).then((res) => {
+        if (res == null ? void 0 : res.height) {
+          setCurrentHeight(`${res.height}px`);
+        }
+      });
+    }, 200);
+  }, [children]);
+  useEffect(() => {
+    setTimeout(() => {
+      getRect(target).then((res) => {
+        if (res == null ? void 0 : res.height) {
+          setCurrentHeight(`${res.height}px`);
+        }
+      });
+    }, 100);
+  }, []);
+  const toggle = () => {
+    if (timer) {
+      clearTimeout(timer);
+      setTimer(timer);
+    }
+    const start = expanded ? "0px" : currentHeight;
+    const end = expanded ? currentHeight : "0px";
+    inAnimation.current = true;
+    setWrapperHeight(start);
+    setTimeout(() => {
+      setWrapperHeight(end);
+      inAnimation.current = false;
+      if (expanded) {
+        const timer2 = setTimeout(() => {
+          setWrapperHeight("auto");
+        }, 300);
+        setTimer(timer2);
+      }
+    }, 100);
+  };
+  const init = useRef(true);
+  useEffect(() => {
+    if (init.current) {
+      init.current = false;
+    } else {
+      toggle();
+    }
+  }, [expanded]);
+  return React.createElement(
+    "div",
+    { className: classNames(classPrefix, className), style, ...rest },
+    React.createElement(
+      "div",
+      { className: classNames(`${classPrefix}__header`, { disabled }), onClick: handleClick },
+      React.createElement("div", { className: `${classPrefix}__title` }, title),
+      React.createElement("div", { className: `${classPrefix}__extra` }, extra),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__icon-box` },
+        React.createElement("div", { className: `${classPrefix}__icon`, style: iconStyle }, expandIcon || context.expandIcon)
+      )
+    ),
+    React.createElement(
+      "div",
+      { className: `${classPrefix}__content`, ref: wrapperRef, style: {
+        willChange: "height",
+        height: wrapperHeight
+      } },
+      React.createElement("div", { ref: contentRef, className: `${classPrefix}__content-text`, id: `nut-collapse__content-${refRandomId}` }, children)
+    )
+  );
+};
+CollapseItem.defaultProps = defaultProps;
+CollapseItem.displayName = "NutCollapseItem";
+export {
+  CollapseItem as C,
+  CollapseContext as a
+};

package/dist/esm/{configprovider.taro-25758d9f.js → configprovider.taro-a7f3bcfd.js}

@@ -318,7 +318,7 @@ const zhCN = {
     start: "开始",
     confirm: "确认",
     title: "日历选择",
-    monthTitle: (year, month) => `${year}年${month}月`,
+    monthTitle: (year, month) => `${year}年${Number(month) < 10 ? `0${Number(month)}` : month}月`,
     today: "今天",
     loadPreviousMonth: "加载上一个月",
     noEarlierMonth: "没有更早月份"
@@ -344,13 +344,13 @@ const zhCN = {
     second: "秒"
   },
   address: {
-    selectRegion: "请选择所在地区",
+    selectRegion: "请选择地址",
     deliveryTo: "配送至",
     chooseAnotherAddress: "选择其他地址"
   },
   signature: {
     reSign: "重签",
-    unSupportTpl: "对不起，当前浏览器不支持Canvas，无法使用本控件！"
+    unsupported: "对不起，当前浏览器不支持Canvas，无法使用本控件！"
   },
   ecard: {
     chooseText: "请选择电子卡面值",

package/dist/esm/{countdown.taro-22200811.js → countdown.taro-384168de.js}

@@ -1,19 +1,22 @@
 import React, { useState, useRef, useImperativeHandle, useEffect } from "react";
-import { c as cn } from "./bem-cdccae08.js";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
+  ...ComponentDefaults,
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
+  remainingTime: 0,
   millisecond: false,
   format: "HH:mm:ss",
   autoStart: true,
-  time: 0
+  time: 0,
+  destroy: false
 };
 const InternalCountDown = (props, ref) => {
   useConfig();
-  const { paused, startTime, endTime, millisecond, format, autoStart, time, className, style, onEnd, onPaused, onRestart, onUpdate, children, ...rest } = { ...defaultProps, ...props };
-  const b = cn("countdown");
+  const { paused, startTime, endTime, remainingTime, millisecond, format, autoStart, time, destroy, className, style, onEnd, onPaused, onRestart, onUpdate, children, ...rest } = { ...defaultProps, ...props };
+  const classPrefix = "nut-countdown";
   const [restTimeStamp, setRestTime] = useState(0);
   const stateRef = useRef({
     pauseTime: 0,
@@ -35,8 +38,12 @@ const InternalCountDown = (props, ref) => {
     return new Date(t).getTime();
   };
   const initTime = () => {
-    stateRef.current.handleEndTime = endTime;
-    stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+    if (remainingTime) {
+      stateRef.current.handleEndTime = Date.now() + Number(remainingTime);
+    } else {
+      stateRef.current.handleEndTime = endTime;
+      stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
+    }
     if (!stateRef.current.counting)
       stateRef.current.counting = true;
     tick();
@@ -175,7 +182,7 @@ const InternalCountDown = (props, ref) => {
     if (stateRef.current.isIninted) {
       initTime();
     }
-  }, [endTime, startTime]);
+  }, [endTime, startTime, remainingTime]);
   useEffect(() => {
     if (autoStart) {
       initTime();
@@ -189,13 +196,13 @@ const InternalCountDown = (props, ref) => {
     return componentWillUnmount;
   }, []);
   const componentWillUnmount = () => {
-    clearInterval(stateRef.current.timer);
+    destroy && cancelAnimationFrame(stateRef.current.timer);
   };
   const renderTime = (() => {
     return formatRemainTime(stateRef.current.restTime);
   })();
-  return React.createElement("div", { className: `${b()} ${className || ""}`, style: { ...style }, ...rest }, children || React.createElement("div", {
-    className: b("block"),
+  return React.createElement("div", { className: `${classPrefix} ${className}`, style: { ...style }, ...rest }, children || React.createElement("div", {
+    className: `${classPrefix}__block`,
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
       __html: `${renderTime}`