mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 03:11:49 +08:00
63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import Nav from '../Nav';
|
|
import NavDropdown from '../Nav/dropdown';
|
|
import Content from '../Content';
|
|
import './style.css';
|
|
|
|
class Container extends React.Component {
|
|
render() {
|
|
const { sections, selectedItem, selectedSectionId, selectedItemId } = this.props;
|
|
|
|
const gitHubRepoUrl = 'https://github.com/storybooks/storybook';
|
|
const docPath = `${selectedSectionId}/${selectedItemId}`;
|
|
const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/master/docs/pages/${docPath}/index.md`;
|
|
|
|
return (
|
|
<div id="docs-container" className="row">
|
|
<div className="nav col-sm-3 col-md-3 hidden-xs">
|
|
<Nav
|
|
sections={sections}
|
|
selectedSection={selectedItem.section}
|
|
selectedItem={selectedItem.id}
|
|
selectedSectionId={selectedSectionId}
|
|
selectedItemId={selectedItemId}
|
|
/>
|
|
</div>
|
|
<div className="content col-xs-12 col-sm-9 col-md-9 col-lg-9">
|
|
<div className="nav-dropdown">
|
|
<NavDropdown
|
|
sections={sections}
|
|
selectedSection={selectedItem.section}
|
|
selectedItem={selectedItem.id}
|
|
/>
|
|
</div>
|
|
|
|
<Content
|
|
title={selectedItem.title}
|
|
content={selectedItem.content}
|
|
editUrl={gitHubRepoDocUrl}
|
|
/>
|
|
|
|
<div className="nav-dropdown">
|
|
<NavDropdown
|
|
sections={sections}
|
|
selectedSection={selectedItem.section}
|
|
selectedItem={selectedItem.id}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Container.propTypes = {
|
|
sections: PropTypes.array,
|
|
selectedItem: PropTypes.object,
|
|
selectedSectionId: PropTypes.string,
|
|
selectedItemId: PropTypes.string,
|
|
};
|
|
|
|
export default Container;
|