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

package/dist/esm/{swipe.taro-de80fcd8.js → swipe.taro-4eb0cc9a.js}

@@ -1,9 +1,9 @@
 import React, { forwardRef, useRef, useState, useImperativeHandle, useEffect } from "react";
 import classNames from "classnames";
 import { useReady, nextTick } from "@tarojs/taro";
-import { c as cn } from "./bem-cdccae08.js";
 import { u as useTouch } from "./use-touch-ff43512c.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { g as getRectByTaro } from "./use-client-rect-2bb6c562.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 function preventDefault(event, isStopPropagation) {
   if (typeof event.cancelable !== "boolean" || event.cancelable) {
     event.preventDefault();
@@ -13,10 +13,11 @@ function preventDefault(event, isStopPropagation) {
   }
 }
 const defaultProps = {
+  ...ComponentDefaults,
   name: ""
 };
 const Swipe = forwardRef((props, instanceRef) => {
-  const swipeBem = cn("swipe");
+  const classPrefix = "nut-swipe";
   const touch = useTouch();
   useReady(() => {
     const getWidth = async () => {
@@ -129,7 +130,7 @@ const Swipe = forwardRef((props, instanceRef) => {
   const rightWrapper = useRef(null);
   const renderActionContent = (side) => {
     if (props[`${side}Action`]) {
-      return React.createElement("div", { id: "left", ref: side === "left" ? leftWrapper : rightWrapper, className: `${swipeBem(side)}`, onClick: (e) => handleOperate(e, side) }, props[`${side}Action`]);
+      return React.createElement("div", { id: "left", ref: side === "left" ? leftWrapper : rightWrapper, className: `${classPrefix}__${side}`, onClick: (e) => handleOperate(e, side) }, props[`${side}Action`]);
     }
     return null;
   };
@@ -163,10 +164,10 @@ const Swipe = forwardRef((props, instanceRef) => {
   }, []);
   return React.createElement(
     "div",
-    { ref: root, className: classNames(swipeBem(), className), onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(e), style },
+    { ref: root, className: classNames(classPrefix, className), onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(e), style },
     React.createElement(
       "div",
-      { className: `${swipeBem("wrapper")}`, style: wrapperStyle },
+      { className: `${classPrefix}__wrapper`, style: wrapperStyle },
       renderActionContent("left"),
       children,
       renderActionContent("right")

package/dist/esm/{swiper.taro-53a36427.js → swiper.taro-4aeb8526.js}

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, Children, useImperativeHandle } from "react";
+import React, { forwardRef, useState, useRef, Children, useEffect, useImperativeHandle } from "react";
 import { View, Swiper as Swiper$1, SwiperItem } from "@tarojs/components";
 import classNames from "classnames";
 import { I as Indicator } from "./indicator.taro-edbc71df.js";
@@ -17,6 +17,9 @@ const Swiper = forwardRef((props, ref) => {
   };
   const [current, setCurrent] = useState(defaultValue);
   const childrenCount = useRef(Children.toArray(children).length);
+  useEffect(() => {
+    setCurrent(defaultValue);
+  }, [defaultValue]);
   const renderIndicator = () => {
     if (React.isValidElement(indicator))
       return indicator;
@@ -24,8 +27,8 @@ const Swiper = forwardRef((props, ref) => {
       return React.createElement(
         "div",
         { className: classNames({
-          [`${classPrefix}__pagination`]: true,
-          [`${classPrefix}__pagination-vertical`]: direction === "vertical"
+          [`${classPrefix}__indicator`]: true,
+          [`${classPrefix}__indicator-vertical`]: direction === "vertical"
         }) },
         React.createElement(Indicator, { current, total: childrenCount.current, direction })
       );

package/dist/esm/{tabbar.taro-18eee41f.js → tabbar.taro-4f49ed90.js}

@@ -2,7 +2,7 @@ import React from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings-11d83a22.js";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
-import { T as TabbarItem } from "./tabbaritem.taro-89646ca1.js";
+import { T as TabbarItem } from "./tabbaritem.taro-16a380db.js";
 const defaultProps = {
   ...ComponentDefaults,
   defaultValue: 0,

package/dist/esm/{tabbaritem.taro-89646ca1.js → tabbaritem.taro-16a380db.js}

@@ -8,11 +8,14 @@ const defaultProps = {
   icon: null,
   active: false,
   index: 0,
-  handleClick: (idx) => {
-  }
+  value: "",
+  dot: false,
+  max: 99,
+  top: "0",
+  right: "5"
 };
 const TabbarItem = (props) => {
-  const { className, style, title, icon, active, activeColor, inactiveColor, index, handleClick, ...rest } = {
+  const { className, style, title, icon, active, activeColor, inactiveColor, index, value, dot, max, top, right, handleClick } = {
     ...defaultProps,
     ...props
   };
@@ -24,6 +27,14 @@ const TabbarItem = (props) => {
   const titleClass = classNames(boxPrefix, `${boxPrefix}-nav`, {
     [`${boxPrefix}-large`]: !icon
   });
+  const badgeProps = {
+    value,
+    dot,
+    max,
+    top,
+    right,
+    color: activeColor
+  };
   return React.createElement("div", { className: tabbarItemClass, style: {
     color: active ? activeColor : inactiveColor,
     ...style
@@ -32,13 +43,13 @@ const TabbarItem = (props) => {
     null,
     React.createElement(
       Badge,
-      { ...rest },
+      { ...badgeProps },
       React.createElement("div", { className: boxPrefix }, icon)
     ),
     React.createElement("div", { className: titleClass }, title)
   ) : React.createElement(
     Badge,
-    { ...rest },
+    { ...badgeProps },
     React.createElement("div", { className: titleClass }, title)
   ));
 };

package/dist/esm/{table.taro-15a55c5d.js → table.taro-4fd3bfe8.js}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { DownArrow } from "@nutui/icons-react-taro";
-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,

package/dist/esm/tag.taro-614758eb.js

@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from "react";
+import { Close } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  type: "default",
+  background: "",
+  color: "",
+  plain: false,
+  round: false,
+  mark: false,
+  closeable: false,
+  closeIcon: null,
+  onClose: (e) => {
+  },
+  onClick: (e) => {
+  }
+};
+const Tag = (props) => {
+  const { className, style, background, plain, type, round, children, mark, closeable, closeIcon, color, onClick, onClose } = {
+    ...defaultProps,
+    ...props
+  };
+  const [tagClass, setTagClass] = useState("");
+  const [visible, setVisible] = useState(true);
+  const classPrefix = "nut-tag";
+  const classes = () => {
+    return classNames({
+      [classPrefix]: true,
+      [`${classPrefix}--${type}`]: type,
+      [`${classPrefix}--plain`]: plain,
+      [`${classPrefix}--round`]: round,
+      [`${classPrefix}--mark`]: mark,
+      [`${classPrefix}--close`]: closeable,
+      [`${className}`]: className
+    });
+  };
+  useEffect(() => {
+    setTagClass(classes());
+  }, [type, background, color, plain, round, mark, closeable, className]);
+  const handleClick = (e) => {
+    onClick && onClick(e);
+  };
+  const getStyle = () => {
+    const style2 = {};
+    if (color) {
+      style2.color = color;
+    } else if (background && plain) {
+      style2.color = background;
+    }
+    if (plain) {
+      style2.borderColor = background;
+    } else if (background) {
+      style2.background = background;
+    }
+    return style2;
+  };
+  return React.createElement(React.Fragment, null, closeable ? visible && React.createElement(
+    "div",
+    { className: tagClass, style: { ...style, ...getStyle() }, onClick: (e) => handleClick(e) },
+    children && React.createElement("span", { className: `${classPrefix}-text` }, children),
+    React.isValidElement(closeIcon) ? React.createElement("i", { className: `${classPrefix}-custom-icon`, onClick: (e) => {
+      setVisible(false);
+      onClose && onClose(e);
+    } }, closeIcon) : React.createElement(Close, { size: 12, onClick: (e) => {
+      setVisible(false);
+      onClose && onClose(e);
+    } })
+  ) : React.createElement("div", { className: tagClass, style: { ...style, ...getStyle() }, onClick: (e) => handleClick(e) }, children && React.createElement("span", { className: `${classPrefix}-text` }, children)));
+};
+Tag.defaultProps = defaultProps;
+Tag.displayName = "NutTag";
+export {
+  Tag as T
+};

package/dist/esm/{textarea.taro-c110565e.js → textarea.taro-6b6142cc.js}

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import classNames from "classnames";
 import Taro from "@tarojs/taro";
 import { Textarea } from "@tarojs/components";
-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";
 import { u as usePropsValue } from "./use-props-value-7ac1b1b5.js";
 const defaultProps = {

package/dist/esm/timedetail.taro-d7aa4c1b.js

@@ -0,0 +1,48 @@
+import React, { useMemo, useCallback } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  activeDate: "",
+  activeTime: [],
+  options: [],
+  optionKey: {
+    valueKey: "value",
+    textKey: "text",
+    childrenKey: "children"
+  },
+  onSelect: () => {
+  }
+};
+const TimeDetail = (props) => {
+  const { options, optionKey, className, activeDate, activeTime, onSelect } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-timedetail";
+  const timeList = useMemo(() => {
+    return (options == null ? void 0 : options.find((item) => item[optionKey.valueKey] === activeDate)) || {
+      [optionKey.childrenKey]: []
+    };
+  }, [options, optionKey, activeDate]);
+  const isActive = useCallback((timeKey) => {
+    const date = activeTime.find((item) => {
+      return item[optionKey.valueKey] === activeDate;
+    });
+    if (date == null ? void 0 : date[optionKey.childrenKey]) {
+      const time = date == null ? void 0 : date[optionKey.childrenKey].find((time2) => {
+        return time2[optionKey.valueKey] === timeKey;
+      });
+      return time;
+    }
+    return false;
+  }, [activeTime, optionKey, activeDate]);
+  return React.createElement("div", { className: classNames(classPrefix, className) }, timeList[optionKey.childrenKey].map((item) => React.createElement("span", { className: classNames(`${classPrefix}__item`, {
+    active: isActive(item[optionKey.valueKey])
+  }), key: item[optionKey.valueKey], onClick: () => onSelect(item) }, item[optionKey.textKey])));
+};
+TimeDetail.defaultProps = defaultProps;
+TimeDetail.displayName = "NutTimeDetail";
+export {
+  TimeDetail as T
+};

package/dist/esm/timeselect.taro-45ab9d52.js

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import { P as Popup } from "./popup.taro-1cd1f9d2.js";
+import { T as TimeDetail } from "./timedetail.taro-d7aa4c1b.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { u as useConfig } from "./configprovider.taro-a7f3bcfd.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  visible: false,
+  multiple: false,
+  defaultValue: [],
+  options: [],
+  optionKey: {
+    valueKey: "value",
+    textKey: "text",
+    childrenKey: "children"
+  }
+};
+const TimeSelect = (props) => {
+  const { locale } = useConfig();
+  const { visible, className, style, title, defaultValue, options, optionKey, multiple, onSelect, onDateChange, onTimeChange, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [activeDate, setActiveDate] = useState(() => {
+    if (defaultValue == null ? void 0 : defaultValue.length) {
+      return defaultValue[0][optionKey.valueKey];
+    }
+    if (options == null ? void 0 : options.length) {
+      return options[0][optionKey.valueKey];
+    }
+    return "";
+  });
+  const [activeTime, setActiveTime] = useState(() => defaultValue || []);
+  const classPrefix = "nut-timeselect";
+  const closeFun = () => {
+    onSelect && onSelect(activeTime);
+  };
+  const handleSelectTime = (selectTime) => {
+    let newActiveTime = [...activeTime];
+    const date = newActiveTime.find((item) => {
+      return item[optionKey.valueKey] === activeDate;
+    });
+    if (date) {
+      const timeIndex = date[optionKey.childrenKey].findIndex((time) => {
+        return time[optionKey.valueKey] === selectTime[optionKey.valueKey];
+      });
+      if (timeIndex > -1) {
+        if (multiple) {
+          date[optionKey.childrenKey].splice(timeIndex, 1);
+        } else {
+          newActiveTime = [];
+        }
+      } else if (multiple) {
+        date[optionKey.childrenKey].push({ ...selectTime });
+      } else {
+        newActiveTime = [
+          {
+            [optionKey.valueKey]: activeDate,
+            [optionKey.childrenKey]: [{ ...selectTime }]
+          }
+        ];
+      }
+    } else if (multiple) {
+      newActiveTime.push({
+        [optionKey.valueKey]: activeDate,
+        [optionKey.childrenKey]: [{ ...selectTime }]
+      });
+    } else {
+      newActiveTime = [
+        {
+          [optionKey.valueKey]: activeDate,
+          [optionKey.childrenKey]: [{ ...selectTime }]
+        }
+      ];
+    }
+    newActiveTime = newActiveTime.filter((item) => {
+      var _a;
+      return ((_a = item[optionKey.childrenKey]) == null ? void 0 : _a.length) > 0;
+    });
+    setActiveTime(newActiveTime);
+    onTimeChange && onTimeChange(selectTime, newActiveTime);
+  };
+  const handleChange = (date) => {
+    setActiveDate(date[optionKey.valueKey]);
+    onDateChange && onDateChange(date, activeTime);
+  };
+  return React.createElement(
+    Popup,
+    { closeable: true, round: true, visible, position: "bottom", style: {
+      width: "100%",
+      height: "20%",
+      ...style
+    }, onClose: closeFun, ...rest },
+    React.createElement(
+      "div",
+      { className: classNames(classPrefix, className) },
+      React.createElement("div", { className: `${classPrefix}__title` }, title || locale.timeselect.pickupTime),
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__content` },
+        React.createElement("div", { className: `${classPrefix}__content-left` }, options.map((item) => React.createElement("div", { key: item[optionKey.valueKey], className: classNames("nut-timepannel", {
+          active: item[optionKey.valueKey] === activeDate
+        }), onClick: () => handleChange(item) }, item[optionKey.textKey]))),
+        React.createElement(TimeDetail, { options, optionKey, activeDate, activeTime, onSelect: handleSelectTime })
+      )
+    )
+  );
+};
+TimeSelect.defaultProps = defaultProps;
+TimeSelect.displayName = "NutTimeSelect";
+export {
+  TimeSelect as T
+};

package/dist/esm/{toast.taro-92c10e1d.js → toast.taro-85007ac8.js}

@@ -1,32 +1,30 @@
 import React, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { Success, Failure, Tips, Loading } from "@nutui/icons-react-taro";
-import { c as cn } from "./bem-cdccae08.js";
+import { O as Overlay } from "./overlay.taro-75012bd3.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
 const defaultProps = {
+  ...ComponentDefaults,
   id: "",
-  style: {},
   icon: null,
   iconSize: "20",
   msg: "",
-  bottom: "30px",
   duration: 2,
-  center: true,
+  position: "center",
   type: "text",
   title: "",
-  customClass: "",
+  closeOnOverlayClick: false,
+  lockScroll: false,
+  contentClassName: "",
   size: "base",
-  textAlignCenter: true,
-  bgColor: "rgba(0, 0, 0, .8)",
-  cover: false,
-  coverColor: "rgba(0, 0, 0, 0)",
-  closeOnClickOverlay: false,
   visible: false,
   onClose: () => {
   }
   // 未实现
 };
+const classPrefix = "nut-toast";
 const Toast = (props) => {
-  const { children, id, style, icon, iconSize, msg, bottom, duration, center, type, title, customClass, size, textAlignCenter, bgColor, cover, coverColor, closeOnClickOverlay, visible, onClose, ...rest } = { ...defaultProps, ...props };
+  const { children, id, position, contentStyle, icon, iconSize, msg, duration, type, title, closeOnOverlayClick, lockScroll, contentClassName, size, visible, className, style, onClose, ...rest } = { ...defaultProps, ...props };
   let timer;
   const [openState, SetOpenState] = useState(false);
   useEffect(() => {
@@ -56,11 +54,10 @@ const Toast = (props) => {
     }
   };
   const clickCover = () => {
-    if (closeOnClickOverlay) {
+    if (closeOnOverlayClick) {
       hide();
     }
   };
-  const toastBem = cn("toast");
   const hasIcon = () => {
     if (type !== "text") {
       return true;
@@ -79,31 +76,24 @@ const Toast = (props) => {
     }[type];
   };
   const classes = classNames({
-    "nut-toast-center": center,
     "nut-toast-has-icon": icon,
-    "nut-toast-cover": cover,
-    "nut-toast-loading": type === "loading",
-    [`${customClass}`]: true,
     [`nut-toast-${size}`]: true
   });
   return React.createElement(React.Fragment, null, openState ? React.createElement(
-    "div",
-    { className: `${toastBem()} ${classes}`, id, style: {
-      bottom: center ? "auto" : `${bottom}`,
-      backgroundColor: cover ? coverColor : "",
-      ...style
-    }, onClick: () => {
+    Overlay,
+    { visible: openState, style, className: `${classPrefix}__overlay-default ${className}`, closeOnOverlayClick, lockScroll, onClick: () => {
       clickCover();
     } },
     React.createElement(
       "div",
-      { className: toastBem("inner"), style: {
-        textAlign: textAlignCenter ? "center" : "left",
-        backgroundColor: bgColor
-      } },
-      hasIcon() ? React.createElement("p", { className: toastBem("icon-wrapper") }, iconName()) : null,
-      title ? React.createElement("div", { className: "nut-toast-title" }, title) : null,
-      React.createElement("span", { className: toastBem("text") }, msg)
+      { className: `${classPrefix} ${classes}`, id },
+      React.createElement(
+        "div",
+        { className: `${classPrefix}__inner ${classPrefix}-${position} ${contentClassName}`, style: contentStyle },
+        hasIcon() ? React.createElement("p", { className: `${classPrefix}__icon-wrapper` }, iconName()) : null,
+        title ? React.createElement("div", { className: `${classPrefix}-title` }, title) : null,
+        React.createElement("span", { className: `${classPrefix}-text` }, msg)
+      )
     )
   ) : null);
 };

package/dist/esm/trendarrow.taro-fa177b5c.js

@@ -0,0 +1,70 @@
+import React, { useRef } from "react";
+import { TriangleUp, TriangleDown } from "@nutui/icons-react-taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  value: 0,
+  digits: 2,
+  symbol: false,
+  zero: false,
+  left: false,
+  sync: true,
+  color: "#333",
+  riseColor: "#fa2c19",
+  dropColor: "#64b578",
+  riseIcon: null,
+  dropIcon: null
+};
+const TrendArrow = (props) => {
+  const { value, digits, symbol, zero, left, sync, color, riseColor, dropColor, riseIcon, dropIcon, className, style, children, ...rest } = { ...defaultProps, ...props };
+  const classPrefix = "nut-trendarrow";
+  const rateTrend = useRef(value > 0);
+  const myFixed = (num, digit = 2) => {
+    if (Object.is(parseFloat(num), NaN)) {
+      return console.warn(`传入的值：${num}不是一个数字`);
+    }
+    num = parseFloat(num);
+    const numPow = Math.pow(10, digit);
+    return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
+  };
+  const calcStyle = (() => {
+    const arrowColor = rateTrend.current ? riseColor : dropColor;
+    const textEquArrowColor = sync ? arrowColor : color;
+    const style2 = {
+      color: value === 0 ? color : textEquArrowColor
+    };
+    return style2;
+  })();
+  const calcRate = (() => {
+    rateTrend.current = value > 0;
+    const absRate = Math.abs(value);
+    if (!zero && value === 0) {
+      return "--";
+    }
+    const resultRate = `${// eslint-disable-next-line no-nested-ternary
+    symbol && value !== 0 ? rateTrend.current ? "+" : "-" : ""}${myFixed(Number(absRate), digits)}%`;
+    return resultRate;
+  })();
+  const calcIconProps = (() => {
+    const iconProps = {
+      color: rateTrend.current ? riseColor : dropColor
+    };
+    return iconProps;
+  })();
+  const renderContent = (left2) => {
+    const classNameSuffix = !left2 ? "icon-after" : "icon-before";
+    return React.createElement("span", { className: `${classPrefix}__${classNameSuffix} ${classPrefix}__value`, style: calcStyle }, calcRate);
+  };
+  return React.createElement(
+    "div",
+    { className: `${classPrefix} ${className}`, style, ...rest },
+    !left && renderContent(!left),
+    Number(value) !== 0 && React.createElement(React.Fragment, null, rateTrend.current ? React.createElement(React.Fragment, null, riseIcon || React.createElement(TriangleUp, { color: calcIconProps.color })) : React.createElement(React.Fragment, null, dropIcon || React.createElement(TriangleDown, { color: calcIconProps.color }))),
+    left && renderContent(!left)
+  );
+};
+TrendArrow.defaultProps = defaultProps;
+TrendArrow.displayName = "NutTrendArrow";
+export {
+  TrendArrow as T
+};