`

Modal.js

 
阅读更多

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
踩
分享到：
| rc-dialog
评论
发表评论

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

相关推荐

    jQuery弹窗插件Modal.js.zip

    jQuery弹窗插件Modal.js是一款广泛应用于网页中的轻量级交互元素，主要用于显示重要的公告信息或者用户须知，提供了一种高效且易于定制的方式来实现页面内的弹窗提示。这款插件基于JavaScript库jQuery构建，因此它...

    带多种CSS3过渡动画的jquery模态窗口插件modal.js.zip

    在本文中，我们将深入探讨“带多种CSS3过渡动画的jquery模态窗口插件modal.js.zip”这个前端代码包中的核心知识点。模态窗口（Modal）是网页设计中常用的一种交互元素，它允许用户在不离开当前页面的情况下，提供...

    modal.js

    modal.js 是一个专为实现此类功能而设计的JavaScript库，通过简单的API调用，开发者可以快速创建出美观且功能丰富的弹窗效果。本文将深入探讨modal.js的核心原理、使用方法及其与CSS的结合应用。 一、modal.js概述 ...

    前端项目-backbone.modal.zip

    在前端开发领域，Backbone.js 是一款非常受欢迎的JavaScript库，它为构建复杂、结构化的Web应用提供了模型-视图-控制器（MVC）架构。Backbone.modal 是一个基于Backbone.js的插件，专为简化在应用程序中创建模态...

    modal.js:一个用于制作简单而强大的模态消息的网络库

    modal.js 一个用于制作简单而强大的模态消息的网络库 文献资料 模态（占位符|样式| Config | Function（）） 占位符 .name-定义模态名称 .title-设置模态标题 .text-设置模态文本 .embed-可选嵌入自己HTML 造型风格...

    bootstrap-modal.zip

    bootstrap-modal 扩展了 Bootstrap 内置的 modal 以提供附加功能，引入了 ModalManager 类可处理多个 modal 并侦听它们的事件。 一个简单的 ModalManager 的创建方式： $('body').modalmanager('loading'); ...

    微信小程序实现自定义modal弹窗封装的方法

    将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位置即可。 封装完之后调用起来也很简单，看看调用的代码吧 <modal show={{showModal}} height='60%' bindcancel=modalCancel bin

    小程序-弹窗-Modal.rar

    ```javascript wx.showModal({ title: '提示', content: '这是一个模态弹窗', showCancel: true, cancelText: '取消', confirmText: '确定', success: function(res) { if (res.confirm) { console.log('...

    前端项目-vanilla-modal.zip

    2. **js** 文件夹：存放JavaScript源代码，可能包括vanilla-modal的主要实现文件（如`vanilla-modal.js`）和可能的辅助脚本。 3. **css** 文件夹：存放CSS样式表，用于定义模态框的外观和布局。 4. **demo** 或 **...

    深入浅出bootstrap模态框modal.js

    本篇博客参考https://v3.bootcss.com/javascript/#modals-examples 先上bootstrap官网瞅一眼: 原创文章 171获赞 72访问量 5万+ 关注 私信 展开阅读全文 作者：记得养胃鸭

    poject-modal.zip

    在对应的`.js`文件中，我们需要定义上述事件处理函数，并根据业务逻辑处理用户的操作： ```javascript Page({ data: { showModal: false }, handleShowModal() { this.setData({ showModal: true }); }, ...

    popModal自动弹框

    在实际应用popModal插件时，开发者可以通过调整CSS样式来定制弹出框的外观，使用JavaScript或提供的API来控制其行为，例如何时显示、何时关闭、响应用户交互等。此外，插件通常还支持无障碍性（accessibility）和...

    Bootstarp 部分js及css

    在"Bootstarp 部分js及css"这个主题中，我们主要关注的是Bootstrap中部分CSS样式和JavaScript功能的实现，包括`alert.js`, `modal.js`, `bootstrap-table.min.js`和`tab.js`等关键文件。 1. **alert.js**: 这个文件...

    前端项目-jquery-modal.zip

    【前端项目-jquery-modal.zip】是一个包含简单jQuery模态插件的前端开发资源包，主要目的是为网页添加轻量级的模态对话框功能。在Web应用中，模态对话框通常用于显示警告、确认信息或者承载一些独立的交互内容。这个...

    轻量级Modal模态框插件cta.js.zip

    "cta.js" 是一个轻量级的JavaScript插件，专门设计用来创建模态框效果，尤其适用于那些希望避免使用jQuery或其他大型库的项目。这款插件的独特之处在于其纯JavaScript编写，这意味着它具有更小的体积和更快的运行...

    网页弹窗 JQUERY插件

    首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互等任务。在构建弹窗插件时，jQuery提供了一套强大的API，可以方便地实现弹窗的打开、关闭、定位以及与用户交互的各种功能。 ...

    jQuery弹出窗插件popModal

    例如，`popModal.css`和`popModal.min.css`包含插件的样式定义，`popModal.js`和`popModal.min.js`则是JavaScript实现。`index.html`和`ajax.html`可能是示例页面，演示了如何使用插件。`README.md`和`LICENSE.md`...

Magicbox
Global site tag (gtag.js) - Google Analytics