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

93
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,33 +186,60 @@ class PageLayout extends React.Component {
render() { render() {
return ( return (
<> <>
<Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/> {
<StyledArticle visible={this.state.isArticleVisible} pinned={this.state.isArticlePinned}> this.state.isBackdropAvailable &&
<StyledArticleHeader visible={this.state.isArticlePinned}>{this.state.articleHeaderContent}</StyledArticleHeader> <Backdrop visible={this.state.isBackdropVisible} onClick={this.backdropClick}/>
<StyledArticleBody>{this.state.articleBodyContent}</StyledArticleBody> }
<StyledArticlePinPanel> {
this.state.isArticleAvailable &&
<StyledArticle visible={this.state.isArticleVisible} pinned={this.state.isArticlePinned}>
{ {
this.state.isArticlePinned this.state.isArticleHeaderAvailable &&
? <div onClick={this.unpinArticle}> <StyledArticleHeader visible={this.state.isArticlePinned}>{this.state.articleHeaderContent}</StyledArticleHeader>
<Icons.CatalogUnpinIcon size="medium"/>
<span>Unpin this panel</span>
</div>
: <div onClick={this.pinArticle}>
<Icons.CatalogPinIcon size="medium"/>
<span>Pin this panel</span>
</div>
} }
</StyledArticlePinPanel> {
</StyledArticle> this.state.isArticleBodyAvailable &&
<StyledSection> <StyledArticleBody>{this.state.articleBodyContent}</StyledArticleBody>
<StyledSectionHeader>{this.state.sectionHeaderContent}</StyledSectionHeader> }
<StyledSectionBody>{this.state.sectionBodyContent}</StyledSectionBody> {
<StyledSectionPagingPanel visible={!this.state.isArticlePinned}> this.state.isArticleBodyAvailable &&
<div onClick={this.showArticle}> <StyledArticlePinPanel>
<Icons.CatalogButtonIcon size="scale"/> {
</div> this.state.isArticlePinned
</StyledSectionPagingPanel> ? <div onClick={this.unpinArticle}>
</StyledSection> <Icons.CatalogUnpinIcon size="medium"/>
<span>Unpin this panel</span>
</div>
: <div onClick={this.pinArticle}>
<Icons.CatalogPinIcon size="medium"/>
<span>Pin this panel</span>
</div>
}
</StyledArticlePinPanel>
}
</StyledArticle>
}
{
this.state.isSectionAvailable &&
<StyledSection>
{
this.state.isSectionHeaderAvailable &&
<StyledSectionHeader>{this.state.sectionHeaderContent}</StyledSectionHeader>
}
{
this.state.isSectionBodyAvailable &&
<StyledSectionBody>{this.state.sectionBodyContent}</StyledSectionBody>
}
{
this.state.isArticleAvailable &&
<StyledSectionPagingPanel visible={!this.state.isArticlePinned}>
<div onClick={this.showArticle}>
<Icons.CatalogButtonIcon size="scale"/>
</div>
</StyledSectionPagingPanel>
}
</StyledSection>
}
</> </>
) )
} }