Sidebar.js (1699B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 const { 8 createFactory, 9 PureComponent, 10 } = require("resource://devtools/client/shared/vendor/react.mjs"); 11 const { 12 aside, 13 ul, 14 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 15 16 const { 17 connect, 18 } = require("resource://devtools/client/shared/vendor/react-redux.js"); 19 20 const SidebarItem = createFactory( 21 require("resource://devtools/client/application/src/components/routing/SidebarItem.js") 22 ); 23 24 const Types = require("resource://devtools/client/application/src/types/index.js"); 25 const { 26 PAGE_TYPES, 27 } = require("resource://devtools/client/application/src/constants.js"); 28 29 class Sidebar extends PureComponent { 30 static get propTypes() { 31 return { 32 // this prop is automatically injected via connect 33 selectedPage: Types.page.isRequired, 34 }; 35 } 36 37 render() { 38 const navItems = [PAGE_TYPES.SERVICE_WORKERS, PAGE_TYPES.MANIFEST]; 39 40 const isSelected = page => { 41 return page === this.props.selectedPage; 42 }; 43 44 return aside( 45 { 46 className: "sidebar js-sidebar", 47 }, 48 ul( 49 { 50 className: "sidebar__list", 51 }, 52 navItems.map(page => { 53 return SidebarItem({ 54 page, 55 key: `sidebar-item-${page}`, 56 isSelected: isSelected(page), 57 }); 58 }) 59 ) 60 ); 61 } 62 } 63 64 function mapStateToProps(state) { 65 return { 66 selectedPage: state.ui.selectedPage, 67 }; 68 } 69 70 module.exports = connect(mapStateToProps)(Sidebar);