solid-modals
Version:
A container for handling modals and hamburger menus in SolidJS
218 lines (213 loc) • 6.27 kB
JavaScript
import { delegateEvents, memo, setStyleProperty, insert, effect, style, template } from 'solid-js/web';
import { useLocation } from '@solidjs/router';
import { createEffect, createSignal, onMount } from 'solid-js';
import { createStore } from 'solid-js/store';
var _tmpl$ = /*#__PURE__*/template(`<div style=z-index:50;overscroll-behavior:none><div><div><div style=align-items:center;justify-content:center;max-width:100%>`),
_tmpl$2 = /*#__PURE__*/template(`<div style=z-index:50;overscroll-behavior:none><div><div><div>`);
const [store, setStore] = createStore({});
function useModal() {
function showModal(modal) {
setStore("modal", modal);
}
function clearModal() {
setStore("modal", undefined);
}
const location = useLocation();
createEffect(() => {
location.pathname;
clearModal();
});
return {
showModal,
clearModal
};
}
function ModalRoot() {
return memo(() => store.modal);
}
// =====================================================
function ModalBase({
children,
onClear,
outsideClose = true,
withAnimation = true
}) {
const baseWrapperStyle = {
width: "100%",
"min-height": "100.1%",
height: "100%",
"overflow-y": "auto",
"background-attachment": "fixed",
transition: "all 200ms",
"background-color": "black"
};
const wrapperCloseStyle = {
...baseWrapperStyle,
"background-color": "rgba(0, 0, 0, 0)"
};
const wrapperOpenStyle = {
...baseWrapperStyle,
"background-color": "rgba(0, 0, 0, 0.7)"
};
const baseBackStyle = {
display: "flex",
"align-items": "center",
"justify-content": "center",
padding: "48px 16px",
width: "100%",
height: "max-content",
"min-height": "100%",
transition: "all 200ms"
};
const backCloseStyle = {
...baseBackStyle,
opacity: "0",
transform: "scale(0.9)"
};
const backOpenStyle = {
...baseBackStyle,
opacity: "1",
transform: "scale(1)"
};
const [backgroundStyle, setBackgroundStyle] = createSignal(withAnimation ? backCloseStyle : backOpenStyle);
const [wrapperStyle, setWrapperStyle] = createSignal(withAnimation ? wrapperCloseStyle : wrapperOpenStyle);
const [onClose, setOnClose] = createSignal(false);
onMount(() => {
if (withAnimation) {
setBackgroundStyle(backOpenStyle);
setWrapperStyle(wrapperOpenStyle);
}
});
const handleWrapperClick = () => {
if (outsideClose) {
setOnClose(true);
if (withAnimation) {
setBackgroundStyle(backCloseStyle);
setWrapperStyle(wrapperCloseStyle);
} else {
onClear();
}
}
};
const handleTransitionEnd = e => {
if (onClose() && e.propertyName === "opacity") {
onClear();
}
};
return (() => {
var _el$ = _tmpl$(),
_el$2 = _el$.firstChild,
_el$3 = _el$2.firstChild,
_el$4 = _el$3.firstChild;
setStyleProperty(_el$, "position", "fixed");
setStyleProperty(_el$, "top", "0");
setStyleProperty(_el$, "right", "0");
setStyleProperty(_el$, "bottom", "0");
setStyleProperty(_el$, "left", "0");
setStyleProperty(_el$, "background-attachment", "fixed");
setStyleProperty(_el$, "overflow-y", "auto");
setStyleProperty(_el$, "width", "100%");
_el$2.$$click = handleWrapperClick;
_el$3.addEventListener("transitionend", handleTransitionEnd);
_el$4.$$click = e => e.stopPropagation();
setStyleProperty(_el$4, "display", "flex");
insert(_el$4, children);
effect(_p$ => {
var _v$ = {
...wrapperStyle()
},
_v$2 = backgroundStyle();
_p$.e = style(_el$2, _v$, _p$.e);
_p$.t = style(_el$3, _v$2, _p$.t);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$;
})();
}
function ModalHamburger({
onClear,
children
}) {
const baseWrapperStyle = {
width: "100%",
height: "100.1%",
"overflow-y": "auto",
"background-attachment": "fixed",
transition: "all 300ms",
"background-color": "black"
};
const wrapperCloseStyle = {
...baseWrapperStyle,
"background-color": "rgba(0, 0, 0, 0)"
};
const wrapperOpenStyle = {
...baseWrapperStyle,
"background-color": "rgba(0, 0, 0, 0.7)"
};
const baseBackStyle = {
position: "absolute",
display: "flex",
"flex-direction": "column",
height: "100%",
width: "21rem",
"max-width": "75%",
transition: "all 300ms"
};
const backCloseStyle = {
...baseBackStyle,
right: "-24rem"
};
const backOpenStyle = {
...baseBackStyle,
right: "0"
};
const [backgroundStyle, setBackgroundStyle] = createSignal(backCloseStyle);
const [wrapperStyle, setWrapperStyle] = createSignal(wrapperCloseStyle);
const [onClose, setOnClose] = createSignal(false);
onMount(() => {
setBackgroundStyle(backOpenStyle);
setWrapperStyle(wrapperOpenStyle);
});
return (() => {
var _el$5 = _tmpl$2(),
_el$6 = _el$5.firstChild,
_el$7 = _el$6.firstChild,
_el$8 = _el$7.firstChild;
setStyleProperty(_el$5, "position", "fixed");
setStyleProperty(_el$5, "top", "0");
setStyleProperty(_el$5, "right", "0");
setStyleProperty(_el$5, "bottom", "0");
setStyleProperty(_el$5, "left", "0");
setStyleProperty(_el$5, "background-attachment", "fixed");
setStyleProperty(_el$5, "overflow-y", "auto");
_el$6.$$click = () => {
setOnClose(true);
setBackgroundStyle(backCloseStyle);
setWrapperStyle(wrapperCloseStyle);
};
_el$7.addEventListener("transitionend", e => onClose() && e.propertyName === "right" && onClear());
_el$8.$$click = e => e.stopPropagation();
setStyleProperty(_el$8, "display", "flex");
setStyleProperty(_el$8, "flex-direction", "column");
setStyleProperty(_el$8, "width", "100%");
setStyleProperty(_el$8, "height", "100%");
insert(_el$8, children);
effect(_p$ => {
var _v$3 = wrapperStyle(),
_v$4 = backgroundStyle();
_p$.e = style(_el$6, _v$3, _p$.e);
_p$.t = style(_el$7, _v$4, _p$.t);
return _p$;
}, {
e: undefined,
t: undefined
});
return _el$5;
})();
}
delegateEvents(["click"]);
export { ModalBase, ModalHamburger, ModalRoot, useModal };
//# sourceMappingURL=index.js.map