antd/lib/modal/confirm.js

An enterprise-class UI design language and React-based implementation

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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);

exports["default"] = confirm;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var _Modal2 = _interopRequireDefault(_Modal);

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

var _icon2 = _interopRequireDefault(_icon);

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

var _button2 = _interopRequireDefault(_button);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

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

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

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);

function confirm(config) {
    var _classNames;

    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.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(
                ActionButton,
                { type: 'ghost', actionFn: props.onCancel, closeModal: close },
                props.cancelText
            ),
            _react2["default"].createElement(
                ActionButton,
                { type: 'primary', actionFn: props.onOk, closeModal: close, autoFocus: true },
                props.okText
            )
        );
    } else {
        footer = _react2["default"].createElement(
            'div',
            { className: prefixCls + '-btns' },
            _react2["default"].createElement(
                ActionButton,
                { type: 'primary', actionFn: props.onOk, closeModal: close, autoFocus: true },
                props.okText
            )
        );
    }
    var classString = (0, _classnames2["default"])((_classNames = {}, (0, _defineProperty3["default"])(_classNames, prefixCls, true), (0, _defineProperty3["default"])(_classNames, prefixCls + '-' + props.type, true), (0, _defineProperty3["default"])(_classNames, props.className, !!props.className), _classNames));
    _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'];