You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bazarr/frontend/src/modules/modals/hooks.ts

47 lines
1.2 KiB

/* eslint-disable @typescript-eslint/ban-types */
import { useModals as useMantineModals } from "@mantine/modals";
import { ModalSettings } from "@mantine/modals/lib/context";
import { useCallback, useContext, useMemo } from "react";
import { ModalComponent, ModalIdContext } from "./WithModal";
export function useModals() {
const { openContextModal: openMantineContextModal, ...rest } =
useMantineModals();
const openContextModal = useCallback(
<ARGS extends {}>(
modal: ModalComponent<ARGS>,
props: ARGS,
settings?: ModalSettings
) => {
openMantineContextModal(modal.modalKey, {
...modal.settings,
...settings,
innerProps: props,
});
},
[openMantineContextModal]
);
const closeContextModal = useCallback(
(modal: ModalComponent) => {
rest.closeModal(modal.modalKey);
},
[rest]
);
const id = useContext(ModalIdContext);
const closeSelf = useCallback(() => {
if (id) {
rest.closeModal(id);
}
}, [id, rest]);
// TODO: Performance
return useMemo(
() => ({ openContextModal, closeContextModal, closeSelf, ...rest }),
[closeContextModal, closeSelf, openContextModal, rest]
);
}