@6thquake/react-material/es/Modal/Confirm.js

React components that implement Google's Material Design.

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";

/**
 * @ignore - do not document.
 */
import React, { Component } from 'react';
import Dialog from '../Dialog';
import PropTypes from 'prop-types';
import ActionButton from './ActionButton';
import DialogActions from '../DialogActions';
import DialogTitle from '../DialogTitle';
import DialogContent from '../DialogContent';
import withStyles from '../styles/withStyles';
import classNames from 'classnames';
import { Fade, Slide, Collapse, Grow, Zoom } from '../transitions';
import { withLocale } from '../LocaleProvider';
import { Clear } from '@material-ui/icons';

const styles = theme => ({
  title: {
    color: 'white',
    fontSize: '1rem',
    fontWeight: '700'
  },
  icon: {
    color: 'white',
    float: 'right',
    '&:hover': {
      opacity: 0.5
    }
  },
  contentRoot: {
    paddingTop: theme.spacing(3)
  },
  actionsRoot: {
    justifyContent: 'center'
  },
  head: {},
  content: {
    marginLeft: theme.spacing(4),
    color: 'rgba(0,0,0,.65)',
    fontSize: '14px',
    marginTop: '8px'
  },
  info: {
    backgroundColor: '#1890ff'
  },
  done: {
    backgroundColor: '#52c41a'
  },
  cancel: {
    backgroundColor: '#f5222d'
  },
  error: {
    backgroundColor: '#faad14'
  },
  warning: {
    backgroundColor: '#faad14'
  }
});

class ConfirmDialog extends Component {
  constructor(...args) {
    super(...args);

    this.transition = props => {
      switch (this.props.animation) {
        case 'fade':
          return React.createElement(Fade, props);
          break;

        case 'slide':
          return React.createElement(Slide, _extends({
            direction: "up"
          }, props));
          break;

        case 'collapse':
          return React.createElement(Collapse, props);
          break;

        case 'grow':
          return React.createElement(Grow, props);
          break;

        case 'zoom':
          return React.createElement(Zoom, props);
          break;

        default:
          return React.createElement(Fade, props);
      }
    };
  }

  render() {
    const _this$props = this.props,
          {
      onCancel,
      onOk,
      onClose,
      cancelText,
      okText,
      closeText,
      title,
      content,
      type,
      cancelType,
      variant,
      size,
      classes
    } = _this$props,
          other = _objectWithoutPropertiesLoose(_this$props, ["onCancel", "onOk", "onClose", "zIndex", "onExited", "open", "keyboard", "cancelText", "okText", "closeText", "title", "content", "type", "okType", "cancelType", "variant", "size", "classes"]);

    const okCancel = 'okCancel' in this.props ? this.props.okCancel : true;
    const cancelButton = okCancel && React.createElement(ActionButton, {
      actionFn: onCancel,
      closeModal: onClose,
      type: cancelType,
      size: size
    }, cancelText);
    const classNameColor = classNames({
      [classes.info]: type === 'info',
      [classes.done]: type === 'done',
      [classes.cancel]: type === 'cancel',
      [classes.error]: type === 'error',
      [classes.warning]: type === 'contact_support'
    });
    return React.createElement(Dialog, _extends({
      TransitionComponent: this.transition,
      "aria-labelledby": "alert-dialog-slide-title",
      "aria-describedby": "alert-dialog-slide-description"
    }, this.props), React.createElement(DialogTitle, {
      className: `${classes.title} ${classNameColor}`,
      disableTypography: true
    }, title, React.createElement(Clear, {
      className: classes.icon,
      onClick: onClose
    })), React.createElement(DialogContent, {
      classes: {
        root: classes.contentRoot
      }
    }, content), React.createElement(DialogActions, {
      classes: {
        root: classes.actionsRoot
      }
    }, cancelButton, React.createElement(ActionButton, {
      type: type,
      actionFn: onOk,
      closeModal: onClose,
      variant: variant,
      size: size,
      autoFocus: true
    }, type === 'contact_support' ? okText : closeText)));
  }

}

process.env.NODE_ENV !== "production" ? ConfirmDialog.propTypes = {
  /**
   * This is usually an animation of open or close the modal,include slide、collapse、fade、grow、zoom
   */
  animation: PropTypes.oneOf(['slide', 'collapse', 'fade', 'grow', 'zoom']),

  /**
   * Cancel button text
   */
  cancelText: PropTypes.string,

  /**
   *
   */
  cancelType: PropTypes.string,

  /**
   * This is modal content
   */
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

  /**
   * Confirm button text
   */
  okText: PropTypes.string,

  /**
   *
   */
  okType: PropTypes.string,

  /**
   * Cancel button callback
   */
  onCancel: PropTypes.func,

  /**
   * Confirm button callback
   */
  onOk: PropTypes.func,

  /**
   * Decide modal open or close,	If true, the modal is open.
   */
  open: PropTypes.bool.isRequired,

  /**
   *
   */
  size: PropTypes.string,

  /**
   * This is  modal title
   */
  title: PropTypes.string,

  /**
   * The variant to use.
   */
  variant: PropTypes.string
} : void 0;
ConfirmDialog.defaultProps = {
  open: false,
  title: '',
  animation: 'fade',
  okType: 'success',
  cancelType: 'primary',
  variant: 'raised',
  size: 'small'
};
export default withStyles(styles, {
  name: 'RMConfirmDialog'
})(withLocale({
  name: 'Confirm'
})(ConfirmDialog));