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

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

@@ -0,0 +1,355 @@
+import { a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useRef, useState, useMemo, useEffect } from "react";
+import { View } from "@tarojs/components";
+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";
+import { a as useRtl } from "./configprovider.taro-CyU_tvNJ.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { align: "left", 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 rtl = useRtl();
+  const { children, className, style, align, 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 = align === "left" && 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 && align === "left") {
+      return wrap;
+    }
+    return !isCanScroll && !wrap;
+  };
+  const contentStyle = {
+    animationDelay: `${firstRound ? delay : 0}s`,
+    animationDuration: `${animationDuration}s`,
+    transform: `translateX(${firstRound ? 0 : `${rtl ? -wrapWidth : 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({
+    [`${classPrefix}-box`]: true,
+    [`${classPrefix}-box-wrapable`]: wrap,
+    [`${classPrefix}-box-${align}`]: true
+  });
+  const cls = classNames(classPrefix, className);
+  useEffect(() => {
+    return () => {
+      stopAutoPlay();
+    };
+  }, []);
+  return React__default.createElement(
+    View,
+    { className: cls, style },
+    showNoticeBar && direction === "horizontal" ? React__default.createElement(
+      View,
+      { className: noticebarClass, style: barStyle, onClick: handleClick },
+      leftIcon ? React__default.createElement(View, { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
+      React__default.createElement(
+        View,
+        { ref: wrapRef, className: "nut-noticebar-box-wrap" },
+        React__default.createElement(
+          View,
+          { ref: contentRef, className: `nut-noticebar-box-wrap-content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`, style: contentStyle, onAnimationEnd },
+          children,
+          content
+        )
+      ),
+      closeable || rightIcon ? React__default.createElement(View, { 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(
+      View,
+      { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
+      leftIcon ? React__default.createElement(View, { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
+      children ? React__default.createElement(View, { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
+        return React__default.createElement(View, { style: itemStyle(index), key: index, onClick: (e) => {
+          handleItemClick(e, item);
+        } }, item);
+      })) : React__default.createElement(View, { 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(View, { className: "nut-noticebar-box-horseLamp-list-item", style: { height }, key: index, onClick: (e) => {
+            handleItemClick(e, item);
+          } }, item)
+        );
+      })),
+      React__default.createElement(View, { 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/nutui-react.es.js

@@ -1,4 +1,4 @@
-import { B } from "./button.taro-OKGsDVW7.js";
+import { B } from "./button.taro-GziP0wPi.js";
 import { C } from "./cell.taro-CCnLF6RC.js";
 import { C as C2 } from "./cellgroup.taro-Dz69kT6e.js";
 import { C as C3 } from "./configprovider.taro-CyU_tvNJ.js";
@@ -20,59 +20,59 @@ import { N } from "./navbar.taro-B8u3DOE4.js";
 import { S as S4 } from "./sidenavbar.taro-eK5vaZPR.js";
 import { S as S5 } from "./sidenavbaritem.taro-L7HbsCLn.js";
 import { S as S6 } from "./subsidenavbar.taro-ByxYpgfP.js";
-import { T } from "./tabbar.taro-8_SmJofa.js";
-import { T as T2 } from "./tabbaritem.taro-Cb-yfOln.js";
+import { T } from "./tabbar.taro-CVp3ZaqP.js";
+import { T as T2 } from "./tabbaritem.taro-C_90fvMh.js";
 import { T as T3 } from "./tabpane.taro-BAe86j3t.js";
-import { T as T4 } from "./tabs.taro-HgAoKBAc.js";
-import { A } from "./address.taro-DjlXNWie.js";
+import { T as T4 } from "./tabs.taro-BxPmx5n5.js";
+import { A } from "./address.taro-DY8db_vD.js";
 import { C as C5 } from "./calendar.taro-DbHJEx4G.js";
 import { C as C6 } from "./calendaritem.taro-B8tN2DYa.js";
-import { C as C7 } from "./calendarcard.taro-BHGCq5zX.js";
-import { C as C8 } from "./cascader.taro-CpofskUL.js";
-import { C as C9, a } from "./checkbox.taro-D9F_HM7f.js";
-import { D as D2 } from "./datepicker.taro-DshCn7Rn.js";
+import { C as C7 } from "./calendarcard.taro-aEtSd9X7.js";
+import { C as C8 } from "./cascader.taro-AZEBpBH3.js";
+import { C as C9, a } from "./checkbox.taro-CUpF7Afr.js";
+import { D as D2 } from "./datepicker.taro-DqR52Ivo.js";
 import { default as default2 } from "./Form.js";
 import { F as F2 } from "./formitem.taro-Brz5dj_8.js";
 import { I as I2 } from "./input.taro-BVC8gEuk.js";
-import { I as I3 } from "./inputnumber.taro-F3jNGr_V.js";
+import { I as I3 } from "./inputnumber.taro-CQiAPZgS.js";
 import { M } from "./menu.taro-BAiJPGR7.js";
 import { M as M2 } from "./menuitem.taro-oLv6ZYC5.js";
 import { N as N2 } from "./numberkeyboard.taro-B9rMgy7D.js";
 import { P } from "./picker.taro-Cmng9GW9.js";
 import { R as R2, a as a2 } from "./radio.taro-CjJgX9o2.js";
-import { R as R3 } from "./range.taro-BxMDs5Cy.js";
+import { R as R3 } from "./range.taro-GsWDprz5.js";
 import { R as R4 } from "./rate.taro-BABLqt4h.js";
 import { S as S7 } from "./searchbar.taro-PfVx6o-6.js";
 import { S as S8 } from "./shortpassword.taro-BXsxku33.js";
 import { S as S9 } from "./signature.taro-KPm_xs66.js";
 import { S as S10 } from "./switch.taro-D1HgJoJz.js";
 import { T as T5 } from "./textarea.taro-BJIFCpKb.js";
-import { U } from "./uploader.taro-CuaIVvya.js";
+import { U } from "./uploader.taro-BFNFPfbl.js";
 import { A as A2 } from "./actionsheet.taro-C5BqWoML.js";
-import { B as B3 } from "./badge.taro-CyDqBb9Z.js";
-import { B as B4 } from "./dialog.taro-xsQhsC1V.js";
+import { B as B3 } from "./badge.taro-B0spW6jr.js";
+import { B as B4 } from "./dialog.taro-C9e4DIZc.js";
 import { D as D3 } from "./drag.taro-CcHIO07Y.js";
-import { E as E2 } from "./empty.taro-Brkv6B2Z.js";
-import { I as I4 } from "./infiniteloading.taro-Ccq4bEzk.js";
+import { E as E2 } from "./empty.taro-D3oHrfI9.js";
+import { I as I4 } from "./infiniteloading.taro-WiMpG-fU.js";
 import { L as L2 } from "./loading.taro-CRF1z5wQ.js";
-import { N as N3 } from "./noticebar.taro-CMdfOp2g.js";
+import { N as N3 } from "./noticebar.taro-CRPbZenq.js";
 import { N as N4 } from "./notify.taro-jP7y9zMU.js";
-import { P as P2 } from "./popover.taro-CcKwnX27.js";
+import { P as P2 } from "./popover.taro-BsOaXoWp.js";
 import { P as P3 } from "./popup.taro-Iy_WQZ-m.js";
-import { P as P4 } from "./pulltorefresh.taro-BJdQj5sL.js";
+import { P as P4 } from "./pulltorefresh.taro-DfVmOGuo.js";
 import { S as S11 } from "./skeleton.taro-BwIDIf2p.js";
-import { S as S12 } from "./swipe.taro-wm7YWwaj.js";
-import { T as T6 } from "./toast.taro-BIR_7Wgb.js";
+import { S as S12 } from "./swipe.taro-aEnunftO.js";
+import { T as T6 } from "./toast.taro-BVXqvjNJ.js";
 import { A as A3 } from "./animate.taro-Dg9jxZEu.js";
 import { default as default3 } from "./AnimatingNumbers.js";
-import { A as A4 } from "./audio.taro-DXxWGngO.js";
+import { A as A4 } from "./audio.taro-B-h2EKnZ.js";
 import { A as A5 } from "./avatar.taro-a6CX3kxV.js";
 import { A as A6 } from "./avatargroup.taro-bpT5kPbf.js";
 import { C as C10 } from "./circleprogress.taro-CKSrzt8Q.js";
 import { C as C11 } from "./collapse.taro-BM0BsN30.js";
 import { C as C12 } from "./collapseitem.taro-D_m4VEdG.js";
-import { C as C13 } from "./countdown.taro-Dfa9kpmZ.js";
-import { E as E3 } from "./ellipsis.taro-B_mTyNyk.js";
+import { C as C13 } from "./countdown.taro-wopKr1Il.js";
+import { E as E3 } from "./ellipsis.taro-Bwx19LgZ.js";
 import { I as I5 } from "./imagepreview.taro-Bb1TkBCV.js";
 import { I as I6 } from "./indicator.taro-CpHZtD9p.js";
 import { P as P5 } from "./pagination.taro-DAK6ddag.js";
@@ -82,18 +82,18 @@ import { S as S13 } from "./step.taro-DLr2GzYk.js";
 import { S as S14 } from "./steps.taro-C8Yg1Sns.js";
 import { default as default4 } from "./Swiper.js";
 import { S as S15 } from "./swiperitem.taro-8JXI24f0.js";
-import { T as T7 } from "./table.taro-0BcEBB0F.js";
+import { T as T7 } from "./table.taro-ClLmfqz3.js";
 import { T as T8 } from "./tag.taro-BsmY5QfN.js";
-import { T as T9 } from "./tour.taro-CMagdKcp.js";
-import { V } from "./video.taro-CEMVfhCS.js";
-import { V as V2 } from "./virtuallist.taro-C5vZAyza.js";
+import { T as T9 } from "./tour.taro-wfXuUebD.js";
+import { V } from "./video.taro-DJQeroOH.js";
+import { V as V2 } from "./virtuallist.taro-Cl08vfdg.js";
 import { B as B5 } from "./barrage.taro-BNOcZsJ1.js";
 import { C as C14 } from "./card.taro-uLorQW97.js";
 import { T as T10 } from "./timedetail.taro-x6Zey1xi.js";
 import { T as T11 } from "./timeselect.taro-BXq4APSJ.js";
 import { T as T12 } from "./trendarrow.taro-BHUetKSS.js";
 import { W } from "./watermark.taro-BxM8VfXb.js";
-import { A as A7 } from "./avatarcropper.taro-BFvFmK4t.js";
+import { A as A7 } from "./avatarcropper.taro-DiWH95bY.js";
 export {
   A2 as ActionSheet,
   A as Address,