95 lines
2.7 KiB
TypeScript
Executable File
95 lines
2.7 KiB
TypeScript
Executable File
import { useLocal } from "lib/utils/use-local";
|
|
import { FC, ReactNode, useEffect } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
type PopupProp = {
|
|
on_close: (value: boolean) => void;
|
|
open: boolean | (() => boolean);
|
|
child: ReactNode;
|
|
timer_close: number;
|
|
feature: string[];
|
|
auto_open: () => Promise<boolean>;
|
|
};
|
|
export const Popup: FC<PopupProp> = ({
|
|
on_close,
|
|
open,
|
|
child,
|
|
timer_close,
|
|
feature,
|
|
auto_open,
|
|
}) => {
|
|
const local = useLocal({
|
|
ref: null as any,
|
|
open: false,
|
|
});
|
|
useEffect(() => {
|
|
const open_props = typeof open === "function" ? open() : open;
|
|
local.open = open_props;
|
|
if (feature.find((e) => "auto-open") && typeof auto_open === "function") {
|
|
const res = auto_open();
|
|
if (typeof res === "object" && res instanceof Promise) {
|
|
res.then((item) => {
|
|
local.open = item;
|
|
local.render();
|
|
});
|
|
} else {
|
|
local.open = res;
|
|
local.render();
|
|
}
|
|
}
|
|
local.render();
|
|
}, [open]);
|
|
|
|
if (document.getElementsByClassName("prasi-popup").length === 0) {
|
|
const elemDiv = document.createElement("div");
|
|
elemDiv.className = cx(
|
|
"prasi-popup c-overflow-y-auto c-overflow-x-hidden c-fixed c-top-0 c-right-0 c-left-0 c-z-50 c-flex c-flex-row c-items-center c-justify-center"
|
|
);
|
|
document.body.appendChild(elemDiv);
|
|
}
|
|
const prasi_popup = document.getElementsByClassName("prasi-popup")[0];
|
|
|
|
useEffect(() => {
|
|
if (local.open) {
|
|
const timer = Number(timer_close);
|
|
if (feature.find((e) => "timer") && typeof timer === "number") {
|
|
if (typeof timer === "number" && timer >= 1000) {
|
|
setTimeout(() => {
|
|
if (local.open) {
|
|
on_close(false);
|
|
local.open = false;
|
|
local.render();
|
|
}
|
|
}, timer_close);
|
|
}
|
|
}
|
|
}
|
|
}, [local.open]);
|
|
// return <></>
|
|
// prasi_popup.className = cx("prasi-popup", " c-w-full c-bg-gray-800 c-w-screen c-h-screen");
|
|
return (
|
|
<>
|
|
{prasi_popup &&
|
|
local.open &&
|
|
createPortal(
|
|
<div
|
|
ref={(e) => (local.ref = e)}
|
|
className="c-w-screen c-h-screen relative c-flex c-flex-row c-items-center c-justify-center"
|
|
onClick={(e) => {
|
|
if (local.ref) {
|
|
if (e.target === local.ref) {
|
|
on_close(false);
|
|
local.open = false;
|
|
local.render();
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<div className="c-flex c-flex-row c-items-stretch">{child}</div>
|
|
</div>,
|
|
prasi_popup
|
|
)}
|
|
</>
|
|
);
|
|
};
|