chained sweetalert call controlled by redux store
Gfast2 opened this issue · 0 comments
saBuilder(){
const { // Boolean hooks as "semaphore" to display/hide the defined sw
showAlert_confirm,
showAlert_cancel,
setting_succeed,
setting_failed,
tip_ip_set,
} = this.props;
const getS = () => { // getSentence for a specified alert (what kind of error is this)
return this.props.ipChanged ? "S_XS" : "S_SX";
}
const t = [ // Array for different event alertion contents
[ showAlert_confirm, "S_FY", "S_FC", true, "warning", this.alert_confirm_confirm, this.alert_confirm_canceled ], // Confirm alert
[ showAlert_cancel, "S_CC", "S_CT", true, "warning", this.alert_cancel_confirm, this.alert_cancel_canceled ], // Cancel alert
[ setting_succeed, "S_SS", getS(), false, "success", this.alert_OK_suc, this.alert_OK_suc ], // setting succeed
[ setting_failed, "S_SF", "S_SA", false, "error", this.alert_OK_fai, this.alert_OK_fai ], // setting failed
];
return t.map(
(e, i) => <SweetAlert
show={e[0]}
key ={e[1]}
title={trans(e[1])}
text ={trans(e[2])}
type ={e[4]}
showCancelButton = {e[3]}
confirmButtonColor="#DD6B55"
onConfirm= { () => e[5]() }
onCancel= { () => e[6]() }
onEscapeKey= { () => e[6]() }
animation = {false}
/>);
}
My questions is:
The code above works OK when these alerts a in the same React class. But if I'd like to trigger different sweetalert that difined in different React classes through these "Semaphores" that stored in the redux stores. It work not garantee anymore.
I've tracked the lifecyle functions call from these two modules. I find out that, I did turn off one sweetalert semaphore at first (in one module) and then turn on another for the other sweetalert that should be turned on in another module. But the second is just not shown up. In the Dom, it tells me that the second one should be shown, But if I change the state or props of the second react class. I got the alert...
My suspections:
The sweetalert library will not fast enough to mount / unmount its module in the DOM and React-Dom dose not tracking the change state of the sweetalert module. If this is the deal. That means we need a callback function from this library. Did we have one?