Allow passing props through to determine modal options
This commit is contained in:
parent
c28cba92e2
commit
e873c597bb
4 changed files with 39 additions and 26 deletions
|
@ -32,7 +32,7 @@ const ApiKeyModal = ({ apiKey }: Props) => {
|
|||
|
||||
ApiKeyModal.displayName = 'ApiKeyModal';
|
||||
|
||||
export default asModal({
|
||||
export default asModal<Props>({
|
||||
closeOnEscape: false,
|
||||
closeOnBackground: false,
|
||||
})(ApiKeyModal);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useContext, useEffect } from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
import asModal from '@/hoc/asModal';
|
||||
|
@ -12,12 +12,8 @@ type Props = {
|
|||
showSpinnerOverlay?: boolean;
|
||||
};
|
||||
|
||||
const ConfirmationModal = ({ title, children, buttonText, onConfirmed, showSpinnerOverlay }: Props) => {
|
||||
const { dismiss, toggleSpinner } = useContext(ModalContext);
|
||||
|
||||
useEffect(() => {
|
||||
toggleSpinner(showSpinnerOverlay);
|
||||
}, [ showSpinnerOverlay ]);
|
||||
const ConfirmationModal = ({ title, children, buttonText, onConfirmed }: Props) => {
|
||||
const { dismiss } = useContext(ModalContext);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -37,4 +33,6 @@ const ConfirmationModal = ({ title, children, buttonText, onConfirmed, showSpinn
|
|||
|
||||
ConfirmationModal.displayName = 'ConfirmationModal';
|
||||
|
||||
export default asModal()(ConfirmationModal);
|
||||
export default asModal<Props>(props => ({
|
||||
showSpinnerOverlay: props.showSpinnerOverlay,
|
||||
}))(ConfirmationModal);
|
||||
|
|
|
@ -86,12 +86,14 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
|
|||
</div>
|
||||
}
|
||||
{showSpinnerOverlay &&
|
||||
<div
|
||||
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
|
||||
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
|
||||
>
|
||||
<Spinner/>
|
||||
</div>
|
||||
<Fade timeout={150} appear in>
|
||||
<div
|
||||
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
|
||||
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
|
||||
>
|
||||
<Spinner/>
|
||||
</div>
|
||||
</Fade>
|
||||
}
|
||||
<div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
|
||||
{children}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue