2022-04-08 14:37:22 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
|
|
|
|
import Box from "../../box";
|
|
|
|
import Loaders from "@appserver/common/components/Loaders";
|
|
|
|
|
|
|
|
import Heading from "../../heading";
|
|
|
|
import {
|
|
|
|
StyledModal,
|
|
|
|
StyledHeader,
|
|
|
|
Content,
|
|
|
|
Dialog,
|
|
|
|
BodyBox,
|
|
|
|
StyledFooter,
|
|
|
|
} from "../styled-modal-dialog";
|
|
|
|
import CloseButton from "../components/CloseButton";
|
2022-04-08 22:13:08 +00:00
|
|
|
import ModalBackdrop from "../components/ModalBackdrop";
|
2022-04-08 14:37:22 +00:00
|
|
|
|
|
|
|
const Modal = ({
|
|
|
|
id,
|
|
|
|
style,
|
|
|
|
className,
|
|
|
|
zIndex,
|
|
|
|
onClose,
|
2022-04-08 22:13:08 +00:00
|
|
|
visible,
|
2022-04-08 14:37:22 +00:00
|
|
|
|
|
|
|
isLarge,
|
|
|
|
isLoading,
|
|
|
|
modalLoaderBodyHeight,
|
|
|
|
|
|
|
|
modalSwipeOffset,
|
|
|
|
|
|
|
|
header,
|
|
|
|
body,
|
|
|
|
footer,
|
2022-04-08 22:13:08 +00:00
|
|
|
opacity,
|
2022-04-08 14:37:22 +00:00
|
|
|
}) => {
|
|
|
|
return (
|
2022-04-08 22:13:08 +00:00
|
|
|
<StyledModal
|
|
|
|
className={visible && "active"}
|
|
|
|
opacity={opacity}
|
|
|
|
modalSwipeOffset={modalSwipeOffset}
|
|
|
|
>
|
|
|
|
<ModalBackdrop
|
2022-04-08 14:37:22 +00:00
|
|
|
visible={true}
|
|
|
|
zIndex={zIndex}
|
|
|
|
withBackground={true}
|
|
|
|
isModalDialog
|
2022-04-08 22:13:08 +00:00
|
|
|
modalSwipeOffset={modalSwipeOffset}
|
2022-04-08 14:37:22 +00:00
|
|
|
>
|
|
|
|
<Dialog
|
|
|
|
className={`${className} dialog not-selectable`}
|
|
|
|
id={id}
|
|
|
|
style={style}
|
|
|
|
>
|
|
|
|
<Content
|
|
|
|
displayType="modal"
|
|
|
|
id="modal-dialog"
|
|
|
|
isLarge={isLarge}
|
|
|
|
modalSwipeOffset={modalSwipeOffset}
|
|
|
|
>
|
|
|
|
{isLoading ? (
|
|
|
|
<Loaders.DialogLoader bodyHeight={modalLoaderBodyHeight} />
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<StyledHeader id="modal-header-swipe">
|
|
|
|
<Heading
|
|
|
|
level={1}
|
|
|
|
className={"heading"}
|
|
|
|
size="medium"
|
|
|
|
truncate={true}
|
|
|
|
>
|
|
|
|
{header ? header.props.children : null}
|
|
|
|
<CloseButton displayType={"modal"} onClick={onClose} />
|
|
|
|
</Heading>
|
|
|
|
</StyledHeader>
|
|
|
|
<BodyBox paddingProp={"0 16px"} withoutBodyScroll={true}>
|
|
|
|
{body ? body.props.children : null}
|
|
|
|
</BodyBox>
|
|
|
|
<Box>
|
|
|
|
<StyledFooter displayType="modal">
|
|
|
|
{footer ? footer.props.children : null}
|
|
|
|
</StyledFooter>
|
|
|
|
</Box>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Content>
|
|
|
|
</Dialog>
|
2022-04-08 22:13:08 +00:00
|
|
|
</ModalBackdrop>
|
2022-04-08 14:37:22 +00:00
|
|
|
</StyledModal>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Modal.propTypes = {
|
|
|
|
id: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
zIndex: PropTypes.number,
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
|
|
onClose: PropTypes.func,
|
|
|
|
|
|
|
|
isLoading: PropTypes.bool,
|
|
|
|
modalLoaderBodyHeight: PropTypes.string,
|
|
|
|
|
|
|
|
displayType: PropTypes.oneOf(["auto", "modal", "aside"]),
|
|
|
|
isLarge: PropTypes.bool,
|
|
|
|
|
2022-04-08 15:42:32 +00:00
|
|
|
//modalSwipeOffset: PropTypes.number,
|
2022-04-08 14:37:22 +00:00
|
|
|
|
|
|
|
header: PropTypes.object,
|
|
|
|
body: PropTypes.object,
|
|
|
|
footer: PropTypes.object,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Modal;
|