contiago-toolbar/app/components/ArticleLayoutBig/index.js

One of the options for outputting content from contiago xml-server

import React from 'react';
import PropTypes from 'prop-types';
import { convertImagePathToUrl } from 'utils/imagesUtil';
import ArticleTitle from 'components/ArticleTitle';
import IntroductionText from 'components/IntroductionText';
import ButtonLink from 'components/Article/ButtonLink';
import NoImage from 'components/NoImage';
import Copyright from 'components/Copyright';
import Container from './components/Container';
import Image from './Image';
import Content from './components/Content';
import LogoContainer from './components/LogoContainer';
import Logo from './components/Logo';
import ContentText from './components/ContentText';


class ArticleLayoutBig extends React.Component {
  render() {
    const { article, position, height, max_height, push } = this.props;
    const mainSrc = article.images && article.images.length ? convertImagePathToUrl(article.images[0].path, '639x328') : null;
    const copyright = article && article.images && article.images.length ? article.images[0].copyright : null;
    const content = position === 3 || position === 4
    ? (<Container onClick={() => push(`Article/${article.id}`)}>
      <Image src={mainSrc} >
        { article.images && !article.images.length && <NoImage /> }
        { article.images && !!article.images.length && <Copyright copyright={copyright} /> }
      </Image>
      <Content>
        <LogoContainer>
          {article && article.companyLogo ?
            <Logo src={convertImagePathToUrl(article.companyLogo, '66x66').replace(/'/g, '')} />
            : null
          }
        </LogoContainer>
        <ContentText>
          <ArticleTitle>
            {article && article.headline}
          </ArticleTitle>
          <IntroductionText>{article && article.introduction}
          </IntroductionText>
        </ContentText>
        <ButtonLink>{'weiter >'}</ButtonLink>
      </Content>
    </Container>)
      : (<Container onClick={() => push(`Article/${article.id}`)}>
        <Content>
          <LogoContainer>
            {article && article.companyLogo ?
              <Logo src={convertImagePathToUrl(article.companyLogo, '66x66').replace(/'/g, '')} />
              : null
            }
          </LogoContainer>
          <ContentText>
            <ArticleTitle>
              {article && article.headline}
            </ArticleTitle>
            <IntroductionText height={height} max_height={max_height}>{article && article.introduction}
            </IntroductionText>
          </ContentText>
          <ButtonLink>{'weiter >'}</ButtonLink>
        </Content>
        <Image src={mainSrc} >
          { article.images && !article.images.length && <NoImage /> }
          { article.images && !!article.images.length && <Copyright copyright={copyright} /> }
        </Image>
      </Container>);

    return (
      <div>{ content }</div>
    );
  }
}

ArticleLayoutBig.propTypes = {
  article: PropTypes.object,
  position: PropTypes.number,
};

export default ArticleLayoutBig;