forked from Kieran/snort
close modal on click outside
This commit is contained in:
parent
0b67cfdc4e
commit
3e419d6715
@ -225,7 +225,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
|
||||
if (!show) return null;
|
||||
return (
|
||||
<Modal onClose={() => onClose()}>
|
||||
<Modal onClose={onClose}>
|
||||
<div className="lnurl-tip" onClick={(e) => e.stopPropagation()}>
|
||||
<h2>{props.title || "⚡️ Send sats"}</h2>
|
||||
{invoiceForm()}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import "./Modal.css";
|
||||
import { useEffect } from "react"
|
||||
import { useEffect, useRef } from "react"
|
||||
import * as React from "react";
|
||||
|
||||
export interface ModalProps {
|
||||
@ -8,9 +8,25 @@ export interface ModalProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
function useOnClickOutside(ref: any, onClickOutside: () => void) {
|
||||
useEffect(() => {
|
||||
function handleClickOutside(ev: any) {
|
||||
if (ref && ref.current && !ref.current.contains(ev.target)) {
|
||||
onClickOutside()
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [ref]);
|
||||
}
|
||||
|
||||
export default function Modal(props: ModalProps) {
|
||||
const ref = useRef(null);
|
||||
const onClose = props.onClose || (() => { });
|
||||
const className = props.className || ''
|
||||
useOnClickOutside(ref, onClose)
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.add("scroll-lock");
|
||||
@ -18,8 +34,8 @@ export default function Modal(props: ModalProps) {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={`modal ${className}`} onClick={(e) => { e.stopPropagation(); onClose(); }}>
|
||||
<div className="modal-body">
|
||||
<div className={`modal ${className}`}>
|
||||
<div ref={ref} className="modal-body">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -18,7 +18,6 @@ export interface NoteCreatorProps {
|
||||
setShow: (s: boolean) => void
|
||||
replyTo?: NEvent,
|
||||
onSend?: Function,
|
||||
onClose?(): void
|
||||
autoFocus: boolean
|
||||
}
|
||||
|
||||
@ -90,7 +89,10 @@ export function NoteCreator(props: NoteCreatorProps) {
|
||||
<Plus />
|
||||
</button>
|
||||
{show && (
|
||||
<Modal className="note-creator-modal" onClose={props.onClose}>
|
||||
<Modal
|
||||
className="note-creator-modal"
|
||||
onClose={() => setShow(false)}
|
||||
>
|
||||
<div className={`flex note-creator ${props.replyTo ? 'note-reply' : ''}`}>
|
||||
<div className="flex f-col mr10 f-grow">
|
||||
<Textarea
|
||||
|
Loading…
Reference in New Issue
Block a user