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

React components that implement Google's Material Design.

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import Dialog from '../Dialog';
import DialogTitle from '../DialogTitle';
import DialogActions from '../DialogActions';
import DialogContent from '../DialogContent';
import { Clear } from '@material-ui/icons';
import { Fade, Slide, Collapse, Grow, Zoom } from '../transitions';
import Button from '../Button';
import Typography from '../Typography';
import { fade } from '../styles/colorManipulator';
import Grid from '../Grid';

const styles = theme => ({
  title: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText
  },
  close: {
    color: fade(theme.palette.primary.contrastText, 0.68),
    '&:hover': {
      color: theme.palette.primary.contrastText
    }
  },
  contentRoot: {
    padding: '0px 0px'
  },
  actionRoot: {
    margin: 0,
    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(1) * 2}px ${theme.spacing(2)}px`
  },
  actionRootBtn: {
    margin: `0 ${theme.spacing(1)}px 0 ${theme.spacing(1)}px`
  },
  justifyActions: {
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between'
  }
});

class Modal 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);
      }
    };
  }

  handleOK() {
    this.props.onClose;
  }

  renderActions() {
    const {
      actions,
      onClose,
      classes
    } = this.props;

    if (actions === Modal.defaultProps.actions) {
      // 没传actions
      return actions.map(Button => React.cloneElement(Button, {
        onClick: onClose,
        classes: {
          root: classes.actionRootBtn
        }
      }));
    }

    if (actions.indexOf('-') === -1) {
      return actions;
    }

    return this.renderJustifyActions();
  }

  renderJustifyActions() {
    const {
      actions,
      classes
    } = this.props;
    const index = actions.indexOf('-');
    const left = actions.slice(0, index);
    const right = actions.slice(index + 1);
    return React.createElement("div", {
      className: classes.justifyActions
    }, React.createElement("div", {
      className: classes.left
    }, left), React.createElement("div", {
      className: classes.right
    }, right));
  }

  render() {
    const _this$props = this.props,
          {
      classes,
      title,
      onClose,
      scroll
    } = _this$props,
          other = _objectWithoutPropertiesLoose(_this$props, ["classes", "title", "onClose", "scroll", "actions"]);

    return React.createElement(Dialog, _extends({
      TransitionComponent: this.transition,
      "aria-labelledby": "alert-dialog-slide-title",
      "aria-describedby": "alert-dialog-slide-description",
      scroll: scroll
    }, this.props), React.createElement(DialogTitle, {
      className: classes.title,
      disableTypography: true
    }, React.createElement(Grid, {
      container: true,
      direction: "row",
      justify: "space-between",
      alignItems: "center"
    }, React.createElement(Grid, {
      item: true
    }, React.createElement(Typography, {
      variant: "title",
      color: "inherit"
    }, title)), React.createElement(Grid, {
      item: true
    }, React.createElement(Clear, {
      className: classes.close,
      onClick: onClose
    })))), React.createElement(DialogContent, {
      classes: {
        root: classes.contentRoot
      }
    }, this.props.children), React.createElement(DialogActions, {
      classes: {
        root: classes.actionRoot
      }
    }, this.renderActions()));
  }

}

process.env.NODE_ENV !== "production" ? Modal.propTypes = {
  /**
   * actions button array
   */
  actions: PropTypes.array,

  /**
   * 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']),

  /**
   * This is the modal's title
   */
  label: PropTypes.string,

  /**
   * onClose callback function
   */
  onClose: PropTypes.func.isRequired,

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

  /**
   * scroll type
   */
  scroll: PropTypes.oneOf(['paper', 'body']),

  /**
   * @deprecated
   * This is the modal's title, please using title instead.
   */
  title: PropTypes.string
} : void 0;
Modal.defaultProps = {
  open: false,
  label: '',
  title: '',
  animation: 'zoom',
  onClose: () => {},
  actions: [],
  scroll: 'paper'
};
export default withStyles(styles, {
  name: 'RMModal'
})(Modal);