import React from 'react'; import PropTypes from 'prop-types'; import DocumentTitle from 'react-document-title'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Row, Col, Icon, Affix, Tooltip } from 'antd'; import { getChildren } from 'jsonml.js/lib/utils'; import Demo from './Demo'; import EditButton from './EditButton'; import { ping } from '../utils'; export default class ComponentDoc extends React.Component { static contextTypes = { intl: PropTypes.object, }; state = { expandAll: false, showRiddleButton: false, }; componentDidMount() { this.pingTimer = ping(status => { if (status !== 'timeout' && status !== 'error') { this.setState({ showRiddleButton: true, }); } }); } shouldComponentUpdate(nextProps, nextState) { const { location } = this.props; const { location: nextLocation } = nextProps; const { expandAll, showRiddleButton } = this.state; const { expandAll: nextExpandAll, showRiddleButton: nextShowRiddleButton } = nextState; if ( nextLocation.pathname === location.pathname && expandAll === nextExpandAll && showRiddleButton === nextShowRiddleButton ) { return false; } return true; } componentWillUnmount() { clearTimeout(this.pingTimer); } handleExpandToggle = () => { const { expandAll } = this.state; this.setState({ expandAll: !expandAll, }); }; render() { const { props } = this; const { doc, location } = props; const { content, meta } = doc; const { intl: { locale }, } = this.context; const demos = Object.keys(props.demos).map(key => props.demos[key]); const { expandAll, showRiddleButton } = this.state; const isSingleCol = meta.cols === 1; const leftChildren = []; const rightChildren = []; const showedDemo = demos.some(demo => demo.meta.only) ? demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview); showedDemo .sort((a, b) => a.meta.order - b.meta.order) .forEach((demoData, index) => { const demoElem = ( ); if (index % 2 === 0 || isSingleCol) { leftChildren.push(demoElem); } else { rightChildren.push(demoElem); } }); const expandTriggerClass = classNames({ 'code-box-expand-trigger': true, 'code-box-expand-trigger-active': expandAll, }); const jumper = showedDemo.map(demo => { const { title } = demo.meta; const localizeTitle = title[locale] || title; return (
  • {localizeTitle}
  • ); }); const { title, subtitle, filename } = meta; const articleClassName = classNames({ 'show-riddle-button': showRiddleButton, }); return (
      {jumper}

    {title[locale] || title} {!subtitle ? null : {subtitle}} } filename={filename} />

    {props.utils.toReactComponent( ['section', { className: 'markdown' }].concat(getChildren(content)), )}

    } >

    {leftChildren} {isSingleCol ? null : ( {rightChildren} )} {props.utils.toReactComponent( [ 'section', { className: 'markdown api-container', }, ].concat(getChildren(doc.api || ['placeholder'])), )}
    ); } }