react-widget-popup/esm/index.js

``` npm install --save react-widget-popup ```

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

import React, { Fragment } from "react";
import { findDOMNode } from "react-dom";
import classnames from "classnames";
import TransitionGroupContext from "react-transition-group/TransitionGroupContext";
import Transition, { EXITED } from "react-transition-group/Transition";
import CSSTransition from "react-transition-group/CSSTransition";
export var version = "3.4.8";
export var Popup = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Popup, _React$Component);

  var _super = _createSuper(Popup);

  function Popup() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "transitionStatus", EXITED);

    _defineProperty(_assertThisInitialized(_this), "inTransition", false);

    _defineProperty(_assertThisInitialized(_this), "inMaskTransition", false);

    _defineProperty(_assertThisInitialized(_this), "rootInstance", void 0);

    _defineProperty(_assertThisInitialized(_this), "popupInstance", void 0);

    _defineProperty(_assertThisInitialized(_this), "maskInstance", void 0);

    _defineProperty(_assertThisInitialized(_this), "refHandlers", {
      root: function root(node) {
        return _this.rootInstance = node;
      },
      popup: function popup(node) {
        return _this.popupInstance = node;
      },
      mask: function mask(node) {
        return _this.maskInstance = node;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "addEndListener", function (_, cb) {
      var _transition$addEndLis;

      var transition = _this.props.transition;
      transition === null || transition === void 0 ? void 0 : (_transition$addEndLis = transition.addEndListener) === null || _transition$addEndLis === void 0 ? void 0 : _transition$addEndLis.call(transition, findDOMNode(_this.popupInstance), cb);
    });

    return _this;
  }

  var _proto = Popup.prototype;

  _proto.getRootDOM = function getRootDOM() {
    return findDOMNode(this.rootInstance);
  };

  _proto.getPopupDOM = function getPopupDOM() {
    return findDOMNode(this.popupInstance);
  };

  _proto.getMaskDOM = function getMaskDOM() {
    return findDOMNode(this.maskInstance);
  };

  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return nextProps.forceRender || !(EXITED === this.transitionStatus && !nextProps.visible);
  };

  _proto.componentDidMount = function componentDidMount() {
    var _this$props = this.props,
        lazy = _this$props.lazy,
        visible = _this$props.visible,
        mask = _this$props.mask;
    var rootElement = findDOMNode(this.rootInstance);
    var popupElement = findDOMNode(this.popupInstance);
    var maskElement = findDOMNode(this.maskInstance);

    if (!visible && !lazy) {
      if (rootElement) {
        rootElement.style.display = "none"; // @ts-ignore

        rootElement.__popupHide = true;
      }

      if (popupElement) {
        popupElement.style.display = "none"; // @ts-ignore

        popupElement.__popupHide = true;
      }

      if (maskElement) {
        maskElement.style.display = "none"; // @ts-ignore

        maskElement.__popupHide = true;
      }
    }

    if (visible && !mask) {
      if (maskElement) {
        maskElement.style.display = "none"; // @ts-ignore

        maskElement.__popupHide = true;
      }
    }
  };

  _proto.onEnter = function onEnter(_ref, isMask, node, appearing) {
    var _onEnter = _ref.onEnter;
    var getPosition = this.props.getPosition;
    var rootElement = findDOMNode(this.rootInstance);
    var popupElement = findDOMNode(this.popupInstance);
    var maskElement = findDOMNode(this.maskInstance);

    if (isMask) {
      this.inMaskTransition = true;
    } else {
      this.inTransition = true;
    } // if (!destroyOnClose) {
    //@ts-ignore


    if (rootElement && rootElement.__popupHide) {
      rootElement.style.display = ""; //@ts-ignore

      delete rootElement.__popupHide;
    } //@ts-ignore


    if (!isMask && popupElement && popupElement.__popupHide) {
      popupElement.style.display = ""; //@ts-ignore

      delete popupElement.__popupHide;
    } //@ts-ignore


    if (isMask && maskElement && maskElement.__popupHide) {
      maskElement.style.display = ""; //@ts-ignore

      delete maskElement.__popupHide;
    } // }


    if (!isMask && getPosition) {
      var pos = getPosition(node);

      var transform = function transform(v) {
        return typeof v === "number" ? v + "px" : v;
      };

      if (pos) {
        if ("left" in pos) {
          node.style.left = transform(pos.left);
        }

        if ("top" in pos) {
          node.style.top = transform(pos.top);
        }

        if ("right" in pos) {
          node.style.right = transform(pos.right);
        }

        if ("bottom" in pos) {
          node.style.bottom = transform(pos.bottom);
        }
      }
    }

    if (_onEnter) {
      _onEnter(node, appearing);
    }
  };

  _proto.onEntered = function onEntered(_ref2, isMask, node, appearing) {
    var _onEntered = _ref2.onEntered;

    if (isMask) {
      this.inMaskTransition = false;
    } else {
      this.inTransition = false;
    }

    if (_onEntered) {
      _onEntered(node, appearing);
    }
  };

  _proto.onExit = function onExit(_ref3, isMask, node) {
    var _onExit = _ref3.onExit;

    if (isMask) {
      this.inMaskTransition = true;
    } else {
      this.inTransition = true;
    }

    if (_onExit) {
      _onExit(node);
    }
  };

  _proto.onExited = function onExited(_ref4, isMask, node) {
    var _onExited = _ref4.onExited;
    var _this$props2 = this.props,
        destroyOnClose = _this$props2.destroyOnClose,
        visible = _this$props2.visible;
    var rootElement = findDOMNode(this.rootInstance);
    var popupElement = findDOMNode(this.popupInstance);
    var maskElement = findDOMNode(this.maskInstance);

    if (isMask) {
      this.inMaskTransition = false;
    } else {
      this.inTransition = false;
    }

    if (!destroyOnClose) {
      if (!visible && !this.inMaskTransition && !this.inTransition && rootElement) {
        rootElement.style.display = "none"; // @ts-ignore

        rootElement.__popupHide = true;
      }

      if (!isMask && popupElement) {
        popupElement.style.display = "none"; // @ts-ignore

        popupElement.__popupHide = true;
      }

      if (isMask && maskElement) {
        maskElement.style.display = "none"; // @ts-ignore

        maskElement.__popupHide = true;
      }
    }

    if (_onExited) {
      _onExited(node);
    }
  };

  _proto.renderPopupMask = function renderPopupMask() {
    var _classnames;

    var _this$props3 = this.props,
        prefixCls = _this$props3.prefixCls,
        visible = _this$props3.visible,
        mask = _this$props3.mask,
        maskProps = _this$props3.maskProps,
        maskStyle = _this$props3.maskStyle,
        maskClassName = _this$props3.maskClassName,
        maskTransition = _this$props3.maskTransition,
        lazy = _this$props3.lazy,
        destroyOnClose = _this$props3.destroyOnClose,
        fixed = _this$props3.fixed,
        maskComponent = _this$props3.maskComponent;
    var MaskComponent = maskComponent;
    var classes = classnames((_classnames = {}, _classnames[prefixCls + "-mask"] = true, _classnames[prefixCls + "-mask-fixed"] = fixed, _classnames), maskProps.className, maskClassName);
    var TransitionComponent = maskTransition.classNames ? CSSTransition : Transition;
    return /*#__PURE__*/React.createElement(TransitionComponent, _extends({
      enter: true,
      exit: true,
      appear: true,
      addEndListener: function addEndListener(_, cb) {
        return maskTransition.timeout == null && cb();
      }
    }, maskTransition, {
      in: mask && visible,
      onEnter: this.onEnter.bind(this, maskTransition, true),
      onEntered: this.onEntered.bind(this, maskTransition, true),
      onExit: this.onExit.bind(this, maskTransition, true),
      onExited: this.onExited.bind(this, maskTransition, true),
      unmountOnExit: destroyOnClose,
      mountOnEnter: lazy
    }), /*#__PURE__*/React.createElement(MaskComponent, _extends({}, maskProps, {
      ref: this.refHandlers.mask,
      style: Object.assign({}, maskStyle, {}, maskProps.style),
      className: classes
    })));
  };

  _proto.render = function render() {
    var _classnames2,
        _this2 = this;

    var _this$props4 = this.props,
        style = _this$props4.style,
        prefixCls = _this$props4.prefixCls,
        className = _this$props4.className,
        fixed = _this$props4.fixed,
        visible = _this$props4.visible,
        children = _this$props4.children,
        lazy = _this$props4.lazy,
        destroyOnClose = _this$props4.destroyOnClose,
        rootClassName = _this$props4.rootClassName,
        rootStyle = _this$props4.rootStyle,
        rootProps = _this$props4.rootProps,
        rootComponent = _this$props4.rootComponent,
        component = _this$props4.component,
        transition = _this$props4.transition,
        wrapContent = _this$props4.wrapContent,
        disableMask = _this$props4.disableMask,
        childProps = _objectWithoutProperties(_this$props4, ["style", "prefixCls", "className", "fixed", "visible", "children", "lazy", "destroyOnClose", "rootClassName", "rootStyle", "rootProps", "rootComponent", "component", "transition", "wrapContent", "disableMask"]);

    var RootComponent = rootComponent;
    var Component = component;
    delete childProps.mask;
    delete childProps.maskProps;
    delete childProps.maskStyle;
    delete childProps.maskClassName;
    delete childProps.maskComponent;
    delete childProps.maskTransition;
    delete childProps.getPosition;
    delete childProps.forceRender;
    var rootComponentProps = Object.assign({}, rootProps, {
      className: classnames(prefixCls + "-root", rootClassName, rootProps.className),
      style: Object.assign({}, rootStyle, {}, rootProps.style)
    });

    if (RootComponent === Fragment) {
      rootComponentProps = {};
    }

    var classes = classnames(prefixCls, (_classnames2 = {}, _classnames2[prefixCls + "-fixed"] = fixed, _classnames2), className);
    var TransitionComponent = transition.classNames ? CSSTransition : Transition;
    var popup = /*#__PURE__*/React.createElement(RootComponent, _extends({}, rootComponentProps, {
      ref: this.refHandlers.root
    }), !disableMask && this.renderPopupMask(), wrapContent( /*#__PURE__*/React.createElement(TransitionComponent, _extends({
      enter: true,
      exit: true,
      appear: true,
      addEndListener: function addEndListener(_, cb) {
        return transition.timeout == null && cb();
      }
    }, transition, {
      in: visible,
      onEnter: this.onEnter.bind(this, transition, false),
      onEntered: this.onEntered.bind(this, transition, false),
      onExit: this.onExit.bind(this, transition, false),
      onExited: this.onExited.bind(this, transition, false),
      unmountOnExit: destroyOnClose,
      mountOnEnter: lazy
    }), function (status) {
      _this2.transitionStatus = status;
      return /*#__PURE__*/React.createElement(Component, _extends({}, childProps, {
        ref: _this2.refHandlers.popup,
        style: style,
        className: classes
      }), typeof children === "function" ? children(status) : children);
    })));
    return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {
      value: null
    }, /*#__PURE__*/React.createElement(Transition, {
      enter: true,
      exit: true,
      appear: true,
      addEndListener: transition.addEndListener ? this.addEndListener : undefined,
      timeout: transition.timeout,
      in: visible,
      unmountOnExit: destroyOnClose,
      mountOnEnter: lazy
    }, function () {
      return popup;
    }));
  };

  return Popup;
}(React.Component);

_defineProperty(Popup, "defaultProps", {
  prefixCls: "rw-popup",
  style: {},
  className: "",
  rootClassName: "",
  rootStyle: {},
  rootProps: {},
  visible: false,
  fixed: false,
  //初始未显示的情况下不渲染组件，作用同react-transition-group的mountOnEnter
  lazy: true,
  //当destroyOnClose=false时，visible=false的情况下也会刷新组件
  forceRender: false,
  //popup动画配置参数参考react-transition-group
  //http://reactcommunity.org/react-transition-group/css-transition
  transition: {},
  //visible=false时移除组件，作用同react-transition-group的unmountOnExit
  destroyOnClose: true,
  disableMask: false,
  mask: false,
  maskStyle: {},
  maskProps: {},
  maskClassName: "",
  //popupMask动画配置参数参考react-transition-group
  //http://reactcommunity.org/react-transition-group/css-transition
  maskTransition: {},
  component: "div",
  maskComponent: "div",
  rootComponent: "div",
  wrapContent: function wrapContent(node) {
    return node;
  }
});

export default Popup;