basic/PopupConfirm.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Popup, Button, Header } from 'semantic-ui-react';
 
export default class PopupConfirm extends Component {
    constructor(props, context) {
        super(props, context);
 
        this.state = {
            showPopup: false,
            canConfirm: ''
        };
    }
 
    static propTypes = {
        trigger: PropTypes.any,
        content: PropTypes.string,
        onCancel: PropTypes.func,
        onConfirm: PropTypes.func,
        onCanConfirm: PropTypes.func
    };
 
    static defaultProps = {
        onCancel: () => {},
        onConfirm: () => {},
        onCanConfirm: () => {}
    };
 
    openPopup() {
        this.setState({ canConfirm: this.props.onCanConfirm(), showPopup: true });
    }
 
    closePopup() {
        this.setState({ showPopup: false });
    }
 
    handleCancel() {
        this.closePopup();
        this.props.onCancel();
    }
 
    handleConfirm() {
        this.closePopup();
        this.props.onConfirm();
    }
 
    render() {
        return (
            <Popup
                trigger={this.props.trigger}
                on="click"
                wide="very"
                hideOnScroll
                open={this.state.showPopup}
                onOpen={this.openPopup.bind(this)}
                onClose={this.closePopup.bind(this)}
            >
                <Header>{this.state.canConfirm ? this.state.canConfirm : this.props.content}</Header>
 
                {this.state.canConfirm ? (
                    <div className="rightFloated">
                        <Button icon="checkmark" content="Ok" color="green" onClick={this.handleCancel.bind(this)} />
                    </div>
                ) : (
                    <div className="rightFloated">
                        <Button icon="remove" content="Cancel" basic onClick={this.handleCancel.bind(this)} />
                        <Button icon="checkmark" content="Ok" color="green" onClick={this.handleConfirm.bind(this)} />
                    </div>
                )}
            </Popup>
        );
    }
}