@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/esm/menuitem.taro-6076bffa.js

@@ -0,0 +1,142 @@
+import React, { forwardRef, useState, useEffect, useImperativeHandle } from "react";
+import classNames from "classnames";
+import { getSystemInfoSync } from "@tarojs/taro";
+import { CSSTransition } from "react-transition-group";
+import { Check } from "@nutui/icons-react-taro";
+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";
+const defaultProps = {
+  ...ComponentDefaults,
+  columns: 1,
+  direction: "down",
+  icon: null,
+  closeOnClickAway: false,
+  activeTitleClass: "",
+  inactiveTitleClass: "",
+  onChange: (value) => void 0
+};
+const MenuItem = forwardRef((props, ref) => {
+  const { className, style, options, value, columns, title, icon, direction, onChange, activeTitleClass, inactiveTitleClass, closeOnClickAway, children, activeColor, show, parent, index } = {
+    ...defaultProps,
+    ...props
+  };
+  const [_showPopup, setShowPopup] = useState(show);
+  const [_value, setValue] = useState(value);
+  useEffect(() => {
+    setShowPopup(show);
+  }, [show]);
+  useEffect(() => {
+    getParentOffset();
+  }, [_showPopup]);
+  useImperativeHandle(ref, () => ({
+    toggle: parent.toggleMenuItem
+  }));
+  const getIconCName = (optionVal, value2) => {
+    return classNames({
+      [activeTitleClass]: optionVal === value2,
+      [inactiveTitleClass]: optionVal !== value2
+    });
+  };
+  const setTitle = (text) => {
+    if (!title) {
+      parent.updateTitle(text, index);
+    }
+  };
+  const handleClick = (item) => {
+    parent.toggleMenuItem(index);
+    setTitle(item.text);
+    setValue(item.value);
+    onChange && onChange(item);
+  };
+  const [position, setPosition] = useState({
+    top: 0,
+    height: 0
+  });
+  const getParentOffset = () => {
+    setTimeout(async () => {
+      const p = parent.menuRef.current;
+      const rect = await getRectByTaro(p);
+      setPosition({
+        height: rect.height,
+        top: rect.top
+      });
+    }, 100);
+  };
+  const isShow = () => {
+    if (_showPopup)
+      return {};
+    return { display: "none" };
+  };
+  const getPosition = () => {
+    return direction === "down" ? { top: `${position.top + position.height}px` } : {
+      bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
+      top: "auto"
+    };
+  };
+  const placeholderStyle = () => {
+    if (direction === "down") {
+      return {
+        height: `${position.top + position.height}px`,
+        top: 0,
+        ...isShow()
+      };
+    }
+    return {
+      height: `${getSystemInfoSync().windowHeight - position.top}px`,
+      bottom: `0px`,
+      top: "auto",
+      ...isShow()
+    };
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    closeOnClickAway ? React.createElement("div", { className: `placeholder-element ${classNames({
+      up: direction === "up"
+    })}`, style: placeholderStyle(), onClick: () => parent.toggleMenuItem(index) }) : null,
+    React.createElement(Overlay, { className: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnOverlayClick: parent.closeOnOverlayClick, onClick: () => {
+      parent.closeOnOverlayClick && parent.toggleMenuItem(index);
+    } }),
+    React.createElement(
+      "div",
+      { className: classNames(className, {
+        "nut-menu-item__wrap": direction === "down",
+        "nut-menu-item__wrap-up": direction !== "down"
+      }), style: {
+        ...style,
+        ...isShow()
+      } },
+      React.createElement(
+        CSSTransition,
+        { in: _showPopup, timeout: 100, classNames: direction === "down" ? "menu-item" : "menu-item-up" },
+        React.createElement(
+          "div",
+          { className: "nut-menu-item__content" },
+          options == null ? void 0 : options.map((item, index2) => {
+            return React.createElement(
+              "div",
+              { className: `nut-menu-item__option ${classNames({
+                active: item.value === _value
+              })}`, key: item.text, style: {
+                flexBasis: `${100 / columns}%`
+              }, onClick: () => {
+                handleClick(item);
+              } },
+              item.value === _value ? React.createElement(React.Fragment, null, icon || React.createElement(Check, { color: activeColor, size: 10, className: getIconCName(item.value, value) })) : null,
+              React.createElement("div", { className: getIconCName(item.value, value), style: {
+                color: `${item.value === _value ? activeColor : ""}`
+              } }, item.text)
+            );
+          }),
+          children
+        )
+      )
+    )
+  );
+});
+MenuItem.defaultProps = defaultProps;
+MenuItem.displayName = "NutMenuItem";
+export {
+  MenuItem as M
+};

