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

Web: Files: CreateRoomDialog: removed ModalDialog wrapper

Browse Source
This commit is contained in:
Nikita Gopienko 2024-08-30 17:41:50 +03:00
parent d8c4bd7b4a
commit c8df42a510
4 changed files with 95 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
View File

@ -34,28 +34,6 @@ import TagHandler from "./handlers/TagHandler";
import SetRoomParams from "./sub-components/SetRoomParams"; import SetRoomParams from "./sub-components/SetRoomParams";
import RoomTypeList from "./sub-components/RoomTypeList"; import RoomTypeList from "./sub-components/RoomTypeList";
const StyledModalDialog = styled(ModalDialog)`
.header-with-button {
display: flex;
align-items: center;
flex-direction: row;
gap: 12px;
}
.sharing_panel-arrow svg {
${({ theme }) =>
theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`}
}
${(props) =>
props.isOauthWindowOpen &&
css`
#modal-dialog {
display: none;
}
`}
`;
const CreateRoomDialog = ({ const CreateRoomDialog = ({
t, t,
visible, visible,
@ -165,14 +143,14 @@ const CreateRoomDialog = ({
: t("Files:CreateRoom"); : t("Files:CreateRoom");
return ( return (
<StyledModalDialog <ModalDialog
displayType="aside" displayType="aside"
withBodyScroll withBodyScroll
visible={visible} visible={visible}
onClose={onCloseAndDisconnectThirdparty} onClose={onCloseAndDisconnectThirdparty}
isScrollLocked={isScrollLocked} isScrollLocked={isScrollLocked}
withFooterBorder withFooterBorder
isOauthWindowOpen={isOauthWindowOpen} hideContent={isOauthWindowOpen}
isBackButton={roomParams.type} isBackButton={roomParams.type}
onBackClick={goBack} onBackClick={goBack}
> >
@ -226,7 +204,7 @@ const CreateRoomDialog = ({
/> />
</ModalDialog.Footer> </ModalDialog.Footer>
)} )}
</StyledModalDialog> </ModalDialog>
); );
}; };

2
packages/shared/components/modal-dialog/ModalDialog.tsx
View File

@ -88,6 +88,7 @@ const ModalDialog = ({
withFooterBorder = false, withFooterBorder = false,
containerVisible = false, containerVisible = false,
withoutPadding = false, withoutPadding = false,
hideContent = false,
...rest ...rest
}: ModalDialogProps) => { }: ModalDialogProps) => {
@ -177,6 +178,7 @@ const ModalDialog = ({
embedded={embedded} embedded={embedded}
blur={blur} blur={blur}
withoutPadding={withoutPadding} withoutPadding={withoutPadding}
hideContent={hideContent}
{...rest} {...rest}
/> />
} }

2
packages/shared/components/modal-dialog/ModalDialog.types.ts
View File

@ -92,6 +92,7 @@ export interface ModalDialogProps {
embedded?: boolean; embedded?: boolean;
withForm?: boolean; withForm?: boolean;
withoutPadding?: boolean; withoutPadding?: boolean;
hideContent?: boolean;
blur?: number; blur?: number;
} }
@ -162,5 +163,6 @@ export type ModalSubComponentsProps = AsideHeaderProps & {
embedded?: boolean; embedded?: boolean;
withForm?: boolean; withForm?: boolean;
withoutPadding?: boolean; withoutPadding?: boolean;
hideContent?: boolean;
blur?: number; blur?: number;
}; };

173
packages/shared/components/modal-dialog/sub-components/Modal.tsx
View File

@ -70,6 +70,7 @@ const Modal = ({
withForm, withForm,
blur, blur,
withoutPadding, withoutPadding,
hideContent,
...rest ...rest
}: ModalSubComponentsProps) => { }: ModalSubComponentsProps) => {
@ -146,92 +147,94 @@ const Modal = ({
style={style} style={style}
onMouseDown={validateOnMouseDown} onMouseDown={validateOnMouseDown}
> >
<Content {!hideContent && (
id="modal-dialog" <Content
visible={visible} id="modal-dialog"
isLarge={isLarge} visible={visible}
currentDisplayType={currentDisplayType} isLarge={isLarge}
autoMaxHeight={autoMaxHeight} currentDisplayType={currentDisplayType}
autoMaxWidth={autoMaxWidth} autoMaxHeight={autoMaxHeight}
modalSwipeOffset={modalSwipeOffset} autoMaxWidth={autoMaxWidth}
embedded={embedded} modalSwipeOffset={modalSwipeOffset}
ref={contentRef} embedded={embedded}
> ref={contentRef}
{isLoading ? ( >
currentDisplayType === "modal" ? ( {isLoading ? (
<DialogSkeleton currentDisplayType === "modal" ? (
isLarge={isLarge} <DialogSkeleton
withFooterBorder={withFooterBorder} isLarge={isLarge}
/>
) : (
<DialogAsideSkeleton
withoutAside
isPanel={false}
withFooterBorder={withFooterBorder}
/>
)
) : container &&
containerVisible &&
currentDisplayType !== "modal" ? (
containerComponent
) : (
<FormWrapper withForm={withForm || false}>
{header && (
<AsideHeader
id="modal-header-swipe"
className={
classNames(["modal-header", headerProps.className]) ||
"modal-header"
}
header={headerComponent}
onCloseClick={onClose}
{...(currentDisplayType === "modal" && {
style: { marginBottom: "16px" },
})}
{...rest}
/>
)}
{body && (
<StyledBody
className={
classNames(["modal-body", bodyProps.className]) ||
"modal-body"
}
withBodyScroll={withBodyScroll}
isScrollLocked={isScrollLocked}
hasFooter={!!footer}
currentDisplayType={currentDisplayType}
withoutPadding={withoutPadding}
{...bodyProps}
{...iOSActions}
// embedded={embedded}
>
{currentDisplayType === "aside" && withBodyScroll ? (
<Scrollbar id="modal-scroll" className="modal-scroll">
{bodyComponent}
</Scrollbar>
) : (
bodyComponent
)}
</StyledBody>
)}
{footer && (
<StyledFooter
className={
classNames(["modal-footer", footerProps.className]) ||
"modal-footer"
}
withFooterBorder={withFooterBorder} withFooterBorder={withFooterBorder}
isDoubleFooterLine={isDoubleFooterLine} />
{...footerProps} ) : (
> <DialogAsideSkeleton
{footerComponent} withoutAside
</StyledFooter> isPanel={false}
)} withFooterBorder={withFooterBorder}
</FormWrapper> />
)} )
</Content> ) : container &&
containerVisible &&
currentDisplayType !== "modal" ? (
containerComponent
) : (
<FormWrapper withForm={withForm || false}>
{header && (
<AsideHeader
id="modal-header-swipe"
className={
classNames(["modal-header", headerProps.className]) ||
"modal-header"
}
header={headerComponent}
onCloseClick={onClose}
{...(currentDisplayType === "modal" && {
style: { marginBottom: "16px" },
})}
{...rest}
/>
)}
{body && (
<StyledBody
className={
classNames(["modal-body", bodyProps.className]) ||
"modal-body"
}
withBodyScroll={withBodyScroll}
isScrollLocked={isScrollLocked}
hasFooter={!!footer}
currentDisplayType={currentDisplayType}
withoutPadding={withoutPadding}
{...bodyProps}
{...iOSActions}
// embedded={embedded}
>
{currentDisplayType === "aside" && withBodyScroll ? (
<Scrollbar id="modal-scroll" className="modal-scroll">
{bodyComponent}
</Scrollbar>
) : (
bodyComponent
)}
</StyledBody>
)}
{footer && (
<StyledFooter
className={
classNames(["modal-footer", footerProps.className]) ||
"modal-footer"
}
withFooterBorder={withFooterBorder}
isDoubleFooterLine={isDoubleFooterLine}
{...footerProps}
>
{footerComponent}
</StyledFooter>
)}
</FormWrapper>
)}
</Content>
)}
</Dialog> </Dialog>
</ModalBackdrop> </ModalBackdrop>
</StyledModal> </StyledModal>