modo-mobile/es/popup/popup.js

A mobile UI toolkit, based on React

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import * as React from 'react';
import Animate from 'rc-animate';
import TitleBar from './title-bar';
import View from '../view';

var Popup = function (_React$Component) {
    _inherits(Popup, _React$Component);

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

        var _this = _possibleConstructorReturn(this, (Popup.__proto__ || Object.getPrototypeOf(Popup)).apply(this, arguments));

        _this.handlePreventScroll = function (isBind) {
            var handler = isBind ? 'addEventListener' : 'removeEventListener';
            if (_this.maskRef) {
                _this.maskRef[handler]('touchmove', _this.handlePreventDefault, false);
            }
            // if (this.boxRef) {
            //   this.boxRef[handler]('touchmove', this.handlePreventDefault, false);
            // }
            _this.handlePreventScrollExclude(isBind, null);
        };
        _this.handlePreventScrollExclude = function (isBind, preventScrollExclude) {
            var handler = isBind ? 'addEventListener' : 'removeEventListener';
            preventScrollExclude = preventScrollExclude || _this.props.preventScrollExclude;
            var excluder = preventScrollExclude ? typeof preventScrollExclude === 'string' ? _this.boxRef.querySelector(preventScrollExclude) : preventScrollExclude : null;
            if (excluder) {
                excluder[handler]('touchmove', _this.handleStopImmediatePropagation, false);
            }
        };
        _this.handleOpen = function () {
            if (_this.props.preventScroll) {
                _this.handlePreventScroll(true);
            }
        };
        _this.handleClose = function (e) {
            var onClose = _this.props.onClose;

            if (_this.props.preventScroll) {
                _this.handlePreventScroll(false);
            }
            if (onClose) {
                onClose(e);
            }
        };
        _this.handleMaskClick = function (e) {
            if (_this.props.maskClosable) {
                _this.handleClose(e);
            }
        };
        _this.handleOnEnd = function (key, exists) {
            var onAnimateEnd = _this.props.onAnimateEnd;

            if (onAnimateEnd) onAnimateEnd(exists, key);
        };
        return _this;
    }

    _createClass(Popup, [{
        key: 'componentDidUpdate',
        value: function componentDidUpdate(prevProps) {
            if (this.props.visible && !prevProps.visible) {
                this.handleOpen();
            }
            if (this.props.preventScrollExclude !== prevProps.preventScrollExclude) {
                this.handlePreventScrollExclude(false, this.props.preventScrollExclude);
                this.handlePreventScrollExclude(true, prevProps.preventScrollExclude);
            }
        }
    }, {
        key: 'handlePreventDefault',
        value: function handlePreventDefault(e) {
            e.preventDefault();
        }
    }, {
        key: 'handleStopImmediatePropagation',
        value: function handleStopImmediatePropagation(e) {
            e.stopImmediatePropagation();
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                prefixCls = _props.prefixCls,
                visible = _props.visible,
                children = _props.children,
                hasMask = _props.hasMask,
                position = _props.position,
                destroyed = _props.destroyed;

            var transtion = function () {
                switch (position) {
                    case 'bottom':
                        return 'move-down';
                    case 'top':
                        return 'move-up';
                    case 'left':
                        return 'move-left';
                    case 'right':
                        return 'move-right';
                    default:
                        return 'fade';
                }
            }();
            var maskNode = hasMask && React.createElement(
                Animate,
                { component: '', transitionName: 'fade', showProp: 'show' },
                visible || !destroyed ? React.createElement(
                    View,
                    { show: visible },
                    React.createElement('div', { ref: function ref(e) {
                            return _this2.maskRef = e;
                        }, className: prefixCls + '-mask', onClick: this.handleMaskClick })
                ) : null
            );
            return React.createElement(
                'div',
                { className: prefixCls + ' ' + prefixCls + '-' + position },
                maskNode,
                React.createElement(
                    Animate,
                    { component: '', transitionName: transtion, showProp: 'show', onEnd: this.handleOnEnd },
                    visible || !destroyed ? React.createElement(
                        View,
                        { show: visible },
                        React.createElement(
                            'div',
                            { className: prefixCls + '-box', ref: function ref(e) {
                                    return _this2.boxRef = e;
                                } },
                            children
                        )
                    ) : null
                )
            );
        }
    }]);

    return Popup;
}(React.Component);

Popup.TitleBar = TitleBar;
Popup.defaultProps = {
    closable: true,
    hasMask: true,
    maskClosable: true,
    destroyed: false,
    position: 'center',
    prefixCls: 'm-popup',
    preventScroll: false,
    preventScrollExclude: '',
    visible: false
};
export default Popup;