SidebarItem.js (2019B)
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 dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 13 const Link = createFactory( 14 require("resource://devtools/client/shared/vendor/react-router-dom.js").Link 15 ); 16 17 /** 18 * This component is used as a wrapper by items in the sidebar. 19 */ 20 class SidebarItem extends PureComponent { 21 static get propTypes() { 22 return { 23 children: PropTypes.node.isRequired, 24 className: PropTypes.string, 25 isSelected: PropTypes.bool.isRequired, 26 to: PropTypes.string, 27 }; 28 } 29 30 static get defaultProps() { 31 return { 32 isSelected: false, 33 }; 34 } 35 36 renderContent() { 37 const { children, to } = this.props; 38 39 if (to) { 40 const isExternalUrl = /^http/.test(to); 41 42 return isExternalUrl 43 ? dom.a( 44 { 45 className: "sidebar-item__link undecorated-link", 46 href: to, 47 target: "_blank", 48 }, 49 children 50 ) 51 : Link( 52 { 53 className: "sidebar-item__link qa-sidebar-link undecorated-link", 54 to, 55 }, 56 children 57 ); 58 } 59 60 return children; 61 } 62 63 render() { 64 const { className, isSelected, to } = this.props; 65 66 return dom.li( 67 { 68 className: 69 "sidebar-item qa-sidebar-item" + 70 (className ? ` ${className}` : "") + 71 (isSelected 72 ? " sidebar-item--selected qa-sidebar-item-selected" 73 : "") + 74 (to ? " sidebar-item--selectable" : ""), 75 }, 76 this.renderContent() 77 ); 78 } 79 } 80 81 module.exports = SidebarItem;