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 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 = ({
t,
visible,
@ -165,14 +143,14 @@ const CreateRoomDialog = ({
: t("Files:CreateRoom");
return (
<StyledModalDialog
<ModalDialog
displayType="aside"
withBodyScroll
visible={visible}
onClose={onCloseAndDisconnectThirdparty}
isScrollLocked={isScrollLocked}
withFooterBorder
isOauthWindowOpen={isOauthWindowOpen}
hideContent={isOauthWindowOpen}
isBackButton={roomParams.type}
onBackClick={goBack}
>
@ -226,7 +204,7 @@ const CreateRoomDialog = ({
/>
</ModalDialog.Footer>
)}
</StyledModalDialog>
</ModalDialog>
);
};

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

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

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

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

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

@ -70,6 +70,7 @@ const Modal = ({
withForm,
blur,
withoutPadding,
hideContent,
...rest
}: ModalSubComponentsProps) => {
@ -146,92 +147,94 @@ const Modal = ({
style={style}
onMouseDown={validateOnMouseDown}
>
<Content
id="modal-dialog"
visible={visible}
isLarge={isLarge}
currentDisplayType={currentDisplayType}
autoMaxHeight={autoMaxHeight}
autoMaxWidth={autoMaxWidth}
modalSwipeOffset={modalSwipeOffset}
embedded={embedded}
ref={contentRef}
>
{isLoading ? (
currentDisplayType === "modal" ? (
<DialogSkeleton
isLarge={isLarge}
withFooterBorder={withFooterBorder}
/>
) : (
<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"
}
{!hideContent && (
<Content
id="modal-dialog"
visible={visible}
isLarge={isLarge}
currentDisplayType={currentDisplayType}
autoMaxHeight={autoMaxHeight}
autoMaxWidth={autoMaxWidth}
modalSwipeOffset={modalSwipeOffset}
embedded={embedded}
ref={contentRef}
>
{isLoading ? (
currentDisplayType === "modal" ? (
<DialogSkeleton
isLarge={isLarge}
withFooterBorder={withFooterBorder}
isDoubleFooterLine={isDoubleFooterLine}
{...footerProps}
>
{footerComponent}
</StyledFooter>
)}
</FormWrapper>
)}
</Content>
/>
) : (
<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}
isDoubleFooterLine={isDoubleFooterLine}
{...footerProps}
>
{footerComponent}
</StyledFooter>
)}
</FormWrapper>
)}
</Content>
)}
</Dialog>
</ModalBackdrop>
</StyledModal>