linkmore-design/lib/notification/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.getInstance = exports.default = void 0;
var _CheckCircleOutlined = _interopRequireDefault(require("@ant-design/icons/CheckCircleOutlined"));
var _CloseCircleOutlined = _interopRequireDefault(require("@ant-design/icons/CloseCircleOutlined"));
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
var _ExclamationCircleOutlined = _interopRequireDefault(require("@ant-design/icons/ExclamationCircleOutlined"));
var _InfoCircleOutlined = _interopRequireDefault(require("@ant-design/icons/InfoCircleOutlined"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcNotification = _interopRequireDefault(require("rc-notification"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = _interopRequireWildcard(require("../config-provider"));
var _useNotification = _interopRequireDefault(require("./hooks/useNotification"));
const notificationInstance = {};
let defaultDuration = 4.5;
let defaultTop = 24;
let defaultBottom = 24;
let defaultPrefixCls = '';
let defaultPlacement = 'topRight';
let defaultGetContainer;
let defaultCloseIcon;
let rtl = false;
let maxCount;
function setNotificationConfig(options) {
  const {
    duration,
    placement,
    bottom,
    top,
    getContainer,
    closeIcon,
    prefixCls
  } = options;
  if (prefixCls !== undefined) {
    defaultPrefixCls = prefixCls;
  }
  if (duration !== undefined) {
    defaultDuration = duration;
  }
  if (placement !== undefined) {
    defaultPlacement = placement;
  } else if (options.rtl) {
    defaultPlacement = 'topLeft';
  }
  if (bottom !== undefined) {
    defaultBottom = bottom;
  }
  if (top !== undefined) {
    defaultTop = top;
  }
  if (getContainer !== undefined) {
    defaultGetContainer = getContainer;
  }
  if (closeIcon !== undefined) {
    defaultCloseIcon = closeIcon;
  }
  if (options.rtl !== undefined) {
    rtl = options.rtl;
  }
  if (options.maxCount !== undefined) {
    maxCount = options.maxCount;
  }
}
function getPlacementStyle(placement, top = defaultTop, bottom = defaultBottom) {
  let style;
  switch (placement) {
    case 'top':
      style = {
        left: '50%',
        transform: 'translateX(-50%)',
        right: 'auto',
        top,
        bottom: 'auto'
      };
      break;
    case 'topLeft':
      style = {
        left: 0,
        top,
        bottom: 'auto'
      };
      break;
    case 'topRight':
      style = {
        right: 0,
        top,
        bottom: 'auto'
      };
      break;
    case 'bottom':
      style = {
        left: '50%',
        transform: 'translateX(-50%)',
        right: 'auto',
        top: 'auto',
        bottom
      };
      break;
    case 'bottomLeft':
      style = {
        left: 0,
        top: 'auto',
        bottom
      };
      break;
    default:
      style = {
        right: 0,
        top: 'auto',
        bottom
      };
      break;
  }
  return style;
}
function getNotificationInstance(args, callback) {
  const {
    placement = defaultPlacement,
    top,
    bottom,
    getContainer = defaultGetContainer,
    prefixCls: customizePrefixCls
  } = args;
  const {
    getPrefixCls,
    getIconPrefixCls
  } = (0, _configProvider.globalConfig)();
  const prefixCls = getPrefixCls('notification', customizePrefixCls || defaultPrefixCls);
  const iconPrefixCls = getIconPrefixCls();
  const cacheKey = `${prefixCls}-${placement}`;
  const cacheInstance = notificationInstance[cacheKey];
  if (cacheInstance) {
    Promise.resolve(cacheInstance).then(instance => {
      callback({
        prefixCls: `${prefixCls}-notice`,
        iconPrefixCls,
        instance
      });
    });
    return;
  }
  const notificationClass = (0, _classnames.default)(`${prefixCls}-${placement}`, {
    [`${prefixCls}-rtl`]: rtl === true
  });
  notificationInstance[cacheKey] = new Promise(resolve => {
    _rcNotification.default.newInstance({
      prefixCls,
      className: notificationClass,
      style: getPlacementStyle(placement, top, bottom),
      getContainer,
      maxCount
    }, notification => {
      resolve(notification);
      callback({
        prefixCls: `${prefixCls}-notice`,
        iconPrefixCls,
        instance: notification
      });
    });
  });
}
const typeToIcon = {
  success: _CheckCircleOutlined.default,
  info: _InfoCircleOutlined.default,
  error: _CloseCircleOutlined.default,
  warning: _ExclamationCircleOutlined.default
};
function getRCNoticeProps(args, prefixCls, iconPrefixCls) {
  const {
    duration: durationArg,
    icon,
    type,
    description,
    message,
    btn,
    onClose,
    onClick,
    key,
    style,
    className,
    closeIcon = defaultCloseIcon,
    progress = true,
    props
  } = args;
  const duration = durationArg === undefined ? defaultDuration : durationArg;
  let iconNode = null;
  if (icon) {
    iconNode = /*#__PURE__*/React.createElement("span", {
      className: `${prefixCls}-icon`
    }, args.icon);
  } else if (type) {
    iconNode = /*#__PURE__*/React.createElement(typeToIcon[type] || null, {
      className: `${prefixCls}-icon ${prefixCls}-icon-${type}`
    });
  }
  const closeIconToRender = /*#__PURE__*/React.createElement("span", {
    className: `${prefixCls}-close-x`
  }, closeIcon || /*#__PURE__*/React.createElement(_CloseOutlined.default, {
    className: `${prefixCls}-close-icon`
  }));
  const autoMarginTag = !description && iconNode ? /*#__PURE__*/React.createElement("span", {
    className: `${prefixCls}-message-single-line-auto-margin`
  }) : null;
  return {
    content: /*#__PURE__*/React.createElement(_configProvider.default, {
      iconPrefixCls: iconPrefixCls
    }, /*#__PURE__*/React.createElement("div", {
      className: iconNode ? `${prefixCls}-with-icon` : '',
      role: "alert"
    }, iconNode, /*#__PURE__*/React.createElement("div", {
      className: `${prefixCls}-message`
    }, autoMarginTag, message), /*#__PURE__*/React.createElement("div", {
      className: `${prefixCls}-description`
    }, description), btn ? /*#__PURE__*/React.createElement("span", {
      className: `${prefixCls}-btn`
    }, btn) : null, progress && duration > 0 && /*#__PURE__*/React.createElement("div", {
      className: "message_progress",
      style: {
        animationDuration: `${duration}s`
      }
    }))),
    duration,
    closable: true,
    closeIcon: closeIconToRender,
    onClose,
    onClick,
    key,
    style: style || {},
    className: (0, _classnames.default)(className, {
      [`${prefixCls}-${type}`]: !!type
    }, 'lm_notification'),
    props
  };
}
function notice(args) {
  getNotificationInstance(args, ({
    prefixCls,
    iconPrefixCls,
    instance
  }) => {
    instance.notice(getRCNoticeProps(args, prefixCls, iconPrefixCls));
  });
}
const api = {
  open: notice,
  close(key) {
    Object.keys(notificationInstance).forEach(cacheKey => Promise.resolve(notificationInstance[cacheKey]).then(instance => {
      instance.removeNotice(key);
    }));
  },
  config: setNotificationConfig,
  destroy() {
    Object.keys(notificationInstance).forEach(cacheKey => {
      Promise.resolve(notificationInstance[cacheKey]).then(instance => {
        instance.destroy();
      });
      delete notificationInstance[cacheKey]; // lgtm[js/missing-await]
    });
  }
};

['success', 'info', 'warning', 'error'].forEach(type => {
  api[type] = args => api.open({
    ...args,
    type
  });
});
api.warn = api.warning;
api.useNotification = (0, _useNotification.default)(getNotificationInstance, getRCNoticeProps);
/** @internal test Only function. Not work on production */
const getInstance = async cacheKey => process.env.NODE_ENV === 'test' ? notificationInstance[cacheKey] : null;
exports.getInstance = getInstance;
var _default = api;
exports.default = _default;