Web: Files: CreateRoomDialog: removed ModalDialog wrapper
This commit is contained in:
parent
d8c4bd7b4a
commit
c8df42a510
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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}
|
||||
/>
|
||||
}
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user