gui-one-nutui-react-taro/dist/esm/notify.taro-d9c48fae.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 = ["id", "children", "style", "msg", "color", "background", "type", "className", "position", "isWrapTeleport", "visible", "duration", "onClosed", "onClick"];
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 { CSSTransition } from 'react-transition-group';
import { c as cn } from './bem-893ad28d.js';
var defaultProps = {
  id: '',
  msg: '',
  color: '',
  duration: 3000,
  type: 'danger',
  className: '',
  background: '',
  position: 'top',
  isWrapTeleport: true,
  visible: false,
  onClosed: function onClosed() {},
  onClick: function onClick() {}
};
var Notify = function Notify(props) {
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    id = _defaultProps$props.id,
    children = _defaultProps$props.children,
    style = _defaultProps$props.style,
    msg = _defaultProps$props.msg,
    color = _defaultProps$props.color,
    background = _defaultProps$props.background,
    type = _defaultProps$props.type,
    className = _defaultProps$props.className,
    position = _defaultProps$props.position,
    isWrapTeleport = _defaultProps$props.isWrapTeleport,
    visible = _defaultProps$props.visible,
    duration = _defaultProps$props.duration,
    onClosed = _defaultProps$props.onClosed,
    onClick = _defaultProps$props.onClick,
    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
  var timer;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showNotify = _useState2[0],
    SetShow = _useState2[1];
  useEffect(function () {
    if (visible) {
      SetShow(true);
      show();
    } else {
      hide();
    }
  }, [visible]);
  var clickHandle = function clickHandle() {
    onClick();
  };
  var show = function show() {
    clearTimer();
    if (duration) {
      timer = setTimeout(function () {
        hide();
      }, duration);
    }
  };
  var clearTimer = function clearTimer() {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };
  var hide = function hide() {
    SetShow(false);
    if (id) {
      var element = document.getElementById(id);
      element && element.parentNode && element.parentNode.removeChild(element);
    }
    onClosed();
  };
  cn('notify');
  var classes = classNames(_defineProperty({
    'popup-top': position === 'top',
    'popup-bottom': position === 'bottom',
    'nut-notify': true
  }, "nut-notify--".concat(type), true));
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(CSSTransition, {
    "in": showNotify,
    timeout: 300,
    classNames: "fade",
    unmountOnExit: true,
    appear: true,
    position: position,
    isWrapTeleport: isWrapTeleport,
    id: id
  }, React__default.createElement("div", {
    className: "".concat(classes, " ").concat(className),
    style: {
      color: "".concat(color || ''),
      background: "".concat(background || '')
    },
    onClick: clickHandle
  }, children || msg)));
};
Notify.defaultProps = defaultProps;
Notify.displayName = 'NutNotify';
export { Notify as N };