-
{jumper}
{doc.api && (
- API )}
import React from 'react';
import { Helmet } from 'react-helmet-async';
import { FormattedMessage, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { Row, Col, Affix, Tooltip } from 'antd';
import { getChildren } from 'jsonml.js/lib/utils';
import { CodeFilled, CodeOutlined, BugFilled, BugOutlined } from '@ant-design/icons';
import Demo from './Demo';
import EditButton from './EditButton';
import { ping, getMetaDescription } from '../utils';
const ComponentInMarkdown = React.memo(({ content, utils }) =>
utils.toReactComponent(['section', { className: 'markdown' }].concat(getChildren(content))),
);
class ComponentDoc extends React.Component {
state = {
expandAll: false,
visibleAll: process.env.NODE_ENV !== 'production',
showRiddleButton: false,
};
componentDidMount() {
const { demos = {}, location = {} } = this.props;
if (location.hash) {
const demoKey = location.hash.split('-demo-')[1];
const demoData = demos[demoKey];
if (demoData && demoData.meta && demoData.meta.debug) {
this.setState({ visibleAll: true });
}
}
this.pingTimer = ping(status => {
if (status !== 'timeout' && status !== 'error') {
this.setState({
showRiddleButton: true,
});
}
});
}
shouldComponentUpdate(nextProps, nextState) {
const { location, theme } = this.props;
const { location: nextLocation, theme: nextTheme } = nextProps;
const { expandAll, visibleAll, showRiddleButton } = this.state;
const {
expandAll: nextExpandAll,
visibleAll: nextVisibleAll,
showRiddleButton: nextShowRiddleButton,
} = nextState;
if (
nextLocation.pathname === location.pathname &&
expandAll === nextExpandAll &&
showRiddleButton === nextShowRiddleButton &&
theme === nextTheme &&
visibleAll === nextVisibleAll &&
showRiddleButton === nextShowRiddleButton
) {
return false;
}
return true;
}
componentWillUnmount() {
clearTimeout(this.pingTimer);
}
handleExpandToggle = () => {
const { expandAll } = this.state;
this.setState({
expandAll: !expandAll,
});
};
handleVisibleToggle = () => {
const { visibleAll } = this.state;
this.setState({
visibleAll: !visibleAll,
});
};
render() {
const {
doc,
location,
intl: { locale },
utils,
theme,
setIframeTheme,
demos,
} = this.props;
const { content, meta } = doc;
const demoValues = Object.keys(demos).map(key => demos[key]);
const { expandAll, visibleAll, showRiddleButton } = this.state;
const isSingleCol = meta.cols === 1;
const leftChildren = [];
const rightChildren = [];
let showedDemo = demoValues.some(demo => demo.meta.only)
? demoValues.filter(demo => demo.meta.only)
: demoValues.filter(demo => demo.preview);
if (!visibleAll) {
showedDemo = showedDemo.filter(item => !item.meta.debug);
}
showedDemo
.sort((a, b) => a.meta.order - b.meta.order)
.forEach((demoData, index) => {
const demoElem = (