46 lines
1.0 KiB
JavaScript
46 lines
1.0 KiB
JavaScript
import {useCallback, useMemo, useState} from 'react';
|
|
import * as React from 'react';
|
|
|
|
import Modal from '../plugins/Input/Modal';
|
|
|
|
export default function useModal(){
|
|
const [modalContent, setModalContent] = useState(null);
|
|
|
|
const onClose = useCallback(() => {
|
|
setModalContent(null);
|
|
}, []);
|
|
|
|
const modal = useMemo(() => {
|
|
if (modalContent === null) {
|
|
return null;
|
|
}
|
|
const {title, content, closeOnClickOutside} = modalContent;
|
|
console.log("modalContent !== null",modalContent)
|
|
return (
|
|
<Modal
|
|
onClose={onClose}
|
|
title={title}
|
|
closeOnClickOutside={closeOnClickOutside}>
|
|
{content}
|
|
</Modal>
|
|
);
|
|
}, [modalContent, onClose]);
|
|
|
|
const showModal = useCallback(
|
|
(
|
|
title,
|
|
getContent,
|
|
closeOnClickOutside = false,
|
|
) => {
|
|
setModalContent({
|
|
closeOnClickOutside,
|
|
content: getContent(onClose),
|
|
title,
|
|
});
|
|
},
|
|
[onClose],
|
|
);
|
|
|
|
return [modal, showModal];
|
|
}
|