Last active
August 6, 2018 05:44
-
-
Save MaximeHeckel/29caa43e959cea800db24920bf52705e to your computer and use it in GitHub Desktop.
Medium - React "sub-components" - Article sub-components full
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
import React, { Component } from 'react'; | |
import type { Node } from 'react'; | |
import findByType from './findByType'; | |
import css from './styles.css'; | |
const Title = () => null; | |
const Subtitle = () => null; | |
const Metadata = () => null; | |
const Content = () => null; | |
const Comments = () => null; | |
type Props = { | |
children?: Node, | |
className?: string, | |
}; | |
class Article extends Component<Props> { | |
static Title: Function; | |
static Subtitle: Function; | |
static Metadata: Function; | |
static Content: Function; | |
static Comments: Function; | |
renderTitle() { | |
const { children } = this.props; | |
const title = findByType(children, Title); | |
if (!title) { | |
return null; | |
} | |
return <div className={css.title}>{title.props.children}</div>; | |
} | |
renderSubtitle() { | |
const { children } = this.props; | |
const subtitle = findByType(children, Subtitle); | |
if (!subtitle) { | |
return null; | |
} | |
return ( | |
<div className={css.subtitle}> | |
<div className={css.subtitleBox}>{subtitle}</div> | |
</div> | |
); | |
} | |
renderMetadata() { | |
const { children } = this.props; | |
const metadata = findByType(children, Metadata); | |
if (!metadata) { | |
return null; | |
} | |
return ( | |
<ul className={css.articlemetadata}> | |
{metadata.props.children.map(child => { | |
return <li className={css.item}>{child}</li>; | |
})} | |
</ul> | |
); | |
} | |
renderContentAndComment() { | |
const { children } = this.props; | |
const content = findByType(children, Content); | |
const comments = findByType(children, Comment); | |
if (!content) { | |
return null; | |
} | |
return ( | |
<div className={css.contentArticle}> | |
<div className={css.contentTextStyle}>{content.props.children}</div> | |
<span className={css.inlineComments}> | |
{comments && comments.props.children} | |
</span> | |
</div> | |
); | |
} | |
render() { | |
const { children, className, ...rest } = this.props; | |
return ( | |
<div className={css.mainContainer}> | |
<div className={css.wrapper}> | |
<div className={css.titleContainer}> | |
{this.renderTitle()} | |
{this.renderSubtitle()} | |
</div> | |
{this.renderMetadata()} | |
{this.renderContentAndComment()} | |
</div> | |
</div> | |
); | |
} | |
} | |
Article.Title = Title; | |
Article.Subtitle = Subtitle; | |
Article.Metadata = Metadata; | |
Article.Content = Content; | |
Article.Comments = Comments; | |
export default Article; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment