ps-frame-father/es/components/Alert/index.js

An enterprise-class UI design language and React components implementation

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from "react";
import { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import "./index.css";
/**
 * 警告提示组件
 * @param {style} object 更改Alert样式
 * @param {closable} bool 是否显示关闭按钮, 默认不显示
 * @param {closeText} string|reactNode 自定义关闭按钮
 * @param {message} string 警告提示内容
 * @param {description} string 警告提示的辅助性文字
 * @param {type} string 警告的类型
 * @param {onClose} func 关闭时触发的事件
 */

function Alert(props) {
  var style = props.style,
      closable = props.closable,
      closeText = props.closeText,
      message = props.message,
      description = props.description,
      type = props.type,
      onClose = props.onClose;

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

  var handleColse = function handleColse() {
    setVisible(false);
    onClose && onClose();
  };

  return visible ? /*#__PURE__*/React.createElement("div", {
    className: classnames('xAlertWrap', type || 'warning'),
    style: _objectSpread({
      opacity: visible ? '1' : '0'
    }, style)
  }, /*#__PURE__*/React.createElement("div", {
    className: "alertMes"
  }, message), /*#__PURE__*/React.createElement("div", {
    className: "alertDesc"
  }, description), !!closable && /*#__PURE__*/React.createElement("span", {
    className: "closeBtn",
    onClick: handleColse
  }, closeText ? closeText : 'x')) : null;
}

Alert.propTypes = {
  style: PropTypes.object,
  closable: PropTypes.bool,
  closeText: PropTypes.string,
  message: PropTypes.string,
  description: PropTypes.string,
  type: PropTypes.string,
  onClose: PropTypes.func
};
export default Alert;