104 lines
2.6 KiB
JavaScript
104 lines
2.6 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import Backdrop from "../../backdrop";
|
|
import Aside from "../../aside";
|
|
import Box from "../../box";
|
|
import Loaders from "@appserver/common/components/Loaders";
|
|
|
|
import Heading from "../../heading";
|
|
import {
|
|
StyledModal,
|
|
StyledHeader,
|
|
Content,
|
|
BodyBox,
|
|
StyledFooter,
|
|
} from "../styled-modal-dialog";
|
|
import CloseButton from "../components/CloseButton";
|
|
|
|
const ModalAside = ({
|
|
id,
|
|
style,
|
|
className,
|
|
zIndex,
|
|
onClose,
|
|
|
|
isLoading,
|
|
|
|
header,
|
|
body,
|
|
footer,
|
|
}) => {
|
|
return (
|
|
<StyledModal>
|
|
<Box className={className} id={id} style={style}>
|
|
<CloseButton displayType="aside" onClick={onClose} />
|
|
<Backdrop
|
|
visible={true}
|
|
zIndex={zIndex}
|
|
withBackground={true}
|
|
isAside={true}
|
|
className="backdrop"
|
|
/>
|
|
<Aside
|
|
scale={false}
|
|
visible={true}
|
|
zIndex={zIndex}
|
|
className="modal-dialog-aside aside-dialog not-selectable"
|
|
withoutBodyScroll={true}
|
|
>
|
|
<Content displayType="aside">
|
|
{isLoading ? (
|
|
<Loaders.DialogAsideLoader withoutAside />
|
|
) : (
|
|
<>
|
|
<StyledHeader>
|
|
<Heading
|
|
level={1}
|
|
className={"heading heading-aside"}
|
|
size="medium"
|
|
truncate={true}
|
|
>
|
|
{header ? header.props.children : null}
|
|
</Heading>
|
|
</StyledHeader>
|
|
<BodyBox
|
|
className={"modal-dialog-aside-body bodybox-aside"}
|
|
paddingProp={"0 16px"}
|
|
withoutBodyScroll={true}
|
|
>
|
|
{body ? body.props.children : null}
|
|
</BodyBox>
|
|
<Box className={"modal-dialog-aside-footer footer-aside"}>
|
|
<StyledFooter displayType="aside">
|
|
{footer ? footer.props.children : null}
|
|
</StyledFooter>
|
|
</Box>
|
|
</>
|
|
)}
|
|
</Content>
|
|
</Aside>
|
|
</Box>
|
|
</StyledModal>
|
|
);
|
|
};
|
|
|
|
ModalAside.propTypes = {
|
|
id: PropTypes.string,
|
|
className: PropTypes.string,
|
|
zIndex: PropTypes.number,
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
onClose: PropTypes.func,
|
|
|
|
displayType: PropTypes.oneOf(["auto", "modal", "aside"]),
|
|
isLarge: PropTypes.bool,
|
|
|
|
isLoading: PropTypes.bool,
|
|
|
|
header: PropTypes.object,
|
|
body: PropTypes.object,
|
|
footer: PropTypes.object,
|
|
};
|
|
|
|
export default ModalAside;
|