modo-mobile/lib/popup/popup.js

A mobile UI toolkit, based on React

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _rcAnimate = require('rc-animate');

var _rcAnimate2 = _interopRequireDefault(_rcAnimate);

var _titleBar = require('./title-bar');

var _titleBar2 = _interopRequireDefault(_titleBar);

var _view = require('../view');

var _view2 = _interopRequireDefault(_view);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Popup = function (_React$Component) {
    (0, _inherits3['default'])(Popup, _React$Component);

    function Popup() {
        (0, _classCallCheck3['default'])(this, Popup);

        var _this = (0, _possibleConstructorReturn3['default'])(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;
    }

    (0, _createClass3['default'])(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(
                _rcAnimate2['default'],
                { component: '', transitionName: 'fade', showProp: 'show' },
                visible || !destroyed ? React.createElement(
                    _view2['default'],
                    { 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(
                    _rcAnimate2['default'],
                    { component: '', transitionName: transtion, showProp: 'show', onEnd: this.handleOnEnd },
                    visible || !destroyed ? React.createElement(
                        _view2['default'],
                        { show: visible },
                        React.createElement(
                            'div',
                            { className: prefixCls + '-box', ref: function ref(e) {
                                    return _this2.boxRef = e;
                                } },
                            children
                        )
                    ) : null
                )
            );
        }
    }]);
    return Popup;
}(React.Component);

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