Issue
I have tried everything i can think of at this point in attempting to achieve a simple modal that requires that the user click a button (confirm or cancel) before the modal can dismiss.
In an Ionic React functional component, i have tried to instantiate a modal for this purpose using the useIonModal
hook with the canDismiss
property initially set to false
with the intent to change canDismiss
after the user clicks one of the buttons inside the modal. I have tried changing canDismiss
via both local state using the useState
hook as well as with global state via a react-redux
store among other ways noted below. Nothing i have tried manages to change the value of canDismiss
for the modal.
The code inside my functional component:
// I initially set canDismiss to false here
const [canDismiss, setCanDismiss] = useState(false);
const [presentDialog, dismissDialog] = useIonModal(Dialog, {
// When user clicks a button in the modal, the modalComplete method is called passing its payload to this parent
modalComplete: (payload) => {modalCompleteHandler(payload)}
});
// this is the method which is executed via the modal which attempts to set canDismiss to true
const modalCompleteHandler = useCallback((payload) => {
setCanDismiss(() => { return true });
// do stuff with the payload
}, []);
// i attempt to watch for the change in a useEffect hook and when attempting to dismiss the dialog after the change canDismiss === true, the dialog does NOT dismiss
useEffect(() => {
if(canDismiss) {
dismissDialog();
}
}, [canDismiss, dismissDialog]);
// this is the method that displays the modal with canDismiss set to false via useState hook noted above
const showDialogHandler = useCallback(()=> {
presentDialog({
canDismiss: canDismiss,
});
}, [canDismiss, presentDialog]);
I have tried to change the value for canDismiss
with and without a useEffect
hook as outlined above by also attempting to dismiss the modal immediately after setting canDismiss
to true
instead. This also did not work:
setCanDismiss(() => { return true });
dismissDialog();
I have tried using state inside a react-redux
store globally for changing the value of canDismiss
. This also did not work:
..
presentDialog({
canDismiss: uiState.modal.canDismiss,
});
...
dispatch(actionsUI.setCanDismiss({canDismiss: true}));
I have tried setting the value for canDismiss
to true
in the react-redux
store from the parent component as well as inside the modal component Dialog
prior to calling its modalComplete
method with payload
. Neither worked.
I have tried storing the value for canDismiss
using a simple object with useMemo
in the parent component. This also does not work:
const canDismissState = useMemo(() => { return {value: false} },[]);
...
canDismissState.value = true;
dismissDialog();
And lastly, i have tried using a ref
which also does not work:
const canDismissRef = useRef({value: false});
...
canDismissRef.current.value = true;
dismissDialog();
Absolutely nothing seems to change the value for canDismiss
after the modal is presented using the useIonModal
hook. Why?
I do NOT want to stuff a modal in my JSX with the necessary attributes as a solution.
Any help greatly appreciated.
Solution
Setting the value of canDismiss
to a function that returns a promise which resolves to true
or false
is the solution i was looking for.
As an example, here is one possible implementation which uses another ionic hook to achieve the goal:
const [present] = useIonActionSheet();
...
function canDismissFunc() {
return new Promise<boolean>((resolve, reject) => {
present({
header: 'Are you sure?',
buttons: [
{
text: 'Yes',
role: 'confirm',
},
{
text: 'No',
role: 'cancel',
},
],
onWillDismiss: (ev) => {
if (ev.detail.role === 'confirm') {
resolve(true);
} else {
reject();
}
},
});
});
}
...
// and when presenting the modal
presentDialog({
canDismiss: canDismissFunc,
});
Answered By - DevMike
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.