@6thquake/react-material/es/Popconfirm/content.js

React components that implement Google's Material Design.

import React, { Component } from 'react';
import withStyles from '../styles/withStyles';
import Button from '../Button';
import { withLocale } from '../LocaleProvider';

const styles = theme => ({
  box: {
    display: 'flex',
    flexDirection: 'column',
    margin: theme.spacing(2),
    marginTop: theme.spacing(3),
    minWidth: 100,
    minHeight: 70,
    maxWidth: 200
  },
  content: {
    fontSize: 14
  },
  footer: {
    display: 'flex',
    justifyContent: 'flex-end',
    // alignItems: ''
    marginTop: theme.spacing(2)
  },
  button: {// margin: theme.spacing(1),
  }
});

class PopOverContent extends Component {
  constructor(props) {
    super(props);

    this.handleConfirm = () => {
      this.props.onConfirm && this.props.onConfirm();
    };

    this.handleCancel = () => {
      this.props.onCancel && this.props.onCancel();
    };

    this.state = {};
  }

  render() {
    const {
      classes,
      content,
      cancelText,
      okText,
      color = 'primary',
      variant,
      type,
      size = 'small'
    } = this.props;
    return React.createElement("div", {
      className: classes.box
    }, React.createElement("div", {
      className: classes.content
    }, content), React.createElement("div", {
      className: classes.footer
    }, React.createElement(Button, {
      type: type,
      size: size,
      onClick: this.handleConfirm,
      color: color,
      className: classes.button
    }, okText), React.createElement(Button, {
      size: size,
      onClick: this.handleCancel,
      className: classes.button
    }, cancelText)));
  }

}

const PopContent = withLocale({
  name: 'Popconfirm'
})(PopOverContent);
export default withStyles(styles, {
  name: 'RMPopContent'
})(PopContent);