Modal.js

schifred

浏览: 204234 次

最近访客更多访客>>

alonglzb

csqstronger

bb171717

happyant1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ant-design组件库

Modal模块为基于rc-dialog实现的模态框组件，在此基础上生成确认提示框等。

异步逻辑按钮组件需要显示require("antd/lib/Modal/ActionButton")。

Modal.js模态框

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports["default"] = undefined;

var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);

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

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 _react2 = _interopRequireDefault(_react);

var _rcDialog = require('rc-dialog');
var _rcDialog2 = _interopRequireDefault(_rcDialog);

var _addEventListener = require('rc-util/lib/Dom/addEventListener');
var _addEventListener2 = _interopRequireDefault(_addEventListener);

var _button = require('../button');
var _button2 = _interopRequireDefault(_button);

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

var mousePosition = void 0;
var mousePositionEventBinded = void 0;

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

    function Modal() {
        (0, _classCallCheck3["default"])(this, Modal);

        var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.apply(this, arguments));

        _this.handleCancel = function (e) {
            var onCancel = _this.props.onCancel;
            if (onCancel) {
                onCancel(e);
            }
        };
        _this.handleOk = function () {
            var onOk = _this.props.onOk;
            if (onOk) {
                onOk();
            }
        };
        return _this;
    }

    Modal.prototype.componentDidMount = function componentDidMount() {
        if (mousePositionEventBinded) {
            return;
        }
        // 只有点击事件支持从鼠标位置动画展开
        (0, _addEventListener2["default"])(document.documentElement, 'click', function (e) {
            mousePosition = {
                x: e.pageX,
                y: e.pageY
            };
            // 100ms 内发生过点击事件，则从点击位置动画展示
            // 否则直接 zoom 展示
            // 这样可以兼容非点击方式展开
            setTimeout(function () {
                return mousePosition = null;
            }, 100);
        });
        mousePositionEventBinded = true;
    };

    Modal.prototype.render = function render() {
        var _props = this.props,
            okText = _props.okText,
            cancelText = _props.cancelText,
            confirmLoading = _props.confirmLoading,
            footer = _props.footer,
            visible = _props.visible;

        if (this.context.antLocale && this.context.antLocale.Modal) {
            okText = okText || this.context.antLocale.Modal.okText;
            cancelText = cancelText || this.context.antLocale.Modal.cancelText;
        }
        var defaultFooter = [_react2["default"].createElement(
            _button2["default"],
            { key: 'cancel', type: 'ghost', size: 'large', onClick: this.handleCancel },
            cancelText || '取消'
        ), _react2["default"].createElement(
            _button2["default"],
            { key: 'confirm', type: 'primary', size: 'large', loading: confirmLoading, onClick: this.handleOk },
            okText || '确定'
        )];
        return _react2["default"].createElement(
            _rcDialog2["default"], 
            (0, _extends3["default"])(
                { onClose: this.handleCancel, footer: footer || defaultFooter }, 
                this.props, 
                { visible: visible, mousePosition: mousePosition }
            )
        );
    };

    return Modal;
}(_react2["default"].Component);

exports["default"] = Modal;

Modal.defaultProps = {
    prefixCls: 'ant-modal',
    width: 520,
    transitionName: 'zoom',
    maskTransitionName: 'fade',
    confirmLoading: false,
    visible: false
};

// 兼容rc-dialog的props设置，如maskClosable设置点击浮层是否关闭
Modal.propTypes = {
    prefixCls: _react.PropTypes.string,// 样式类前缀
    onOk: _react.PropTypes.func,// 点击确认后的回调函数
    onCancel: _react.PropTypes.func,// 点击取消或叉按钮后的回调函数
    okText: _react.PropTypes.node,// 确认按钮文案
    cancelText: _react.PropTypes.node,// 取消按钮文案
    width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),// 对话框的宽度
    confirmLoading: _react.PropTypes.bool,// 是否设置确认按钮的载入中状态
    visible: _react.PropTypes.bool,// 对话框的可见性
    align: _react.PropTypes.object,// 失效的属性
    footer: _react.PropTypes.node,// 自定义对话框底部节点，默认为确认、取消按钮
    title: _react.PropTypes.node,// 对话框的标题
    closable: _react.PropTypes.bool// 是否显示叉按钮
};
Modal.contextTypes = {
    antLocale: _react2["default"].PropTypes.object
};
module.exports = exports['default'];

