@nutui/nutui-react-taro 2.3.12 → 2.4.1-beta.0

package/dist/esm/toast.taro-BVXqvjNJ.js

@@ -0,0 +1,117 @@
+import React__default, { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { Success, Failure, Tips, Loading } from "@nutui/icons-react-taro";
+import { O as Overlay } from "./overlay.taro-BaBu-3-F.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { b as useParams, u as useCustomEvent, a as useCustomEventsPath, c as customEvents } from "./use-custom-event-DuP4onEm.js";
+import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { id: "", icon: null, iconSize: "20", content: "", msg: "", duration: 2, position: "center", type: "text", title: "", closeOnOverlayClick: false, lockScroll: false, contentClassName: "", size: "base", visible: false, wordBreak: "break-all", onClose: () => {
+} });
+const classPrefix = "nut-toast";
+const Toast = (props) => {
+  const { params: { id, position, contentStyle, icon, iconSize, content, msg, duration, type, title, closeOnOverlayClick, lockScroll, contentClassName, visible, size, className, style, onClose, wordBreak }, setParams } = useParams(Object.assign(Object.assign({}, defaultProps), props));
+  const timer = useRef(-1);
+  const [innerVisible, setInnerVisible] = usePropsValue({
+    value: visible,
+    defaultValue: void 0,
+    finalValue: false,
+    onChange: (v) => {
+      !v && (onClose === null || onClose === void 0 ? void 0 : onClose());
+    }
+  });
+  useEffect(() => {
+    if (innerVisible) {
+      autoClose();
+    }
+  }, [innerVisible, duration]);
+  useCustomEvent(id, ({ status, options }) => {
+    if (status) {
+      options.visible = true;
+      setParams(options);
+      show2();
+    } else {
+      setParams({ visible: false });
+      hide2();
+    }
+  });
+  const clearTimer = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = -1;
+    }
+  };
+  const show2 = () => {
+    setInnerVisible(true);
+  };
+  const hide2 = () => {
+    clearTimer();
+    setInnerVisible(false);
+  };
+  const autoClose = () => {
+    clearTimer();
+    if (duration) {
+      timer.current = window.setTimeout(() => {
+        setParams({ visible: false });
+        hide2();
+      }, duration * 1e3);
+    }
+  };
+  const clickCover = () => {
+    if (closeOnOverlayClick) {
+      hide2();
+    }
+  };
+  const hasIcon = () => {
+    if (type !== "text") {
+      return true;
+    }
+    return !!icon;
+  };
+  const iconName = () => {
+    if (icon) {
+      return icon;
+    }
+    return {
+      success: React__default.createElement(Success, { color: "#ffffff", size: iconSize }),
+      fail: React__default.createElement(Failure, { color: "#ffffff", size: iconSize }),
+      warn: React__default.createElement(Tips, { color: "#ffffff", size: iconSize }),
+      loading: React__default.createElement(Loading, { color: "#ffffff", size: iconSize })
+    }[type];
+  };
+  const classes = classNames({
+    "nut-toast-has-icon": icon,
+    [`nut-toast-${size}`]: true
+  });
+  return React__default.createElement(React__default.Fragment, null, innerVisible ? React__default.createElement(
+    Overlay,
+    { visible: innerVisible, style, className: `${classPrefix}-overlay-default ${className}`, closeOnOverlayClick, lockScroll, onClick: () => {
+      clickCover();
+    } },
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix} ${classes}`, id },
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`, style: contentStyle },
+        hasIcon() ? React__default.createElement("p", { className: `${classPrefix}-icon-wrapper` }, iconName()) : null,
+        title ? React__default.createElement("div", { className: `${classPrefix}-title` }, title) : null,
+        React__default.createElement("span", { className: `${classPrefix}-text` }, content || msg)
+      )
+    )
+  ) : null);
+};
+function show(selector, options) {
+  const path = useCustomEventsPath(selector);
+  customEvents.trigger(path, { status: true, options });
+}
+function hide(selector) {
+  const path = useCustomEventsPath(selector);
+  customEvents.trigger(path, { status: false });
+}
+Toast.defaultProps = defaultProps;
+Toast.displayName = "NutToast";
+Toast.show = show;
+Toast.hide = hide;
+export {
+  Toast as T
+};

package/dist/esm/tour.taro-wfXuUebD.js

