adminjs
Version:
Admin panel for apps written in node.js
74 lines • 2.25 kB
JavaScript
import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { hideModal, showModal } from '../store/actions/index.js';
import useTranslation from './use-translation.js';
export const useModal = () => {
const dispatch = useDispatch();
const {
translateButton,
translateLabel,
translateMessage
} = useTranslation();
const closeModal = useCallback(() => {
dispatch(hideModal());
}, []);
const openModal = props => {
const {
modalProps,
type,
confirmAction,
resourceId
} = props;
let buttons = modalProps.buttons || [];
const handleConfirm = () => {
closeModal();
if (confirmAction) confirmAction();
};
if (buttons.length) {
buttons = buttons.map(button => {
button.variant = button.variant || 'default';
if (button.label === 'cancel') {
button.onClick = button.onClick || closeModal;
}
button.label = translateButton(button.label || '', resourceId);
return button;
});
}
if (type === 'confirm') {
buttons.push({
label: translateButton('cancel', resourceId),
onClick: closeModal
});
buttons.push({
label: translateButton('confirm', resourceId),
variant: modalProps.variant || 'primary',
onClick: handleConfirm
});
}
if (type === 'alert') {
buttons.push({
label: translateButton('ok', resourceId),
variant: 'primary',
onClick: closeModal
});
}
const getDefaultTranslationKey = placement => `modal-${placement}`;
const data = {
modalProps: {
...modalProps,
label: translateLabel(modalProps.label ?? getDefaultTranslationKey('label'), resourceId),
title: translateMessage(modalProps.title ?? getDefaultTranslationKey('title'), resourceId),
subTitle: translateMessage(modalProps.subTitle ?? getDefaultTranslationKey('subTitle'), resourceId),
variant: modalProps.variant,
buttons,
onClose: modalProps.onClose || closeModal,
onOverlayClick: modalProps.onOverlayClick || closeModal
}
};
dispatch(showModal(data));
};
return {
openModal,
closeModal
};
};