@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.2

package/dist/esm/NoticeBar.js

@@ -0,0 +1,570 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import classNames from 'classnames';
+import Icon from './Icon.js';
+import { c as cn } from './bem-3b438e61.js';
+import { g as getRect } from './useClientRect-56bb675b.js';
+import { C as ComponentDefaults } from './typings-f27b58f4.js';
+import '@bem-react/classname';
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  // 滚动方向  across 横向 vertical 纵向
+  direction: 'across',
+  list: [],
+  standTime: 1000,
+  complexAm: false,
+  height: 40,
+  text: '',
+  closeMode: false,
+  wrapable: false,
+  leftIcon: '',
+  color: '',
+  background: '',
+  delay: 1,
+  scrollable: null,
+  speed: 50
+});
+var NoticeBar = function NoticeBar(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    children = _defaultProps$props.children,
+    className = _defaultProps$props.className,
+    style = _defaultProps$props.style,
+    direction = _defaultProps$props.direction,
+    list = _defaultProps$props.list,
+    standTime = _defaultProps$props.standTime,
+    complexAm = _defaultProps$props.complexAm,
+    height = _defaultProps$props.height,
+    text = _defaultProps$props.text,
+    closeMode = _defaultProps$props.closeMode,
+    wrapable = _defaultProps$props.wrapable,
+    leftIcon = _defaultProps$props.leftIcon,
+    color = _defaultProps$props.color,
+    background = _defaultProps$props.background,
+    delay = _defaultProps$props.delay,
+    scrollable = _defaultProps$props.scrollable,
+    speed = _defaultProps$props.speed,
+    rightIcon = _defaultProps$props.rightIcon,
+    close = _defaultProps$props.close,
+    click = _defaultProps$props.click,
+    onClose = _defaultProps$props.onClose,
+    onClick = _defaultProps$props.onClick,
+    onClickItem = _defaultProps$props.onClickItem,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName;
+  var wrap = useRef(null);
+  var content = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showNoticeBar = _useState2[0],
+    SetShowNoticeBar = _useState2[1];
+  var scrollList = useRef([]);
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    wrapWidth = _useState4[0],
+    SetWrapWidth = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    firstRound = _useState6[0],
+    SetFirstRound = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    duration = _useState8[0],
+    SetDuration = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    offsetWidth = _useState10[0],
+    SetOffsetW = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    animationClass = _useState12[0],
+    SetAnimationClass = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    animate = _useState14[0],
+    SetAnimate = _useState14[1];
+  var _useState15 = useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    distance = _useState16[0],
+    SetDistance = _useState16[1];
+  var _useState17 = useState(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    timer = _useState18[0],
+    SetTimer = _useState18[1];
+  var _useState19 = useState(null),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isCanScroll = _useState20[0],
+    SetIsCanScroll = _useState20[1];
+  var isVertical = direction === 'vertical';
+  var _useState21 = useState(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    rect = _useState22[0],
+    setRect = _useState22[1];
+  var active = 0;
+  var _useState23 = useState(''),
+    _useState24 = _slicedToArray(_useState23, 2),
+    vLeftIcon = _useState24[0],
+    setLeftIcon = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    ready = _useState26[0],
+    setReady = _useState26[1];
+  var container = useRef(null);
+  var innerRef = useRef(null);
+  var _swiper = useRef({
+    moving: false,
+    autoplayTimer: null,
+    width: 0,
+    height: 0,
+    offset: 0,
+    size: 0
+  });
+  var _useState27 = useState([]),
+    _useState28 = _slicedToArray(_useState27, 2),
+    childOffset = _useState28[0],
+    setChildOffset = _useState28[1];
+  var _useState29 = useState(0),
+    _useState30 = _slicedToArray(_useState29, 2),
+    offset = _useState30[0],
+    setOffset = _useState30[1];
+  // 获取自定义slot数据内容和总条数
+  var _useMemo = useMemo(function () {
+      var childCount = 0;
+      var childs = React__default.Children.map(children, function (child) {
+        if (!React__default.isValidElement(child)) return null;
+        childCount++;
+        return child;
+      });
+      return {
+        childs: childs,
+        childCount: childCount
+      };
+    }, [children]),
+    childs = _useMemo.childs,
+    childCount = _useMemo.childCount;
+  // 滚动消息的总高度
+  var trackSize = childCount * Number(height);
+  // 设置最小偏移量（最后一条的偏移位置）
+  var minOffset = function () {
+    if (rect) {
+      var base = isVertical ? rect.height : rect.width;
+      return base - Number(height) * childCount;
+    }
+    return 0;
+  }();
+  useEffect(function () {
+    if (isVertical) {
+      // 兼容老版本无左侧Icon问题
+      if (leftIcon !== '') {
+        setLeftIcon(leftIcon);
+      } else {
+        setLeftIcon('close');
+      }
+      if (children) {
+        scrollList.current = [].concat(childs);
+      } else {
+        scrollList.current = [].concat(list);
+        startRollEasy();
+      }
+      complexAm && startRoll();
+    } else {
+      initScrollWrap();
+    }
+    return function () {
+      // 销毁事件
+      clearInterval(timer);
+    };
+  }, []);
+  useEffect(function () {
+    initScrollWrap();
+  }, [text]);
+  useEffect(function () {
+    if (list && list.length) {
+      scrollList.current = [].concat(list);
+    }
+  }, [list]);
+  var initScrollWrap = function initScrollWrap(value) {
+    if (showNoticeBar === false) {
+      return;
+    }
+    setTimeout(function () {
+      if (!wrap.current || !content.current) {
+        return;
+      }
+      var wrapW = getRect(wrap.current).width;
+      var offsetW = getRect(content.current).width;
+      var canScroll = scrollable == null ? offsetW > wrapW : scrollable;
+      SetIsCanScroll(canScroll);
+      if (canScroll) {
+        SetWrapWidth(wrapW);
+        SetOffsetW(offsetW);
+        SetDuration(offsetW / speed);
+        SetAnimationClass('play');
+      } else {
+        SetAnimationClass('');
+      }
+    }, 0);
+  };
+  var handleClick = function handleClick(event) {
+    click && click(event);
+    onClick && onClick(event);
+  };
+  var onClickIcon = function onClickIcon(event) {
+    event.stopPropagation();
+    SetShowNoticeBar(!closeMode);
+    close && close(event);
+    onClose && onClose(event);
+  };
+  var onAnimationEnd = function onAnimationEnd() {
+    SetFirstRound(false);
+    setTimeout(function () {
+      SetDuration((offsetWidth + wrapWidth) / speed);
+      SetAnimationClass('play-infinite');
+    }, 0);
+  };
+  // 滚动时间间隔
+  var time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1000 : ~~(height / speed / 4) * 1000;
+  /**
+   * 滚动方式一，普通垂直滚动
+   */
+  var startRollEasy = function startRollEasy() {
+    showhorseLamp();
+    var timerCurr = window.setInterval(showhorseLamp, time + Number(standTime));
+    SetTimer(timerCurr);
+  };
+  var showhorseLamp = function showhorseLamp() {
+    SetAnimate(true);
+    setTimeout(function () {
+      scrollList.current.push(scrollList.current[0]);
+      scrollList.current.shift();
+      SetAnimate(false);
+    }, time);
+  };
+  /**
+   * 复杂滚动方式
+   */
+  var startRoll = function startRoll() {
+    var timerCurr = window.setInterval(function () {
+      var chunk = 100;
+      for (var i = 0; i < chunk; i++) {
+        scroll(i, !(i < chunk - 1));
+      }
+    }, Number(standTime) + 100 * speed);
+    SetTimer(timerCurr);
+  };
+  var scroll = function scroll(n, last) {
+    SetAnimate(true);
+    setTimeout(function () {
+      var _long = distance;
+      _long -= height / 100;
+      SetDistance(_long);
+      if (last) {
+        scrollList.current.push(scrollList.current[0]);
+        scrollList.current.shift();
+        SetDistance(0);
+        SetAnimate(false);
+      }
+    }, n * speed);
+  };
+  /**
+   * 点击滚动单元
+   */
+  var handleClickIcon = function handleClickIcon(event) {
+    event.stopPropagation();
+    SetShowNoticeBar(!closeMode);
+    close && close(event);
+    onClose && onClose(event);
+  };
+  var iconShow = function iconShow() {
+    if (leftIcon === 'close' || vLeftIcon === 'close') {
+      return false;
+    }
+    return true;
+  };
+  var iconBg = function iconBg() {
+    var iconBg = '';
+    if (leftIcon) {
+      iconBg = leftIcon;
+    }
+    return iconBg;
+  };
+  var isEllipsis = function isEllipsis() {
+    if (isCanScroll == null) {
+      return wrapable;
+    }
+    return !isCanScroll && !wrapable;
+  };
+  var contentStyle = {
+    animationDelay: "".concat(firstRound ? delay : 0, "s"),
+    animationDuration: "".concat(duration, "s"),
+    transform: "translateX(".concat(firstRound ? 0 : "".concat(wrapWidth, "px"), ")")
+  };
+  var barStyle = {
+    color: color,
+    background: background,
+    height: isVertical ? "".concat(height, "px") : ''
+  };
+  var duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
+  var noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
+  var horseLampStyle = {
+    transform: complexAm ? "translateY(".concat(distance, "px)") : '',
+    transition: animate ? "all ".concat(duringTime === 0 ? noDuring : duringTime, "s") : '',
+    marginTop: animate ? "-".concat(height, "px") : ''
+  };
+  /**
+   * 垂直自定义滚动方式
+   */
+  var init = function init() {
+    var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : +0;
+    var rects = getRect(container === null || container === void 0 ? void 0 : container.current);
+    var _active = Math.max(Math.min(childCount - 1, active), 0);
+    var _height = rects.height;
+    trackSize = childCount * Number(_height);
+    var targetOffset = getOffset(_active);
+    _swiper.current.moving = true;
+    if (ready) {
+      _swiper.current.moving = false;
+    }
+    active = _active;
+    setRect(rects);
+    setOffset(targetOffset);
+    setReady(true);
+  };
+  useEffect(function () {
+    if (ready) {
+      stopAutoPlay();
+      autoplay();
+    }
+    return function () {
+      setReady(false);
+    };
+  }, [ready]);
+  useEffect(function () {
+    if (isVertical && children) {
+      init();
+      stopAutoPlay();
+      autoplay();
+    }
+  }, [children, container === null || container === void 0 ? void 0 : container.current]);
+  // 清除定时器
+  var stopAutoPlay = function stopAutoPlay() {
+    clearTimeout(_swiper.current.autoplayTimer);
+    _swiper.current.autoplayTimer = null;
+  };
+  // 定时轮播
+  var autoplay = function autoplay() {
+    if (childCount <= 1) return;
+    stopAutoPlay();
+    _swiper.current.autoplayTimer = setTimeout(function () {
+      next();
+      autoplay();
+    }, Number(standTime) + 100 * speed);
+  };
+  // 切换方法
+  var move = function move(_ref) {
+    var _ref$pace = _ref.pace,
+      pace = _ref$pace === void 0 ? 0 : _ref$pace,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$offset;
+    if (childCount <= 1) return;
+    var targetActive = getActive(pace);
+    // 父级容器偏移量
+    var targetOffset = getOffset(targetActive, offset);
+    // 循环滚动，调整开头结尾图片位置
+    if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
+      var rightBound = targetOffset < minOffset;
+      childOffset[0] = rightBound ? trackSize : 0;
+    }
+    if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
+      var leftBound = targetOffset > 0;
+      childOffset[childCount - 1] = leftBound ? -trackSize : 0;
+    }
+    setChildOffset(childOffset);
+    active = targetActive;
+    setOffset(targetOffset);
+    getStyle(targetOffset);
+  };
+  // 下一页
+  var next = function next() {
+    resettPosition();
+    requestFrame(function () {
+      requestFrame(function () {
+        _swiper.current.moving = false;
+        move({
+          pace: 1
+        });
+      });
+    });
+  };
+  var handleItemClick = function handleItemClick(event, value) {
+    onClickItem && onClickItem(event, value);
+  };
+  var getStyle = function getStyle() {
+    var moveOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : offset;
+    var target = innerRef.current;
+    var _offset = 0;
+    // 容器高度-元素高度
+    var val = rect.height - height;
+    _offset = moveOffset + Number(active === childCount - 1 && val / 2);
+    target.style.transitionDuration = "".concat(_swiper.current.moving ? 0 : standTime, "ms");
+    target.style.height = "".concat(Number(height) * childCount, "px");
+    target.style.transform = "translate3D(0,".concat(_offset, "px,0)");
+  };
+  // 无缝滚动第一个元素位移控制
+  var itemStyle = function itemStyle(index) {
+    var style = {};
+    if (height) {
+      style.height = "".concat(height, "px");
+      style.lineHeight = "".concat(height, "px");
+    }
+    var offset = childOffset[index];
+    if (offset) {
+      style.transform = "translate3D(0,".concat(offset, "px,0)");
+    }
+    return style;
+  };
+  // 确定当前active 元素
+  var getActive = function getActive(pace) {
+    if (pace) {
+      var _active = active + pace;
+      return range(_active, -1, childCount);
+    }
+    return active;
+  };
+  // 计算位移
+  var getOffset = function getOffset(active) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var currentPosition = active * Number(height);
+    var targetOffset = offset - currentPosition;
+    return targetOffset;
+  };
+  // 浏览器 帧 事件
+  var requestFrame = function requestFrame(fn) {
+    window.requestAnimationFrame.call(window, fn);
+  };
+  // 取值 方法
+  var range = function range(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+  };
+  // 重置首尾位置信息
+  var resettPosition = function resettPosition() {
+    _swiper.current.moving = true;
+    if (active <= -1) {
+      move({
+        pace: childCount
+      });
+    }
+    if (active >= childCount) {
+      move({
+        pace: -childCount
+      });
+    }
+  };
+  var b = cn('noticebar');
+  var noticebarClass = classNames({
+    'nut-noticebar-page': true,
+    withicon: closeMode,
+    close: closeMode,
+    wrapable: wrapable
+  });
+  useEffect(function () {
+    return function () {
+      stopAutoPlay();
+    };
+  }, []);
+  return React__default.createElement("div", {
+    className: "".concat(b(), " ").concat(className || ''),
+    style: style
+  }, showNoticeBar && direction === 'across' ? React__default.createElement("div", {
+    className: noticebarClass,
+    style: barStyle,
+    onClick: handleClick
+  }, iconShow() ? React__default.createElement("div", {
+    className: "left-icon",
+    style: {
+      backgroundImage: "url(".concat(iconBg() || '', ")")
+    }
+  }, !iconBg() ? React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: "notice",
+    size: "16",
+    color: color
+  }) : null) : null, React__default.createElement("div", {
+    ref: wrap,
+    className: "wrap"
+  }, React__default.createElement("div", {
+    ref: content,
+    className: "content ".concat(animationClass, " ").concat(isEllipsis() ? 'nut-ellipsis' : ''),
+    style: contentStyle,
+    onAnimationEnd: onAnimationEnd
+  }, children, text)), closeMode || rightIcon ? React__default.createElement("div", {
+    className: "right-icon",
+    onClick: onClickIcon
+  }, React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: rightIcon || 'close',
+    color: color
+  })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement("div", {
+    className: "nut-noticebar-vertical",
+    style: barStyle,
+    ref: container,
+    onClick: handleClick
+  }, iconShow() ? React__default.createElement("div", {
+    className: "left-icon",
+    style: {
+      backgroundImage: "url(".concat(iconBg() || '', ")")
+    }
+  }, !iconBg() ? React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: "notice",
+    size: "16",
+    color: color
+  }) : null) : null, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "nut-noticebar__inner",
+    ref: innerRef
+  }, scrollList.current.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "scroll-inner ",
+      style: itemStyle(index),
+      key: index,
+      onClick: function onClick(e) {
+        handleItemClick(e, item);
+      }
+    }, item);
+  }))) : React__default.createElement("div", {
+    className: "horseLamp_list",
+    style: horseLampStyle
+  }, scrollList.current.map(function (item, index) {
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      React__default.createElement("div", {
+        className: "horseLamp_list_item",
+        style: {
+          height: height
+        },
+        key: index,
+        onClick: function onClick(e) {
+          handleItemClick(e, item);
+        }
+      }, item)
+    );
+  })), React__default.createElement("div", {
+    className: "go",
+    onClick: function onClick(e) {
+      handleClickIcon(e);
+    }
+  }, rightIcon || (closeMode ? React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: rightIcon || 'close',
+    color: color,
+    size: "11px"
+  }) : null))) : null);
+};
+NoticeBar.defaultProps = defaultProps;
+NoticeBar.displayName = 'NutNoticeBar';
+export { NoticeBar as default };

package/dist/esm/Notify/style/index.js

@@ -0,0 +1,2 @@
+
+import '../../../packages/notify/notify.scss'