@tolokoban/ui
Version:
React components with theme
45 lines • 3.7 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import Styles from "./container.module.css";
export default function ModalContainer({ options, onClose, }) {
const style = styleOptions(options);
const refContainer = React.useRef(null);
const handleClick = (evt) => {
if (!options.autoClosable)
return;
if (refContainer.current === evt.target)
onClose(options);
};
React.useEffect(() => {
const onKeyDown = (evt) => {
if (evt.key !== "Escape")
return;
evt.stopPropagation();
evt.stopImmediatePropagation();
evt.preventDefault();
if (options.autoClosable)
onClose(options);
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [options]);
return (_jsx("div", { className: getClassNames(options), style: style, ref: refContainer, onClick: handleClick, children: options.content }));
}
function getClassNames(options) {
var _a;
const classes = [Styles.container];
for (const align of (_a = options.align) !== null && _a !== void 0 ? _a : "") {
const cls = Styles[align];
if (cls)
classes.push(cls);
}
return classes.join(" ");
}
function styleOptions(options) {
const style = {
padding: options.padding,
background: options.background,
};
return style;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL21vZGFsL2NvbnRhaW5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUl6QixPQUFPLE1BQU0sTUFBTSx3QkFBd0IsQ0FBQTtBQU8zQyxNQUFNLENBQUMsT0FBTyxVQUFVLGNBQWMsQ0FBQyxFQUNuQyxPQUFPLEVBQ1AsT0FBTyxHQUNXO0lBQ2xCLE1BQU0sS0FBSyxHQUFHLFlBQVksQ0FBQyxPQUFPLENBQUMsQ0FBQTtJQUNuQyxNQUFNLFlBQVksR0FBRyxLQUFLLENBQUMsTUFBTSxDQUF3QixJQUFJLENBQUMsQ0FBQTtJQUM5RCxNQUFNLFdBQVcsR0FBRyxDQUFDLEdBQXFCLEVBQUUsRUFBRTtRQUMxQyxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVk7WUFBRSxPQUFNO1FBRWpDLElBQUksWUFBWSxDQUFDLE9BQU8sS0FBSyxHQUFHLENBQUMsTUFBTTtZQUFFLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQTtJQUM3RCxDQUFDLENBQUE7SUFDRCxLQUFLLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNqQixNQUFNLFNBQVMsR0FBRyxDQUFDLEdBQWtCLEVBQUUsRUFBRTtZQUNyQyxJQUFJLEdBQUcsQ0FBQyxHQUFHLEtBQUssUUFBUTtnQkFBRSxPQUFNO1lBRWhDLEdBQUcsQ0FBQyxlQUFlLEVBQUUsQ0FBQTtZQUNyQixHQUFHLENBQUMsd0JBQXdCLEVBQUUsQ0FBQTtZQUM5QixHQUFHLENBQUMsY0FBYyxFQUFFLENBQUE7WUFDcEIsSUFBSSxPQUFPLENBQUMsWUFBWTtnQkFBRSxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUE7UUFDOUMsQ0FBQyxDQUFBO1FBQ0QsUUFBUSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUMsQ0FBQTtRQUMvQyxPQUFPLEdBQUcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxtQkFBbUIsQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDLENBQUE7SUFDbkUsQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQTtJQUNiLE9BQU8sQ0FDSCxjQUNJLFNBQVMsRUFBRSxhQUFhLENBQUMsT0FBTyxDQUFDLEVBQ2pDLEtBQUssRUFBRSxLQUFLLEVBQ1osR0FBRyxFQUFFLFlBQVksRUFDakIsT0FBTyxFQUFFLFdBQVcsWUFFbkIsT0FBTyxDQUFDLE9BQU8sR0FDZCxDQUNULENBQUE7QUFDTCxDQUFDO0FBRUQsU0FBUyxhQUFhLENBQUMsT0FBcUI7O0lBQ3hDLE1BQU0sT0FBTyxHQUFHLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFBO0lBQ2xDLEtBQUssTUFBTSxLQUFLLElBQUksTUFBQSxPQUFPLENBQUMsS0FBSyxtQ0FBSSxFQUFFLEVBQUUsQ0FBQztRQUN0QyxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDekIsSUFBSSxHQUFHO1lBQUUsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQTtJQUM5QixDQUFDO0lBQ0QsT0FBTyxPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFBO0FBQzVCLENBQUM7QUFFRCxTQUFTLFlBQVksQ0FBQyxPQUFxQjtJQUN2QyxNQUFNLEtBQUssR0FBd0I7UUFDL0IsT0FBTyxFQUFFLE9BQU8sQ0FBQyxPQUFPO1FBQ3hCLFVBQVUsRUFBRSxPQUFPLENBQUMsVUFBVTtLQUNqQyxDQUFBO0lBQ0QsT0FBTyxLQUFLLENBQUE7QUFDaEIsQ0FBQyJ9