Web:Common:Article: add render with portal for mobile devices
This commit is contained in:
parent
9ae8273954
commit
91835c2b95
@ -17,6 +17,7 @@ import ArticleProfile from "./sub-components/article-profile";
|
|||||||
import ArticlePaymentAlert from "./sub-components/article-payment-alert";
|
import ArticlePaymentAlert from "./sub-components/article-payment-alert";
|
||||||
import { StyledArticle } from "./styled-article";
|
import { StyledArticle } from "./styled-article";
|
||||||
import HideArticleMenuButton from "./sub-components/article-hide-menu-button";
|
import HideArticleMenuButton from "./sub-components/article-hide-menu-button";
|
||||||
|
import Portal from "@docspace/components/portal";
|
||||||
|
|
||||||
const Article = ({
|
const Article = ({
|
||||||
showText,
|
showText,
|
||||||
@ -107,7 +108,7 @@ const Article = ({
|
|||||||
[setShowText]
|
[setShowText]
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
const articleComponent = (
|
||||||
<>
|
<>
|
||||||
<StyledArticle
|
<StyledArticle
|
||||||
id={"article-container"}
|
id={"article-container"}
|
||||||
@ -153,6 +154,20 @@ const Article = ({
|
|||||||
) : null}
|
) : null}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const renderPortalArticle = () => {
|
||||||
|
const rootElement = document.getElementById("root");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Portal
|
||||||
|
element={articleComponent}
|
||||||
|
appendTo={rootElement}
|
||||||
|
visible={true}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return isMobileOnly ? renderPortalArticle() : articleComponent;
|
||||||
};
|
};
|
||||||
|
|
||||||
Article.propTypes = {
|
Article.propTypes = {
|
||||||
|
Loading…
Reference in New Issue
Block a user