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

package/dist/esm/popover.taro-ad483372.js

@@ -0,0 +1,162 @@
+import React, { useRef, useState, useEffect } from "react";
+import { O as Overlay } from "./overlay.taro-75012bd3.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+function fillRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (typeof ref === "object" && ref && "current" in ref) {
+    ref.current = node;
+  }
+}
+function composeRef(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      fillRef(ref, node);
+    });
+  };
+}
+class Trigger extends React.Component {
+  fireEvents(type, e) {
+    const childCallback = this.props.children.props[type];
+    if (childCallback) {
+      childCallback(e);
+    }
+    const callback = this.props[type];
+    if (callback) {
+      callback(e);
+    }
+  }
+  render() {
+    const { children, className = "" } = this.props;
+    const child = React.Children.only(children);
+    const newChildProps = {
+      key: "trigger"
+    };
+    if (child && child.props && child.props.className) {
+      newChildProps.className = className;
+    }
+    const cloneProps = {
+      ...newChildProps
+    };
+    cloneProps.ref = composeRef(this.props.forwardedRef, child.ref);
+    const trigger = React.cloneElement(child, cloneProps);
+    return trigger;
+  }
+}
+const defaultProps = {
+  ...ComponentDefaults,
+  list: [],
+  theme: "light",
+  location: "bottom",
+  visible: false,
+  offset: 20,
+  className: "",
+  onClick: (e) => {
+  },
+  onChoose: (item, index) => {
+  }
+};
+const Popover = (props) => {
+  const { children, list, theme, location, visible, offset, className, style, onClick, onChoose, ...reset } = {
+    ...defaultProps,
+    ...props
+  };
+  const goodItem = useRef(null);
+  setTimeout(async () => {
+    if (goodItem.current) {
+      const res = await getRectByTaro(goodItem.current);
+      setElWidth(res == null ? void 0 : res.width);
+      setElHeight(res == null ? void 0 : res.height);
+    }
+  });
+  const [classes, setClasses] = useState("");
+  const [elWidth, setElWidth] = useState(0);
+  const [elHeight, setElHeight] = useState(0);
+  const [popoverContent, setPopoverContent] = useState("");
+  const [popoverArrow, setPopoverArrow] = useState("");
+  useEffect(() => {
+    setClasses(classesSelf());
+    setPopoverContent(popoverContentSelf());
+    setPopoverArrow(popoverArrowSelf());
+  }, [list, theme]);
+  const getStyle = () => {
+    const offNumer = Number(offset) ? Number(offset) : 0;
+    const style2 = {};
+    if (location.includes("top")) {
+      style2.bottom = `${elHeight + offNumer}px`;
+    } else if (location.includes("right")) {
+      style2.left = `${elWidth + offNumer}px`;
+    } else if (location.includes("left")) {
+      style2.right = `${elWidth + offNumer}px`;
+    } else {
+      style2.top = `${elHeight + offNumer}px`;
+    }
+    return style2;
+  };
+  const classesSelf = () => {
+    const prefixCls = "nut-popover";
+    return `${prefixCls} ${theme ? `${prefixCls}--${theme}` : ""}`;
+  };
+  const popoverContentSelf = () => {
+    const prefixCls = "popover-content";
+    return `${prefixCls}-show ${prefixCls} ${location ? `${prefixCls}--${location}` : ""}`;
+  };
+  const filter = () => {
+    const ms = ["top", "bottom", "left", "right"];
+    return ms.filter((m) => location.includes(m))[0];
+  };
+  const popoverArrowSelf = () => {
+    const prefixCls = "popover-arrow";
+    return `${prefixCls} ${prefixCls}-${filter()} ${location ? `${prefixCls}--${location}` : ""}`;
+  };
+  const handleClick = (e) => {
+    if (props.onClick) {
+      props.onClick(e);
+    }
+  };
+  const handleChoose = (item, index) => {
+    if (!item.disabled) {
+      onChoose(item, index);
+    }
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      "div",
+      { className: `${classes} ${className}`, style: { ...style }, ...reset },
+      React.createElement(
+        Trigger,
+        { forwardedRef: goodItem },
+        React.createElement(
+          "div",
+          { onClick: (e) => handleClick(e) },
+          Array.isArray(children) ? children[0] : children,
+          visible ? React.createElement(
+            "div",
+            { className: `${popoverContent}`, style: getStyle() },
+            React.createElement("div", { className: `${popoverArrow}` }),
+            Array.isArray(children) ? children[1] : "",
+            React.createElement("div", null, list.map((item, i) => {
+              return React.createElement(
+                "div",
+                { key: item.name, className: `popover-menu-item ${item.disabled ? "disabled" : ""}`, onClick: () => {
+                  handleChoose(item, i);
+                } },
+                item.icon ? item.icon : null,
+                React.createElement("div", { className: "popover-menu-item-name" }, item.name)
+              );
+            }))
+          ) : null
+        )
+      )
+    ),
+    visible ? React.createElement(Overlay, { visible, onClick: (e) => handleClick(e), style: { background: "transparent" } }) : null
+  );
+};
+Popover.defaultProps = defaultProps;
+Popover.displayName = "NutPopover";
+export {
+  Popover as P
+};

