145 lines
3.9 KiB
JavaScript
145 lines
3.9 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import Loaders from "@appserver/common/components/Loaders";
|
|
|
|
import Heading from "../../heading";
|
|
import {
|
|
StyledModal,
|
|
StyledHeader,
|
|
Content,
|
|
Dialog,
|
|
StyledBody,
|
|
StyledFooter,
|
|
} from "../styled-modal-dialog";
|
|
import CloseButton from "../components/CloseButton";
|
|
import ModalBackdrop from "../components/ModalBackdrop";
|
|
import Scrollbar from "../../scrollbar";
|
|
|
|
const Modal = ({
|
|
id,
|
|
style,
|
|
className,
|
|
currentDisplayType,
|
|
withBodyScroll,
|
|
isLarge,
|
|
zIndex,
|
|
autoMaxHeight,
|
|
autoMaxWidth,
|
|
onClose,
|
|
isLoading,
|
|
header,
|
|
body,
|
|
footer,
|
|
visible,
|
|
modalSwipeOffset,
|
|
}) => {
|
|
const headerComponent = header ? header.props.children : null;
|
|
const bodyComponent = body ? body.props.children : null;
|
|
const footerComponent = footer ? footer.props.children : null;
|
|
|
|
return (
|
|
<StyledModal
|
|
className={visible ? "modal-active" : ""}
|
|
modalSwipeOffset={modalSwipeOffset}
|
|
>
|
|
<ModalBackdrop
|
|
className={visible ? "modal-backdrop-active" : ""}
|
|
visible={true}
|
|
zIndex={zIndex}
|
|
modalSwipeOffset={modalSwipeOffset}
|
|
>
|
|
<Dialog
|
|
className={`${className} dialog not-selectable`}
|
|
id={id}
|
|
style={style}
|
|
onClick={onClose}
|
|
>
|
|
<Content
|
|
id="modal-dialog"
|
|
visible={visible}
|
|
isLarge={isLarge}
|
|
currentDisplayType={currentDisplayType}
|
|
autoMaxHeight={autoMaxHeight}
|
|
autoMaxWidth={autoMaxWidth}
|
|
modalSwipeOffset={modalSwipeOffset}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<CloseButton
|
|
currentDisplayType={currentDisplayType}
|
|
onClick={onClose}
|
|
/>
|
|
{isLoading ? (
|
|
<div className="loader-wrapper">
|
|
{currentDisplayType === "modal" ? (
|
|
<Loaders.DialogLoader bodyHeight={modalLoaderBodyHeight} />
|
|
) : (
|
|
<Loaders.DialogAsideLoader withoutAside />
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
{header && (
|
|
<StyledHeader
|
|
id="modal-header-swipe"
|
|
currentDisplayType={currentDisplayType}
|
|
>
|
|
<Heading
|
|
level={1}
|
|
className={"heading"}
|
|
size="medium"
|
|
truncate={true}
|
|
>
|
|
{headerComponent}
|
|
</Heading>
|
|
</StyledHeader>
|
|
)}
|
|
{body && (
|
|
<StyledBody
|
|
withoutBodyScroll={true}
|
|
hasFooter={1 && footer}
|
|
currentDisplayType={currentDisplayType}
|
|
>
|
|
{currentDisplayType === "aside" && withBodyScroll ? (
|
|
<Scrollbar stype="mediumBlack">{bodyComponent}</Scrollbar>
|
|
) : (
|
|
bodyComponent
|
|
)}
|
|
</StyledBody>
|
|
)}
|
|
{footer && (
|
|
<StyledFooter currentDisplayType={currentDisplayType}>
|
|
{footerComponent}
|
|
</StyledFooter>
|
|
)}
|
|
</>
|
|
)}
|
|
</Content>
|
|
</Dialog>
|
|
</ModalBackdrop>
|
|
</StyledModal>
|
|
);
|
|
};
|
|
|
|
Modal.propTypes = {
|
|
id: PropTypes.string,
|
|
className: PropTypes.string,
|
|
zIndex: PropTypes.number,
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
onClose: PropTypes.func,
|
|
visible: PropTypes.bool,
|
|
modalSwipeOffset: PropTypes.number,
|
|
|
|
isLoading: PropTypes.bool,
|
|
modalLoaderBodyHeight: PropTypes.string,
|
|
|
|
currentDisplayType: PropTypes.oneOf(["auto", "modal", "aside"]),
|
|
isLarge: PropTypes.bool,
|
|
|
|
header: PropTypes.object,
|
|
body: PropTypes.object,
|
|
footer: PropTypes.object,
|
|
};
|
|
|
|
export default Modal;
|