99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import {
|
|
ModalProps as MantineModalProps,
|
|
Stack,
|
|
Modal as MantineModal,
|
|
Flex,
|
|
Group,
|
|
} from '@mantine/core';
|
|
import { closeAllModals, ContextModalProps } from '@mantine/modals';
|
|
import { Button } from '/@/renderer/components/button';
|
|
|
|
export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
|
|
children?: ReactNode;
|
|
handlers: {
|
|
close: () => void;
|
|
open: () => void;
|
|
toggle: () => void;
|
|
};
|
|
}
|
|
|
|
export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
|
|
return (
|
|
<MantineModal
|
|
{...rest}
|
|
onClose={handlers.close}
|
|
>
|
|
{children}
|
|
</MantineModal>
|
|
);
|
|
};
|
|
|
|
export type ContextModalVars = {
|
|
context: ContextModalProps['context'];
|
|
id: ContextModalProps['id'];
|
|
};
|
|
|
|
export const BaseContextModal = ({
|
|
context,
|
|
id,
|
|
innerProps,
|
|
}: ContextModalProps<{
|
|
modalBody: (vars: ContextModalVars) => React.ReactNode;
|
|
}>) => <>{innerProps.modalBody({ context, id })}</>;
|
|
|
|
Modal.defaultProps = {
|
|
children: undefined,
|
|
};
|
|
|
|
interface ConfirmModalProps {
|
|
children: ReactNode;
|
|
disabled?: boolean;
|
|
labels?: {
|
|
cancel?: string;
|
|
confirm?: string;
|
|
};
|
|
loading?: boolean;
|
|
onCancel?: () => void;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export const ConfirmModal = ({
|
|
loading,
|
|
disabled,
|
|
labels,
|
|
onCancel,
|
|
onConfirm,
|
|
children,
|
|
}: ConfirmModalProps) => {
|
|
const handleCancel = () => {
|
|
if (onCancel) {
|
|
onCancel();
|
|
} else {
|
|
closeAllModals();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Stack>
|
|
<Flex>{children}</Flex>
|
|
<Group position="right">
|
|
<Button
|
|
data-focus
|
|
variant="default"
|
|
onClick={handleCancel}
|
|
>
|
|
{labels?.cancel ? labels.cancel : 'Cancel'}
|
|
</Button>
|
|
<Button
|
|
disabled={disabled}
|
|
loading={loading}
|
|
variant="filled"
|
|
onClick={onConfirm}
|
|
>
|
|
{labels?.confirm ? labels.confirm : 'Confirm'}
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
};
|