package/dist/esm/navbar.taro-5e1a0835.js

@@ -0,0 +1,61 @@
+import React from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  left: "",
+  right: "",
+  back: "",
+  fixed: false,
+  safeAreaInsetTop: false,
+  placeholder: false,
+  zIndex: 10
+};
+const NavBar = (props) => {
+  const { right, left, className, style, back, fixed, safeAreaInsetTop, placeholder, zIndex, onClickBack } = {
+    ...defaultProps,
+    ...props
+  };
+  const classPrefix = "nut-navbar";
+  const children = Array.isArray(props.children) ? props.children : [props.children];
+  const styles = () => {
+    return {
+      ...style,
+      zIndex
+    };
+  };
+  const renderLeft = () => {
+    return React.createElement(
+      "div",
+      { className: `${classPrefix}__left` },
+      back && React.createElement("div", { className: `${classPrefix}__left__back`, onClick: (e) => onClickBack(e) }, back),
+      left
+    );
+  };
+  const renderContent = () => {
+    return React.createElement("div", { className: `${classPrefix}__title` }, children);
+  };
+  const renderRight = () => {
+    return React.createElement("div", { className: `${classPrefix}__right` }, right);
+  };
+  const renderWrapper = () => {
+    return React.createElement(
+      "div",
+      { className: cls, style: styles() },
+      renderLeft(),
+      renderContent(),
+      renderRight()
+    );
+  };
+  const classes = classNames({
+    [`${classPrefix}--fixed`]: fixed,
+    [`${classPrefix}--safe-area-inset-top`]: safeAreaInsetTop
+  });
+  const cls = classNames(classPrefix, classes, className);
+  return React.createElement(React.Fragment, null, fixed && placeholder ? React.createElement("div", { className: `${classPrefix}--placeholder` }, renderWrapper()) : renderWrapper());
+};
+NavBar.defaultProps = defaultProps;
+NavBar.displayName = "NutNavBar";
+export {
+  NavBar as N
+};

package/dist/esm/noticebar.taro-2f02b2ad.js

