KeyframesGraph.js (1561B)
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 14 const KeyframeMarkerList = createFactory( 15 require("resource://devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js") 16 ); 17 const KeyframesGraphPath = createFactory( 18 require("resource://devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraphPath.js") 19 ); 20 21 class KeyframesGraph extends PureComponent { 22 static get propTypes() { 23 return { 24 getComputedStyle: PropTypes.func.isRequired, 25 keyframes: PropTypes.array.isRequired, 26 name: PropTypes.string.isRequired, 27 simulateAnimation: PropTypes.func.isRequired, 28 type: PropTypes.string.isRequired, 29 }; 30 } 31 32 render() { 33 const { getComputedStyle, keyframes, name, simulateAnimation, type } = 34 this.props; 35 36 return dom.div( 37 { 38 className: `keyframes-graph ${name}`, 39 }, 40 KeyframesGraphPath({ 41 getComputedStyle, 42 keyframes, 43 name, 44 simulateAnimation, 45 type, 46 }), 47 KeyframeMarkerList({ keyframes }) 48 ); 49 } 50 } 51 52 module.exports = KeyframesGraph;