@depay/react-dialog-stack

Quickstart

yarn add @depay/react-dialog-stack

or

npm install --save @depay/react-dialog-stack

import { ReactDialogStack } from '@depay/react-dialog-stack'

  closeDialogStack() {
    this.setState({openDialogStack: false});
  }

render() {
  return(
    <ReactDialogStack
      open={this.state.openDialogStack}
      close={this.closeDialogStack}
      start='StartDialog'
      dialogs={{
        StartDialog: <StartDialog/>,
        SecondDialog: <SecondDialog/>,
        ThirdDialog: <ThirdDialog/>
      }}
    />
  )
}

Demo

https://depayfi.github.io/react-dialog-stack/demo.html

Functionalities

Render

import { ReactDialogStack } from '@depay/react-dialog-stack'

render() {
  return(
    <ReactDialogStack
      open={this.state.openDialogStack}
      close={this.closeDialogStack}
      start='StartDialog'
      dialogs={{
        StartDialog: <StartDialog/>,
        SecondDialog: <SecondDialog/>,
        ThirdDialog: <ThirdDialog/>
      }}
    />
  )
}

Props

close (function): A function living in the dialog stack parent that is called from the ReactDialogStack on a close attempt. The parent has to take care if a dialog is closable, and needs to set it's own state accordingly.

  close() {
    if(this.state == something) {
      this.setState({ showDialog: false })
    }
  }

  /*...*/

  <ReactDialogStack
    close={this.close}
    open={this.state.showDialog}
  />

setNavigate (function): A function which will be called from the stack construtor to share the navigate function with the outside:

  const setNavigate = (navigator)=> {
    window.navigate = navigator
  }

  /*...*/

  <ReactDialogStack
    close={this.close}
    setNavigate={setNavigate}
    open={this.state.showDialog}
  />

  /*...*/

  window.navigate('AnotherDialog')

document (Document): Allows to forward a different document where the dialog is supposed to live in (created through ReactDOM portal).

  <ReactDialogStack 
    document={someIframe.document}
  />

container (HTMLElement): Allows to provide an explicit container the dialog stack is rendered into (created through ReactDOM portal).

  <ReactDialogStack 
    container={document.getElementById('app')}
  />

background (string): Background passed as CSS to the ReactDialog.

  <ReactDialogStack
    background={'rgba(255,255,255,0.6)'}
  />

Contexts

Contexts can be used in dialogs passed to ReactDialogStack in order to communicate with the stack manager.

CloseStackContext

CloseStackContext provides close which can be used to close the entire ReactDialogStack.

import { CloseStackContext } from '@depay/react-dialog-stack'

render() {
  return(
    <CloseStackContext.Consumer>
      {close => (
        <div>
          <h1>I am the start dialog</h1>
          <button onClick={close}>
            Close Stack
          </button>
        </div>
      )}
    </CloseStackContext.Consumer>
  )
}

NavigateStackContext

NavigateStackContext provides navigate which can be used to stack/navigate another dialog and set which allows you to set the entire stack (without animation).

Either pass the dialog name as configured in ReactDialogStack prop named dialogs or pass back to navigate to unstack the current dialog.

import { NavigateStackContext } from '@depay/react-dialog-stack'

render() {
  return(
    <NavigateStackContext.Consumer>
      {({ navigate, set }) => (
        <div>
          <h1>I am the start dialog</h1>
          <button onClick={()=>navigate('DialogName')}>
            Next Dialog
          </button>
          <button onClick={()=>navigate('back')}>
            Back
          </button>
          <button onClick={()=>set(['DialogName'])}>
            Back
          </button>
        </div>
      )}
    </NavigateStackContext.Consumer>
  )
}

StackContext

StackContext provides stack which provides information about the current stack:

import { StackContext } from '@depay/react-dialog-stack'

render() {
  return(
    <StackContext.Consumer>
      {stack => (
        <div>
          Current Stack:
          { stack }
        </div>
      )}
    </StackContext.Consumer>
  )
}

Development

Get started

yarn install
yarn dev

Release

npm publish

Testing

Test single integration test

yarn test:cypress:debug --spec 'cypress/integration/navigate.js'

Show interactive Cypress browser

yarn test --headed