@xtreamr/spark-modal

spark-modal

Describe spark-modal here.

Two main export:

1- ModalService: It is used to add, show, hide and remove modals. Diferents steps to use:

• First is to unse ModalService.add({ name: 'modalName', leaveAnimation: 'true|false' }). It register the modal into the service.
• After add, you can use ModalService.show({ name: 'modalName' }). It's, emit an event 'show-modal'.
• Using ModalService.on({ event: 'show-modal', callback: func }) you will be react, maybe rendering the modal.
• If you use ModalService.hide() you will be able to listen one of this methods: ** Using ModalService.on({ event: 'leave-modal', callback: func }) if the modal was added with existAnimation. If you use this method remember to call ModalService.left() after unmount your modal from the UI. ** Using ModalService.on({ event: 'hide-modal', callback: func }) if the modal was added without existAnimation.
• When you don't need any more a modal remember to remove it from with ModalService.remove({ name: modalName })
• Same with events listeners using ModalService.off({ event: 'show-modal | hide-modal | leave-modal', callback: func })

2- Hooks to integrate with react: 2.1 - [{ show }] = useShowHideModal({ name: string, willShow: func, willHide: func }) Use this hook into any modal component to add the modal to service and it will response with a variable to show and hide the modal. Also, pass a function callback into willShow and willHide to perform any arbitrary process when the modal will show or hide. Example:

export const ModalHookedNoAnim = ({ children, name }) => {
  const [{ show }] = useShowHideModal({ 
    name,
    willShow: () => console.log('will show'),
    willHide: () => console.log('will hide')
  })

  return (
    <Fragment>
      {show && 
        <ModalOverlay>
          <ModalBox>
            {children}
          </ModalBox>
        </ModalOverlay>
    } 
    </Fragment>
  )
}

2.1 - [{ show, leave }, setHideModal] = useShowLeaveModal({ name: string, willShow: func, willLeave: func }) The difference between this hook and useShowHideModal is that it isn't unselected into ModalService until call setHideModal function. So, when you detect that the variable: leave returned by the hook is true is the moment to perform an animation and when this animation ends call setHideModal() to unselect the modal into ModalService. Also, pass a function callback to willShow and willLeave to perform any arbitrary process when the modal will show or leave.

export const ModalHooked = ({ children, name }) => {
  const [{ show, leave }, setHideModal] = useShowLeaveModal({ 
    name, 
    willShow: () => console.log('willlll show'),
    willLeave: () => console.log('willlll leave'),
  })

  const handleOnLeft = () => {
    setHideModal()
  }

  return (
    ReactDOM.createPortal(
      <Fragment>
        {show && 
          <ModalOverlay
            onLeft={handleOnLeft}
            runLeave={leave}
          >
            <ModalBox>
              {children}
            </ModalBox>
          </ModalOverlay>
      } 
      </Fragment>,
      document.body
    )
  )
}

3- withModalPortal It is a react HOC that:

• Add to ModalService the Modal calling ModalService.add(...). You sould pass as prop: name and leaveAnimation
• Also, this HOC pass down to the Component the leave prop. Only with leaveAnimation="true" modals. Use it to perform an animation befor unmount modal. A good point to use it is in componentDidUpdate

componentDidUpdate(prevProps) {
  // if prop leave has just set and it has just changed
  if (this.props.leave && this.props.leave !== prevProps.leave) {
    // exec leave animation
  }
}

• When the animation ends (with modals with leaveAnimation="true") use a method hideMe passed in props from HOC to remove from the DOM the modal. If your modal is leaveAnimation="false" this method is called into HOC, you don't need to use it.
• When the modal is umounted this HOC will remove the events listeners and the modal from the service.
• Show demo/src/Modal to view how is implemented

4- Some props as functions callbacks to interact after an before modal enter, hide or leave. They are injected with: withModalPortal HOC, and you can use them as regular prop:

willShow={() => {}}
willLeave={() => {}}
willHide={() => {}}
didShow={() => {}}
didLeave={() => {}}
didHide={() => {}}
didShow={() => {}}

const Modal = <div>I am a modal</div>
const ModalPortal = withModalPortal(Modal)

<ModalPortal willShow={() => console.log('showww)} />