@6thquake/react-material/Modal/ActionButton.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _Button = _interopRequireDefault(require("../Button"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _classnames = _interopRequireDefault(require("classnames"));

/**
 * @ignore - do not document.
 */
var styles = function styles(theme) {
  return {
    info: {
      backgroundColor: '#1890ff',
      color: 'white',
      '&:hover': {
        backgroundColor: '#1890ff',
        color: 'white'
      }
    },
    done: {
      backgroundColor: '#52c41a',
      color: 'white',
      '&:hover': {
        backgroundColor: '#52c41a',
        color: 'white'
      }
    },
    cancel: {
      backgroundColor: '#f5222d',
      color: 'white',
      '&:hover': {
        backgroundColor: '#f5222d',
        color: 'white'
      }
    },
    error: {
      backgroundColor: '#faad14',
      color: 'white',
      '&:hover': {
        backgroundColor: '#faad14',
        color: 'white'
      }
    },
    warning: {
      backgroundColor: '#faad14',
      color: 'white',
      '&:hover': {
        backgroundColor: '#faad14',
        color: 'white'
      }
    }
  };
};

var ActionButton =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(ActionButton, _React$Component);

  function ActionButton(props) {
    var _this;

    (0, _classCallCheck2.default)(this, ActionButton);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ActionButton).call(this, props));

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

      if (actionFn) {
        var ret;

        if (actionFn.length) {
          ret = actionFn(closeModal);
        } else {
          ret = actionFn();

          if (!ret) {
            closeModal();
          }
        }

        if (ret && ret.then) {
          _this.setState({
            loading: true
          });

          ret.then(function () {
            closeModal.apply(void 0, arguments);
          }, function () {
            _this.setState({
              loading: false
            });
          });
        }
      } else {
        closeModal();
      }
    };

    _this.state = {
      loading: false
    };
    return _this;
  }

  (0, _createClass2.default)(ActionButton, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.autoFocus) {
        var $this = _reactDom.default.findDOMNode(this);

        this.timeoutId = setTimeout(function () {
          return $this.focus();
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearTimeout(this.timeoutId);
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props2 = this.props,
          type = _this$props2.type,
          children = _this$props2.children,
          variant = _this$props2.variant,
          size = _this$props2.size,
          classes = _this$props2.classes;
      var loading = this.state.loading; // 替换为status button

      var classNameColor = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.info, type === 'info'), (0, _defineProperty2.default)(_classNames, classes.done, type === 'done'), (0, _defineProperty2.default)(_classNames, classes.cancel, type === 'cancel'), (0, _defineProperty2.default)(_classNames, classes.error, type === 'error'), (0, _defineProperty2.default)(_classNames, classes.warning, type === 'contact_support'), _classNames));
      return _react.default.createElement(_Button.default, {
        variant: variant,
        size: size,
        classes: {
          root: classNameColor
        },
        style: {
          marginLeft: '10px'
        },
        onClick: this.onClick,
        loading: loading
      }, children);
    }
  }]);
  return ActionButton;
}(_react.default.Component);

var _default = (0, _withStyles.default)(styles)(ActionButton);

exports.default = _default;