TickLines.js (1022B)
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 PureComponent, 9 } = require("resource://devtools/client/shared/vendor/react.mjs"); 10 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 12 13 /** 14 * This component is intended to show the tick line as the background. 15 */ 16 class TickLines extends PureComponent { 17 static get propTypes() { 18 return { 19 ticks: PropTypes.array.isRequired, 20 }; 21 } 22 23 render() { 24 const { ticks } = this.props; 25 26 return dom.div( 27 { 28 className: "tick-lines", 29 }, 30 ticks.map(tick => 31 dom.div({ 32 className: "tick-line", 33 style: { marginInlineStart: `${tick.position}%` }, 34 }) 35 ) 36 ); 37 } 38 } 39 40 module.exports = TickLines;