choerodon-ui/es/notification/Notice.js

An enterprise-class UI design language and React-based implementation

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { memo, useCallback, useEffect, useRef } from 'react';
import classNames from 'classnames';
import noop from 'lodash/noop';
import Icon from '../icon';

var Notice = function Notice(props) {
  var _classNames;

  var contentClassName = props.contentClassName,
      prefixCls = props.prefixCls,
      className = props.className,
      closable = props.closable,
      children = props.children,
      _props$closeIcon = props.closeIcon,
      closeIcon = _props$closeIcon === void 0 ? /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(prefixCls, "-close-icon"),
    type: "close"
  }) : _props$closeIcon,
      style = props.style,
      duration = props.duration,
      _props$onClose = props.onClose,
      onClose = _props$onClose === void 0 ? noop : _props$onClose,
      foldable = props.foldable,
      _props$offset = props.offset,
      offset = _props$offset === void 0 ? 0 : _props$offset,
      _props$scrollHeight = props.scrollHeight,
      scrollHeight = _props$scrollHeight === void 0 ? 0 : _props$scrollHeight,
      eventKey = props.eventKey;
  var noticeRef = useRef(null);
  var closeTimer = useRef(null);
  var clearCloseTimer = useCallback(function () {
    var current = closeTimer.current;

    if (current) {
      window.clearTimeout(current);
      closeTimer.current = null;
    }
  }, []);
  var close = useCallback(function () {
    clearCloseTimer();
    onClose(eventKey);
  }, [onClose, eventKey]);
  var startCloseTimer = useCallback(function () {
    if (duration) {
      closeTimer.current = window.setTimeout(close, duration * 1000);
    }
  }, [close]);
  useEffect(function () {
    startCloseTimer();
    return clearCloseTimer;
  }, [startCloseTimer]);
  var hideShadow = false;
  var noticeRefCurrnet = noticeRef.current;

  if (noticeRefCurrnet && foldable && typeof scrollHeight === 'number') {
    var bottomH = scrollHeight + offset - noticeRefCurrnet.offsetTop - noticeRefCurrnet.offsetHeight;

    if (noticeRefCurrnet.offsetTop < offset || bottomH < 0) {
      hideShadow = true;
    }
  }

  var componentClass = "".concat(prefixCls, "-notice");
  var classString = classNames(componentClass, className, (_classNames = {}, _defineProperty(_classNames, "".concat(componentClass, "-closable"), closable), _defineProperty(_classNames, "".concat(componentClass, "-hide-shadow"), hideShadow), _classNames));
  return /*#__PURE__*/React.createElement("div", {
    className: classString,
    style: style,
    onMouseEnter: clearCloseTimer,
    onMouseLeave: startCloseTimer,
    ref: noticeRef
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(componentClass, "-content"), contentClassName)
  }, children), closable && /*#__PURE__*/React.createElement("a", {
    tabIndex: 0,
    onClick: !hideShadow ? close : undefined,
    className: "".concat(componentClass, "-close")
  }, closeIcon || /*#__PURE__*/React.createElement("span", {
    className: "".concat(componentClass, "-close-x")
  })));
};

Notice.displayName = 'Notice';
var MemoNotice = /*#__PURE__*/memo(Notice);
MemoNotice.defaultProps = {
  duration: 1.5,
  style: {
    right: '50%'
  }
};
export default MemoNotice;
//# sourceMappingURL=Notice.js.map