@octopusdeploy/design-system-components
Version:
The design systems component library.
63 lines (62 loc) • 4.45 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Drawer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
const type_utils_1 = require("@octopusdeploy/type-utils");
const react_1 = require("react");
const Button_1 = require("../Button");
const Divider_1 = require("../Divider");
const ErrorSummary_1 = require("../ErrorSummary");
const Progress_1 = require("../Progress");
const drawerStyles_1 = require("./drawerStyles");
const Drawer = ({ isOpen, onClose, title, subtitle, children, width, ...restOfProps }) => {
let actions = [];
if (restOfProps.variant === "default") {
const { onPrimaryActionClick, primaryActionLabel, isPrimaryActionDisabled, customPrimaryAction } = restOfProps;
actions = [
(0, jsx_runtime_1.jsx)(Button_1.ActionButton, { type: Button_1.ActionButtonType.Secondary, label: "Cancel", accessibleName: `Cancel ${title}`, onClick: onClose }, `Cancel ${title}`),
customPrimaryAction ?? (0, jsx_runtime_1.jsx)(Button_1.ActionButton, { type: Button_1.ActionButtonType.Primary, label: primaryActionLabel ?? "Ok", accessibleName: `Confirm ${title}`, onClick: onPrimaryActionClick, disabled: isPrimaryActionDisabled }, `Confirm ${title}`),
];
}
else if (restOfProps.variant === "customActions") {
actions = restOfProps.customActions ?? [];
}
return ((0, jsx_runtime_1.jsx)(DrawerInternal, { isOpen: isOpen, title: title, subtitle: subtitle, actions: actions, onClose: onClose, width: width, ...restOfProps, children: children }));
};
exports.Drawer = Drawer;
function getWidthContainerStyle(width) {
switch (width) {
case "wide":
return drawerStyles_1.wideContainerStyles;
case "medium":
return drawerStyles_1.mediumContainerStyles;
case "narrow":
return drawerStyles_1.narrowContainerStyles;
default:
(0, type_utils_1.exhaustiveCheck)(width, "Not all drawer widths have been handled.");
}
}
const DrawerInternal = ({ isOpen, title, subtitle, avatar, onClose, children, actions, layout = "basic", width = "medium", onExited, showLinearProgress = false, errors }) => {
// This is a hack to forcefully render the drawer as closed first and then open it on the second render to fix animation issues, see https://github.com/mui/material-ui/issues/10587#issuecomment-1557705860
const [open, setOpen] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => setOpen(isOpen), [isOpen]);
const widthStyle = getWidthContainerStyle(width);
return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { classes: { paper: (0, css_1.cx)(drawerStyles_1.drawerContainerStyles, widthStyle), modal: drawerStyles_1.drawerModalStyles }, anchor: "right", open: open, onClose: onClose, role: "dialog", slotProps: {
transition: {
onExited,
},
}, children: [(0, jsx_runtime_1.jsxs)("header", { className: drawerStyles_1.outerDrawerHeaderStyles, children: [avatar && (0, jsx_runtime_1.jsx)("div", { className: drawerStyles_1.iconContainer, children: avatar }), (0, jsx_runtime_1.jsxs)("div", { className: drawerStyles_1.innerDrawerHeaderStyles, children: [(0, jsx_runtime_1.jsx)("h2", { className: drawerStyles_1.drawerTitleStyles, children: title }), subtitle && (0, jsx_runtime_1.jsx)("p", { className: drawerStyles_1.drawerSubtitleTitleStyles, children: subtitle }), (0, jsx_runtime_1.jsxs)("div", { className: drawerStyles_1.drawerActionListStyles, children: [...actions] })] }), (0, jsx_runtime_1.jsx)("div", { className: styles.progressBarContainer, children: (0, jsx_runtime_1.jsx)(Progress_1.LinearProgress, { variant: "indeterminate", show: showLinearProgress }) })] }), layout === "basic" && (0, jsx_runtime_1.jsx)(Divider_1.Divider, {}), errors && errors.map((error, index) => (0, jsx_runtime_1.jsx)(ErrorSummary_1.ErrorSummary, { error: error }, index)), (0, jsx_runtime_1.jsx)("section", { className: drawerStyles_1.drawerContentStyles, children: children })] }));
};
const styles = {
progressBarContainer: (0, css_1.css)({
position: "absolute",
bottom: 0,
left: 0,
right: 0,
}),
};