woocommerce/plugins/woocommerce-admin/client/devdocs/index.js

98 lines
2.4 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import classnames from 'classnames';
import { Component } from '@wordpress/element';
import { find, get } from 'lodash';
/**
* Internal dependencies
*/
import ComponentExample from './example';
import ComponentDocs from './docs';
import { Card, Link } from '@woocommerce/components';
import { getAdminLink } from '@woocommerce/navigation';
import examples from './examples.json';
import './style.scss';
const camelCaseToSlug = name => {
return name.replace( /\.?([A-Z])/g, ( x, y ) => '-' + y.toLowerCase() ).replace( /^-/, '' );
};
const getExampleData = example => {
const componentName = get( example, 'component' );
const filePath = get( example, 'filePath', camelCaseToSlug( componentName ) );
const render = get( example, 'render', `My${ componentName }` );
return {
componentName,
filePath,
render,
};
};
export default class extends Component {
render() {
const { params: { component } } = this.props;
const className = classnames( 'woocommerce_devdocs', {
'is-single': component,
'is-list': ! component,
} );
let exampleList = examples;
if ( component ) {
const example = find( examples, ex => component === camelCaseToSlug( ex.component ) );
exampleList = [ example ];
}
return (
<div className={ className }>
{ exampleList.map( example => {
2019-01-04 03:04:54 +00:00
const { componentName, filePath, render, docPath } = getExampleData( example );
const cardClasses = classnames(
'woocommerce-devdocs__card',
`woocommerce-devdocs__card--${ filePath }`,
'woocommerce-analytics__card'
);
return (
<Card
key={ componentName }
className={ cardClasses }
title={
component ? (
componentName
) : (
<Link href={ getAdminLink( `?page=wc-admin&path=/devdocs/${ filePath }` ) }>
{ componentName }
</Link>
)
}
action={
component ? (
<Link href={ getAdminLink( '?page=wc-admin&path=/devdocs' ) }>Full list</Link>
) : null
}
>
<ComponentExample
asyncName={ componentName }
component={ componentName }
filePath={ filePath }
render={ render }
/>
{ component && (
2019-01-04 03:04:54 +00:00
<ComponentDocs
componentName={ componentName }
filePath={ filePath }
docPath={ docPath }
/>
) }
</Card>
);
} ) }
</div>
);
}
}