@parkassist/pa-ui-library
Version:
INX Platform elements
264 lines • 9.11 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useRef, useState } from "react";
import Button from "../Button";
import FontStyles from "../../constants/FontStyles";
import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Palette } from "../../index";
import * as Icons from "../Icons";
const StyledDialogTitle = styled(DialogTitle)`
font: ${FontStyles.SUBHEADER};
display: flex;
align-items: center;
justify-content: space-between;
padding: ${({
emptyHeader
}) => `${emptyHeader ? '40px' : '16px 40px'}`};
`;
const DialogTitleContainer = styled('div')`
font: ${FontStyles.SUBHEADER};
display: flex;
align-items: center;
`;
const StyledDialogContent = styled(DialogContent)`
border-top: ${props => `${Boolean(props.showSticky || props.hideButtons) ? 'none' : `1px solid ${Palette.WHITE_SMOKE}`}`};
border-bottom: ${props => `${props.hideButtons ? 'none' : `1px solid ${Palette.WHITE_SMOKE}`}`};
padding: ${props => `${props.showSticky ? '0 40px 16px 40px' : '16px 40px'}`};
margin-right: ${props => `${props.addScrollPadding ? '16px' : '0px'}`};
padding-right: ${props => `${props.addScrollPadding ? '24px' : '40px'}`};
${props => props.noPadding ? `padding: 0px` : ''}
`;
const StickyContainer = styled('div')`
padding: 16px 40px;
background: ${Palette.WHITE};
box-shadow: ${props => `${props.isScrolled ? '0 4px 4px 0 rgba(0, 0, 0, 0.05)' : 'none'}`};
transition: box-shadow 0.3s ease-in-out;
border-top: 1px solid ${Palette.WHITE_SMOKE};
position: sticky;
top: 0;
`;
const StandardActionButtons = ({
cancelButton,
buttonPadding,
cancelButtonWidth,
hideCancelButton,
cancelButtonDataTestId,
okButton,
okButtonDisable,
hideOkButton,
okButtonWidth,
okButtonDataTestId,
onConfirm,
onClose
}) => {
return _jsxs(_Fragment, {
children: [!hideCancelButton && _jsx(Button, {
width: cancelButtonWidth,
"data-testid": cancelButtonDataTestId,
onClick: onClose,
customPadding: buttonPadding,
children: cancelButton || 'Cancel'
}), !hideOkButton && _jsx(Button, {
dark: true,
width: okButtonWidth,
"data-testid": okButtonDataTestId,
disabled: okButtonDisable,
onClick: onConfirm,
customPadding: buttonPadding,
children: okButton || 'Ok'
})]
});
};
const ActionButtonsWithHelperButton = ({
cancelButton,
buttonPadding,
cancelButtonWidth,
hideCancelButton,
cancelButtonDataTestId,
okButton,
okButtonDisable,
hideOkButton,
okButtonWidth,
okButtonDataTestId,
helperButton,
helperContent,
helperButtonDataTestId,
onConfirm,
onClose,
onHelperAction
}) => {
return _jsxs(_Fragment, {
children: [_jsxs("div", {
children: [helperContent, helperButton && _jsx(Button, {
outline: true,
transparent: true,
"data-testid": helperButtonDataTestId,
onClick: onHelperAction,
children: helperButton
})]
}), _jsxs("div", {
children: [!hideCancelButton && _jsx(Button, {
width: cancelButtonWidth,
"data-testid": cancelButtonDataTestId,
onClick: onClose,
customPadding: buttonPadding,
children: cancelButton || 'Cancel'
}), !hideOkButton && _jsx(Button, {
dark: true,
width: okButtonWidth,
"data-testid": okButtonDataTestId,
disabled: okButtonDisable,
onClick: onConfirm,
customPadding: buttonPadding,
children: okButton || 'Ok'
})]
})]
});
};
const MaterialModal = _a => {
var {
children,
cancelButton,
okButton,
helperButton,
helperContent,
okButtonDisable = false,
okButtonWidth = null,
okButtonDataTestId,
visible,
modalTitle,
titleIcon,
hideTitle = false,
hideButtons = false,
hideOkButton = false,
hideCancelButton = false,
cancelButtonWidth = null,
cancelButtonDataTestId,
width,
height,
onClose = () => {},
onButtonClose = onClose,
onConfirm = () => {},
onCancel = onClose,
onHelperAction = () => {},
stickyHeaderComponent,
actionButtonsPadding = '2px 32px',
addScrollPadding = false,
closeOnClickOut = true,
noPadding = false
} = _a,
props = __rest(_a, ["children", "cancelButton", "okButton", "helperButton", "helperContent", "okButtonDisable", "okButtonWidth", "okButtonDataTestId", "visible", "modalTitle", "titleIcon", "hideTitle", "hideButtons", "hideOkButton", "hideCancelButton", "cancelButtonWidth", "cancelButtonDataTestId", "width", "height", "onClose", "onButtonClose", "onConfirm", "onCancel", "onHelperAction", "stickyHeaderComponent", "actionButtonsPadding", "addScrollPadding", "closeOnClickOut", "noPadding"]);
const [isRefExist, setIsRefExist] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const dialogContentRef = useRef();
const refCallback = useCallback(node => {
if (node) {
setIsRefExist(true);
dialogContentRef.current = node;
}
}, []);
const handleScroll = e => {
setIsScrolled(e.target.scrollTop > 5);
};
useEffect(() => {
isRefExist && dialogContentRef.current.addEventListener('scroll', handleScroll, {
passive: true
});
return () => {
isRefExist && dialogContentRef.current.removeEventListener('scroll', handleScroll);
};
}, [isRefExist]);
return _jsx(_Fragment, {
children: _jsxs(Dialog, Object.assign({
open: visible,
onClose: closeOnClickOut && onClose,
scroll: 'paper'
}, props, {
PaperProps: {
sx: {
width: typeof width === 'number' ? `${width}px` : width,
maxWidth: typeof width === 'number' ? `${width}px` : width,
height: typeof height === 'number' ? `${height}px` : height
}
},
children: [!hideTitle && _jsxs(StyledDialogTitle, {
emptyHeader: hideButtons && !modalTitle,
children: [_jsxs(DialogTitleContainer, {
children: [titleIcon && _jsx("div", {
style: {
marginRight: 8
},
children: titleIcon
}), modalTitle]
}), _jsx(Icons.CloseIcon, {
style: {
cursor: 'pointer',
marginLeft: "16px"
},
onClick: onClose
})]
}), stickyHeaderComponent && _jsx(StickyContainer, {
isScrolled: isScrolled,
children: stickyHeaderComponent
}), _jsx(StyledDialogContent, {
noPadding: noPadding,
ref: refCallback,
hideButtons: hideButtons,
showSticky: stickyHeaderComponent,
addScrollPadding: addScrollPadding,
children: children
}), !hideButtons && _jsxs(DialogActions, {
sx: {
padding: hideButtons ? '28px 40px' : '16px 40px',
justifyContent: helperButton || helperContent ? 'space-between' : 'end',
'&>:not(style)~:not(style)': {
marginLeft: 0
},
'& button:last-of-type': {
marginLeft: '8px'
}
},
children: [!hideButtons && !helperButton && !helperContent && _jsx(StandardActionButtons, {
okButton: okButton,
okButtonDisable: okButtonDisable,
okButtonWidth: okButtonWidth,
hideOkButton: hideButtons,
okButtonDataTestId: okButtonDataTestId,
cancelButton: cancelButton,
cancelButtonWidth: cancelButtonWidth,
hideCancelButton: hideCancelButton,
cancelButtonDataTestId: cancelButtonDataTestId,
onConfirm: onConfirm,
onClose: onCancel,
buttonPadding: actionButtonsPadding
}), !hideButtons && (helperButton || helperContent) && _jsx(ActionButtonsWithHelperButton, {
okButton: okButton,
okButtonDisable: okButtonDisable,
okButtonWidth: okButtonWidth,
hideOkButton: hideButtons,
okButtonDataTestId: okButtonDataTestId,
cancelButton: cancelButton,
cancelButtonWidth: cancelButtonWidth,
hideCancelButton: hideCancelButton,
cancelButtonDataTestId: cancelButtonDataTestId,
helperButton: helperButton,
helperContent: helperContent,
helperButtonDataTestId: cancelButtonDataTestId,
onConfirm: onConfirm,
onClose: onCancel,
onHelperAction: onHelperAction,
buttonPadding: actionButtonsPadding
})]
})]
}))
});
};
export default MaterialModal;