2019-09-12 12:15:22 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import Backdrop from "../backdrop";
|
2019-12-20 08:34:49 +00:00
|
|
|
import { withTranslation } from 'react-i18next';
|
|
|
|
import i18n from './i18n';
|
|
|
|
import { connect } from "react-redux";
|
2019-09-12 12:15:22 +00:00
|
|
|
|
2019-09-12 12:28:13 +00:00
|
|
|
import Article from "./sub-components/article";
|
|
|
|
import ArticleHeader from "./sub-components/article-header";
|
|
|
|
import ArticleMainButton from "./sub-components/article-main-button";
|
|
|
|
import ArticleBody from "./sub-components/article-body";
|
|
|
|
import ArticlePinPanel from "./sub-components/article-pin-panel";
|
|
|
|
import Section from "./sub-components/section";
|
|
|
|
import SectionHeader from "./sub-components/section-header";
|
|
|
|
import SectionFilter from "./sub-components/section-filter";
|
|
|
|
import SectionBody from "./sub-components/section-body";
|
|
|
|
import SectionPaging from "./sub-components/section-paging";
|
|
|
|
import SectionToggler from "./sub-components/section-toggler";
|
2019-07-11 11:43:07 +00:00
|
|
|
|
2019-12-20 08:34:49 +00:00
|
|
|
class PageLayoutComponent extends React.PureComponent {
|
2019-07-11 11:43:07 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-07-15 10:35:10 +00:00
|
|
|
this.state = this.mapPropsToState(props);
|
2019-09-10 07:03:36 +00:00
|
|
|
}
|
2019-07-15 10:35:10 +00:00
|
|
|
|
2019-09-12 12:15:22 +00:00
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.hasChanges(this.props, prevProps)) {
|
2019-07-15 10:35:10 +00:00
|
|
|
this.setState(this.mapPropsToState(this.props));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
hasChanges = (currentProps, prevProps) => {
|
2019-09-12 12:15:22 +00:00
|
|
|
return (
|
|
|
|
currentProps.articleHeaderContent != prevProps.articleHeaderContent ||
|
|
|
|
currentProps.articleMainButtonContent != prevProps.articleMainButtonContent ||
|
|
|
|
currentProps.articleBodyContent != prevProps.articleBodyContent ||
|
|
|
|
currentProps.sectionHeaderContent != prevProps.sectionHeaderContent ||
|
|
|
|
currentProps.sectionFilterContent != prevProps.sectionFilterContent ||
|
|
|
|
currentProps.sectionBodyContent != prevProps.sectionBodyContent ||
|
|
|
|
currentProps.sectionPagingContent != prevProps.sectionPagingContent
|
|
|
|
);
|
|
|
|
};
|
2019-07-11 11:43:07 +00:00
|
|
|
|
2019-09-12 12:15:22 +00:00
|
|
|
mapPropsToState = props => {
|
2019-07-19 14:38:29 +00:00
|
|
|
let isArticleHeaderAvailable = !!props.articleHeaderContent,
|
2019-09-12 12:15:22 +00:00
|
|
|
isArticleMainButtonAvailable = !!props.articleMainButtonContent,
|
|
|
|
isArticleBodyAvailable = !!props.articleBodyContent,
|
|
|
|
isArticleAvailable = isArticleHeaderAvailable || isArticleMainButtonAvailable || isArticleBodyAvailable,
|
|
|
|
isSectionHeaderAvailable = !!props.sectionHeaderContent,
|
|
|
|
isSectionFilterAvailable = !!props.sectionFilterContent,
|
|
|
|
isSectionPagingAvailable = !!props.sectionPagingContent,
|
2019-11-14 12:13:54 +00:00
|
|
|
isSectionBodyAvailable = !!props.sectionBodyContent || isSectionFilterAvailable || isSectionPagingAvailable,
|
2019-09-12 12:15:22 +00:00
|
|
|
isSectionAvailable = isSectionHeaderAvailable || isSectionFilterAvailable || isSectionBodyAvailable || isSectionPagingAvailable || isArticleAvailable,
|
|
|
|
isBackdropAvailable = isArticleAvailable;
|
2019-07-12 10:31:18 +00:00
|
|
|
|
2019-07-15 10:35:10 +00:00
|
|
|
let newState = {
|
2019-07-12 10:31:18 +00:00
|
|
|
isBackdropAvailable: isBackdropAvailable,
|
|
|
|
isArticleAvailable: isArticleAvailable,
|
|
|
|
isArticleHeaderAvailable: isArticleHeaderAvailable,
|
2019-07-19 14:38:29 +00:00
|
|
|
isArticleMainButtonAvailable: isArticleMainButtonAvailable,
|
2019-07-12 10:31:18 +00:00
|
|
|
isArticleBodyAvailable: isArticleBodyAvailable,
|
|
|
|
isSectionAvailable: isSectionAvailable,
|
|
|
|
isSectionHeaderAvailable: isSectionHeaderAvailable,
|
2019-07-19 14:38:29 +00:00
|
|
|
isSectionFilterAvailable: isSectionFilterAvailable,
|
2019-07-12 10:31:18 +00:00
|
|
|
isSectionBodyAvailable: isSectionBodyAvailable,
|
2019-07-19 14:38:29 +00:00
|
|
|
isSectionPagingAvailable: isSectionPagingAvailable,
|
2019-07-12 10:31:18 +00:00
|
|
|
|
2019-07-11 14:40:55 +00:00
|
|
|
isBackdropVisible: props.isBackdropVisible,
|
|
|
|
isArticleVisible: props.isArticleVisible,
|
2019-07-12 08:25:32 +00:00
|
|
|
isArticlePinned: props.isArticlePinned,
|
|
|
|
|
|
|
|
articleHeaderContent: props.articleHeaderContent,
|
2019-07-19 14:38:29 +00:00
|
|
|
articleMainButtonContent: props.articleMainButtonContent,
|
2019-07-12 08:25:32 +00:00
|
|
|
articleBodyContent: props.articleBodyContent,
|
|
|
|
sectionHeaderContent: props.sectionHeaderContent,
|
2019-07-19 14:38:29 +00:00
|
|
|
sectionFilterContent: props.sectionFilterContent,
|
|
|
|
sectionBodyContent: props.sectionBodyContent,
|
2019-09-12 12:15:22 +00:00
|
|
|
sectionPagingContent: props.sectionPagingContent
|
2019-07-11 11:43:07 +00:00
|
|
|
};
|
2019-07-15 10:35:10 +00:00
|
|
|
|
|
|
|
return newState;
|
2019-09-12 12:15:22 +00:00
|
|
|
};
|
2019-07-11 11:43:07 +00:00
|
|
|
|
|
|
|
backdropClick = () => {
|
|
|
|
this.setState({
|
2019-07-11 13:21:39 +00:00
|
|
|
isBackdropVisible: false,
|
2019-07-11 14:40:55 +00:00
|
|
|
isArticleVisible: false,
|
2019-07-11 11:43:07 +00:00
|
|
|
isArticlePinned: false
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
pinArticle = () => {
|
|
|
|
this.setState({
|
2019-07-11 13:21:39 +00:00
|
|
|
isBackdropVisible: false,
|
2019-07-11 11:43:07 +00:00
|
|
|
isArticlePinned: true,
|
2019-09-12 12:15:22 +00:00
|
|
|
isArticleVisible: true
|
2019-07-11 11:43:07 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
unpinArticle = () => {
|
|
|
|
this.setState({
|
2019-07-11 13:21:39 +00:00
|
|
|
isBackdropVisible: true,
|
2019-07-11 11:43:07 +00:00
|
|
|
isArticlePinned: false,
|
2019-09-12 12:15:22 +00:00
|
|
|
isArticleVisible: true
|
2019-07-11 11:43:07 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
showArticle = () => {
|
|
|
|
this.setState({
|
2019-07-11 13:21:39 +00:00
|
|
|
isBackdropVisible: true,
|
2019-07-11 14:40:55 +00:00
|
|
|
isArticleVisible: true,
|
2019-07-11 11:43:07 +00:00
|
|
|
isArticlePinned: false
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<>
|
2019-09-12 12:15:22 +00:00
|
|
|
{this.state.isBackdropAvailable && (
|
|
|
|
<Backdrop
|
|
|
|
zIndex={400}
|
|
|
|
visible={this.state.isBackdropVisible}
|
|
|
|
onClick={this.backdropClick}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{this.state.isArticleAvailable && (
|
|
|
|
<Article
|
|
|
|
visible={this.state.isArticleVisible}
|
|
|
|
pinned={this.state.isArticlePinned}
|
|
|
|
>
|
|
|
|
{this.state.isArticleHeaderAvailable && (
|
|
|
|
<ArticleHeader visible={this.state.isArticlePinned}>
|
|
|
|
{this.state.articleHeaderContent}
|
|
|
|
</ArticleHeader>
|
|
|
|
)}
|
|
|
|
{this.state.isArticleMainButtonAvailable && (
|
|
|
|
<ArticleMainButton>
|
|
|
|
{this.state.articleMainButtonContent}
|
|
|
|
</ArticleMainButton>
|
|
|
|
)}
|
|
|
|
{this.state.isArticleBodyAvailable && (
|
2019-07-20 09:48:29 +00:00
|
|
|
<ArticleBody>{this.state.articleBodyContent}</ArticleBody>
|
2019-09-12 12:15:22 +00:00
|
|
|
)}
|
|
|
|
{this.state.isArticleBodyAvailable && (
|
|
|
|
<ArticlePinPanel
|
|
|
|
pinned={this.state.isArticlePinned}
|
2019-12-20 08:34:49 +00:00
|
|
|
pinText={this.props.t('PinPanel')}
|
2019-09-12 12:15:22 +00:00
|
|
|
onPin={this.pinArticle}
|
2019-12-20 08:34:49 +00:00
|
|
|
unpinText={this.props.t('UnpinPanel')}
|
2019-09-12 12:15:22 +00:00
|
|
|
onUnpin={this.unpinArticle}
|
|
|
|
/>
|
|
|
|
)}
|
2019-07-20 09:48:29 +00:00
|
|
|
</Article>
|
2019-09-12 12:15:22 +00:00
|
|
|
)}
|
|
|
|
{this.state.isSectionAvailable && (
|
2019-07-20 09:48:29 +00:00
|
|
|
<Section>
|
2019-09-12 12:15:22 +00:00
|
|
|
{this.state.isSectionHeaderAvailable && (
|
2019-07-20 09:48:29 +00:00
|
|
|
<SectionHeader>{this.state.sectionHeaderContent}</SectionHeader>
|
2019-09-12 12:15:22 +00:00
|
|
|
)}
|
2019-11-14 12:13:54 +00:00
|
|
|
|
2019-09-12 12:15:22 +00:00
|
|
|
{this.state.isSectionBodyAvailable && (
|
2019-11-14 12:13:54 +00:00
|
|
|
<SectionBody withScroll={this.props.withBodyScroll} pinned={this.state.isArticlePinned}>
|
|
|
|
{this.state.isSectionFilterAvailable && (
|
|
|
|
<SectionFilter>{this.state.sectionFilterContent}</SectionFilter>
|
|
|
|
)}
|
2019-09-12 12:15:22 +00:00
|
|
|
{this.state.sectionBodyContent}
|
2019-11-14 12:13:54 +00:00
|
|
|
{this.state.isSectionPagingAvailable && (
|
|
|
|
<SectionPaging>{this.state.sectionPagingContent}</SectionPaging>
|
|
|
|
)}
|
2019-09-12 12:15:22 +00:00
|
|
|
</SectionBody>
|
|
|
|
)}
|
2019-11-14 12:13:54 +00:00
|
|
|
|
2019-09-12 12:15:22 +00:00
|
|
|
{this.state.isArticleAvailable && (
|
|
|
|
<SectionToggler
|
|
|
|
visible={!this.state.isArticlePinned}
|
|
|
|
onClick={this.showArticle}
|
|
|
|
/>
|
|
|
|
)}
|
2019-07-20 09:48:29 +00:00
|
|
|
</Section>
|
2019-09-12 12:15:22 +00:00
|
|
|
)}
|
2019-07-11 11:43:07 +00:00
|
|
|
</>
|
2019-09-12 12:15:22 +00:00
|
|
|
);
|
2019-07-11 11:43:07 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-20 08:34:49 +00:00
|
|
|
const PageLayoutTranslated = withTranslation()(PageLayoutComponent);
|
|
|
|
const Pagelayout = props => {
|
|
|
|
const { language } = props;
|
|
|
|
i18n.changeLanguage(language);
|
|
|
|
|
|
|
|
return <PageLayoutTranslated i18n={i18n} {...props} />
|
|
|
|
}
|
|
|
|
|
|
|
|
Pagelayout.propTypes = {
|
|
|
|
language:PropTypes.string,
|
|
|
|
}
|
|
|
|
|
|
|
|
PageLayoutComponent.propTypes = {
|
2019-07-11 13:21:39 +00:00
|
|
|
isBackdropVisible: PropTypes.bool,
|
2019-07-11 14:40:55 +00:00
|
|
|
isArticleVisible: PropTypes.bool,
|
2019-07-12 08:25:32 +00:00
|
|
|
isArticlePinned: PropTypes.bool,
|
|
|
|
|
2019-09-12 12:15:22 +00:00
|
|
|
articleHeaderContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
articleMainButtonContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
articleBodyContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
sectionHeaderContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
sectionFilterContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
sectionBodyContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
sectionPagingContent: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
|
|
PropTypes.node
|
|
|
|
]),
|
|
|
|
|
2019-12-20 08:34:49 +00:00
|
|
|
withBodyScroll: PropTypes.bool,
|
|
|
|
t: PropTypes.func,
|
2019-09-12 12:15:22 +00:00
|
|
|
};
|
2019-07-11 11:43:07 +00:00
|
|
|
|
2019-12-20 08:34:49 +00:00
|
|
|
PageLayoutComponent.defaultProps = {
|
2019-07-11 13:21:39 +00:00
|
|
|
isBackdropVisible: false,
|
2019-07-11 14:40:55 +00:00
|
|
|
isArticleVisible: false,
|
2019-08-07 10:57:54 +00:00
|
|
|
isArticlePinned: false,
|
|
|
|
withBodyScroll: true
|
2019-09-12 12:15:22 +00:00
|
|
|
};
|
2019-07-11 11:43:07 +00:00
|
|
|
|
2019-12-20 08:34:49 +00:00
|
|
|
function mapStateToProps(state) {
|
|
|
|
return {
|
|
|
|
language:
|
|
|
|
state.auth &&
|
|
|
|
((state.auth.user && state.auth.user.cultureName) ||
|
|
|
|
(state.auth.settings && state.auth.settings.culture))
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Pagelayout);
|