frontend/src/modules/modals/WithModal.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* eslint-disable @typescript-eslint/ban-types */

import { ContextModalProps } from "@mantine/modals";
import { ModalSettings } from "@mantine/modals/lib/context";
import { createContext, FunctionComponent } from "react";

export type ModalComponent<P extends Record<string, unknown> = {}> =
  FunctionComponent<ContextModalProps<P>> & {
    modalKey: string;
    settings?: ModalSettings;
  };

export const StaticModals: ModalComponent[] = [];

export const ModalIdContext = createContext<string | null>(null);

export default function withModal<T extends {}>(
  Content: FunctionComponent<T>,
  key: string,
  defaultSettings?: ModalSettings,
) {
  const Comp: ModalComponent<T> = (props) => {
    const { id, innerProps } = props;

    return (
      <ModalIdContext.Provider value={id}>
        <Content {...innerProps}></Content>
      </ModalIdContext.Provider>
    );
  };
  Comp.modalKey = key;
  Comp.settings = defaultSettings;

  StaticModals.push(Comp as ModalComponent);
  return Comp;
}