@@ -0,0 +1,167 @@
+import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useState, useEffect } from "react";
+import { Close } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { P as Popover } from "./popover.taro-BsOaXoWp.js";
+import Taro, { createSelectorQuery } from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { useConfig } from "./ConfigProvider.js";
+const getTaroRectById = (id) => {
+  return new Promise((resolve, reject) => {
+    if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+      const t = document ? document.querySelector(`#${id}`) : "";
+      if (t) {
+        resolve(t === null || t === void 0 ? void 0 : t.getBoundingClientRect());
+      }
+      reject();
+    } else {
+      const query = createSelectorQuery();
+      query.select(`#${id}`).boundingClientRect().exec(function(rect) {
+        if (rect[0]) {
+          resolve(rect[0]);
+        } else {
+          reject();
+        }
+      });
+    }
+  });
+};
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, type: "step", location: "bottom", mask: true, maskWidth: "", maskHeight: "", offset: [8, 10], title: "", next: "", prev: "", complete: "", showPrev: true, closeOnOverlayClick: true });
+const classPrefix = "nut-tour";
+const Tour = (props) => {
+  const { locale } = useConfig();
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, title, closeOnOverlayClick, showPrev, list, type, location, visible, mask, maskWidth, maskHeight, offset, next, prev, complete, onClose, onChange } = _a, rest = __rest(_a, ["children", "className", "title", "closeOnOverlayClick", "showPrev", "list", "type", "location", "visible", "mask", "maskWidth", "maskHeight", "offset", "next", "prev", "complete", "onClose", "onChange"]);
+  const [showTour, setShowTour] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [active, setActive] = useState(0);
+  const [maskRect, setMaskRect] = useState({
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  });
+  const classes = classNames(classPrefix, className);
+  useEffect(() => {
+    if (visible) {
+      getRootPosition();
+    }
+    setActive(0);
+    setShowTour(visible);
+    setShowPopup(visible);
+  }, [visible]);
+  useEffect(() => {
+    if (visible) {
+      setShowPopup(true);
+      getRootPosition();
+    }
+  }, [active]);
+  const getRootPosition = () => {
+    getTaroRectById(list[active].target).then((rect) => {
+      console.log("rect", rect);
+      setMaskRect({
+        top: rect.top,
+        left: rect.left,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: rect.width,
+        height: rect.height
+      });
+    });
+  };
+  const maskStyle = () => {
+    const { width, height, left, top } = maskRect;
+    const center = [left + width / 2, top + height / 2];
+    const w = Number(maskWidth || width);
+    const h = Number(maskHeight || height);
+    const styles = {
+      width: `${w + +offset[1] * 2}px`,
+      height: `${h + +offset[0] * 2}px`,
+      top: `${center[1] - h / 2 - +offset[0]}px`,
+      left: `${center[0] - w / 2 - +offset[1]}px`
+    };
+    return styles;
+  };
+  const maskClose = (e) => {
+    setShowTour(false);
+    setShowPopup(false);
+    onClose && onClose(e);
+  };
+  const handleClickMask = (e) => {
+    closeOnOverlayClick && maskClose(e);
+  };
+  const changeStep = (type2) => {
+    if (type2 === "next") {
+      setActive(active + 1);
+      onChange && onChange(active + 1);
+    } else {
+      setActive(active - 1);
+      onChange && onChange(active - 1);
+    }
+    setShowPopup(false);
+  };
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: classes }, rest),
+    React__default.createElement("div", { className: "nut-tour-masked", style: { display: showTour ? "block" : "none" }, onClick: handleClickMask }),
+    list.map((item, index) => {
+      return React__default.createElement("div", { key: index, style: { height: 0 } }, index === active && React__default.createElement(
+        React__default.Fragment,
+        null,
+        showTour && React__default.createElement("div", { className: `${mask ? "nut-tour-mask" : "nut-tour-mask nut-tour-mask-none"}`, id: "nut-tour-popid", style: maskStyle() }),
+        React__default.createElement(
+          Popover,
+          { visible: showPopup, location: item.location || location, targetId: "nut-tour-popid", closeOnOutsideClick: false, offset: item.popoverOffset || [0, 12], arrowOffset: item.arrowOffset || 0 },
+          React__default.createElement(React__default.Fragment, null),
+          React__default.createElement(React__default.Fragment, null, children || React__default.createElement(
+            React__default.Fragment,
+            null,
+            type === "step" && React__default.createElement(
+              "div",
+              { className: "nut-tour-content" },
+              title && React__default.createElement(
+                "div",
+                { className: "nut-tour-content-top" },
+                React__default.createElement(
+                  "div",
+                  { onClick: (e) => maskClose(e) },
+                  React__default.createElement(Close, { className: "nut-tour-content-top-close" })
+                )
+              ),
+              React__default.createElement("div", { className: "nut-tour-content-inner" }, item.content),
+              React__default.createElement(
+                "div",
+                { className: "nut-tour-content-bottom" },
+                React__default.createElement(
+                  "div",
+                  { className: "nut-tour-content-bottom-init" },
+                  active + 1,
+                  "/",
+                  list.length
+                ),
+                React__default.createElement(
+                  "div",
+                  { className: "nut-tour-content-bottom-operate" },
+                  active !== 0 && showPrev && React__default.createElement("div", { className: "nut-tour-content-bottom-operate-btn", onClick: () => changeStep("prev") }, prev || locale.tour.prevStepText),
+                  list.length - 1 === active && React__default.createElement("div", { className: "nut-tour-content-bottom-operate-btn active", onClick: (e) => maskClose(e) }, complete || locale.tour.completeText),
+                  list.length - 1 !== active && React__default.createElement("div", { className: "nut-tour-content-bottom-operate-btn active", onClick: () => changeStep("next") }, next || locale.tour.nextStepText)
+                )
+              )
+            ),
+            type === "tile" && React__default.createElement(
+              "div",
+              { className: "nut-tour-content nut-tour-content-tile" },
+              React__default.createElement("div", { className: "nut-tour-content-inner" }, item.content)
+            )
+          ))
+        )
+      ));
+    })
+  );
+};
+Tour.defaultProps = defaultProps;
+Tour.displayName = "NutTour";
+export {
+  Tour as T
+};