Modal

Modal is a popup screen within the same page. There are three major steps to create a Modal Dialog:

Create the popup element using class or hook component
Insert a <Popup /> element within the parent layout page
Use the popup() function in onClick action

const layout = ({ _, call, Popup, popup, popupClose }) => <>
    ...
    <Button onClick={popup(Address, { title: 'In module popup' })}>
        Enter Address!
    </Button>
    ...
    <Popup />
</>

<Popup>

The container element injected as a property for the layout element, you need to insert the element within the layout page.

popup(element, param, callback)

Function to invoke the popup dialog with the following parameters:

element: string

The element passed to the popup Modal.

param: any

A single value or object passed to the popup component.

callback: function

A callback function passed to the popup Modal used for returning values from popup.

Example

Button to trigger popup in parent form.

Popup form.

Visit example.u.team/modal to try out the live examples.

In this example the address is defined in the same component js file. The address then binds to the same reducer 'react-example/modal-hook' of the main layout element using utBindElement(). An Enter Address! button is inserted in the underlining layout. Clicking which will trigger an in module pop-up.

The <Field> updated in the popup form is instantly updated in the store which is retrieved in the layout using _.fields.address.value since the two components are bound to the same reducer. There is a default close button for closing the popup form. Therefore, there is no need to pass the callback to handle the return value.

const reducer = utReducer('react-example/modal-hook', {
    init: {
        fields: {
            name: { label: 'Please enter your name' },
        },
    },
})

const address = ({Field}) => <>
    <Field id='address' />
    <p>Note: This component bound to the same reducer of main form</p> </>

const layout = ({ _, call, Popup, popup}) => <>
    <p>Another example for inline module</p>
    <Button onClick={popup(Address, { title: 'In module popup' })}>
        Enter Address!
    </Button>
    <h6><br />Your address is: {_.fields.address.value}</h6>
    <Popup />
</>

const Address = utBindElement({name: 'react-example/modal-hook',
                layout: address})

Inter Module Pop-up

In this example, the popup form is defined in a separate component with its own reducer.

Visit example.u.team/modal to try out the live examples.

The separate popup component modalhookpopup.js.

import { utCreateElement } from '@uteamjs/react'
import { utReducer } from '@uteamjs/react-form'
import { Button } from 'react-bootstrap'

const reducer = utReducer('react-example/modal-hook-popup', {
    init: {
       fields: {
     name: { label: 'Please enter your name', value: '' }
  }},
    actions: {update: (state, value) => state.fields.name.value = value }
})

const layout = ({ _, Field, param, callback, ButtonGroup }) => <>
    <h5>{param || 'This is standalone module used for popup'}</h5>
    <Field id='name' />
    <ButtonGroup>
        <Button
          onClick={callback ? callback(_.fields.name.value):()=>{}}>
      Done
  </Button>
    </ButtonGroup>
</>

Two special properties param and callback are passed from the parent. <ButtonGroup> is used to align the <Button> to the right. onClick triggers the callback function by passing _.fields.name.value back to the parent component.

Layout

When the button Enter Name! is pressed, a window will be popped up to enter Your name. The name will be stored in the popup Reducer, and will be passed back to the parent component. After user input, the returned name from the popup will appear on ‘Your name is: ...’.

import { utCreateElement, utBindElement, utReducer } from '@uteamjs/react'
import { Button } from 'react-bootstrap'
import ModalPopup from './modalhookpopup'

const reducer = utReducer('react-example/modal-hook', {
    init: {
        isRow: false, isEdit: true,
        fields: {
            name: {label: 'Please enter your name'}}}
    actions:{update:(state, value) => state.fields.name.value = value}
})

const layout = ({ _, call, Popup, popup, popupClose }) => <>
    <h4>Popup Up/Modal with init and return value</h4>
    <Button onClick={popup(() =>
            <ModalPopup param='Popup from react-example/modal-hook'
            callback={value => () => call('update', value, popupClose)}/>,
        { title: 'Inter module popup' })}> Enter Name! </Button>

    <h6><br />Your name is: {_.fields.name.value}</h6>
    <Popup />
</>

export default utCreateElement({ reducer, layout })

First it needs to import the <ModalPopup> element.

There is an update action which will be called by the popup callback function.

When the button onClick is triggered, it calls the popup function with parameters:

An inline component which in turn calls the <ModalPopup /> element.

A callback function to call the update action with return value

popupClose function to close the popup window after update.

The return value from popup is then stored in the fields.name.value.

Remember to insert a <Popup> element within the Layout.