dynamic-modal/examples/live-data.ts

The dynamic-modal is a solution of creation different modals into project using a json configuration file

import { IModalConfigLoader } from '../src/interfaces/modal'
import { IOption } from '../src/interfaces/option'

type IncomingProps = {
  typeList: Array<IOption>

  //Define function to receive selected element and formData (if you need to use) make read or select operations and build 
  //next select array of elements
  optionReadAction : (typeId: string, formData: any) => Promise<Array<IOption>>
}

type ResultProps = Omit<IncomingProps,'optionReadAction'|'typeList'> & Record<'typeId'|'optionId', string>

export interface ILiveDataModal {
  default: IModalConfigLoader<IncomingProps, ResultProps>
}

const liveDataModal: ILiveDataModal = {
  default: (props, action) => {
    return {
      reservedData: {}, //Put here any data that you want store and receive into modal output
      fields: [ //Put here any elements for render into modal
        {
          elementType: 'select',
          label: 'Type',
          options: props.typeList,
          name: 'typeId', //Element to be observed
          validation: {
            required: true,
            message: 'Please select a valid type'
          }
        },
        {
          elementType: 'select',
          label: 'Options',
          options: [],
          name: 'optionId',
          validation: {
            required: true,
            message: 'Please select a valid option'
          },
          liveData: {
            action: props.optionReadAction, //Define live data action (function that receive data selected from other field for execute and build other options)
            condition: ['typeId'] //Define element into modal was to observed
          }
        }
      ],
      style: { // Put here styles for modal like height or width
        width: '500px'
      },
      title: `Title of enable if modal`, //Title of modal
      out: action, //Function to receive data from modal
      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
        action: { text:'Action', color: 'primary' },
        cancel: { text: 'Cancel', color: 'danger' }
      }
    }
  }
}

export default liveDataModal