confirm.js提示框组件

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);

exports["default"] = confirm;

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

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

var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);

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

var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);

var _Modal = require('./Modal');
var _Modal2 = _interopRequireDefault(_Modal);

var _ActionButton = require('./ActionButton');
var _ActionButton2 = _interopRequireDefault(_ActionButton);

var _locale = require('./locale');

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

// 文档中插入一节点后，该节点下挂载配置好的Modal；返回destroy方法，用于移除弹框
// props={
//     type,// 类型，同prefixCls拼接样式类
//     prefixCls,
//     className,
//     width,
//     style,
//     okCancel,// 设为true，同时有确认、取消按钮；设为false，只有确认按钮
//     okText,// 默认取locale.js中设置
//     cancelText,// 默认取locale.js中设置
//     iconType,// 默认取'question-circle'
//     title,// 标题，reactNode
//     content,// 内容，reactNode
// }
function confirm(config) {
    var props = (0, _objectAssign2["default"])({ iconType: 'question-circle' }, config);
    var prefixCls = props.prefixCls || 'ant-confirm';
    var div = document.createElement('div');
    document.body.appendChild(div);
    var width = props.width || 416;
    var style = props.style || {};
    // 默认为 true，保持向下兼容
    if (!('okCancel' in props)) {
        props.okCancel = true;
    }
    var runtimeLocale = (0, _locale.getConfirmLocale)();
    props.okText = props.okText || (props.okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
    props.cancelText = props.cancelText || runtimeLocale.cancelText;
    function close() {
        var unmountResult = _reactDom2["default"].unmountComponentAtNode(div);
        if (unmountResult && div.parentNode) {
            div.parentNode.removeChild(div);
        }
    }
    var body = _react2["default"].createElement(
        'div',
        { className: prefixCls + '-body' },
        _react2["default"].createElement(_icon2["default"], { type: props.iconType }),
        _react2["default"].createElement(
            'span',
            { className: prefixCls + '-title' },
            props.title
        ),
        _react2["default"].createElement(
            'div',
            { className: prefixCls + '-content' },
            props.content
        )
    );
    var footer = null;
    if (props.okCancel) {
        footer = _react2["default"].createElement(
            'div',
            { className: prefixCls + '-btns' },
            _react2["default"].createElement(
                _ActionButton2["default"],
                { type: 'ghost', actionFn: props.onCancel, closeModal: close },
                props.cancelText
            ),
            _react2["default"].createElement(
                _ActionButton2["default"],
                { type: 'primary', actionFn: props.onOk, closeModal: close, autoFocus: true },
                props.okText
            )
        );
    } else {
        footer = _react2["default"].createElement(
            'div',
            { className: prefixCls + '-btns' },
            _react2["default"].createElement(
                _ActionButton2["default"],
                { type: 'primary', actionFn: props.onOk, closeModal: close, autoFocus: true },
                props.okText
            )
        );
    }
    var classString = (0, _classnames2["default"])(
        prefixCls, 
        (0, _defineProperty3["default"])({}, prefixCls + '-' + props.type, true), 
        props.className
    );
    _reactDom2["default"].render(_react2["default"].createElement(
        _Modal2["default"],
        { className: classString, onCancel: close, visible: true, title: '', transitionName: 'zoom', footer: '', maskTransitionName: 'fade', maskClosable: false, style: style, width: width },
        _react2["default"].createElement(
            'div',
            { className: prefixCls + '-body-wrapper' },
            body,
            ' ',
            footer
        )
    ), div);
    return {
        destroy: close
    };
}
module.exports = exports['default'];

index.js对外接口

'use strict';

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

var _Modal = require('./Modal');
var _Modal2 = _interopRequireDefault(_Modal);

var _confirm = require('./confirm');
var _confirm2 = _interopRequireDefault(_confirm);

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

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

_Modal2["default"].info = function (props) {
    var config = (0, _objectAssign2["default"])({}, {
        type: 'info',
        iconType: 'info-circle',
        okCancel: false
    }, props);
    return (0, _confirm2["default"])(config);
};
_Modal2["default"].success = function (props) {
    var config = (0, _objectAssign2["default"])({}, {
        type: 'success',
        iconType: 'check-circle',
        okCancel: false
    }, props);
    return (0, _confirm2["default"])(config);
};
_Modal2["default"].error = function (props) {
    var config = (0, _objectAssign2["default"])({}, {
        type: 'error',
        iconType: 'cross-circle',
        okCancel: false
    }, props);
    return (0, _confirm2["default"])(config);
};
_Modal2["default"].warning = _Modal2["default"].warn = function (props) {
    var config = (0, _objectAssign2["default"])({}, {
        type: 'warning',
        iconType: 'exclamation-circle',
        okCancel: false
    }, props);
    return (0, _confirm2["default"])(config);
};
_Modal2["default"].confirm = function (props) {
    var config = (0, _objectAssign2["default"])({}, {
        type: 'confirm',
        okCancel: true
    }, props);
    return (0, _confirm2["default"])(config);
};
exports["default"] = _Modal2["default"];
module.exports = exports['default'];

locale.js调用changeConfirmLocale修改本地语言包，各类提示框中的默认按钮文案

'use strict';

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

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

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var defaultLocale = {
    okText: '确定',
    cancelText: '取消',
    justOkText: '知道了'
};
var runtimeLocale = (0, _objectAssign2["default"])({}, defaultLocale);
function changeConfirmLocale(newLocale) {
    if (newLocale) {
        runtimeLocale = (0, _objectAssign2["default"])({}, runtimeLocale, newLocale);
    } else {
        runtimeLocale = (0, _objectAssign2["default"])({}, defaultLocale);
    }
}
function getConfirmLocale() {
    return runtimeLocale;
}

ActionButton.js异步逻辑按钮

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports["default"] = undefined;

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

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 _react2 = _interopRequireDefault(_react);

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

var _button = require('../button');
var _button2 = _interopRequireDefault(_button);

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

// 处理异步逻辑的按钮
// props={
//     actionFn,// 函数，有length属性，将closeModal方法作为回调；
//              // 无length属性，返回否值，执行closeModal方法，返回promise，closeModal方法在promise回调中执行
//     closeModal,// 按钮点击后执行的方法，由用户设置关闭浮层的逻辑
//     autoFocus,// 是否自动获得焦点
//     type,// 按钮类型
//     children,// 按钮中子节点
// }
var ActionButton = function (_React$Component) {
    (0, _inherits3["default"])(ActionButton, _React$Component);

    function ActionButton(props) {
        (0, _classCallCheck3["default"])(this, ActionButton);

        var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));

        _this.onClick = function () {
            var _this$props = _this.props,
                actionFn = _this$props.actionFn,
                closeModal = _this$props.closeModal;

            if (actionFn) {
                var ret = void 0;
                if (actionFn.length) {
                    ret = actionFn(closeModal);
                } else {
                    ret = actionFn();
                    if (!ret) {
                        closeModal();
                    }
                }
                if (ret && ret.then) {
                    _this.setState({ loading: true });
                    ret.then(function () {
                        // It's unnecessary to set loading=false, for the Modal will be unmounted after close.
                        // this.setState({ loading: false });
                        closeModal.apply(undefined, arguments);
                    });
                }
            } else {
                closeModal();
            }
        };
        _this.state = {
            loading: false
        };
        return _this;
    }

    ActionButton.prototype.componentDidMount = function componentDidMount() {
        var _this2 = this;

        if (this.props.autoFocus) {
            (function () {
                var $this = _reactDom2["default"].findDOMNode(_this2);
                _this2.timeoutId = setTimeout(function () {
                    return $this.focus();
                });
            })();
        }
    };

    ActionButton.prototype.componentWillUnmount = function componentWillUnmount() {
        clearTimeout(this.timeoutId);
    };

    ActionButton.prototype.render = function render() {
        var _props = this.props,
            type = _props.type,
            children = _props.children;

        var loading = this.state.loading;
        return _react2["default"].createElement(
            _button2["default"],
            { type: type, size: 'large', onClick: this.onClick, loading: loading },
            children
        );
    };

    return ActionButton;
}(_react2["default"].Component);

exports["default"] = ActionButton;
module.exports = exports['default'];

0
顶

0
踩

分享到：

ARIADOMPropertyConfig等节点属性模块 | rc-dialog

2017-03-22 22:01
浏览 1377
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Modal.js

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Modal.js

评论

发表评论

相关推荐

transfer

Checkbox|CheckboxGroup源码

InputNumber源码

Input源码

最近访客更多访客>>