dora-ui/lib/popup/index.js

A React.js Mobile UI Library

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classnames = _interopRequireDefault(require("classnames"));

var _react = _interopRequireWildcard(require("react"));

var _reactTransitionGroup = require("react-transition-group");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _portal = _interopRequireDefault(require("../portal"));

var _utils = require("../utils");

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) { (0, _defineProperty2.default)(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; }

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

var Popup =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Popup, _Component);

  function Popup() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Popup);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Popup)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasFirstRendered", false);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMaskClick", function () {
      var _this$props = _this.props,
          onClose = _this$props.onClose,
          maskClosable = _this$props.maskClosable;

      if (maskClosable && (0, _utils.isFunction)(onClose)) {
        onClose();
      }
    });
    return _this;
  }

  (0, _createClass2.default)(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) (0, _utils.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) (0, _utils.stopBodyScroll)(true);
        if (prevProps.visible !== visible && !visible) (0, _utils.stopBodyScroll)(false);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this$props4 = this.props,
          mask = _this$props4.mask,
          stopScrollUnderMask = _this$props4.stopScrollUnderMask;

      if (mask && stopScrollUnderMask) {
        (0, _utils.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 = (0, _classnames.default)(wrapClassName, prefixCls, "".concat(prefixCls, "__").concat(position), (0, _defineProperty2.default)({}, "".concat(prefixCls, "__mask"), mask));
      return _react.default.createElement(_portal.default, {
        node: node
      }, _react.default.createElement("div", {
        className: rootCls
      }, _react.default.createElement(_reactTransitionGroup.CSSTransition, {
        in: visible,
        timeout: 350,
        classNames: "dora-fade",
        appear: true
      }, _react.default.createElement("div", {
        className: "".concat(prefixCls, "-mask"),
        onClick: this.handleMaskClick
      })), _react.default.createElement(_reactTransitionGroup.CSSTransition, {
        in: visible,
        timeout: transitionDuration,
        classNames: this.transitionName,
        unmountOnExit: destroyOnClose,
        appear: true
      }, _react.default.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;
}(_react.Component);

(0, _defineProperty2.default)(Popup, "propTypes", {
  node: _propTypes.default.any,
  visible: _propTypes.default.bool,
  position: _propTypes.default.oneOf(positions),
  mask: _propTypes.default.bool,
  maskClosable: _propTypes.default.bool,
  onClose: _propTypes.default.func,
  wrapClassName: _propTypes.default.string,
  contentStyle: _propTypes.default.object,
  stopScrollUnderMask: _propTypes.default.bool,
  destroyOnClose: _propTypes.default.bool,
  transitionName: _propTypes.default.string,
  transitionDuration: _propTypes.default.number
});
(0, _defineProperty2.default)(Popup, "defaultProps", {
  visible: false,
  position: 'center',
  mask: true,
  maskClosable: true,
  onClose: function onClose() {},
  wrapClassName: '',
  contentStyle: {},
  stopScrollUnderMask: true,
  destroyOnClose: false,
  transitionName: '',
  transitionDuration: 350
});
var _default = Popup;
exports.default = _default;