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

web: components: fix PageLayout

Browse Source
This commit is contained in:
Andrey Savihin 2019-07-12 13:31:18 +03:00
parent cf89a71c9f
commit 6be9c3477a
1 changed files with 68 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/ASC.Web.Components/src/components/page-layout/index.js
View File

@ -123,7 +123,23 @@ class PageLayout extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
let isBackdropAvailable = !!props.articleBodyContent,
isArticleHeaderAvailable = !!props.articleHeaderContent ,
isArticleBodyAvailable = !!props.articleBodyContent,
isArticleAvailable = isArticleHeaderAvailable || isArticleBodyAvailable,
isSectionHeaderAvailable = !!props.sectionHeaderContent,
isSectionBodyAvailable = !!props.sectionBodyContent,
isSectionAvailable = isSectionHeaderAvailable || isSectionBodyAvailable || isArticleAvailable;
this.state = { this.state = {
isBackdropAvailable: isBackdropAvailable,
isArticleAvailable: isArticleAvailable,
isArticleHeaderAvailable: isArticleHeaderAvailable,
isArticleBodyAvailable: isArticleBodyAvailable,
isSectionAvailable: isSectionAvailable,
isSectionHeaderAvailable: isSectionHeaderAvailable,
isSectionBodyAvailable: isSectionBodyAvailable,
isBackdropVisible: props.isBackdropVisible, isBackdropVisible: props.isBackdropVisible,
isArticleVisible: props.isArticleVisible, isArticleVisible: props.isArticleVisible,
isArticlePinned: props.isArticlePinned, isArticlePinned: props.isArticlePinned,
@ -170,10 +186,23 @@ class PageLayout extends React.Component {
render() { render() {
return ( return (
<> <>
{
this.state.isBackdropAvailable &&
<Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/> <Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/>
}
{
this.state.isArticleAvailable &&
<StyledArticle visible={this.state.isArticleVisible} pinned={this.state.isArticlePinned}> <StyledArticle visible={this.state.isArticleVisible} pinned={this.state.isArticlePinned}>
{
this.state.isArticleHeaderAvailable &&
<StyledArticleHeader visible={this.state.isArticlePinned}>{this.state.articleHeaderContent}</StyledArticleHeader> <StyledArticleHeader visible={this.state.isArticlePinned}>{this.state.articleHeaderContent}</StyledArticleHeader>
}
{
this.state.isArticleBodyAvailable &&
<StyledArticleBody>{this.state.articleBodyContent}</StyledArticleBody> <StyledArticleBody>{this.state.articleBodyContent}</StyledArticleBody>
}
{
this.state.isArticleBodyAvailable &&
<StyledArticlePinPanel> <StyledArticlePinPanel>
{ {
this.state.isArticlePinned this.state.isArticlePinned
@ -187,16 +216,30 @@ class PageLayout extends React.Component {
</div> </div>
} }
</StyledArticlePinPanel> </StyledArticlePinPanel>
}
</StyledArticle> </StyledArticle>
}
{
this.state.isSectionAvailable &&
<StyledSection> <StyledSection>
{
this.state.isSectionHeaderAvailable &&
<StyledSectionHeader>{this.state.sectionHeaderContent}</StyledSectionHeader> <StyledSectionHeader>{this.state.sectionHeaderContent}</StyledSectionHeader>
}
{
this.state.isSectionBodyAvailable &&
<StyledSectionBody>{this.state.sectionBodyContent}</StyledSectionBody> <StyledSectionBody>{this.state.sectionBodyContent}</StyledSectionBody>
}
{
this.state.isArticleAvailable &&
<StyledSectionPagingPanel visible={!this.state.isArticlePinned}> <StyledSectionPagingPanel visible={!this.state.isArticlePinned}>
<div onClick={this.showArticle}> <div onClick={this.showArticle}>
<Icons.CatalogButtonIcon size="scale"/> <Icons.CatalogButtonIcon size="scale"/>
</div> </div>
</StyledSectionPagingPanel> </StyledSectionPagingPanel>
}
</StyledSection> </StyledSection>
}
</> </>
) )
} }