dora-ui/es/popup/index.js

A React.js Mobile UI Library

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import cx from 'classnames';
import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
import PropTypes from 'prop-types';
import Portal from '../portal';
import { isFunction, stopBodyScroll } from '../utils';
/**
 * 1. 先写 interface 可选 必选
 * 2. 再写defaultProps 然后将interface中有默认值的字段的可选符号删去
 * 3. 最后写propTypes  interface中没有可选符号 defaultProps中也没有默认值的字段需要加上isRequired
 */

var prefixCls = 'dora-popup';
var positions = ['top', 'right', 'bottom', 'left', 'center'];

var Popup =
/*#__PURE__*/
function (_Component) {
  _inherits(Popup, _Component);

  function Popup() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Popup);

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

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Popup)).call.apply(_getPrototypeOf2, [this].concat(args)));

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

    _defineProperty(_assertThisInitialized(_this), "handleMaskClick", function () {
      var _this$props = _this.props,
          onClose = _this$props.onClose,
          maskClosable = _this$props.maskClosable;

      if (maskClosable && isFunction(onClose)) {
        onClose();
      }
    });

    return _this;
  }

  _createClass(Popup, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
          visible = _this$props2.visible,
          mask = _this$props2.mask,
          stopScrollUnderMask = _this$props2.stopScrollUnderMask;
      if (visible && mask && stopScrollUnderMask) stopBodyScroll(true);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props3 = this.props,
          visible = _this$props3.visible,
          mask = _this$props3.mask,
          stopScrollUnderMask = _this$props3.stopScrollUnderMask;

      if (mask && stopScrollUnderMask) {
        if (prevProps.visible !== visible && visible) stopBodyScroll(true);
        if (prevProps.visible !== visible && !visible) stopBodyScroll(false);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this$props4 = this.props,
          mask = _this$props4.mask,
          stopScrollUnderMask = _this$props4.stopScrollUnderMask;

      if (mask && stopScrollUnderMask) {
        stopBodyScroll(false);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          visible = _this$props5.visible,
          mask = _this$props5.mask,
          position = _this$props5.position,
          children = _this$props5.children,
          node = _this$props5.node,
          wrapClassName = _this$props5.wrapClassName,
          destroyOnClose = _this$props5.destroyOnClose,
          contentStyle = _this$props5.contentStyle,
          transitionDuration = _this$props5.transitionDuration;
      if (!this.hasFirstRendered && !visible) return null;
      this.hasFirstRendered = true;
      var rootCls = cx(wrapClassName, prefixCls, "".concat(prefixCls, "__").concat(position), _defineProperty({}, "".concat(prefixCls, "__mask"), mask));
      return React.createElement(Portal, {
        node: node
      }, React.createElement("div", {
        className: rootCls
      }, React.createElement(CSSTransition, {
        in: visible,
        timeout: 350,
        classNames: "dora-fade",
        appear: true
      }, React.createElement("div", {
        className: "".concat(prefixCls, "-mask"),
        onClick: this.handleMaskClick
      })), React.createElement(CSSTransition, {
        in: visible,
        timeout: transitionDuration,
        classNames: this.transitionName,
        unmountOnExit: destroyOnClose,
        appear: true
      }, React.createElement("div", {
        className: "".concat(prefixCls, "-content"),
        style: _objectSpread({}, contentStyle)
      }, children))));
    }
  }, {
    key: "transitionName",
    get: function get() {
      var _this$props6 = this.props,
          position = _this$props6.position,
          transitionName = _this$props6.transitionName;
      if (transitionName) return transitionName;
      var transitionNames = {
        bottom: 'dora-slide-up',
        right: 'dora-slide-left',
        left: 'dora-slide-right',
        top: 'dora-slide-down',
        center: 'dora-fade'
      };
      return transitionNames[position];
    }
  }]);

  return Popup;
}(Component);

_defineProperty(Popup, "propTypes", {
  node: PropTypes.any,
  visible: PropTypes.bool,
  position: PropTypes.oneOf(positions),
  mask: PropTypes.bool,
  maskClosable: PropTypes.bool,
  onClose: PropTypes.func,
  wrapClassName: PropTypes.string,
  contentStyle: PropTypes.object,
  stopScrollUnderMask: PropTypes.bool,
  destroyOnClose: PropTypes.bool,
  transitionName: PropTypes.string,
  transitionDuration: PropTypes.number
});

_defineProperty(Popup, "defaultProps", {
  visible: false,
  position: 'center',
  mask: true,
  maskClosable: true,
  onClose: function onClose() {},
  wrapClassName: '',
  contentStyle: {},
  stopScrollUnderMask: true,
  destroyOnClose: false,
  transitionName: '',
  transitionDuration: 350
});

export default Popup;