dynamic-modal/src/interfaces/modal.ts

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

import { CSSProperties } from 'react';

import { IMakeSelect } from './make-select';
import { IMakeInput } from './make-input';
import { IMakeTextarea } from './make-textarea';
import { IMakeToggle } from './make-toggle';
import { IMakeDescription } from './make-description';
import { IMakeFieldGroup } from './make-field-group';
import { IMakeUpload } from './make-upload';
import { IOption } from './option';
import { IMakeButton } from './make-button';

export type IModalField =
  | IMakeSelect
  | IMakeInput
  | IMakeFieldGroup
  | IMakeTextarea
  | IMakeToggle
  | IMakeDescription
  | IMakeUpload
  | IMakeButton;

export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;

export interface IModalRenderAction {
  action: (data: string, ...args: any[]) => Promise<boolean>;
  condition: Array<string>;
}

export type IModalRenderCriteria = Record<
  string,
  Array<string | number | boolean> | undefined
>;

export type IModalRenderCondition = IModalRenderAction | IModalRenderCriteria;

export type IModalLiveDataCondition = {
  action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
  condition: Array<string>;
};

export interface IModalConfigProps {
  reservedData?: Record<string, any>;
  title: string;
  fields: Array<IModalField>;
  out: (data: any) => void;
  onClose?: () => void;
  style?: CSSProperties;
  overFlowBody?: string | number;
  minHeightBody?: string | number;
  useSubmit?: boolean;
  actions: {
    containerStyle?: CSSProperties;
    cancel?: Omit<IMakeButton, 'elementType'>;
    action: Omit<IMakeButton, 'elementType'>;
  };
}

export type IModalConfigLoader<T = any, D = any> = (
  props: T,
  action: (modalResult: D) => void,
) => IModalConfigProps;

export interface IModal {
  open: boolean;
  close: () => void;
  config: IModalConfigProps;
}