ost-ui/dist/npm/OstMask/index.js

ost ui for react

import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import preventBgScroll from './preventBgScroll';

// API:
// 
// children //需要渲染的组件
// 
// popupInfo={
//  rootDom:***, //接收弹层组件的DOM节点，如 document.body
//  left:***, //相对位置
//  top:*** //位置信息
// }

var RenderInBody = function (_Component) {
  _inherits(RenderInBody, _Component);

  function RenderInBody() {
    _classCallCheck(this, RenderInBody);

    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
  }

  RenderInBody.prototype.componentDidMount = function componentDidMount() {
    var popupInfo = this.props.popupInfo;

    this.popup = document.createElement('div');
    this.rootDom = popupInfo.rootDom;
    this.rootDom.appendChild(this.popup);
    //we can setAttribute of the p only in this way
    this.popup.style.position = 'absolute';
    this.popup.style.left = popupInfo.left + 'px';
    this.popup.style.top = popupInfo.top + 'px';
    this._renderLayer();
  };

  RenderInBody.prototype.componentDidUpdate = function componentDidUpdate() {
    this._renderLayer();
  };

  RenderInBody.prototype.componentWillUnmount = function componentWillUnmount() {
    this.rootDom.removeChild(this.popup);
  };

  RenderInBody.prototype._renderLayer = function _renderLayer() {
    ReactDOM.render(this.props.children, this.popup);
  };

  RenderInBody.prototype.render = function render() {
    return null;
  };

  return RenderInBody;
}(Component);

var OstMask = function (_Component2) {
  _inherits(OstMask, _Component2);

  function OstMask() {
    var _temp, _this2, _ret;

    _classCallCheck(this, OstMask);

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

    return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, _Component2.call.apply(_Component2, [this].concat(args))), _this2), _this2.state = {
      _preventBgScroll: new preventBgScroll()
    }, _this2.showUpdata = function () {
      var defaultPopup = _this2.refs.defaultPopup;
      var _this2$props = _this2.props,
          top = _this2$props.top,
          bottom = _this2$props.bottom,
          left = _this2$props.left,
          right = _this2$props.right,
          unlock = _this2$props.unlock;


      if (_this2.props.show) {
        _this2.container && _this2.container.removeEventListener('animationend', _this2.removeContainer);
        !unlock && _this2.state._preventBgScroll.afterOpen();
      } else {
        _this2.container && _this2.container.addEventListener('animationend', _this2.removeContainer);
        !unlock && _this2.state._preventBgScroll.beforeClose();
      }

      setTimeout(function () {
        if (!defaultPopup) return;

        if (!left && !right) {
          defaultPopup.style.left = 'calc(50% - (' + defaultPopup.clientWidth / 2 + 'px))';
        }

        if (!top && !bottom) {
          defaultPopup.style.top = 'calc(50% - (' + defaultPopup.clientHeight / 2 + 'px))';
        }

        if (top) {
          defaultPopup.style.top = top;
        }

        if (bottom) {
          defaultPopup.style.bottom = bottom;
        }

        if (left) {
          defaultPopup.style.left = left;
        }

        if (right) {
          defaultPopup.style.right = right;
        }
      }, 0);
    }, _this2.removeContainer = function () {
      _this2.container && _this2.container.parentNode.removeChild(_this2.container);
      _this2.componentActivated = false;
      _this2.container = null;
    }, _this2.getContainer = function () {
      if (!_this2.container) {
        var container = document.createElement('div');
        var containerId = 'ost-mask-container-' + new Date().getTime();
        container.setAttribute('id', containerId);
        document.body.appendChild(container);
        _this2.container = container;
      }
      return _this2.container;
    }, _this2.getComponent = function () {
      var _this2$props2 = _this2.props,
          show = _this2$props2.show,
          _onClick = _this2$props2.onClick,
          maskColor = _this2$props2.maskColor,
          style = _this2$props2.style,
          childrenStyle = _this2$props2.childrenStyle;


      return React.createElement(
        'div',
        { className: 'ost-mask' },
        React.createElement(
          'div',
          {
            style: childrenStyle,
            className: classnames('ost-mask-children', {
              'ost-mask-am-fade-out': !show,
              'ost-mask-am-fade-in': show
            }),
            ref: 'defaultPopup' },
          _this2.props.children
        ),
        React.createElement('div', {
          className: classnames("ost-mask-bg", {
            'ost-mask-am-fade-out': !show,
            'ost-mask-am-fade-in': show
          }),
          style: _extends({ background: maskColor || 'rgba(0, 0, 0, 0.4)' }, style),
          onClick: function onClick(e) {
            return _onClick && _onClick(e);
          } })
      );
    }, _this2.renderByReact15 = function (component, container) {
      return React.createElement(
        RenderInBody,
        { popupInfo: { rootDom: container } },
        component
      );
    }, _temp), _possibleConstructorReturn(_this2, _ret);
  }

  OstMask.prototype.componentDidMount = function componentDidMount() {

    this.showUpdata();
  };

  OstMask.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {

    if (prevProps.show !== this.props.show) {
      this.showUpdata();
    }
  };

  OstMask.prototype.componentWillUnmount = function componentWillUnmount() {
    this.removeContainer();
  };

  OstMask.prototype.render = function render() {
    var show = this.props.show;


    if (show) this.componentActivated = true;

    if (!this.componentActivated) return null;

    if (ReactDOM.createPortal) return ReactDOM.createPortal(this.getComponent(), this.getContainer());

    return this.renderByReact15(this.getComponent(), this.getContainer());
  };

  return OstMask;
}(Component);

export default OstMask;


OstMask.propTypes = {
  show: PropTypes.bool.isRequired,
  onClick: PropTypes.func,
  maskColor: PropTypes.string,
  top: PropTypes.string
};