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

package/dist/esm/noticebar.taro-CMdfOp2g.js

@@ -1,350 +0,0 @@
-import { a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
-import React__default, { useRef, useState, useMemo, useEffect } from "react";
-import { Notice, Close } from "@nutui/icons-react-taro";
-import classNames from "classnames";
-import { g as getRectByTaro } from "./get-rect-by-taro-CSN0TGnD.js";
-import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { direction: "horizontal", list: [], duration: 1e3, height: 40, content: "", closeable: false, wrap: false, leftIcon: React__default.createElement(Notice, { size: 16 }), rightIcon: null, delay: 1, scrollable: null, speed: 50 });
-const NoticeBar = (props) => {
-  const { children, className, style, direction, list, duration, height, content, closeable, wrap, leftIcon, rightIcon, delay, scrollable, speed, close, click, onClose, onClick, onItemClick } = Object.assign(Object.assign({}, defaultProps), props);
-  const classPrefix = "nut-noticebar";
-  const wrapRef = useRef(null);
-  const contentRef = useRef(null);
-  const [showNoticeBar, SetShowNoticeBar] = useState(true);
-  const scrollList = useRef([]);
-  const [wrapWidth, SetWrapWidth] = useState(0);
-  const [firstRound, SetFirstRound] = useState(true);
-  const [animationDuration, SetAnimationDuration] = useState(0);
-  const [offsetWidth, SetOffsetW] = useState(0);
-  const [animationClass, SetAnimationClass] = useState("");
-  const [animate, SetAnimate] = useState(false);
-  const [timer, SetTimer] = useState(0);
-  const [isCanScroll, SetIsCanScroll] = useState(null);
-  const isVertical = direction === "vertical";
-  const [rect, setRect] = useState(null);
-  let active = 0;
-  const [ready, setReady] = useState(false);
-  const container = useRef(null);
-  const innerRef = useRef(null);
-  const swiperRef = useRef({
-    moving: false,
-    autoplayTimer: null,
-    width: 0,
-    height: 0,
-    offset: 0,
-    size: 0
-  });
-  const [childOffset, setChildOffset] = useState([]);
-  const [offset, setOffset] = useState(0);
-  const { childs, childCount } = useMemo(() => {
-    let childCount2 = 0;
-    const childs2 = React__default.Children.map(children, (child) => {
-      if (!React__default.isValidElement(child))
-        return null;
-      childCount2++;
-      return child;
-    });
-    return {
-      childs: childs2,
-      childCount: childCount2
-    };
-  }, [children]);
-  let trackSize = childCount * Number(height);
-  const minOffset = (() => {
-    if (rect) {
-      const base = isVertical ? rect.height : rect.width;
-      return base - Number(height) * childCount;
-    }
-    return 0;
-  })();
-  useEffect(() => {
-    if (isVertical) {
-      if (children) {
-        scrollList.current = [].concat(childs);
-      } else {
-        scrollList.current = [].concat(list);
-        startRollEasy();
-      }
-    } else {
-      initScrollWrap();
-    }
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-  useEffect(() => {
-    initScrollWrap();
-  }, [content]);
-  useEffect(() => {
-    if (list && list.length) {
-      scrollList.current = [].concat(list);
-    }
-  }, [list]);
-  const initScrollWrap = (value) => {
-    if (showNoticeBar === false) {
-      return;
-    }
-    setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
-      if (!wrapRef.current || !contentRef.current) {
-        return;
-      }
-      const warpRes = yield getRectByTaro(wrapRef.current);
-      const contentRes = yield getRectByTaro(contentRef.current);
-      const wrapW = warpRes.width;
-      const offsetW = contentRes.width;
-      const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
-      SetIsCanScroll(canScroll);
-      if (canScroll) {
-        SetWrapWidth(wrapW);
-        SetOffsetW(offsetW);
-        SetAnimationDuration(offsetW / speed);
-        SetAnimationClass("play");
-      } else {
-        SetAnimationClass("");
-      }
-    }), 0);
-  };
-  const handleClick = (event) => {
-    click && click(event);
-    onClick && onClick(event);
-  };
-  const onClickIcon = (event) => {
-    event.stopPropagation();
-    SetShowNoticeBar(!closeable);
-    close && close(event);
-    onClose && onClose(event);
-  };
-  const onAnimationEnd = () => {
-    SetFirstRound(false);
-    setTimeout(() => {
-      SetAnimationDuration((offsetWidth + wrapWidth) / speed);
-      SetAnimationClass("play-infinite");
-    }, 0);
-  };
-  const startRollEasy = () => {
-    showhorseLamp();
-    const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
-    const timerCurr = window.setInterval(showhorseLamp, time + Number(duration));
-    SetTimer(timerCurr);
-  };
-  const showhorseLamp = () => {
-    SetAnimate(true);
-    const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
-    setTimeout(() => {
-      scrollList.current.push(scrollList.current[0]);
-      scrollList.current.shift();
-      SetAnimate(false);
-    }, time);
-  };
-  const handleClickIcon = (event) => {
-    event.stopPropagation();
-    SetShowNoticeBar(!closeable);
-    close && close(event);
-    onClose && onClose(event);
-  };
-  const isEllipsis = () => {
-    if (isCanScroll == null) {
-      return wrap;
-    }
-    return !isCanScroll && !wrap;
-  };
-  const contentStyle = {
-    animationDelay: `${firstRound ? delay : 0}s`,
-    animationDuration: `${animationDuration}s`,
-    transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`
-  };
-  const barStyle = {
-    height: isVertical ? `${height}px` : ""
-  };
-  const duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
-  const noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
-  const horseLampStyle = {
-    transition: animate ? `all ${duringTime === 0 ? noDuring : duringTime}s` : "",
-    marginTop: animate ? `-${height}px` : ""
-  };
-  const init = (active2 = 0) => {
-    if (!(container === null || container === void 0 ? void 0 : container.current))
-      return;
-    setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
-      const rects = yield getRectByTaro(container === null || container === void 0 ? void 0 : container.current);
-      const _active = Math.max(Math.min(childCount - 1, active2), 0);
-      const _height = rects === null || rects === void 0 ? void 0 : rects.height;
-      trackSize = childCount * Number(_height);
-      const targetOffset = getOffset(_active);
-      swiperRef.current.moving = true;
-      if (ready) {
-        swiperRef.current.moving = false;
-      }
-      active2 = _active;
-      setRect(rects);
-      setOffset(targetOffset);
-      setReady(true);
-    }), 0);
-  };
-  useEffect(() => {
-    if (ready) {
-      stopAutoPlay();
-      autoplay();
-    }
-    return () => {
-      setReady(false);
-    };
-  }, [ready]);
-  useEffect(() => {
-    if (isVertical && children) {
-      init();
-      stopAutoPlay();
-      autoplay();
-    }
-  }, [children, container === null || container === void 0 ? void 0 : container.current]);
-  const stopAutoPlay = () => {
-    clearTimeout(swiperRef.current.autoplayTimer);
-    swiperRef.current.autoplayTimer = null;
-  };
-  const autoplay = () => {
-    if (childCount <= 1)
-      return;
-    stopAutoPlay();
-    swiperRef.current.autoplayTimer = setTimeout(() => {
-      next();
-      autoplay();
-    }, Number(duration) + 100 * speed);
-  };
-  const move = ({ pace = 0, offset: offset2 = 0 }) => {
-    if (childCount <= 1)
-      return;
-    const targetActive = getActive(pace);
-    const targetOffset = getOffset(targetActive, offset2);
-    if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
-      const rightBound = targetOffset < minOffset;
-      childOffset[0] = rightBound ? trackSize : 0;
-    }
-    if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
-      const leftBound = targetOffset > 0;
-      childOffset[childCount - 1] = leftBound ? -trackSize : 0;
-    }
-    setChildOffset(childOffset);
-    active = targetActive;
-    setOffset(targetOffset);
-    getStyle(targetOffset);
-  };
-  const next = () => {
-    resettPosition();
-    requestFrame(() => {
-      requestFrame(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: 1
-        });
-      });
-    });
-  };
-  const handleItemClick = (event, value) => {
-    onItemClick && onItemClick(event, value);
-  };
-  const getStyle = (moveOffset = offset) => {
-    const target = innerRef.current;
-    if (!target) {
-      return;
-    }
-    let _offset = 0;
-    const val = ((rect === null || rect === void 0 ? void 0 : rect.height) || 0) - height;
-    _offset = moveOffset + Number(active === childCount - 1 && val / 2);
-    target.style.transitionDuration = `${swiperRef.current.moving ? 0 : duration}ms`;
-    target.style.height = `${Number(height) * childCount}px`;
-    target.style.transform = `translate3D(0,${_offset}px,0)`;
-  };
-  const itemStyle = (index) => {
-    const style2 = {};
-    if (height) {
-      style2.height = `${height}px`;
-      style2.lineHeight = `${height}px`;
-    }
-    const offset2 = childOffset[index];
-    if (offset2) {
-      style2.transform = `translate3D(0,${offset2}px,0)`;
-    }
-    return style2;
-  };
-  const getActive = (pace) => {
-    if (pace) {
-      const _active = active + pace;
-      return range(_active, -1, childCount);
-    }
-    return active;
-  };
-  const getOffset = (active2, offset2 = 0) => {
-    const currentPosition = active2 * Number(height);
-    const targetOffset = offset2 - currentPosition;
-    return targetOffset;
-  };
-  const requestFrame = (fn) => {
-    window.requestAnimationFrame.call(window, fn);
-  };
-  const range = (num, min, max) => {
-    return Math.min(Math.max(num, min), max);
-  };
-  const resettPosition = () => {
-    swiperRef.current.moving = true;
-    if (active <= -1) {
-      move({ pace: childCount });
-    }
-    if (active >= childCount) {
-      move({ pace: -childCount });
-    }
-  };
-  const noticebarClass = classNames({
-    "nut-noticebar-box": true,
-    [`nut-noticebar-box-wrapable`]: wrap
-  });
-  useEffect(() => {
-    return () => {
-      stopAutoPlay();
-    };
-  }, []);
-  return React__default.createElement(
-    "div",
-    { className: `${classPrefix} ${className || ""}`, style },
-    showNoticeBar && direction === "horizontal" ? React__default.createElement(
-      "div",
-      { className: noticebarClass, style: barStyle, onClick: handleClick },
-      leftIcon ? React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
-      React__default.createElement(
-        "div",
-        { ref: wrapRef, className: "nut-noticebar-box-wrap" },
-        React__default.createElement(
-          "div",
-          { ref: contentRef, className: `nut-noticebar-box-wrap-content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`, style: contentStyle, onAnimationEnd },
-          children,
-          content
-        )
-      ),
-      closeable || rightIcon ? React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || React__default.createElement(Close, { size: 12 })) : null
-    ) : null,
-    showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement(
-      "div",
-      { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
-      leftIcon ? React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
-      children ? React__default.createElement("div", { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
-        return React__default.createElement("div", { style: itemStyle(index), key: index, onClick: (e) => {
-          handleItemClick(e, item);
-        } }, item);
-      })) : React__default.createElement("div", { className: "nut-noticebar-box-horseLamp-list", style: horseLampStyle }, scrollList.current.map((item, index) => {
-        return (
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-          React__default.createElement("div", { className: "nut-noticebar-box-horseLamp-list-item", style: { height }, key: index, onClick: (e) => {
-            handleItemClick(e, item);
-          } }, item)
-        );
-      })),
-      React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: (e) => {
-        handleClickIcon(e);
-      } }, rightIcon || (closeable ? React__default.createElement(Close, { size: 12 }) : null))
-    ) : null
-  );
-};
-NoticeBar.defaultProps = defaultProps;
-NoticeBar.displayName = "NutNoticeBar";
-export {
-  NoticeBar as N
-};

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

@@ -1,222 +0,0 @@
-import { _ as __rest, a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
-import React__default, { useRef, useState, useEffect } from "react";
-import classNames from "classnames";
-import Taro, { createSelectorQuery } from "@tarojs/taro";
-import { P as Popup } from "./popup.taro-Iy_WQZ-m.js";
-import { a as getRect, g as getRectByTaro } from "./get-rect-by-taro-CSN0TGnD.js";
-import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { list: [], location: "bottom", visible: false, offset: [0, 12], arrowOffset: 0, targetId: "", className: "", showArrow: true, overlay: false, closeOnOutsideClick: true, closeOnActionClick: true, onClick: () => {
-}, onOpen: () => {
-}, onClose: () => {
-} });
-const classPrefix = `nut-popover`;
-const Popover = (props) => {
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, list, location, visible, offset, targetId, overlay, closeOnOutsideClick, closeOnActionClick, className, showArrow, arrowOffset, style, onClick, onOpen, onClose, onSelect } = _a, rest = __rest(_a, ["children", "list", "location", "visible", "offset", "targetId", "overlay", "closeOnOutsideClick", "closeOnActionClick", "className", "showArrow", "arrowOffset", "style", "onClick", "onOpen", "onClose", "onSelect"]);
-  const popoverRef = useRef(null);
-  const popoverContentRef = useRef(null);
-  const [showPopup, setShowPopup] = useState(false);
-  const [elWidth, setElWidth] = useState(0);
-  const [elHeight, setElHeight] = useState(0);
-  const [rootPosition, setRootPosition] = useState();
-  useEffect(() => {
-    setShowPopup(visible);
-    if (visible) {
-      setTimeout(() => {
-        getContentWidth();
-      }, 0);
-    }
-  }, [visible]);
-  const getContentWidth = () => __awaiter(void 0, void 0, void 0, function* () {
-    let rect;
-    createSelectorQuery().selectViewport().scrollOffset((res) => __awaiter(void 0, void 0, void 0, function* () {
-      const distance = res.scrollTop;
-      if (targetId) {
-        if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
-          rect = getRect(document.querySelector(`#${targetId}`));
-        } else {
-          rect = yield getRectTaro(targetId);
-        }
-      } else {
-        rect = yield getRectByTaro(popoverRef.current);
-      }
-      setRootPosition({
-        width: rect.width,
-        height: rect.height,
-        left: rect.left,
-        top: rect.top + distance,
-        right: rect.right
-      });
-    })).exec();
-    setTimeout(() => {
-      getPopoverContentW();
-    }, 300);
-  });
-  const getRectTaro = (targetId2) => __awaiter(void 0, void 0, void 0, function* () {
-    return new Promise((resolve) => {
-      const query = createSelectorQuery();
-      query.select(`#${targetId2}`) && query.select(`#${targetId2}`).boundingClientRect();
-      query.exec((res) => {
-        resolve(res[0]);
-      });
-    });
-  });
-  const getPopoverContentW = () => __awaiter(void 0, void 0, void 0, function* () {
-    const rectContent = yield getRectByTaro(popoverContentRef.current);
-    setElWidth(rectContent.width);
-    setElHeight(rectContent.height);
-  });
-  const clickAway = () => {
-    if (closeOnOutsideClick) {
-      props.onClick && props.onClick();
-      onClose && onClose();
-    }
-  };
-  const classes = classNames({
-    [`${classPrefix}`]: true
-  }, className);
-  const popoverArrow = () => {
-    const prefixCls = "nut-popover-arrow";
-    const loca = location;
-    const direction = loca.split("-")[0];
-    return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${loca}`;
-  };
-  const getRootPosition = () => {
-    const styles = {};
-    if (!rootPosition) {
-      styles.visibility = "hidden";
-      return styles;
-    }
-    const contentWidth = elWidth;
-    const contentHeight = elHeight;
-    const { width, height, left, top, right } = rootPosition;
-    const direction = location.split("-")[0];
-    const skew = location.split("-")[1];
-    let cross = 0;
-    let parallel = 0;
-    if (Array.isArray(offset) && offset.length === 2) {
-      cross += +offset[1];
-      parallel += +offset[0];
-    }
-    if (width) {
-      if (["bottom", "top"].includes(direction)) {
-        const h = direction === "bottom" ? height + cross : -(contentHeight + cross);
-        styles.top = `${top + h}px`;
-        if (!skew) {
-          styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
-        }
-        if (skew === "start") {
-          styles.left = `${left + parallel}px`;
-        }
-        if (skew === "end") {
-          styles.left = `${right + parallel}px`;
-        }
-      }
-      if (["left", "right"].includes(direction)) {
-        const contentW = direction === "left" ? -(contentWidth + cross) : width + cross;
-        styles.left = `${left + contentW}px`;
-        if (!skew) {
-          styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
-        }
-        if (skew === "start") {
-          styles.top = `${top + parallel}px`;
-        }
-        if (skew === "end") {
-          styles.top = `${top + height + parallel}px`;
-        }
-      }
-    }
-    if (elWidth === 0) {
-      styles.visibility = "hidden";
-    } else {
-      styles.visibility = "initial";
-    }
-    return styles;
-  };
-  const popoverArrowStyle = () => {
-    const styles = {};
-    const direction = location.split("-")[0];
-    const skew = location.split("-")[1];
-    const base = 16;
-    if (props.arrowOffset !== 0) {
-      if (["bottom", "top"].includes(direction)) {
-        if (!skew) {
-          styles.left = `calc(50% + ${arrowOffset}px)`;
-        }
-        if (skew === "start") {
-          styles.left = `${base + arrowOffset}px`;
-        }
-        if (skew === "end") {
-          styles.right = `${base - arrowOffset}px`;
-        }
-      }
-      if (["left", "right"].includes(direction)) {
-        if (!skew) {
-          styles.top = `calc(50% - ${arrowOffset}px)`;
-        }
-        if (skew === "start") {
-          styles.top = `${base - arrowOffset}px`;
-        }
-        if (skew === "end") {
-          styles.bottom = `${base + arrowOffset}px`;
-        }
-      }
-    }
-    return styles;
-  };
-  const handleSelect = (item, index) => {
-    if (!item.disabled) {
-      onSelect && onSelect(item, index);
-    }
-    if (closeOnActionClick) {
-      props.onClick && props.onClick();
-      onClose && onClose();
-    }
-  };
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    !targetId && React__default.createElement("div", { className: "nut-popover-wrapper", ref: popoverRef, onClick: () => {
-      props.onClick && props.onClick();
-      if (!visible) {
-        onOpen && onOpen();
-      } else {
-        onClose && onClose();
-      }
-    }, style }, Array.isArray(children) ? children[0] : children),
-    React__default.createElement(
-      "div",
-      { className: classes, style: getRootPosition() },
-      React__default.createElement(
-        Popup,
-        Object.assign({ className: `nut-popover-content nut-popover-content-${location}`, position: "default", overlay, visible: showPopup }, rest),
-        React__default.createElement(
-          "div",
-          { className: "nut-popover-content-group", ref: popoverContentRef },
-          showArrow && React__default.createElement("div", { className: popoverArrow(), style: popoverArrowStyle() }),
-          Array.isArray(children) ? children[1] : "",
-          list.map((item, index) => {
-            return React__default.createElement(
-              "div",
-              { className: classNames({
-                "nut-popover-menu-item": true,
-                "nut-popover-menu-disabled": item.disabled
-              }, item.className), key: item.key || index, onClick: () => handleSelect(item, index) },
-              item.icon ? React__default.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
-              React__default.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
-              item.action && item.action.icon ? React__default.createElement("div", { className: "nut-popover-menu-item-action-icon", onClick: (e) => {
-                var _a2, _b;
-                return (_b = (_a2 = item.action) === null || _a2 === void 0 ? void 0 : _a2.onClick) === null || _b === void 0 ? void 0 : _b.call(_a2, e);
-              } }, item.action.icon) : null
-            );
-          })
-        )
-      ),
-      showPopup && closeOnOutsideClick && React__default.createElement("div", { className: "nut-popover-content-bg", onClick: clickAway, onTouchMove: clickAway })
-    )
-  );
-};
-Popover.defaultProps = defaultProps;
-Popover.displayName = "NutPopover";
-export {
-  Popover as P
-};