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

React components that implement Google's Material Design.

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

/**
 * @ignore - do not document.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import Popover from '../Popover';
import PopoverContent from './content';
export const styles = theme => ({
  box: {
    display: 'inline-block'
  },
  anchorElementBox: {
    // padding: theme.spacing(1),
    boxSizing: 'border-box',
    display: 'inline-block'
  },
  contentBox: {}
});

var _ref = React.createElement("div", null);

var _ref2 = React.createElement("div", null);

class Popconfirm extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      open: false,
      anchorReference: 'anchorEl'
    };
    this.anchorEl = null;
    this.anchorRef = React.createRef();

    this.handleClick = e => {
      this.setState({
        open: true
      });
    };

    this.handleClose = () => {
      this.setState({
        open: false
      });
    };

    this.confirm = () => {
      this.props.onConfirm && this.props.onConfirm();
      this.setState({
        open: false
      });
    };

    this.cancel = () => {
      this.props.onCancel && this.props.onCancel();
      this.setState({
        open: false
      });
    };
  }

  componentDidMount() {
    const el = ReactDOM.findDOMNode(this.anchorRef.current);
    this.setState({
      anchorEl: el
    });
  }

  render() {
    const _this$props = this.props,
          {
      color,
      variant,
      type,
      size,
      classes,
      children,
      cancelText,
      okText,
      content
    } = _this$props,
          other = _objectWithoutPropertiesLoose(_this$props, ["color", "variant", "type", "size", "classes", "children", "cancelText", "okText", "content"]);

    const {
      open,
      positionTop,
      positionLeft,
      anchorReference,
      anchorEl
    } = this.state;
    return React.createElement("div", null, React.createElement("div", {
      className: classes.box,
      ref: this.anchorRef,
      onClick: this.handleClick
    }, _ref, React.createElement("div", {
      className: classes.anchorElementBox
    }, children), _ref2), React.createElement(Popover, _extends({}, other, {
      open: open,
      anchorEl: anchorEl,
      anchorReferencecode: anchorReference,
      anchorPosition: {
        top: positionTop,
        left: positionLeft
      },
      onClose: this.handleClose,
      anchorOrigin: this.props.anchorOrigin,
      transformOrigin: this.props.transformOrigin
    }), React.createElement("div", {
      className: classes.contentBox
    }, React.createElement(PopoverContent, {
      onCancel: this.cancel,
      onConfirm: this.confirm,
      cancelText: cancelText,
      okText: okText,
      content: content,
      color: color,
      variant: variant,
      type: type,
      size: size
    }))));
  }

}

process.env.NODE_ENV !== "production" ? Popconfirm.propTypes = {
  /**
   * This is the point on the popconfirm which will attach to the children
   */
  anchorOrigin: PropTypes.shape({
    horizontal: PropTypes.oneOf(['left', 'center', 'right']),
    vertical: PropTypes.oneOf(['top', 'center', 'bottom'])
  }),

  /**
   * The name of the cancel button
   */
  cancelText: PropTypes.string,
  children: PropTypes.node,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: PropTypes.object.isRequired,

  /**
   * The color of the confirm button.
   */
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),

  /**
   * The content of popconfirm
   */
  content: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]),

  /**
   * The name of the confirm button
   */
  okText: PropTypes.string,

  /**
   * Callback fired when canceled
   */
  onCancel: PropTypes.func,

  /**
   * Callback fired when confirmed
   */
  onConfirm: PropTypes.func,

  /**
   * The size of buttons
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),

  /**
   * This is the point on the popconfirm where the popconfirm's children will attach to.
   */
  transformOrigin: PropTypes.shape({
    horizontal: PropTypes.oneOf(['left', 'center', 'right']),
    vertical: PropTypes.oneOf(['top', 'center', 'bottom'])
  }),

  /**
   * The type of the confirm button.
   */
  type: PropTypes.string,

  /**
   * @ignore will be spread to the confirm button
   */
  variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
} : void 0;
Popconfirm.defaultProps = {
  anchorOrigin: {
    vertical: 'top',
    horizontal: 'center'
  },
  transformOrigin: {
    vertical: 'bottom',
    horizontal: 'center'
  },
  color: 'primary',
  size: 'small',
  variant: 'text'
};
export default withStyles(styles, {
  name: 'RMPopconfirm'
})(Popconfirm);