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;
|
if (!show) return null;
|
||||||
return (
|
return (
|
||||||
<Modal onClose={() => onClose()}>
|
<Modal onClose={onClose}>
|
||||||
<div className="lnurl-tip" onClick={(e) => e.stopPropagation()}>
|
<div className="lnurl-tip" onClick={(e) => e.stopPropagation()}>
|
||||||
<h2>{props.title || "⚡️ Send sats"}</h2>
|
<h2>{props.title || "⚡️ Send sats"}</h2>
|
||||||
{invoiceForm()}
|
{invoiceForm()}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import "./Modal.css";
|
import "./Modal.css";
|
||||||
import { useEffect } from "react"
|
import { useEffect, useRef } from "react"
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
|
|
||||||
export interface ModalProps {
|
export interface ModalProps {
|
||||||
@ -8,9 +8,25 @@ export interface ModalProps {
|
|||||||
children: React.ReactNode
|
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) {
|
export default function Modal(props: ModalProps) {
|
||||||
|
const ref = useRef(null);
|
||||||
const onClose = props.onClose || (() => { });
|
const onClose = props.onClose || (() => { });
|
||||||
const className = props.className || ''
|
const className = props.className || ''
|
||||||
|
useOnClickOutside(ref, onClose)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.body.classList.add("scroll-lock");
|
document.body.classList.add("scroll-lock");
|
||||||
@ -18,8 +34,8 @@ export default function Modal(props: ModalProps) {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`modal ${className}`} onClick={(e) => { e.stopPropagation(); onClose(); }}>
|
<div className={`modal ${className}`}>
|
||||||
<div className="modal-body">
|
<div ref={ref} className="modal-body">
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,7 +18,6 @@ export interface NoteCreatorProps {
|
|||||||
setShow: (s: boolean) => void
|
setShow: (s: boolean) => void
|
||||||
replyTo?: NEvent,
|
replyTo?: NEvent,
|
||||||
onSend?: Function,
|
onSend?: Function,
|
||||||
onClose?(): void
|
|
||||||
autoFocus: boolean
|
autoFocus: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -90,7 +89,10 @@ export function NoteCreator(props: NoteCreatorProps) {
|
|||||||
<Plus />
|
<Plus />
|
||||||
</button>
|
</button>
|
||||||
{show && (
|
{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 note-creator ${props.replyTo ? 'note-reply' : ''}`}>
|
||||||
<div className="flex f-col mr10 f-grow">
|
<div className="flex f-col mr10 f-grow">
|
||||||
<Textarea
|
<Textarea
|
||||||
|
Loading…
Reference in New Issue
Block a user