dynamic-modal/examples/enable-if.ts

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

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

export type IncomingProps = object

type ResultProps = Record<'optionId', string> & Partial<Record<'input1ReadOnly' | 'input1WriteValue' | 'input2ReadOnly' | 'input2WriteValue', string>>

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

const enableIfModal: IEnableIfModal = {
  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: 'option',
          defaultValue: '0',
          options: [
            {
              id: '0',
              name:'Select...'
            },
            {
              id: '1',
              name:'Option 1'
            },
            {
              id: '2',
              name:'Option 2'
            }
          ],
          name: 'optionId', //Element to be observed
          validation: {
            required: true,
            message: 'Please select a valid option'
          }
        },
        {
          elementType: 'group', //Put here groups of element into same line and customize using styles
          groups: [
            {
              elementType: 'input',
              label: 'Input 1 (Read)',
              name: 'input1ReadOnly',
              styles: {
                width: '50%'
              },
              validation: {
                required: false
              },
              //Define enable condition (element will be enabled when value of element observed match with array condition)
              enableIf: {
                optionId: ['1']
              }
            },
            {
              elementType: 'input',
              label: 'Input 1',
              name: 'input1WriteValue',
              styles: {
                width: '50%'
              },
              validation: {
                required: true,
                message: `Write a valid input value`
              },
              //Define enable condition (element will be enabled when value of element observed match with array condition)
              enableIf: {
                optionId: ['1']
              }
            },
          ]
        },
        {
          elementType: 'group', //Put here groups of element into same line and customize using styles
          groups: [
            {
              elementType: 'input',
              label: 'Input 2 (Read)',
              name: 'input2ReadOnly',
              disabled: true,
              styles: {
                width: '50%'
              },
              validation: {
                required: false
              },
              //Define enable condition (element will be enabled when value of element observed match with array condition)
              enableIf: {
                optionId: ['2']
              }
            },
            {
              elementType: 'input',
              label: 'Input 2',
              name: 'input2WriteValue',
              styles: {
                width: '50%'
              },
              validation: {
                required: true,
                message: `Write a valid input value`
              },
              //Define enable condition (element will be enabled when value of element observed match with array condition)
              enableIf: {
                optionId: ['2']
              }
            },
          ]
        },
      ],
      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 enableIfModal