2018-09-24 15:36:35 +00:00
|
|
|
/** @format */
|
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { Component } from '@wordpress/element';
|
|
|
|
import marked from 'marked';
|
|
|
|
import { Parser } from 'html-to-react';
|
|
|
|
|
|
|
|
const htmlToReactParser = new Parser();
|
|
|
|
|
|
|
|
class Docs extends Component {
|
|
|
|
state = {
|
|
|
|
readme: null,
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.getReadme();
|
|
|
|
}
|
|
|
|
|
|
|
|
getReadme() {
|
2019-01-04 03:04:54 +00:00
|
|
|
const { filePath, docPath } = this.props;
|
|
|
|
const readme = require( `../../docs/components/${ docPath }/${ filePath }.md` );
|
2018-09-24 15:36:35 +00:00
|
|
|
if ( ! readme ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const html = marked( readme );
|
|
|
|
this.setState( {
|
|
|
|
readme: htmlToReactParser.parse( html ),
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { readme } = this.state;
|
|
|
|
if ( ! readme ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return <div className="woocommerce-devdocs__docs">{ readme }</div>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-01-04 03:04:54 +00:00
|
|
|
Docs.defaultProps = {
|
|
|
|
docPath: 'packages',
|
|
|
|
};
|
|
|
|
|
2018-09-24 15:36:35 +00:00
|
|
|
export default Docs;
|