package/dist/esm/popup.taro-e756f3fc.js

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { CSSTransition } from "react-transition-group";
+import classNames from "classnames";
+import { Close } from "@nutui/icons-react-taro";
+import { View } from "@tarojs/components";
+import { d as defaultOverlayProps, O as Overlay } from "./overlay.taro-75012bd3.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  position: "center",
+  transition: "",
+  overlayStyle: {},
+  overlayClassName: "",
+  closeable: false,
+  closeIconPosition: "top-right",
+  closeIcon: "close",
+  destroyOnClose: false,
+  portal: null,
+  overlay: true,
+  round: false,
+  onOpen: () => {
+  },
+  onClose: () => {
+  },
+  onClickOverlay: (e) => true,
+  onClickCloseIcon: (e) => true,
+  ...defaultOverlayProps
+};
+let _zIndex = 2e3;
+const Popup = (props) => {
+  const { children, visible, overlay, closeOnOverlayClick, overlayStyle, overlayClassName, zIndex, lockScroll, duration, closeable, closeIconPosition, closeIcon, style, transition, round, position, className, destroyOnClose, portal, onOpen, onClose, onClickOverlay, onClickCloseIcon, afterShow, afterClose, onClick } = props;
+  const [index, setIndex] = useState(zIndex || _zIndex);
+  const [innerVisible, setInnerVisible] = useState(visible);
+  const [showChildren, setShowChildren] = useState(true);
+  const [transitionName, setTransitionName] = useState("");
+  const classPrefix = "nut-popup";
+  const baseStyle = {
+    zIndex: index,
+    animationDuration: `${duration}s`
+  };
+  const overlayStyles = {
+    ...overlayStyle,
+    ...baseStyle
+  };
+  const popStyles = {
+    ...style,
+    ...baseStyle
+  };
+  const popClassName = classNames({
+    round,
+    [`${classPrefix}`]: true,
+    [`${classPrefix}-${position}`]: true,
+    [`${className || ""}`]: true
+  });
+  const closeClasses = classNames({
+    [`${classPrefix}__close-icon`]: true,
+    [`${classPrefix}__close-icon--${closeIconPosition}`]: true
+  });
+  const open = () => {
+    if (!innerVisible) {
+      setInnerVisible(true);
+      setIndex(++_zIndex);
+    }
+    if (destroyOnClose) {
+      setShowChildren(true);
+    }
+    onOpen && onOpen();
+  };
+  const close = () => {
+    if (innerVisible) {
+      setInnerVisible(false);
+      if (destroyOnClose) {
+        setTimeout(() => {
+          setShowChildren(false);
+        }, Number(duration) * 1e3);
+      }
+      onClose && onClose();
+    }
+  };
+  const onHandleClickOverlay = (e) => {
+    if (closeOnOverlayClick) {
+      const closed = onClickOverlay && onClickOverlay(e);
+      closed && close();
+    }
+  };
+  const onHandleClick = (e) => {
+    onClick && onClick(e);
+  };
+  const onHandleClickCloseIcon = (e) => {
+    const closed = onClickCloseIcon && onClickCloseIcon(e);
+    closed && close();
+  };
+  const onHandleOpened = (e) => {
+    afterShow && afterShow();
+  };
+  const onHandleClosed = (e) => {
+    afterClose && afterClose();
+  };
+  const resolveContainer = (getContainer) => {
+    const container = typeof getContainer === "function" ? getContainer() : getContainer;
+    return container || document.body;
+  };
+  const renderToContainer = (getContainer, node) => {
+    if (getContainer) {
+      const container = resolveContainer(getContainer);
+      return createPortal(node, container);
+    }
+    return node;
+  };
+  const renderIcon = () => {
+    if (closeable) {
+      return React.createElement(View, { className: closeClasses, onClick: onHandleClickCloseIcon }, React.isValidElement(closeIcon) ? closeIcon : React.createElement(Close, { width: 12, height: 12 }));
+    }
+    return null;
+  };
+  const renderPop = () => {
+    return React.createElement(
+      CSSTransition,
+      { classNames: transitionName, unmountOnExit: true, timeout: 500, in: innerVisible, onEntered: onHandleOpened, onExited: onHandleClosed },
+      React.createElement(
+        View,
+        { style: popStyles, className: popClassName, onClick: onHandleClick },
+        showChildren ? children : "",
+        renderIcon()
+      )
+    );
+  };
+  const renderNode = () => {
+    return React.createElement(React.Fragment, null, overlay ? React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(Overlay, { style: overlayStyles, className: overlayClassName, visible: innerVisible, closeOnOverlayClick, zIndex, lockScroll, duration, onClick: onHandleClickOverlay }),
+      renderPop()
+    ) : React.createElement(React.Fragment, null, renderPop()));
+  };
+  useEffect(() => {
+    visible && open();
+    !visible && close();
+  }, [visible]);
+  useEffect(() => {
+    setTransitionName(transition || `${classPrefix}-slide-${position}`);
+  }, [position, transition]);
+  return React.createElement(React.Fragment, null, renderToContainer(portal, renderNode()));
+};
+Popup.defaultProps = defaultProps;
+Popup.displayName = "NutPopup";
+export {
+  Popup as P
+};

