rc-dialog

rc-dialog用于绘制对话框，对话框的可见逻辑由父组件设定。

不包含基于react-native实现的modal组件。

 

DialogWrap.js

'use strict';

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

var _react = require('react');
var _react2 = _interopRequireDefault(_react);

var _Dialog = require('./Dialog');
var _Dialog2 = _interopRequireDefault(_Dialog);

// 提供在document中创建div，并将组件的renderComponent渲染的元素挂载到该div下的能力  
// 同时使组件实例的_component属性指向renderComponent方法渲染出来的组件实例  
var _getContainerRenderMixin = require('rc-util/lib/getContainerRenderMixin');
var _getContainerRenderMixin2 = _interopRequireDefault(_getContainerRenderMixin);

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

var __assign = undefined && undefined.__assign || Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) {
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
    }
    return t;
};

// DialogWrap直接将获得的props注入Dialog组件，同时Dialog元素作为新插入文档的节点的子元素
var DialogWrap = _react2["default"].createClass({
    displayName: 'DialogWrap',

    mixins: [(0, _getContainerRenderMixin2["default"])({
        isVisible: function isVisible(instance) {
            return instance.props.visible;
        },

        autoDestroy: false,
        getComponent: function getComponent(instance, extra) {
            return _react2["default"].createElement(
                _Dialog2["default"], 
                __assign({}, instance.props, extra, { key: "dialog" })
            );
        }
    })],
    getDefaultProps: function getDefaultProps() {
        return {
            visible: false
        };
    },
    shouldComponentUpdate: function shouldComponentUpdate(_ref) {
        var visible = _ref.visible;

        return !!(this.props.visible || visible);
    },
    componentWillUnmount: function componentWillUnmount() {
        if (this.props.visible) {
            this.renderComponent({
                afterClose: this.removeContainer,
                onClose: function onClose() {},

                visible: false
            });
        } else {
            this.removeContainer();
        }
    },
    getElement: function getElement(part) {
        return this._component.getElement(part);
    },
    render: function render() {
        return null;
    }
});
exports["default"] = DialogWrap;
module.exports = exports['default'];

 

Dialog.js

'use strict';

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

var _react = require('react');
var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);

var _KeyCode = require('rc-util/lib/KeyCode');
var _KeyCode2 = _interopRequireDefault(_KeyCode);

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

var _LazyRenderBox = require('./LazyRenderBox');
var _LazyRenderBox2 = _interopRequireDefault(_LazyRenderBox);

// 计算滚动条宽度
var _getScrollBarSize = require('rc-util/lib/getScrollBarSize');
var _getScrollBarSize2 = _interopRequireDefault(_getScrollBarSize);

var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var __assign = undefined && undefined.__assign || Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) {
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
    }
    return t;
};

var uuid = 0;
var openCount = 0;
/* eslint react/no-is-mounted:0 */
function noop() {}
function setTransformOrigin(node, value) {
    var style = node.style;
    ['Webkit', 'Moz', 'Ms', 'ms'].forEach(function (prefix) {
        style[prefix + 'TransformOrigin'] = value;
    });
    style['transformOrigin'] = value;
}
// 由文档滚动调整元素的top、left样式
function offset(el) {
    var rect = el.getBoundingClientRect();
    var pos = {
        left: rect.left,
        top: rect.top
    };
    var doc = el.ownerDocument;
    var w = doc.defaultView || doc.parentWindow;
    pos.left += getScroll(w);
    pos.top += getScroll(w, true);
    return pos;
}
// 文档滚动时产生的偏移量
function getScroll(w, top) {
    var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
    var method = 'scroll' + (top ? 'Top' : 'Left');
    if (typeof ret !== 'number') {
        var d = w.document;
        ret = d.documentElement[method];
        if (typeof ret !== 'number') {
            ret = d.body[method];
        }
    }
    return ret;
}

