Simpler modal/confirm api
Confirming and displaying modal data is much easier now. Methods have been removed from modal in favor of stateful properties for controlling display of modals.
simple confirm function using modal dialog:
import ConfirmDialog from 'spectre-canjs/sp-confirm/sp-confirm';
function confirm(content, viewModel = {}, scope = {}) {
viewModel.active = true;
const confirm = new ConfirmDialog({
content,
viewModel,
scope: {
},
});
document.body.appendChild(confirm.element);
return confirm.viewModel.promise.then((outcome) => {
document.body.removeChild(confirm.element);
return confirm.viewModel;
});
}Usage:
const {outcome} = await confirm('<h1>Are you sure about this????</h1>', {
// viewmodel properties
title: 'A dangerous action'
});
if(outcome.state === 'accepted'){
// do dangerous things
} else if(outcome.state === 'rejected'){
// user cancelled or closed the dialog
}