zarm/es/notice-bar/index.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import React, { forwardRef, useRef, useState } from 'react';
import { Volume as VolumeIcon } from '@zarm-design/icons';
import { createBEM } from '@zarm-design/bem';
import Message from '../message';
import { ConfigContext } from '../config-provider';
import useAnimationDuration from './hooks';
var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
  var children = props.children,
      speed = props.speed,
      delay = props.delay,
      onClose = props.onClose,
      className = props.className,
      style = props.style,
      restProps = _objectWithoutProperties(props, ["children", "speed", "delay", "onClose", "className", "style"]);

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = createBEM('notice-bar', {
    prefixCls: prefixCls
  });
  var NOTICEBAR_KEYFRAME_NAME = "".concat(prefixCls, "-notice-bar-scrolling");
  var noticeBarRef = ref || /*#__PURE__*/React.createRef();
  var contentRef = useRef(null);
  var animationDuration = useAnimationDuration({
    noticeBarRef: noticeBarRef,
    contentRef: contentRef,
    delay: delay,
    speed: speed,
    keyframeName: NOTICEBAR_KEYFRAME_NAME
  });
  if (!visible) return null;

  function handleClose(e) {
    setVisible(false);
    onClose === null || onClose === void 0 ? void 0 : onClose(e);
  }

  var cls = bem([className]);
  return /*#__PURE__*/React.createElement("div", {
    className: cls,
    style: style,
    ref: noticeBarRef
  }, /*#__PURE__*/React.createElement(Message, _extends({}, restProps, {
    onClose: handleClose
  }), /*#__PURE__*/React.createElement("div", {
    className: bem('body')
  }, /*#__PURE__*/React.createElement("div", {
    className: bem('content'),
    ref: contentRef,
    style: animationDuration > 0 ? {
      WebkitAnimation: "".concat(NOTICEBAR_KEYFRAME_NAME, " ").concat(animationDuration, "ms linear infinite"),
      animation: "".concat(NOTICEBAR_KEYFRAME_NAME, " ").concat(animationDuration, "ms linear infinite")
    } : undefined
  }, children))));
});
NoticeBar.displayName = 'NoticeBar';
NoticeBar.defaultProps = {
  theme: 'warning',
  icon: /*#__PURE__*/React.createElement(VolumeIcon, null),
  hasArrow: false,
  closable: false,
  speed: 50,
  delay: 2000
};
export default NoticeBar;