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

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _Popover = _interopRequireDefault(require("../Popover"));

var _content = _interopRequireDefault(require("./content"));

/**
 * @ignore - do not document.
 */
var styles = function styles(theme) {
  return {
    box: {
      display: 'inline-block'
    },
    anchorElementBox: {
      // padding: theme.spacing(1),
      boxSizing: 'border-box',
      display: 'inline-block'
    },
    contentBox: {}
  };
};

exports.styles = styles;

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

  function Popconfirm() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Popconfirm);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Popconfirm)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      open: false,
      anchorReference: 'anchorEl'
    };
    _this.anchorEl = null;
    _this.anchorRef = _react.default.createRef();

    _this.handleClick = function (e) {
      _this.setState({
        open: true
      });
    };

    _this.handleClose = function () {
      _this.setState({
        open: false
      });
    };

    _this.confirm = function () {
      _this.props.onConfirm && _this.props.onConfirm();

      _this.setState({
        open: false
      });
    };

    _this.cancel = function () {
      _this.props.onCancel && _this.props.onCancel();

      _this.setState({
        open: false
      });
    };

    return _this;
  }

  (0, _createClass2.default)(Popconfirm, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var el = _reactDom.default.findDOMNode(this.anchorRef.current);

      this.setState({
        anchorEl: el
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          color = _this$props.color,
          variant = _this$props.variant,
          type = _this$props.type,
          size = _this$props.size,
          classes = _this$props.classes,
          children = _this$props.children,
          cancelText = _this$props.cancelText,
          okText = _this$props.okText,
          content = _this$props.content,
          other = (0, _objectWithoutProperties2.default)(_this$props, ["color", "variant", "type", "size", "classes", "children", "cancelText", "okText", "content"]);
      var _this$state = this.state,
          open = _this$state.open,
          positionTop = _this$state.positionTop,
          positionLeft = _this$state.positionLeft,
          anchorReference = _this$state.anchorReference,
          anchorEl = _this$state.anchorEl;
      return _react.default.createElement("div", null, _react.default.createElement("div", {
        className: classes.box,
        ref: this.anchorRef,
        onClick: this.handleClick
      }, _react.default.createElement("div", null), _react.default.createElement("div", {
        className: classes.anchorElementBox
      }, children), _react.default.createElement("div", null)), _react.default.createElement(_Popover.default, (0, _extends2.default)({}, other, {
        open: open,
        anchorEl: anchorEl,
        anchorReferencecode: anchorReference,
        anchorPosition: {
          top: positionTop,
          left: positionLeft
        },
        onClose: this.handleClose,
        anchorOrigin: this.props.anchorOrigin,
        transformOrigin: this.props.transformOrigin
      }), _react.default.createElement("div", {
        className: classes.contentBox
      }, _react.default.createElement(_content.default, {
        onCancel: this.cancel,
        onConfirm: this.confirm,
        cancelText: cancelText,
        okText: okText,
        content: content,
        color: color,
        variant: variant,
        type: type,
        size: size
      }))));
    }
  }]);
  return Popconfirm;
}(_react.default.Component);

Popconfirm.propTypes = {
  /**
   * This is the point on the popconfirm which will attach to the children
   */
  anchorOrigin: _propTypes.default.shape({
    horizontal: _propTypes.default.oneOf(['left', 'center', 'right']),
    vertical: _propTypes.default.oneOf(['top', 'center', 'bottom'])
  }),

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

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

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

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

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

  /**
   * Callback fired when canceled
   */
  onCancel: _propTypes.default.func,

  /**
   * Callback fired when confirmed
   */
  onConfirm: _propTypes.default.func,

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

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

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

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

var _default = (0, _withStyles.default)(styles, {
  name: 'RMPopconfirm'
})(Popconfirm);

exports.default = _default;