gui-one-nutui-react-taro/dist/esm/toast.taro-86862dff.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "id", "style", "icon", "iconSize", "msg", "bottom", "duration", "center", "type", "title", "customClass", "size", "textAlignCenter", "bgColor", "cover", "coverColor", "closeOnClickOverlay", "visible", "onClose"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { c as cn } from './bem-893ad28d.js';
import { I as Icon } from './icon-8dc4de10.js';
var defaultProps = {
  id: '',
  style: {},
  icon: null,
  iconSize: '20',
  msg: '',
  bottom: '30px',
  duration: 2,
  center: true,
  type: 'text',
  title: '',
  customClass: '',
  size: 'base',
  textAlignCenter: true,
  bgColor: 'rgba(0, 0, 0, .8)',
  cover: false,
  coverColor: 'rgba(0, 0, 0, 0)',
  closeOnClickOverlay: false,
  visible: false,
  onClose: function onClose() {} // 未实现
};
// export default class Notification extends React.PureComponent<NotificationProps> {
var Toast = function Toast(props) {
  var _classNames;
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    children = _defaultProps$props.children,
    id = _defaultProps$props.id,
    style = _defaultProps$props.style,
    icon = _defaultProps$props.icon,
    iconSize = _defaultProps$props.iconSize,
    msg = _defaultProps$props.msg,
    bottom = _defaultProps$props.bottom,
    duration = _defaultProps$props.duration,
    center = _defaultProps$props.center,
    type = _defaultProps$props.type,
    title = _defaultProps$props.title,
    customClass = _defaultProps$props.customClass,
    size = _defaultProps$props.size,
    textAlignCenter = _defaultProps$props.textAlignCenter,
    bgColor = _defaultProps$props.bgColor,
    cover = _defaultProps$props.cover,
    coverColor = _defaultProps$props.coverColor,
    closeOnClickOverlay = _defaultProps$props.closeOnClickOverlay,
    visible = _defaultProps$props.visible,
    onClose = _defaultProps$props.onClose,
    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
  var timer;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    openState = _useState2[0],
    SetOpenState = _useState2[1];
  useEffect(function () {
    if (visible) {
      SetOpenState(true);
      show();
    } else {
      hide();
    }
  }, [visible]);
  var clearTimer = function clearTimer() {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };
  var hide = function hide() {
    SetOpenState(false);
    onClose();
  };
  var show = function show() {
    clearTimer();
    if (duration) {
      timer = setTimeout(function () {
        hide();
      }, duration * 1000);
    }
  };
  var clickCover = function clickCover() {
    if (closeOnClickOverlay) {
      hide();
    }
  };
  var toastBem = cn('toast');
  var hasIcon = function hasIcon() {
    if (type !== 'text') {
      return true;
    }
    return !!icon;
  };
  var iconName = function iconName() {
    if (icon) {
      return icon;
    }
    return {
      success: 'success',
      fail: 'failure',
      warn: 'tips',
      loading: 'loading'
    }[type];
  };
  var classes = classNames((_classNames = {
    'nut-toast-center': center,
    'nut-toast-has-icon': icon,
    'nut-toast-cover': cover,
    'nut-toast-loading': type === 'loading'
  }, _defineProperty(_classNames, "".concat(customClass), true), _defineProperty(_classNames, "nut-toast-".concat(size), true), _classNames));
  return React__default.createElement(React__default.Fragment, null, openState ? React__default.createElement("div", {
    className: "".concat(toastBem(), " ").concat(classes),
    id: id,
    style: _objectSpread({
      bottom: center ? 'auto' : "".concat(bottom),
      backgroundColor: cover ? coverColor : ''
    }, style),
    onClick: function onClick() {
      clickCover();
    }
  }, React__default.createElement("div", {
    className: toastBem('inner'),
    style: {
      textAlign: textAlignCenter ? 'center' : 'left',
      backgroundColor: bgColor
    }
  }, hasIcon() ? React__default.createElement("p", {
    className: toastBem('icon-wrapper')
  }, React__default.createElement(Icon, {
    name: iconName(),
    color: "#ffffff",
    size: iconSize
  })) : null, title ? React__default.createElement("div", {
    className: "nut-toast-title"
  }, title) : null, React__default.createElement("span", {
    className: toastBem('text')
  }, msg))) : null);
};
Toast.defaultProps = defaultProps;
Toast.displayName = 'NutToast';
export { Toast as T };