Mostra finestra di dialogo personalizzata setRouteLeaveHook o history.listenPrima di reagire-router/redux?

Question

Non riesco a capire come mostrare un dialogo personalizzato invece di utilizzare il normale window.confirm utilizzato da routeWillLeave e history.listenBefore. Fondamentalmente ho costruito un sistema di notifica e controllo se un modulo è sporco const { dispatch, history, dirty } = this.props;

se il modulo è sporco significa che l'utente ha modifiche non salvate. Se cambiano rotta, vorrei mostrare la mia notifica che avrà due pulsanti STAY, IGNORE che possono entrambi assumere un gestore onClick.

Ive ha trascorso un po 'di tempo su google e non ha trovato alcun riferimento a come avrei potuto ottenere ciò utilizzando routeWillLeave. La cosa più vicina che ho trovato era usare history.listenBefore tuttavia i documenti dicono che ho bisogno di farlo.

let history = createHistory({ 
    getUserConfirmation(message, callback) { 
    callback(window.confirm(message)) // The default behavior 
    } 
}) 

Ma io sto usando browserHistory da reagire-router di avviare il mio negozio const history = syncHistoryWithStore(browserHistory, store);

Come posso fermare un cambiamento percorso dopo un link è stato cliccato, mostrano una notifica utilizzando il mio sistema di notifica personalizzato e seconda su quale pulsante si fa clic su una transizione alla nuova rotta o si rimane?

Ecco un esempio di come funziona il mio sistema di notifica e la direzione in cui ovviamente non funziona perché tutto ciò che restituisce è una stringa da mostrare nel dialogo window.confirm per impostazione predefinita.

history.listenBefore((location) => { 
    if(this.props.dirty){ 
    const acceptBtn = { 
     title: 'STAY', 
     handler: ignoreRouteChange() //This can be any function I want 
    } 
    const denyBtn = { 
     title: 'IGNORE', 
     handler: continueRouteChange() //This can be any function I want 
    } 
    return dispatch(addNotification({ 
     message: 'You have unsaved changes!', 
     type: NOTIFICATION_TYPE_WARNING, 
     duration: 0, 
     canDismiss: false, 
     acceptBtn, 
     denyBtn 
    })); 
    return "Usaved changes!" 
    } 
}); 

Grazie

Answer 1

Un'altra soluzione che ho deciso di utilizzare è quello di restituire false nel normale callback setRouterLeaveHook e poi mostrare la mia finestra e utilizzare il nextLocation passato al callback per spingere il percorso successivo a seconda del pulsante selezione.

router.setRouteLeaveHook(route, this.routerWillLeave.bind(this)); 

routerWillLeave(nextLocation){ 
    let { dirty, dispatch, resetForm } = this.props; 
    if (dirty) { 
    let dialog = { 
     id: Date.now(), 
     showTitle: true, 
     titleContent: 'Unsaved Changes', 
     titleIcon: 'fa fa-warning', 
     content: <span>You have <strong>unsaved</strong> changes! <strong>Discard</strong> them?</span>, 
     type: 'confirm', 
     handleCloseClick: (e) => { 
     e.preventDefault(); 
     dispatch(closeDialog()); 
     }, 
     acceptBtn: { 
     title: 'Okay', 
     handler: (e) => { 
      e.preventDefault(); 
      resetForm(); 
      // Wait for call stack to unwind and then execute 
      // the following which will now have the updated values. 
      setTimeout(() => { 
      dispatch(push(nextLocation)); 
      dispatch(closeDialog()); 
      }, 0); 
     } 
     }, 
     denyBtn: { 
     title: 'Deny', 
     handler: (e) => { 
      e.preventDefault(); 
      dispatch(closeDialog()); 
     } 
     } 
    } 
    dispatch(addDialogWindow(dialog)); 
    dispatch(openDialog(false, (e) => dispatch(closeDialog()), false)); 
    return false; 
    } 
    return true; 
}