// 对话框居中效果由样式设定，以及显示的动效都由css设置(针对props.mousePosition)
var Dialog = _react2["default"].createClass({
    displayName: 'Dialog',
    getDefaultProps: function getDefaultProps() {
        return {
            afterClose: noop,// 对话框移除时执行的回调函数
            className: '',// 样式类
            prefixCls: 'rc-dialog',// 样式类前缀
            visible: false,// 由父组件操控对话框的显隐
            mask: true,// 是否显示蒙层
            closable: true,// 是否显示叉按钮
            keyboard: true,// esc按键是否执行this.props.onClick方法
            maskClosable: true,// 点击蒙层是否执行this.props.onClick方法
            onClose: noop// esc按键、点击叉按钮时触发执行，由父组件经营关闭对话框的操作
            // width、height 对话框的宽高
            // style 对话框的样式
            // title 对话框的标题，reactNode
            // children 对话框的内容体
            // footer 对话框内的尾部元素，reactNode
            // bodyProps 对话框内容体的props
            // wrapProps 对话框包裹元素的props
            // wrapStyle 对话框包裹元素的style
            // zIndex 对话框包裹元素的zIndex
            // transitionName、animation 对话框相关css动效

            // maskProps、maskStyle、maskTransitionName、maskAnimation 蒙层相关

            // mousePosition 设置对话框位置随鼠标x、y坐标调整
        };
    },
    componentWillMount: function componentWillMount() {
        this.titleId = 'rcDialogTitle' + uuid++;
    },
    componentDidMount: function componentDidMount() {
        this.componentDidUpdate({});
    },
    componentDidUpdate: function componentDidUpdate(prevProps) {
        var props = this.props;
        var mousePosition = this.props.mousePosition;
        if (props.visible) {
            // first show
            if (!prevProps.visible) {
                this.openTime = Date.now();
                this.lastOutSideFocusNode = document.activeElement;

                // 若文档宽度超过浏览器窗口宽度，为document.body增设右边距
                this.addScrollingEffect();
                this.refs.wrap.focus();
                var dialogNode = _reactDom2["default"].findDOMNode(this.refs.dialog);

                // 由鼠标位置调整对话框的top、left样式
                if (mousePosition) {
                    var elOffset = offset(dialogNode);
                    setTransformOrigin(dialogNode, mousePosition.x - elOffset.left + 'px ' + (mousePosition.y - elOffset.top) + 'px');
                } else {
                    setTransformOrigin(dialogNode, '');
                }
            }
        } else if (prevProps.visible) {
            if (props.mask && this.lastOutSideFocusNode) {
                try {
                    this.lastOutSideFocusNode.focus();
                } catch (e) {
                    this.lastOutSideFocusNode = null;
                }
                this.lastOutSideFocusNode = null;
            }
        }
    },
    componentWillUnmount: function componentWillUnmount() {
        if (this.props.visible) {
            this.removeScrollingEffect();
        }
    },

    // 对话框移除时执行，rc-animation机制
    onAnimateLeave: function onAnimateLeave() {
        // need demo?
        // https://github.com/react-component/dialog/pull/28
        if (this.refs.wrap) {
            this.refs.wrap.style.display = 'none';
        }
        this.removeScrollingEffect();
        this.props.afterClose();
    },

    // 点击蒙层执行this.props.onClick方法
    onMaskClick: function onMaskClick(e) {
        // android trigger click on open (fastclick??)
        if (Date.now() - this.openTime < 300) {
            return;
        }
        if (e.target === e.currentTarget) {
            this.close(e);
        }
    },
    // ESC键执行this.props.onClick方法，table键切换焦点
    onKeyDown: function onKeyDown(e) {
        var props = this.props;
        if (props.keyboard && e.keyCode === _KeyCode2["default"].ESC) {
            this.close(e);
        }
        // keep focus inside dialog
        if (props.visible) {
            if (e.keyCode === _KeyCode2["default"].TAB) {
                var activeElement = document.activeElement;
                var dialogRoot = this.refs.wrap;
                var sentinel = this.refs.sentinel;
                if (e.shiftKey) {
                    if (activeElement === dialogRoot) {
                        sentinel.focus();
                    }
                } else if (activeElement === this.refs.sentinel) {
                    dialogRoot.focus();
                }
            }
        }
    },

    // 获取对话框元素
    getDialogElement: function getDialogElement() {
        var props = this.props;
        var closable = props.closable;
        var prefixCls = props.prefixCls;
        var dest = {};

        // 获取对话框的宽高
        if (props.width !== undefined) {
            dest.width = props.width;
        }
        if (props.height !== undefined) {
            dest.height = props.height;
        }

        // 获取对话框的尾
        var footer = void 0;
        if (props.footer) {
            footer = _react2["default"].createElement(
                "div", 
                { className: prefixCls + '-footer', ref: "footer" }, 
                props.footer
            );
        }

        // 获取对话框的头
        var header = void 0;
        if (props.title) {
            header = _react2["default"].createElement(
                "div", 
                { className: prefixCls + '-header', ref: "header" }, 
                _react2["default"].createElement(
                    "div", 
                    { className: prefixCls + '-title', id: this.titleId }, 
                    props.title
                )
            );
        }

        // 叉按钮
        var closer = void 0;
        if (closable) {
            closer = _react2["default"].createElement(
                "button", 
                { onClick: this.close, "aria-label": "Close", className: prefixCls + '-close' }, 
                _react2["default"].createElement("span", { className: prefixCls + '-close-x' })
            );
        }

        var style = (0, _objectAssign2["default"])({}, props.style, dest);
        var transitionName = this.getTransitionName();

        var dialogElement = _react2["default"].createElement(
            _LazyRenderBox2["default"], 
            { 
                key: "dialog-element", 
                role: "document", 
                ref: "dialog", 
                style: style, 
                className: prefixCls + ' ' + (props.className || ''), 
                visible: props.visible 
            }, 
            _react2["default"].createElement(
                "div", 
                { className: prefixCls + '-content' }, 
                closer, 
                header, 
                _react2["default"].createElement(
                    "div", 
                    __assign({ 
                        className: prefixCls + '-body', 
                        style: props.bodyStyle, 
                        ref: "body" 
                    }, props.bodyProps), 
                    props.children
                ), 
                footer
            ), 
            _react2["default"].createElement(
                "div", 
                { 
                    tabIndex: 0, 
                    ref: "sentinel", 
                    style: { width: 0, height: 0, overflow: 'hidden' } 
                }, 
                "sentinel"
            )
        );

        return _react2["default"].createElement(
            _rcAnimate2["default"], 
            { 
                key: "dialog", 
                showProp: "visible",// 控制子元素显示的props属性
                onLeave: this.onAnimateLeave,// 子元素移除触发执行的方法
                transitionName: transitionName, 
                component: "", 
                transitionAppear: true 
            }, 
            dialogElement
        );
    },
    
    getTransitionName: function getTransitionName() {
        var props = this.props;
        var transitionName = props.transitionName;
        var animation = props.animation;
        if (!transitionName && animation) {
            transitionName = props.prefixCls + '-' + animation;
        }
        return transitionName;
    },

    getZIndexStyle: function getZIndexStyle() {
        var style = {};
        var props = this.props;
        if (props.zIndex !== undefined) {
            style.zIndex = props.zIndex;
        }
        return style;
    },
    // 获取对话框包裹元素的样式
    getWrapStyle: function getWrapStyle() {
        return (0, _objectAssign2["default"])({}, this.getZIndexStyle(), this.props.wrapStyle);
    },

    // 获取蒙层的样式
    getMaskStyle: function getMaskStyle() {
        return (0, _objectAssign2["default"])({}, this.getZIndexStyle(), this.props.maskStyle);
    },
    // 获取蒙层元素
    getMaskElement: function getMaskElement() {
        var props = this.props;
        var maskElement = void 0;
        if (props.mask) {
            var maskTransition = this.getMaskTransitionName();
            maskElement = _react2["default"].createElement(
                _LazyRenderBox2["default"], 
                __assign({ 
                    style: this.getMaskStyle(), 
                    key: "mask", 
                    className: props.prefixCls + '-mask', 
                    hiddenClassName: props.prefixCls + '-mask-hidden', 
                    visible: props.visible 
                }, props.maskProps)
            );

            if (maskTransition) {
                maskElement = _react2["default"].createElement(
                    _rcAnimate2["default"], 
                    { 
                        key: "mask", 
                        showProp: "visible", 
                        transitionAppear: true, 
                        component: "", 
                        transitionName: maskTransition 
                    }, 
                    maskElement
                );
            }
        }
        return maskElement;
    },
    getMaskTransitionName: function getMaskTransitionName() {
        var props = this.props;
        var transitionName = props.maskTransitionName;
        var animation = props.maskAnimation;
        if (!transitionName && animation) {
            transitionName = props.prefixCls + '-' + animation;
        }
        return transitionName;
    },

    getElement: function getElement(part) {
        return this.refs[part];
    },

    // 若文档宽度超过浏览器窗口宽度，为document.body增设右边距，通过openCount实现单次挂载时只增设一次
    addScrollingEffect: function addScrollingEffect() {
        openCount++;
        if (openCount !== 1) {
            return;
        }
        this.checkScrollbar();
        this.setScrollbar();
        document.body.style.overflow = 'hidden';
        // this.adjustDialog();
    },
    // 移除document.body的右边距
    removeScrollingEffect: function removeScrollingEffect() {
        openCount--;
        if (openCount !== 0) {
            return;
        }
        document.body.style.overflow = '';
        this.resetScrollbar();
        // this.resetAdjustments();
    },
    // 对话框引起的文档宽度超过浏览器窗口宽度，获取滚动条宽度this.scrollbarWidth
    checkScrollbar: function checkScrollbar() {
        var fullWindowWidth = window.innerWidth;
        if (!fullWindowWidth) {
            var documentElementRect = document.documentElement.getBoundingClientRect();
            fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
        }
        this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
        if (this.bodyIsOverflowing) {
            this.scrollbarWidth = (0, _getScrollBarSize2["default"])();
        }
    },
    // 为滚动条增设document.body的右边距
    setScrollbar: function setScrollbar() {
        if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
            document.body.style.paddingRight = this.scrollbarWidth + 'px';
        }
    },
    // 清除document.body的右边距
    resetScrollbar: function resetScrollbar() {
        document.body.style.paddingRight = '';
    },

    // 执行this.props.onClose方法
    close: function close(e) {
        this.props.onClose(e);
    },

    // 由滚动条存在或对话框过高调整对话框的左右边距
    adjustDialog: function adjustDialog() {
        if (this.refs.wrap && this.scrollbarWidth !== undefined) {
            var modalIsOverflowing = this.refs.wrap.scrollHeight > document.documentElement.clientHeight;
            this.refs.wrap.style.paddingLeft = (!this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '') + 'px';
            this.refs.wrap.style.paddingRight = (this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '') + 'px';
        }
    },
    resetAdjustments: function resetAdjustments() {
        if (this.refs.wrap) {
            this.refs.wrap.style.paddingLeft = this.refs.wrap.style.paddingLeft = '';
        }
    },

    render: function render() {
        var props = this.props;
        var prefixCls = props.prefixCls,
            maskClosable = props.maskClosable;

        var style = this.getWrapStyle();// 获取对话框包裹元素的样式

        // clear hide display
        // and only set display after async anim, not here for hide
        if (props.visible) {
            style.display = null;
        }
        return _react2["default"].createElement(
            "div", 
            null, 
            this.getMaskElement(), 
            _react2["default"].createElement(
                "div", 
                __assign({ 
                    tabIndex: -1, 
                    onKeyDown: this.onKeyDown, 
                    className: prefixCls + '-wrap ' + (props.wrapClassName || ''), 
                    ref: "wrap", 
                    onClick: maskClosable ? this.onMaskClick : undefined, 
                    role: "dialog", 
                    "aria-labelledby": props.title ? this.titleId : null, 
                    style: style 
                }, props.wrapProps), 
                this.getDialogElement()
            )
        );
    }
});
exports["default"] = Dialog;
module.exports = exports['default'];

 

LazyRenderBox.js

'use strict';

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

var _react = require('react');
var _react2 = _interopRequireDefault(_react);

var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var __assign = undefined && undefined.__assign || Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) {
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
    }
    return t;
};

var LazyRenderBox = _react2["default"].createClass({
    displayName: 'LazyRenderBox',
    shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
        return !!nextProps.hiddenClassName || !!nextProps.visible;
    },
    render: function render() {
        var className = this.props.className;
        if (!!this.props.hiddenClassName && !this.props.visible) {
            className += ' ' + this.props.hiddenClassName;
        }
        var props = (0, _objectAssign2["default"])({}, this.props);
        delete props.hiddenClassName;
        delete props.visible;
        props.className = className;
        return _react2["default"].createElement("div", __assign({}, props));
    }
});
exports["default"] = LazyRenderBox;
module.exports = exports['default'];