acud/es/toast/index.js

acg react 组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
 * @file toast组件 显示倒计时
 * @author jianghaoran01
 */
import React, { useState, useEffect } from 'react';
import { useInterval } from 'ahooks';
import classNames from 'classnames';
import { uniqueId } from 'lodash';
import NotificationApi from './base';
import ConfigProvider, { globalConfig, defaultPrefixCls as providerDefaultPrefixCls } from '../config-provider';
var _globalConfig = globalConfig(),
  getPrefixCls = _globalConfig.getPrefixCls;
var PREFIX = 'notification-hastime';
var TOST_CLS_PREFIX = '-notification-toast-wrap';
var defaultPrefixCls = providerDefaultPrefixCls;
var maxToastArrLength = 4; // 最多显示多少个toast
/**
 * 代理对象
 * 使用时: target.xxx会全部丢给notification 类似notification.xxx
 */
var target = {};
var toastArr = [];
var paramIgnoreFun = ['destroy'];
// 向数组尾部添加一个元素
function addToastKey(key) {
  toastArr.push(key);
}
// 弹出数组头部元素
function unshiftToast() {
  return toastArr.splice(0, 1)[0];
}
// 移除数组元素
function removeToastKey(key) {
  for (var i = 0; i < toastArr.length; i++) {
    if (key === toastArr[i]) {
      toastArr.splice(i, 1);
      break;
    }
  }
}
var ToastDom = function ToastDom(props) {
  var _props$message = props.message,
    message = _props$message === void 0 ? '' : _props$message,
    description = props.description,
    countdown = props.countdown,
    notificationKey = props.notificationKey,
    _props$onClose = props.onClose,
    onClose = _props$onClose === void 0 ? null : _props$onClose,
    customizePrefixCls = props.prefixCls;
  var _useState = useState(countdown),
    _useState2 = _slicedToArray(_useState, 2),
    counter = _useState2[0],
    setCounter = _useState2[1];
  // const prefixCls = getPrefixCls('toast-wrap', '');
  var prefixCls = getPrefixCls('', customizePrefixCls || defaultPrefixCls) + TOST_CLS_PREFIX;
  var clear = useInterval(function () {
    counter > 0 && setCounter(counter - 1);
  }, 1000);
  useEffect(function () {
    if (counter <= 0) {
      removeToastKey(notificationKey);
      NotificationApi.destroy(notificationKey);
      onClose && onClose();
      clear();
    }
  }, [counter]);
  // useEffect(() => {
  //     return () => {
  //         clearTimeout(timerID);
  //     }
  // }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: getPrefixCls('', customizePrefixCls || defaultPrefixCls) + TOST_CLS_PREFIX
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(getPrefixCls('', customizePrefixCls || defaultPrefixCls)).concat(TOST_CLS_PREFIX, "-left"), _defineProperty({}, prefixCls + '-no-description', !description))
  }, message instanceof Error ? message.toString() : message), counter === undefined ? null : /*#__PURE__*/React.createElement("div", {
    className: getPrefixCls('', customizePrefixCls || defaultPrefixCls) + TOST_CLS_PREFIX + '-right'
  }, "(", counter, /*#__PURE__*/React.createElement("span", null, "s"), ")"));
};
function DescriptionDom(props) {
  var description = props.description;
  return description ? /*#__PURE__*/React.createElement("div", {
    className: "description-wrap"
  }, description) : null;
}
var handler = {
  get: function get() {
    var name = arguments.length <= 1 ? undefined : arguments[1];
    // 关闭、删除提示可以根据用户传参直接调用，避免key错赋值
    if (paramIgnoreFun.includes(name)) {
      return function (props) {
        return Reflect.get(NotificationApi, name)(props);
      };
    }
    // let key = new Date().getTime() + ''; // 通过key来强制关闭notification
    // const key = Symbol('key');
    // let key = Math.random();
    var key = uniqueId();
    return function (props) {
      // 定义默认图标
      var iconProps = {
        icon: null
      };
      var args = _extends(_extends({
        key: key,
        type: 'info',
        autoClose: true
      }, iconProps), props);
      // 设置最大显示数
      if (name === 'config' && props.maxCount) {
        maxToastArrLength = props.maxCount;
      }
      // 设置prefixcls 兼容antd
      // 升级rc-notificon5后通过ConfigProvider.config来配置prefixcls
      if (name === 'config' && props.prefixCls) {
        defaultPrefixCls = props.prefixCls;
        ConfigProvider.config({
          prefixCls: props.prefixCls
        });
      }
      // key相同时不重新渲染
      if (!~toastArr.indexOf(args.key)) {
        // autoClose不为true时，不添加到toastArr，即不受maxCount限制
        if (args.autoClose) {
          addToastKey(args.key);
        }
        if (toastArr.length > maxToastArrLength) {
          NotificationApi.destroy(unshiftToast());
        }
      }
      // 初始化倒计时
      // let tempDuration;
      // if (!args.duration) {
      //     tempDuration = 0;
      // }
      // else {
      //     tempDuration = args.duration;
      // }
      var tempDuration = args.duration;
      args.duration = 0;
      // 设置样式 有描述和没描述间距不一样
      var tempClassName = (props === null || props === void 0 ? void 0 : props.className) + ' ' + PREFIX;
      if (args.description) {
        tempClassName += ' ' + getPrefixCls('', (props === null || props === void 0 ? void 0 : props.prefixCls) || defaultPrefixCls) + '-notification-has-description';
      }
      if (props && props.className) {
        args.className = props.className + ' ' + tempClassName;
      } else {
        args.className = tempClassName;
      }
      // 设置DOM
      args.message = /*#__PURE__*/React.createElement(ToastDom, {
        message: args.message,
        description: args.description,
        countdown: args.autoClose ? tempDuration : undefined // 同时设置了duration和autoClose，优先使用autoClose
        ,
        notificationKey: args.key,
        onClose: props === null || props === void 0 ? void 0 : props.onClose,
        prefixCls: props === null || props === void 0 ? void 0 : props.prefixCls
      });
      args.description = /*#__PURE__*/React.createElement(DescriptionDom, {
        description: args.description
      });
      return Reflect.get(NotificationApi, name)(args);
    };
  }
};
var toast = new Proxy(target, handler);
export default toast;