choerodon-ui/lib/notification/Notice.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _icon = _interopRequireDefault(require("../icon"));

var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(ErrorBoundary, _React$Component);

  var _super = (0, _createSuper2["default"])(ErrorBoundary);

  function ErrorBoundary(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, ErrorBoundary);
    _this = _super.call(this, props);
    _this.state = {
      hasError: false
    };
    return _this;
  }

  (0, _createClass2["default"])(ErrorBoundary, [{
    key: "render",
    value: function render() {
      var children = this.props.children;
      var hasError = this.state.hasError;
      return !hasError ? children : null;
    }
  }], [{
    key: "getDerivedStateFromError",
    value: function getDerivedStateFromError() {
      return {
        hasError: true
      };
    }
  }]);
  return ErrorBoundary;
}(_react["default"].Component);

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["default"].createElement(_icon["default"], {
    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["default"] : _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 = (0, _react.useRef)(null);
  var closeTimer = (0, _react.useRef)(null);
  var clearCloseTimer = (0, _react.useCallback)(function () {
    var current = closeTimer.current;

    if (current) {
      window.clearTimeout(current);
      closeTimer.current = null;
    }
  }, []);
  var close = (0, _react.useCallback)(function () {
    clearCloseTimer();
    onClose(eventKey);
  }, [onClose, eventKey]);
  var startCloseTimer = (0, _react.useCallback)(function () {
    if (duration) {
      closeTimer.current = window.setTimeout(close, duration * 1000);
    }
  }, [close]);
  (0, _react.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 = (0, _classnames["default"])(componentClass, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(componentClass, "-closable"), closable), (0, _defineProperty2["default"])(_classNames, "".concat(componentClass, "-hide-shadow"), hideShadow), _classNames));
  return /*#__PURE__*/_react["default"].createElement(ErrorBoundary, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classString,
    style: style,
    onMouseEnter: clearCloseTimer,
    onMouseLeave: startCloseTimer,
    ref: noticeRef
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])("".concat(componentClass, "-content"), contentClassName)
  }, children), closable && /*#__PURE__*/_react["default"].createElement("a", {
    tabIndex: 0,
    onClick: !hideShadow ? close : undefined,
    className: "".concat(componentClass, "-close")
  }, closeIcon || /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(componentClass, "-close-x")
  }))));
};

Notice.displayName = 'Notice';
var MemoNotice = /*#__PURE__*/(0, _react.memo)(Notice);
MemoNotice.defaultProps = {
  duration: 1.5,
  style: {
    right: '50%'
  }
};
var _default = MemoNotice;
exports["default"] = _default;
//# sourceMappingURL=Notice.js.map