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

An enterprise-class UI design language and React components implementation

"use strict";

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

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

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

require("./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 = (0, _react.useState)(true),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

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

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

Alert.propTypes = {
  style: _propTypes.default.object,
  closable: _propTypes.default.bool,
  closeText: _propTypes.default.string,
  message: _propTypes.default.string,
  description: _propTypes.default.string,
  type: _propTypes.default.string,
  onClose: _propTypes.default.func
};
var _default = Alert;
exports.default = _default;