@nutui/nutui-react-taro 2.0.0-alpha.4 → 2.0.0-alpha.6

package/dist/esm/sticky.taro-3c03eb0a.js

@@ -0,0 +1,134 @@
+import React, { useRef, useEffect, useState, useMemo, useCallback } from "react";
+import classNames from "classnames";
+import { getEnv, usePageScroll, getSystemInfoSync } from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { g as getScrollParent } from "./get-scroll-parent-8da04f2e.js";
+function useWatch(dep, callback, config = { immediate: false }) {
+  const { immediate } = config;
+  const prev = useRef();
+  const inited = useRef(false);
+  const stop = useRef(false);
+  useEffect(() => {
+    const execute = () => callback(prev.current);
+    if (!stop.current) {
+      if (!inited.current) {
+        inited.current = true;
+        if (immediate) {
+          execute();
+        }
+      } else {
+        execute();
+      }
+      prev.current = dep;
+    }
+  }, [dep]);
+  return () => {
+    stop.current = true;
+  };
+}
+const defaultProps = {
+  ...ComponentDefaults,
+  position: "top",
+  zIndex: 2e3
+};
+const classPrefix = "nut-sticky";
+const Sticky = (props) => {
+  const { position, zIndex, threshold, style, children, container, className, onChange, ...rest } = { ...defaultProps, ...props };
+  const stickyRef = useRef(null);
+  const rootRef = useRef(null);
+  const [rootRect, setRootRect] = useState({});
+  const [fixed, setFixed] = useState(false);
+  const [transform, setTransform] = useState(0);
+  useWatch(fixed, () => {
+    onChange && onChange(fixed);
+  });
+  const rootStyle = useMemo(() => {
+    if (!fixed) {
+      return {
+        height: "",
+        width: ""
+      };
+    }
+    const style2 = {};
+    if (rootRect.height) {
+      style2.height = rootRect.height;
+    }
+    if (rootRect.width) {
+      style2.width = rootRect.width;
+    }
+    return style2;
+  }, [fixed, rootRect.height, rootRect.width]);
+  const stickyStyle = useMemo(() => {
+    if (!fixed) {
+      return {
+        height: "",
+        width: "",
+        [position]: ""
+      };
+    }
+    const style2 = {};
+    if (rootRect.height)
+      style2.height = rootRect.height;
+    if (rootRect.width)
+      style2.width = rootRect.width;
+    style2.transform = `translate3d(0, ${transform}px, 0)`;
+    style2[position] = threshold;
+    style2.zIndex = zIndex;
+    return style2;
+  }, [fixed, rootRect.height, rootRect.width, transform, position]);
+  const handleScroll = async (scrollTop) => {
+    const curRootRect = await getRectByTaro(rootRef.current);
+    const stickyRect = await getRectByTaro(stickyRef.current);
+    if (curRootRect && stickyRect) {
+      setRootRect(curRootRect);
+      if (position === "top") {
+        if (container) {
+          const containerRect = await getRectByTaro(container.current);
+          const difference = containerRect.bottom - threshold - curRootRect.height;
+          const curTransform = difference < 0 ? difference : 0;
+          setTransform(curTransform);
+          const curFixed = threshold > curRootRect.top && containerRect.bottom > 0;
+          setFixed(curFixed);
+        } else {
+          setFixed(threshold > curRootRect.top);
+        }
+      } else {
+        const windowHeight = getSystemInfoSync().windowHeight;
+        setFixed(windowHeight - threshold < curRootRect.bottom);
+      }
+    } else {
+      console.log("getRectByTaro获取失败", { stickyRect, curRootRect });
+    }
+  };
+  const getElement = useCallback(() => {
+    return getScrollParent(rootRef.current);
+  }, []);
+  useEffect(() => {
+    if (getEnv() === "WEB" && getElement() !== window) {
+      window.addEventListener("touchmove", handleScroll, true);
+      window.addEventListener("scroll", handleScroll, true);
+      return () => {
+        window.removeEventListener("touchmove", handleScroll);
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, []);
+  usePageScroll((res) => {
+    if (getEnv() === "WEAPP") {
+      handleScroll(res.scrollTop);
+    }
+  });
+  return React.createElement(
+    "div",
+    { ref: rootRef, style: rootStyle, className: classNames(classPrefix, className), ...rest },
+    React.createElement("div", { className: classNames("nut-sticky--box", {
+      "nut-sticky--fixed": fixed
+    }), ref: stickyRef, style: stickyStyle }, children)
+  );
+};
+Sticky.defaultProps = defaultProps;
+Sticky.displayName = "NutSticky";
+export {
+  Sticky as S
+};

package/dist/esm/subsidenavbar.taro-abe07673.js

@@ -0,0 +1,64 @@
+import React, { useState, useContext, useRef, useCallback, useEffect } from "react";
+import { O as OffsetContext } from "./offsetContext-f32a9246.js";
+const defaultProps = {
+  open: true
+};
+const SubSideNavBar = (props) => {
+  const { title, key, children, onClick, open, ...rest } = {
+    ...defaultProps,
+    ...props
+  };
+  const [subShow, setSubShow] = useState(open);
+  const offset = useContext(OffsetContext);
+  const listRef = useRef(null);
+  const setListLevel = useCallback((nodeList, level = 1) => {
+    const titleClass = nodeList[0].className;
+    if (titleClass.includes("nut-subsidenavbar__title")) {
+      const left = offset * (level + 1);
+      nodeList[0].style.paddingLeft = `${left}px`;
+    }
+    const childNodes = nodeList[1] && nodeList[1].children && Array.from(nodeList[1].children).filter((item) => item.nodeType !== 3 && item.nodeType !== 8);
+    childNodes.forEach((item) => {
+      const itemClass = item.className;
+      if (itemClass.includes("nut-subsidenavbar__item")) {
+        const left = offset * (level + 2);
+        item.style.paddingLeft = `${left}px`;
+      }
+      if (itemClass.includes("nut-subsidenavbar__list")) {
+        let level2 = item.getAttribute("level") ? Number(item.getAttribute("level")) : 1;
+        level2 += 1;
+        item.setAttribute("level", level2.toString());
+        item.children && setListLevel(item.children, level2);
+      }
+    });
+  }, [offset]);
+  const clickFn = (e) => {
+    e.stopPropagation();
+    setSubShow(!subShow);
+    const isShow = !subShow;
+    onClick && onClick({ title, key, isShow });
+  };
+  useEffect(() => {
+    var _a, _b;
+    const childNodes = (_a = listRef.current) == null ? void 0 : _a.children;
+    (_b = listRef.current) == null ? void 0 : _b.setAttribute("level", "1");
+    childNodes && setListLevel(childNodes);
+  }, [setListLevel]);
+  const divClass = subShow ? "nut-subsidenavbar__list  nutShow" : "nut-subsidenavbar__list  nutHide";
+  const iconClass = subShow ? "arrow-icon arrow-down" : "arrow-icon arrow-up";
+  return React.createElement(
+    "div",
+    { className: divClass, ref: listRef, onClick: clickFn, ...rest },
+    React.createElement(
+      "div",
+      { className: "nut-subsidenavbar__title border-bt" },
+      title,
+      " ",
+      React.createElement("i", { className: iconClass })
+    ),
+    React.createElement("div", { className: "nut-subsidenavbar__content" }, children)
+  );
+};
+export {
+  SubSideNavBar as S
+};

package/dist/esm/supports-passive-aaaf0eff.js

@@ -0,0 +1,17 @@
+import { c as canUseDom } from "./can-use-dom-0e539bd3.js";
+let passiveSupported = false;
+if (canUseDom) {
+  try {
+    const opts = Object.defineProperty({}, "passive", {
+      get() {
+        passiveSupported = true;
+      }
+    });
+    window.addEventListener("test-passive-supported", null, opts);
+  } catch (e) {
+    console.log(e);
+  }
+}
+export {
+  passiveSupported as p
+};

package/dist/esm/swipe.taro-de80fcd8.js

@@ -0,0 +1,180 @@
+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";
+function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+}
+const defaultProps = {
+  name: ""
+};
+const Swipe = forwardRef((props, instanceRef) => {
+  const swipeBem = cn("swipe");
+  const touch = useTouch();
+  useReady(() => {
+    const getWidth = async () => {
+      if (leftWrapper.current) {
+        const leftRect = await getRectByTaro(leftWrapper.current);
+        setActionWidth((v) => ({ ...v, left: leftRect.width }));
+      }
+      if (rightWrapper.current) {
+        const rightRect = await getRectByTaro(rightWrapper.current);
+        setActionWidth((v) => ({ ...v, right: rightRect.width }));
+      }
+    };
+    nextTick(() => getWidth());
+  });
+  const { children, className, style } = { ...defaultProps, ...props };
+  const root = useRef();
+  const opened = useRef(false);
+  const lockClick = useRef(false);
+  const startOffset = useRef(0);
+  const [state, setState] = useState({
+    offset: 0,
+    dragging: false
+  });
+  const [actionWidth, setActionWidth] = useState({
+    left: 0,
+    right: 0
+  });
+  const wrapperStyle = {
+    transform: `translate3d(${state.offset}px, 0, 0)`,
+    transitionDuration: state.dragging ? "0s" : ".6s"
+  };
+  const leftWidth = actionWidth.left;
+  const rightWidth = actionWidth.right;
+  const onTouchStart = async (event) => {
+    if (leftWrapper.current) {
+      const leftRect = await getRectByTaro(leftWrapper.current);
+      setActionWidth((v) => ({ ...v, left: leftRect.width }));
+    }
+    if (rightWrapper.current) {
+      const rightRect = await getRectByTaro(rightWrapper.current);
+      setActionWidth((v) => ({ ...v, right: rightRect.width }));
+    }
+    if (!props.disabled) {
+      startOffset.current = state.offset;
+      touch.start(event);
+      props.onTouchStart && props.onTouchStart(event);
+    }
+  };
+  const onTouchMove = (event) => {
+    if (props.disabled) {
+      return;
+    }
+    touch.move(event);
+    props.onTouchMove && props.onTouchMove(event);
+    if (touch.isHorizontal()) {
+      lockClick.current = true;
+      const newState = { ...state, dragging: true };
+      const isEdge = !opened || touch.deltaX * startOffset.current < 0;
+      if (isEdge) {
+        preventDefault(event, true);
+      }
+      newState.offset = rangeCalculation(touch.deltaX + startOffset.current, -rightWidth || 0, leftWidth || 0);
+      setState(newState);
+    }
+  };
+  const onTouchEnd = (event) => {
+    if (state.dragging) {
+      setState((v) => ({ ...v, dragging: false }));
+      toggle(state.offset > 0 ? "left" : "right");
+      setTimeout(() => {
+        lockClick.current = false;
+      }, 0);
+      props.onTouchEnd && props.onTouchEnd(event);
+    }
+  };
+  const toggle = (side) => {
+    const offset = Math.abs(state.offset);
+    const base = 0.3;
+    const baseNum = opened ? 1 - base : base;
+    const width = side === "left" ? leftWidth : rightWidth;
+    if (width && offset > Number(width) * baseNum) {
+      open(side);
+    } else {
+      close(side);
+    }
+  };
+  const open = (side) => {
+    var _a;
+    opened.current = true;
+    const offset = side === "left" ? leftWidth : -rightWidth;
+    const name = props.name;
+    (_a = props.onOpen) == null ? void 0 : _a.call(props, { name, position: side });
+    setState((v) => ({ ...v, offset: Number(offset) || 0 }));
+  };
+  const close = (position) => {
+    var _a;
+    if (opened.current) {
+      opened.current = false;
+      (_a = props.onClose) == null ? void 0 : _a.call(props, {
+        name: props.name,
+        position: position || "left"
+      });
+    }
+    setState((v) => ({ ...v, offset: 0 }));
+  };
+  const rangeCalculation = (num, min, max) => {
+    return Math.min(Math.max(Number(num), Number(min)), Number(max));
+  };
+  const leftWrapper = useRef(null);
+  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 null;
+  };
+  const handleOperate = (event, position) => {
+    event.stopPropagation();
+    if (props.beforeClose) {
+      props.beforeClose(position);
+    } else {
+      props.onActionClick && props.onActionClick(event, position);
+    }
+  };
+  useImperativeHandle(instanceRef, () => ({
+    open,
+    close: () => close()
+  }));
+  useEffect(() => {
+    const handler = (event) => {
+      const targets = [root];
+      if (targets.some((targetItem) => {
+        const targetElement = targetItem.current || targetItem;
+        return !targetElement || (targetElement == null ? void 0 : targetElement.contains(event.target));
+      })) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("touchstart", handler);
+    return () => {
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
+  return React.createElement(
+    "div",
+    { ref: root, className: classNames(swipeBem(), className), onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(e), style },
+    React.createElement(
+      "div",
+      { className: `${swipeBem("wrapper")}`, style: wrapperStyle },
+      renderActionContent("left"),
+      children,
+      renderActionContent("right")
+    )
+  );
+});
+Swipe.defaultProps = defaultProps;
+Swipe.displayName = "NutSwipe";
+export {
+  Swipe as S
+};