linkmore-design/lib/alert/index.js

🌈 🚀lm组件库。🚀

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _CheckCircleFilled = _interopRequireDefault(require("@ant-design/icons/CheckCircleFilled"));
var _CheckCircleOutlined = _interopRequireDefault(require("@ant-design/icons/CheckCircleOutlined"));
var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
var _CloseCircleOutlined = _interopRequireDefault(require("@ant-design/icons/CloseCircleOutlined"));
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
var _ExclamationCircleFilled = _interopRequireDefault(require("@ant-design/icons/ExclamationCircleFilled"));
var _ExclamationCircleOutlined = _interopRequireDefault(require("@ant-design/icons/ExclamationCircleOutlined"));
var _InfoCircleFilled = _interopRequireDefault(require("@ant-design/icons/InfoCircleFilled"));
var _InfoCircleOutlined = _interopRequireDefault(require("@ant-design/icons/InfoCircleOutlined"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcMotion = _interopRequireDefault(require("rc-motion"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _getDataOrAriaProps = _interopRequireDefault(require("../_util/getDataOrAriaProps"));
var _reactNode = require("../_util/reactNode");
var _ErrorBoundary = _interopRequireDefault(require("./ErrorBoundary"));
var _reactFastMarquee = _interopRequireDefault(require("react-fast-marquee"));
const iconMapFilled = {
  success: _CheckCircleFilled.default,
  info: _InfoCircleFilled.default,
  error: _CloseCircleFilled.default,
  warning: _ExclamationCircleFilled.default
};
const iconMapOutlined = {
  success: _CheckCircleOutlined.default,
  info: _InfoCircleOutlined.default,
  error: _CloseCircleOutlined.default,
  warning: _ExclamationCircleOutlined.default
};
const IconNode = props => {
  const {
    description,
    icon,
    prefixCls,
    type
  } = props;
  const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
  if (icon) {
    return (0, _reactNode.replaceElement)(icon, /*#__PURE__*/React.createElement("span", {
      className: `${prefixCls}-icon`
    }, icon), () => ({
      className: (0, _classnames.default)(`${prefixCls}-icon`, {
        [icon.props.className]: icon.props.className
      })
    }));
  }
  return /*#__PURE__*/React.createElement(iconType, {
    className: `${prefixCls}-icon`
  });
};
const CloseIcon = props => {
  const {
    isClosable,
    closeText,
    prefixCls,
    closeIcon,
    handleClose
  } = props;
  return isClosable ? /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: handleClose,
    className: `${prefixCls}-close-icon`,
    tabIndex: 0
  }, closeText ? /*#__PURE__*/React.createElement("span", {
    className: `${prefixCls}-close-text`
  }, closeText) : closeIcon) : null;
};
const Alert = ({
  description,
  prefixCls: customizePrefixCls,
  message,
  banner,
  className = '',
  style,
  onMouseEnter,
  onMouseLeave,
  onClick,
  afterClose,
  showIcon,
  closable,
  closeText,
  closeIcon = /*#__PURE__*/React.createElement(_CloseOutlined.default, null),
  action,
  duration,
  marquee,
  ...props
}) => {
  const [closed, setClosed] = React.useState(false);
  const [hovering, setHovering] = React.useState(false);
  const ref = React.useRef();
  const {
    getPrefixCls,
    direction
  } = React.useContext(_configProvider.ConfigContext);
  const prefixCls = getPrefixCls('alert', customizePrefixCls);
  const handleClose = e => {
    setClosed(true);
    props.onClose?.(e);
  };
  const getType = () => {
    const {
      type
    } = props;
    if (type !== undefined) {
      return type;
    }
    // banner 模式默认为警告
    return banner ? 'warning' : 'info';
  };

  // closeable when closeText is assigned
  const isClosable = closeText ? true : closable;
  const type = getType();

  // banner 模式默认有 Icon
  const isShowIcon = banner && showIcon === undefined ? true : showIcon;
  const alertCls = (0, _classnames.default)(prefixCls, `${prefixCls}-${type}`, {
    [`${prefixCls}-with-description`]: !!description,
    [`${prefixCls}-no-icon`]: !isShowIcon,
    [`${prefixCls}-banner`]: !!banner,
    [`${prefixCls}-rtl`]: direction === 'rtl'
  }, className, 'lm_alert');

  // @ts-ignore
  React.useEffect(() => {
    if (!hovering && duration > 0) {
      const timeout = setTimeout(() => {
        handleClose();
      }, duration * 1000);
      return () => {
        clearTimeout(timeout);
      };
    }
  }, [duration, hovering]);
  const dataOrAriaProps = (0, _getDataOrAriaProps.default)(props);
  return /*#__PURE__*/React.createElement(_rcMotion.default, {
    visible: !closed,
    motionName: `${prefixCls}-motion`,
    motionAppear: false,
    motionEnter: false,
    onLeaveStart: node => ({
      maxHeight: node.offsetHeight
    }),
    onLeaveEnd: afterClose
  }, ({
    className: motionClassName,
    style: motionStyle
  }) => /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
    ref: ref,
    "data-show": !closed,
    className: (0, _classnames.default)(alertCls, motionClassName),
    style: {
      ...style,
      ...motionStyle
    },
    onMouseEnter: e => {
      setHovering(true);
      onMouseEnter?.(e);
    },
    onMouseLeave: e => {
      setHovering(false);
      onMouseLeave?.(e);
    },
    onClick: onClick,
    role: "alert"
  }, dataOrAriaProps), isShowIcon ? /*#__PURE__*/React.createElement(IconNode, {
    description: description,
    icon: props.icon,
    prefixCls: prefixCls,
    type: type
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-content`
  }, marquee ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactFastMarquee.default, (0, _extends2.default)({
    pauseOnHover: true,
    gradient: false
  }, marquee), message ? /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-message`
  }, message) : null), description ? /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-description`
  }, description) : null) : /*#__PURE__*/React.createElement(React.Fragment, null, message ? /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-message`
  }, message) : null, description ? /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-description`
  }, description) : null)), action ? /*#__PURE__*/React.createElement("div", {
    className: `${prefixCls}-action`
  }, action) : null, /*#__PURE__*/React.createElement(CloseIcon, {
    isClosable: !!isClosable,
    closeText: closeText,
    prefixCls: prefixCls,
    closeIcon: closeIcon,
    handleClose: handleClose
  }), duration > 0 && /*#__PURE__*/React.createElement("div", {
    className: "alert_progress",
    style: {
      animationDuration: `${duration}s`
    }
  })));
};
Alert.ErrorBoundary = _ErrorBoundary.default;
Alert.Marquee = _reactFastMarquee.default;
var _default = Alert;
exports.default = _default;