dynamic-modal/examples/simple.ts

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

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

type IncomingProps = {
  reserved: string
  input1: string
  store?: boolean
  clear?: boolean
}

type ResultProps = IncomingProps

export interface ISimpleModal {
  default: IModalConfigLoader<IncomingProps, ResultProps> //Define others modals if you want
}

const simpleModal: ISimpleModal = {
  default: (props, action) => {
    return {
      reservedData: { reserved: props.reserved }, //Put here any data that you want store and receive into modal output
      fields: [ //Put here any elements for render into modal
        {
          elementType: 'input',
          label: 'Input 1',
          defaultValue: props.input1,
          name: 'input1',
          validation: {
            required: true,
            message: 'This field is required',
            regex: undefined //Use regex for custom validation
          }
        },
        {
          elementType: 'group', //Put here groups of element into same line and customize using styles
          groups: [
            {
              elementType: 'toggle',
              label: 'Store',
              defaultValue: `${props.store ?? false}`,
              name: 'store',
              styles: {
                width: '50%'
              },
              validation: {
                required: false
              }
            },
            {
              elementType: 'toggle',
              label: 'Clear',
              defaultValue: `${props.clear ?? false}`,
              name: 'clear',
              styles: {
                width: '50%'
              },
              validation: {
                required: false
              }
            }
          ]
        },
      ],
      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 simpleModal