react-common-use-components
Version:
A React mobile commonly used component library
50 lines (49 loc) • 1.83 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const Modal = ({ children, openModal, style, position = 'center', onClose }) => {
function getPosition() {
if (position === 'top') {
return { justifyContent: 'center', alignItems: "flex-start" };
}
else if (position === 'right') {
return { justifyContent: 'flex-end', alignItems: "center" };
}
else if (position === 'bottom') {
return { justifyContent: 'center', alignItems: "flex-end" };
}
else if (position === 'left') {
return { justifyContent: 'flex-start', alignItems: "center" };
}
else if (position === 'center') {
return { justifyContent: 'center', alignItems: "center" };
}
}
return (<div>
<style>
{`
@keyframes initAnimation {
0% { opacity:0}
20% { opacity:0.1}
40% { opacity:0.2}
60% { opacity:0.3}
80% { opacity:0.4}
100% { opacity:0.5}
}
`}
</style>
{openModal &&
<div onClick={(e) => {
if (onClose) {
onClose();
}
e.stopPropagation();
}} style={Object.assign({ background: 'rgba(0,0,0,0.5)', width: "100%", zIndex: 1300, position: 'fixed', inset: 0, display: "flex", justifyContent: getPosition().justifyContent, alignItems: getPosition().alignItems, animation: 'initAnimation 0.25s ease' }, style)}>
{children}
</div>}
</div>);
};
exports.default = Modal;