import React from "react";
import PropTypes from "prop-types";
import { Backdrop } from "asc-web-components";
import { withTranslation } from 'react-i18next';
import i18n from './i18n';
import { connect } from "react-redux";
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";
class PageLayoutComponent extends React.PureComponent {
constructor(props) {
super(props);
this.state = this.mapPropsToState(props);
}
componentDidUpdate(prevProps) {
if (this.hasChanges(this.props, prevProps)) {
this.setState(this.mapPropsToState(this.props));
}
}
hasChanges = (currentProps, prevProps) => {
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
);
};
mapPropsToState = props => {
let isArticleHeaderAvailable = !!props.articleHeaderContent,
isArticleMainButtonAvailable = !!props.articleMainButtonContent,
isArticleBodyAvailable = !!props.articleBodyContent,
isArticleAvailable = isArticleHeaderAvailable || isArticleMainButtonAvailable || isArticleBodyAvailable,
isSectionHeaderAvailable = !!props.sectionHeaderContent,
isSectionFilterAvailable = !!props.sectionFilterContent,
isSectionPagingAvailable = !!props.sectionPagingContent,
isSectionBodyAvailable = !!props.sectionBodyContent || isSectionFilterAvailable || isSectionPagingAvailable,
isSectionAvailable = isSectionHeaderAvailable || isSectionFilterAvailable || isSectionBodyAvailable || isSectionPagingAvailable || isArticleAvailable,
isBackdropAvailable = isArticleAvailable;
let newState = {
isBackdropAvailable: isBackdropAvailable,
isArticleAvailable: isArticleAvailable,
isArticleHeaderAvailable: isArticleHeaderAvailable,
isArticleMainButtonAvailable: isArticleMainButtonAvailable,
isArticleBodyAvailable: isArticleBodyAvailable,
isSectionAvailable: isSectionAvailable,
isSectionHeaderAvailable: isSectionHeaderAvailable,
isSectionFilterAvailable: isSectionFilterAvailable,
isSectionBodyAvailable: isSectionBodyAvailable,
isSectionPagingAvailable: isSectionPagingAvailable,
isBackdropVisible: props.isBackdropVisible,
isArticleVisible: props.isArticleVisible,
isArticlePinned: props.isArticlePinned,
articleHeaderContent: props.articleHeaderContent,
articleMainButtonContent: props.articleMainButtonContent,
articleBodyContent: props.articleBodyContent,
sectionHeaderContent: props.sectionHeaderContent,
sectionFilterContent: props.sectionFilterContent,
sectionBodyContent: props.sectionBodyContent,
sectionPagingContent: props.sectionPagingContent
};
return newState;
};
backdropClick = () => {
this.setState({
isBackdropVisible: false,
isArticleVisible: false,
isArticlePinned: false
});
};
pinArticle = () => {
this.setState({
isBackdropVisible: false,
isArticlePinned: true,
isArticleVisible: true
});
};
unpinArticle = () => {
this.setState({
isBackdropVisible: true,
isArticlePinned: false,
isArticleVisible: true
});
};
showArticle = () => {
this.setState({
isBackdropVisible: true,
isArticleVisible: true,
isArticlePinned: false
});
};
render() {
return (
<>
{this.state.isBackdropAvailable && (
)}
{this.state.isArticleAvailable && (
{this.state.isArticleHeaderAvailable && (
{this.state.articleHeaderContent}
)}
{this.state.isArticleMainButtonAvailable && (
{this.state.articleMainButtonContent}
)}
{this.state.isArticleBodyAvailable && (
{this.state.articleBodyContent}
)}
{this.state.isArticleBodyAvailable && (
)}
)}
{this.state.isSectionAvailable && (
{this.state.isSectionHeaderAvailable && (
{this.state.sectionHeaderContent}
)}
{this.state.isSectionBodyAvailable && (
{this.state.isSectionFilterAvailable && (
{this.state.sectionFilterContent}
)}
{this.state.sectionBodyContent}
{this.state.isSectionPagingAvailable && (
{this.state.sectionPagingContent}
)}
)}
{this.state.isArticleAvailable && (
)}
)}
>
);
}
}
const PageLayoutTranslated = withTranslation()(PageLayoutComponent);
const Pagelayout = props => {
const { language } = props;
i18n.changeLanguage(language);
return
}
Pagelayout.propTypes = {
language:PropTypes.string,
}
PageLayoutComponent.propTypes = {
isBackdropVisible: PropTypes.bool,
isArticleVisible: PropTypes.bool,
isArticlePinned: PropTypes.bool,
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
]),
withBodyScroll: PropTypes.bool,
t: PropTypes.func,
};
PageLayoutComponent.defaultProps = {
isBackdropVisible: false,
isArticleVisible: false,
isArticlePinned: false,
withBodyScroll: true
};
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);