IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Components:ModalDialog: add available use modal dialog as container for people or room selector

Browse Source
This commit is contained in:
TimofeyBoyko 2022-09-06 16:54:15 +03:00
parent 65c879c04b
commit ac70355311
4 changed files with 76 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/components/modal-dialog/handlers/childrenParseHandler.js
View File

@ -2,11 +2,13 @@ export const parseChildren = (
children,
headerDisplayName,
bodyDisplayName,
footerDisplayName
footerDisplayName,
containerDisplayName
) => {
let header = null,
body = null,
footer = null;
footer = null,
container = null;
children.forEach((child) => {
const childType =
@ -22,9 +24,12 @@ export const parseChildren = (
case footerDisplayName:
footer = child;
break;
case containerDisplayName:
container = child;
break;
default:
break;
}
});
return [header, body, footer];
return [header, body, footer, container];
};

10
packages/components/modal-dialog/index.js
View File

@ -19,6 +19,9 @@ Body.displayName = "DialogBody";
const Footer = () => null;
Footer.displayName = "DialogFooter";
const Container = () => null;
Container.displayName = "DialogContainer";
const ModalDialog = ({
id,
style,
@ -69,11 +72,12 @@ const ModalDialog = ({
};
}, []);
const [header, body, footer] = parseChildren(
const [header, body, footer, container] = parseChildren(
children,
Header.displayName,
Body.displayName,
Footer.displayName
Footer.displayName,
Container.displayName
);
return (
@ -96,6 +100,7 @@ const ModalDialog = ({
header={header}
body={body}
footer={footer}
container={container}
visible={visible}
modalSwipeOffset={modalSwipeOffset}
/>
@ -173,5 +178,6 @@ ModalDialog.defaultProps = {
ModalDialog.Header = Header;
ModalDialog.Body = Body;
ModalDialog.Footer = Footer;
ModalDialog.Container = Container;
export default ModalDialog;

7
packages/components/modal-dialog/modal-dialog.stories.js
View File

@ -55,6 +55,11 @@ const Template = ({ onOk, ...args }) => {
onClick={closeModal}
/>
</ModalDialog.Footer>
<ModalDialog.Container>
<div style={{ width: "100%", height: "100%", background: "red" }}>
123
</div>
</ModalDialog.Container>
</ModalDialog>
</>
);
@ -68,7 +73,7 @@ export const Default = Template.bind({});
Default.args = {
displayType: "aside",
displayTypeDetailed: {
desktop: "modal",
desktop: "aside",
tablet: "aside",
smallTablet: "modal",
mobile: "aside",

100
packages/components/modal-dialog/views/modal-aside.js
View File

@ -32,6 +32,7 @@ const Modal = ({
header,
body,
footer,
container,
visible,
withFooterBorder,
modalSwipeOffset,
@ -39,6 +40,7 @@ const Modal = ({
const headerComponent = header ? header.props.children : null;
const bodyComponent = body ? body.props.children : null;
const footerComponent = footer ? footer.props.children : null;
const containerComponent = container ? container.props.children : null;
const validateOnMouseDown = (e) => {
if (e.target.id === "modal-onMouseDown-close") onClose();
@ -90,54 +92,60 @@ const Modal = ({
)
) : (
<>
{header && (
<StyledHeader
id="modal-header-swipe"
className={`modal-header ${header.props.className}`}
currentDisplayType={currentDisplayType}
{...header.props}
>
<Heading
level={1}
className={"heading"}
size="medium"
truncate={true}
>
{headerComponent}
</Heading>
</StyledHeader>
)}
{body && (
<StyledBody
className={`modal-body ${body.props.className}`}
withBodyScroll={withBodyScroll}
isScrollLocked={isScrollLocked}
hasFooter={1 && footer}
currentDisplayType={currentDisplayType}
{...body.props}
>
{currentDisplayType === "aside" && withBodyScroll ? (
<Scrollbar
stype="mediumBlack"
id="modal-scroll"
className="modal-scroll"
{container && currentDisplayType !== "modal" ? (
<>{containerComponent}</>
) : (
<>
{header && (
<StyledHeader
id="modal-header-swipe"
className={`modal-header ${header.props.className}`}
currentDisplayType={currentDisplayType}
{...header.props}
>
{bodyComponent}
</Scrollbar>
) : (
bodyComponent
<Heading
level={1}
className={"heading"}
size="medium"
truncate={true}
>
{headerComponent}
</Heading>
</StyledHeader>
)}
</StyledBody>
)}
{footer && (
<StyledFooter
className={`modal-footer ${footer.props.className}`}
withFooterBorder={withFooterBorder}
currentDisplayType={currentDisplayType}
{...footer.props}
>
{footerComponent}
</StyledFooter>
{body && (
<StyledBody
className={`modal-body ${body.props.className}`}
withBodyScroll={withBodyScroll}
isScrollLocked={isScrollLocked}
hasFooter={1 && footer}
currentDisplayType={currentDisplayType}
{...body.props}
>
{currentDisplayType === "aside" && withBodyScroll ? (
<Scrollbar
stype="mediumBlack"
id="modal-scroll"
className="modal-scroll"
>
{bodyComponent}
</Scrollbar>
) : (
bodyComponent
)}
</StyledBody>
)}
{footer && (
<StyledFooter
className={`modal-footer ${footer.props.className}`}
withFooterBorder={withFooterBorder}
currentDisplayType={currentDisplayType}
{...footer.props}
>
{footerComponent}
</StyledFooter>
)}
</>
)}
</>
)}