2018-09-24 15:36:35 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { Component } from '@wordpress/element';
|
2019-08-28 22:24:43 +00:00
|
|
|
import React from 'react';
|
2018-09-24 15:36:35 +00:00
|
|
|
|
|
|
|
class Example extends Component {
|
|
|
|
state = {
|
2019-08-28 22:24:43 +00:00
|
|
|
example: null,
|
2018-09-24 15:36:35 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount() {
|
2019-08-28 22:24:43 +00:00
|
|
|
this.getExample();
|
2018-09-24 15:36:35 +00:00
|
|
|
}
|
|
|
|
|
2019-08-28 22:24:43 +00:00
|
|
|
async getExample() {
|
|
|
|
let exampleComponent;
|
|
|
|
|
2018-11-15 18:16:23 +00:00
|
|
|
try {
|
2020-02-14 02:23:21 +00:00
|
|
|
exampleComponent = require( `../../packages/components/src/${ this.props.filePath }/docs/example` );
|
2018-11-15 18:16:23 +00:00
|
|
|
} catch ( e ) {
|
2019-09-23 21:47:08 +00:00
|
|
|
// eslint-disable-next-line no-console
|
2019-08-28 22:24:43 +00:00
|
|
|
console.error( e );
|
2018-11-15 18:16:23 +00:00
|
|
|
}
|
2019-08-28 22:24:43 +00:00
|
|
|
|
|
|
|
if ( ! exampleComponent ) {
|
2018-11-15 18:16:23 +00:00
|
|
|
return;
|
|
|
|
}
|
2018-09-24 15:36:35 +00:00
|
|
|
|
2019-08-28 22:24:43 +00:00
|
|
|
this.setState( {
|
2020-02-14 02:23:21 +00:00
|
|
|
example: React.createElement(
|
|
|
|
exampleComponent.default || exampleComponent
|
|
|
|
),
|
2019-08-28 22:24:43 +00:00
|
|
|
} );
|
2018-09-24 15:36:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2019-08-28 22:24:43 +00:00
|
|
|
const { example } = this.state;
|
2018-09-24 15:36:35 +00:00
|
|
|
|
2019-08-28 22:24:43 +00:00
|
|
|
return <div className="woocommerce-devdocs__example">{ example }</div>;
|
2018-09-24 15:36:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Example;
|