chentsulin/sweetalert-react

Possible to do the custom callback from sweet alert?

Closed this issue · 1 comments

The example from http://t4t5.github.io/sweetalert/, specifically:

A warning message, with a function attached to the "Confirm"-button...

swal({   
  title: "Are you sure?",   
  text: "You will not be able to recover this imaginary file!",   
  type: "warning",   
  showCancelButton: true,  
  confirmButtonColor: "#DD6B55",   
  confirmButtonText: "Yes, delete it!",   
  closeOnConfirm: false 
}, 
function(){   
  swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
}
);

Should be something like below in react way:

class extends Component {
  state = {
    show: true,
    type: 'warning',
    title: 'Are you sure?',
    text: 'You will not be able to recover this imaginary file!',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!',
    onConfirm: () => this.setState({
      title: 'Deleted!',
      text: 'Your imaginary file has been deleted.',
      type: 'success',
      showCancelButton: false,
      confirmButtonText: 'OK!',
      onConfirm: () => this.setState({
        show: false,
      }),
    })
  };

  render() {
    return (
      <SweetAlert
        show={this.state.show}
        title={this.state.title}
        text={this.state.text}
        type={this.state.type}
        showCancelButton={this.state.showCancelButton}
        confirmButtonColor: "#DD6B55",
        confirmButtonText={this.state.confirmButtonText}
        onConfirm={this.state.onConfirm}
      />
    );
  }
}

And you can simplify this via flux-like arch architecture.