package/dist/esm/price.taro-479f1b82.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  price: 0,
+  symbol: "¥",
+  digits: 2,
+  thousands: false,
+  position: "before",
+  size: "large",
+  line: false
+};
+const Price = (props) => {
+  const { price, symbol, digits, thousands, position, size, line, className, style, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-price";
+  const replaceSpecialChar = (url) => {
+    url = url.replace(/"/g, '"');
+    url = url.replace(/&/g, "&");
+    url = url.replace(/&lt;/g, "<");
+    url = url.replace(/&gt;/g, ">");
+    url = url.replace(/&nbsp;/g, " ");
+    url = url.replace(/&yen;/g, "￥");
+    return url;
+  };
+  const showSymbol = () => {
+    return { __html: symbol ? replaceSpecialChar(symbol) : "" };
+  };
+  const checkPoint = (price2) => {
+    return String(price2).indexOf(".") > 0;
+  };
+  const formatThousands = (num) => {
+    if (Number(num) === 0) {
+      num = 0;
+    }
+    if (checkPoint(num)) {
+      num = Number(num).toFixed(digits);
+      num = typeof num.split(".") === "string" ? num.split(".") : num.split(".")[0];
+    } else {
+      num = num.toString();
+    }
+    if (thousands) {
+      return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
+    }
+    return num;
+  };
+  const formatDecimal = (decimalNum) => {
+    if (Number(decimalNum) === 0) {
+      decimalNum = 0;
+    }
+    if (checkPoint(decimalNum)) {
+      decimalNum = Number(decimalNum).toFixed(digits);
+      decimalNum = typeof decimalNum.split(".") === "string" ? 0 : decimalNum.split(".")[1] || 0;
+    } else {
+      decimalNum = 0;
+    }
+    const result = `0.${decimalNum}`;
+    const resultFixed = Number(result).toFixed(digits);
+    return String(resultFixed).substring(2, resultFixed.length);
+  };
+  const renderSymbol = () => {
+    return React.createElement("div", { className: `${classPrefix}__symbol ${classPrefix}__symbol-${size}`, dangerouslySetInnerHTML: showSymbol() });
+  };
+  return React.createElement(
+    "div",
+    { className: `${classPrefix} ${className} ${line ? `${classPrefix}--line` : ""}`, style, ...rest },
+    symbol && position === "before" ? renderSymbol() : null,
+    React.createElement("div", { className: `${classPrefix}__integer ${classPrefix}__integer-${size}` }, formatThousands(price)),
+    digits !== 0 ? React.createElement("div", { className: `${classPrefix}__decimal ${classPrefix}__decimal-${size}` }, ".") : null,
+    React.createElement("div", { className: `${classPrefix}__decimal ${classPrefix}__decimal-${size}` }, formatDecimal(price)),
+    symbol && position === "after" ? renderSymbol() : null
+  );
+};
+Price.defaultProps = defaultProps;
+Price.displayName = "NutPrice";
+export {
+  Price as P
+};

package/dist/esm/progress.taro-437b9f6a.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  percent: 0,
+  showText: false,
+  animated: false,
+  delay: 0
+};
+const Progress = (props) => {
+  const { className, style, percent, background, color, strokeWidth, showText, animated, children, delay, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-progress";
+  const classesInner = classNames({
+    [`${classPrefix}-inner`]: true,
+    [`${classPrefix}-active`]: animated
+  });
+  const stylesOuter = {
+    height: `${strokeWidth}px`,
+    background
+  };
+  const [displayPercent, setDispalyPercent] = useState(0);
+  const stylesInner = {
+    width: `${displayPercent}%`,
+    background: color
+  };
+  useEffect(() => {
+    setDispalyPercent(percent);
+  }, [percent]);
+  useEffect(() => {
+    let timer = null;
+    if (delay) {
+      setDispalyPercent(0);
+      timer = setTimeout(() => {
+        setDispalyPercent(percent);
+      }, delay);
+    }
+    return () => {
+      timer && clearTimeout(timer);
+    };
+  }, []);
+  return React.createElement(
+    "div",
+    { className: classNames(classPrefix, className), style, ...rest },
+    React.createElement(
+      "div",
+      { className: `${classPrefix}-outer`, style: stylesOuter },
+      React.createElement("div", { className: classesInner, style: stylesInner }, showText && React.createElement("div", { className: `${classPrefix}-text`, style: { left: `${displayPercent}%` } }, children || React.createElement(
+        "div",
+        { className: `${classPrefix}-text__inner`, style: {
+          background: color
+        } },
+        percent,
+        "%"
+      )))
+    )
+  );
+};
+Progress.defaultProps = defaultProps;
+Progress.displayName = "NutProgress";
+export {
+  Progress as P
+};

package/dist/esm/pulltorefresh.taro-6afe4805.js

@@ -0,0 +1,138 @@
+import React, { useRef, useState } from "react";
+import { View } from "@tarojs/components";
+import { u as useConfig } from "./configprovider.taro-25758d9f.js";
+import { u as useTouch } from "./use-touch-ff43512c.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+function bound(position, min, max) {
+  let ret = position;
+  if (min !== void 0) {
+    ret = Math.max(position, min);
+  }
+  if (max !== void 0) {
+    ret = Math.min(ret, max);
+  }
+  return ret;
+}
+function rubberband(distance, dimension, constant) {
+  return distance * dimension * constant / (dimension + constant * distance);
+}
+function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15) {
+  if (constant === 0)
+    return bound(position, min, max);
+  if (position < min)
+    return -rubberband(min - position, dimension, constant) + min;
+  if (position > max)
+    return +rubberband(position - max, dimension, constant) + max;
+  return position;
+}
+const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+const defaultProps = {
+  ...ComponentDefaults,
+  pullingText: "",
+  canReleaseText: "",
+  refreshingText: "",
+  completeText: "",
+  completeDelay: 500,
+  disabled: false,
+  headHeight: 40,
+  threshold: 60,
+  scrollTop: 0,
+  onRefresh: () => {
+  }
+};
+const PullToRefresh = (p) => {
+  const classPrefix = "nut-pulltorefresh";
+  const { locale } = useConfig();
+  const touch = useTouch();
+  const props = {
+    ...defaultProps,
+    ...p,
+    ...{
+      pullingText: p.pullingText || locale.pullToRefresh.pullingText,
+      canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
+      refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
+      completeText: p.completeText || locale.pullToRefresh.completeText
+    }
+  };
+  const headHeight = props.headHeight;
+  const threshold = props.threshold;
+  const heightRef = useRef(0);
+  const pullingRef = useRef(false);
+  const [status, setStatus] = useState("pulling");
+  const renderStatusText = () => {
+    var _a;
+    if (props.renderText) {
+      return (_a = props.renderText) == null ? void 0 : _a.call(props, status);
+    }
+    if (status === "pulling")
+      return props.pullingText;
+    if (status === "canRelease")
+      return props.canReleaseText;
+    if (status === "refreshing")
+      return props.refreshingText;
+    if (status === "complete")
+      return props.completeText;
+    return "";
+  };
+  const handleTouchStart = (e) => {
+    touch.start(e);
+  };
+  const handleTouchMove = (e) => {
+    if (props.scrollTop > 0) {
+      return;
+    }
+    if (status === "refreshing" || status === "complete")
+      return;
+    touch.move(e);
+    if (touch.isVertical()) {
+      pullingRef.current = true;
+      heightRef.current = Math.max(rubberbandIfOutOfBounds(touch.deltaY, 0, 0, headHeight * 5, 0.5), 0);
+      setStatus(heightRef.current > threshold ? "canRelease" : "pulling");
+    }
+  };
+  async function doRefresh() {
+    heightRef.current = headHeight;
+    setStatus("refreshing");
+    try {
+      await props.onRefresh();
+      setStatus("complete");
+    } catch (e) {
+      heightRef.current = 0;
+      setStatus("pulling");
+      throw e;
+    }
+    if (props.completeDelay > 0) {
+      await sleep(props.completeDelay);
+    }
+    heightRef.current = 0;
+    setStatus("pulling");
+  }
+  const handleTouchEnd = () => {
+    pullingRef.current = false;
+    if (status === "canRelease") {
+      doRefresh();
+    } else {
+      heightRef.current = 0;
+      setStatus("pulling");
+    }
+  };
+  const springStyles = {
+    height: `${heightRef.current}px`,
+    ...!pullingRef.current ? { transition: "height .3s ease" } : {}
+  };
+  return React.createElement(
+    View,
+    { className: `${classPrefix} ${props.className}`, style: props.style, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
+    React.createElement(
+      View,
+      { style: springStyles, className: `${classPrefix}-head` },
+      React.createElement("div", { className: `${classPrefix}-head-content`, style: { height: headHeight } }, renderStatusText())
+    ),
+    React.createElement("div", { className: `${classPrefix}-content` }, props.children)
+  );
+};
+PullToRefresh.defaultProps = defaultProps;
+PullToRefresh.displayName = "NutPullToRefresh";
+export {
+  PullToRefresh as P
+};