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

An enterprise-class UI design language and React components implementation

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React from "react";
import Notification from 'rc-notification';
import Icon from '../Icon';
import classnames from 'classnames';
import "./index.css";

var xNotification = function () {
  var notification = null;
  var adapterPos = {
    topLeft: {
      top: '24px',
      left: '24px'
    },
    topRight: {
      top: '24px',
      right: '24px'
    },
    bottomLeft: {
      bottom: '24px',
      left: '24px'
    },
    bottomRight: {
      bottom: '24px',
      right: '24px'
    }
  };
  var iconType = {
    success: 'FaRegCheckCircle',
    warning: 'FaRegMeh',
    info: 'FaRegLightbulb',
    error: 'FaRegTimesCircle'
  };
  var globalPlacement = '';
  /**
     * notice类型弹窗
     * @param {config}  object 通知框配置属性
     *   @param {type} string 通知窗类型
     *   @param {btn}  ReactNode 自定义关闭按钮
     *   @param {bottom}  number 消息从底部弹出时，距离底部的位置，单位像素
     *   @param {className}  string 自定义 CSS class
     *   @param {description}  string|ReactNode 通知提醒内容，必选
     *   @param {duration}  number 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
     *   @param {getContainer}  HTMLNode 配置渲染节点的输出位置
     *   @param {icon}  ReactNode 自定义图标
     *   @param {key}  string 当前通知唯一标志
     *   @param {message}  string|ReactNode 通知提醒标题，必选
     *   @param {onClose}  func 点击默认关闭按钮时触发的回调函数
     *   @param {onClick}  func 点击通知时触发的回调函数
     *   @param {top}  number 消息从顶部弹出时，距离顶部的位置，单位像素
     *   @param {closeIcon}  ReactNode 自定义关闭图标
     */

  var pop = function pop(config) {
    var type = config.type,
        bottom = config.bottom,
        className = config.className,
        description = config.description,
        _config$duration = config.duration,
        duration = _config$duration === void 0 ? 4.5 : _config$duration,
        _config$getContainer = config.getContainer,
        getContainer = _config$getContainer === void 0 ? function () {
      return document.body;
    } : _config$getContainer,
        icon = config.icon,
        key = config.key,
        message = config.message,
        _onClose = config.onClose,
        _onClick = config.onClick,
        top = config.top,
        _config$closable = config.closable,
        closable = _config$closable === void 0 ? true : _config$closable,
        closeIcon = config.closeIcon;
    notification.notice({
      content: /*#__PURE__*/React.createElement("div", {
        className: classnames('xNotice', className)
      }, (icon || ['info', 'success', 'error', 'warning'].indexOf(type) > -1) && /*#__PURE__*/React.createElement("div", {
        className: classnames('iconWrap', type)
      }, icon ? icon : /*#__PURE__*/React.createElement(Icon, {
        type: iconType[type]
      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        className: "xNoticeTit"
      }, message), /*#__PURE__*/React.createElement("div", {
        className: "xNoticeDesc"
      }, description))),
      key: key,
      closable: closable,
      getContainer: getContainer,
      onClose: function onClose() {
        _onClose && _onClose();
      },
      onClick: function onClick() {
        _onClick && _onClick();
      },
      closeIcon: closeIcon,
      duration: duration,
      style: {
        top: top,
        bottom: bottom
      }
    });
  };
  /**
     * 通知提示组件, 全局参数
     * @param {bottom} number 消息从底部弹出时，距离底部的位置，单位像素， 默认24
     * @param {duration} number 默认自动关闭延时，单位秒
     * @param {getContainer} HTMLNode 配置渲染节点的输出位置，默认document.body
     * @param {placement} string 弹出位置，可选 topLeft topRight bottomLeft bottomRight
     * @param {top} number 消息从顶部弹出时，距离顶部的位置，单位像素
     * @param {closeIcon} HTMLNode 自定义关闭图标
  */


  var config = function config(_config) {
    var duration = _config.duration,
        getContainer = _config.getContainer,
        placement = _config.placement,
        closeIcon = _config.closeIcon; // 赋值给全局的placement

    globalPlacement = placement;
    Notification.newInstance({
      style: _objectSpread({}, adapterPos[placement]),
      getContainer: getContainer,
      duration: duration || 4.5,
      closeIcon: closeIcon
    }, function (notice) {
      return notification = notice;
    });
  };

  var remove = function remove(key) {
    notification.removeNotice(key);
  };

  var destroy = function destroy() {
    notification.destroy();
  };

  if (notification) {
    return {
      config: config,
      pop: pop,
      remove: remove,
      destroy: destroy
    };
  } // 如果为创建实例，则创建默认实例


  Notification.newInstance({
    style: {
      right: '24px',
      top: '24px'
    }
  }, function (notice) {
    return notification = notice;
  });
  return {
    config: config,
    pop: pop,
    remove: remove,
    destroy: destroy
  };
}();

export default xNotification;