@@ -0,0 +1,369 @@
+import React, { useRef, useState, useMemo, useEffect } from "react";
+import { Notice, Close } from "@nutui/icons-react-taro";
+import classNames from "classnames";
+import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  direction: "horizontal",
+  list: [],
+  duration: 1e3,
+  height: 40,
+  content: "",
+  closeable: false,
+  wrap: false,
+  leftIcon: null,
+  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, onClickItem } = {
+    ...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.Children.map(children, (child) => {
+      if (!React.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);
+        setTimeout(() => {
+          startRollEasy();
+        }, Number(duration));
+      }
+    } 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(async () => {
+      if (!wrapRef.current || !contentRef.current) {
+        return;
+      }
+      const warpRes = await getRectByTaro(wrapRef.current);
+      const contentRes = await 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 ? void 0 : container.current))
+      return;
+    setTimeout(async () => {
+      const rects = await getRectByTaro(container == null ? void 0 : container.current);
+      const _active = Math.max(Math.min(childCount - 1, active2), 0);
+      const _height = rects == null ? 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) {
+      setTimeout(() => {
+        init();
+        stopAutoPlay();
+        autoplay();
+      }, 300);
+    }
+  }, [children, container == null ? 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) => {
+    onClickItem && onClickItem(event, value);
+  };
+  const getStyle = (moveOffset = offset) => {
+    const target = innerRef.current;
+    let _offset = 0;
+    const val = (rect == null ? void 0 : rect.height) - 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-page": true,
+    withicon: closeable,
+    close: closeable,
+    wrap
+  });
+  useEffect(() => {
+    return () => {
+      stopAutoPlay();
+    };
+  }, []);
+  return React.createElement(
+    "div",
+    { className: `${classPrefix} ${className || ""}`, style },
+    showNoticeBar && direction === "horizontal" ? React.createElement(
+      "div",
+      { className: noticebarClass, style: barStyle, onClick: handleClick },
+      React.createElement("div", { className: "left-icon" }, leftIcon || React.createElement(Notice, { size: 16 })),
+      React.createElement(
+        "div",
+        { ref: wrapRef, className: "wrap" },
+        React.createElement(
+          "div",
+          { ref: contentRef, className: `content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`, style: contentStyle, onAnimationEnd },
+          children,
+          content
+        )
+      ),
+      closeable || rightIcon ? React.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React.createElement(Close, { size: 12 })) : null
+    ) : null,
+    showNoticeBar && scrollList.current.length > 0 && isVertical ? React.createElement(
+      "div",
+      { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
+      leftIcon ? React.createElement("div", { className: "left-icon" }, leftIcon) : null,
+      children ? React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+        return React.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
+          handleItemClick(e, item);
+        } }, item);
+      })) : React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
+        return (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          React.createElement("div", { className: "horseLamp_list_item", style: { height }, key: index, onClick: (e) => {
+            handleItemClick(e, item);
+          } }, item)
+        );
+      })),
+      React.createElement("div", { className: "go", onClick: (e) => {
+        handleClickIcon(e);
+      } }, rightIcon || (closeable ? React.createElement(Close, { size: 12 }) : null))
+    ) : null
+  );
+};
+NoticeBar.defaultProps = defaultProps;
+NoticeBar.displayName = "NutNoticeBar";
+export {
+  NoticeBar as N
+};

package/dist/esm/notify.taro-5768403d.js

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
+import { C as ComponentDefaults } from "./typings-11d83a22.js";
+const defaultProps = {
+  ...ComponentDefaults,
+  id: "",
+  duration: 3e3,
+  type: "danger",
+  position: "top",
+  visible: false,
+  onClose: () => {
+  },
+  onClick: () => {
+  }
+};
+const classPrefix = "nut-notify";
+const Notify = (props) => {
+  const { id, children, style, type, className, position, visible, duration, onClose, onClick, ...rest } = { ...defaultProps, ...props };
+  let timer;
+  const [showNotify, SetShow] = useState(false);
+  useEffect(() => {
+    if (visible) {
+      SetShow(true);
+      show();
+    } else {
+      hide();
+    }
+  }, [visible]);
+  const clickHandle = () => {
+    onClick();
+  };
+  const show = () => {
+    clearTimer();
+    if (duration) {
+      timer = window.setTimeout(() => {
+        hide();
+      }, duration);
+    }
+  };
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const hide = () => {
+    SetShow(false);
+    if (id) {
+      const element = document.getElementById(id);
+      element && element.parentNode && element.parentNode.removeChild(element);
+    }
+    onClose();
+  };
+  const classes = classNames({
+    [`${classPrefix}--popup-top`]: position === "top",
+    [`${classPrefix}--popup-bottom`]: position === "bottom",
+    [`${classPrefix}`]: true,
+    [`${classPrefix}--${type}`]: true
+  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      CSSTransition,
+      { in: showNotify, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position, id },
+      React.createElement("div", { className: `${classes} ${className}`, style, onClick: clickHandle }, children)
+    )
+  );
+};
+Notify.defaultProps = defaultProps;
+Notify.displayName = "NutNotify";
+export {
+  Notify as N
+};