kwikid-components-react
Version:
KwikID's Component Library in React
205 lines (198 loc) • 7.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _fa = require("react-icons/fa6");
var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
var _styles = require("@material-ui/core/styles");
var _Button = _interopRequireDefault(require("../button/Button"));
var _Dialog2 = require("./Dialog.definition");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// Z-index constants to avoid magic numbers
const FULLSCREEN_Z_INDEX = 100000;
const CONTAINED_Z_INDEX = 99999;
// Create distinct styles for fullscreen and contained variants
const useStyles = (0, _styles.makeStyles)(() => ({
// Fullscreen dialog (fixed position, covers viewport)
fullscreenDialog: {
"& .MuiBackdrop-root": {
backgroundColor: "rgba(0, 0, 0, 0.6)"
}
},
// Container for the contained dialog (relative positioning)
containedContainer: {
position: "relative",
display: "flex",
flexDirection: "row",
alignContent: "center",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0.6)",
zIndex: CONTAINED_Z_INDEX
},
// Shared paper styles
paper: {
backgroundColor: "white",
boxShadow: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
overflow: "auto"
},
// Paper styles for fullscreen variant
fullscreenPaper: {
maxWidth: "90%",
maxHeight: "90%"
},
// Content styles - reduced padding
content: {
display: "flex",
flexDirection: "row",
alignContent: "center",
justifyContent: "center",
alignItems: "flex-start",
padding: "0rem !important"
}
}));
const KwikUIDialog = _ref => {
let {
children = undefined,
closeOnClickOutside = false,
id = "dialog",
open = false,
showCloseButton = true,
shape = _Dialog2.IKwikUIDialogShape.CURVED,
size = _Dialog2.IKwikUIDialogSize.M,
variant = _Dialog2.IKwikUIDialogVariant.FULLSCREEN,
onClose = undefined
} = _ref;
const classes = useStyles();
const enhanchedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.cloneElement(child, {
onClose
}));
const [internalOpen, setInternalOpen] = _react.default.useState(open || false);
(0, _react.useEffect)(() => {
setInternalOpen(open);
}, [open]);
// Calculate border radius based on shape
const getBorderRadius = () => {
switch (shape) {
case _Dialog2.IKwikUIDialogShape.ROUNDED:
return "2em";
case _Dialog2.IKwikUIDialogShape.CURVED:
return "0.5em";
case _Dialog2.IKwikUIDialogShape.RECTANGLE:
return "0";
default:
return "0.5em";
}
};
// Calculate margin based on size (for contained variant)
const getMargin = () => {
switch (size) {
case _Dialog2.IKwikUIDialogSize.S:
return "var(--kwikui-space-s)";
case _Dialog2.IKwikUIDialogSize.M:
return "var(--kwikui-space-m)";
case _Dialog2.IKwikUIDialogSize.L:
return "var(--kwikui-space-l)";
default:
return "var(--kwikui-space-m)";
}
};
const handleClose = () => {
if (closeOnClickOutside) {
setInternalOpen(false);
if (onClose) {
onClose();
}
}
};
const handleCloseButtonClick = () => {
setInternalOpen(false);
if (onClose) {
onClose();
}
};
// Close button styles
const getCloseButtonStyles = () => {
return {
position: variant === _Dialog2.IKwikUIDialogVariant.FULLSCREEN ? "fixed" : "absolute",
top: "1rem",
right: "1rem",
borderRadius: "50%",
padding: "1rem",
width: "1rem",
height: "1rem",
backgroundColor: "var(--kwikui-color-white)",
borderColor: "var(--kwikui-color-white)",
color: "var(--kwikui-color-black)",
boxShadow: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
zIndex: variant === _Dialog2.IKwikUIDialogVariant.FULLSCREEN ? FULLSCREEN_Z_INDEX : CONTAINED_Z_INDEX
};
};
const isContained = variant === _Dialog2.IKwikUIDialogVariant.CONTAINED;
if (!internalOpen) {
return null;
}
// Handle contained dialog directly in JSX to avoid Material-UI's fixed positioning
if (isContained) {
return /*#__PURE__*/_react.default.createElement("div", {
id: id,
className: classes.containedContainer,
onClick: () => {
if (closeOnClickOutside) {
handleCloseButtonClick();
}
}
}, showCloseButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
customStyles: getCloseButtonStyles(),
id: "close-button",
shape: "curved",
size: "m",
onClick: handleCloseButtonClick
}, /*#__PURE__*/_react.default.createElement(_fa.FaXmark, null)), /*#__PURE__*/_react.default.createElement("div", {
style: {
borderRadius: getBorderRadius(),
margin: getMargin(),
backgroundColor: "white",
boxShadow: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
position: "relative",
maxWidth: "90%",
maxHeight: "90%",
overflow: "auto"
},
onClick: e => e.stopPropagation()
}, /*#__PURE__*/_react.default.createElement("div", {
className: classes.content
}, enhanchedChildren)));
}
// Use Material-UI Dialog for fullscreen variant
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.default, {
open: internalOpen,
onClose: handleClose,
id: id,
className: classes.fullscreenDialog,
fullScreen: false,
PaperProps: {
style: {
borderRadius: getBorderRadius()
},
className: "".concat(classes.paper, " ").concat(classes.fullscreenPaper)
}
}, /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
className: classes.content
}, enhanchedChildren)), showCloseButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
customStyles: getCloseButtonStyles(),
id: "close-button",
shape: "curved",
size: "m",
onClick: handleCloseButtonClick
}, /*#__PURE__*/_react.default.createElement(_fa.FaXmark, null)));
};
var _default = exports.default = KwikUIDialog;