AnimationDetailContainer.js (2871B)
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 connect, 9 } = require("resource://devtools/client/shared/vendor/react-redux.js"); 10 const { 11 createFactory, 12 PureComponent, 13 } = require("resource://devtools/client/shared/vendor/react.mjs"); 14 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); 15 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs"); 16 17 const AnimationDetailHeader = createFactory( 18 require("resource://devtools/client/inspector/animation/components/AnimationDetailHeader.js") 19 ); 20 const AnimatedPropertyListContainer = createFactory( 21 require("resource://devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js") 22 ); 23 24 class AnimationDetailContainer extends PureComponent { 25 static get propTypes() { 26 return { 27 addAnimationsCurrentTimeListener: PropTypes.func.isRequired, 28 animation: PropTypes.object.isRequired, 29 emitEventForTest: PropTypes.func.isRequired, 30 getAnimatedPropertyMap: PropTypes.func.isRequired, 31 getAnimationsCurrentTime: PropTypes.func.isRequired, 32 getComputedStyle: PropTypes.func.isRequired, 33 removeAnimationsCurrentTimeListener: PropTypes.func.isRequired, 34 setDetailVisibility: PropTypes.func.isRequired, 35 simulateAnimation: PropTypes.func.isRequired, 36 simulateAnimationForKeyframesProgressBar: PropTypes.func.isRequired, 37 timeScale: PropTypes.object.isRequired, 38 }; 39 } 40 41 render() { 42 const { 43 addAnimationsCurrentTimeListener, 44 animation, 45 emitEventForTest, 46 getAnimatedPropertyMap, 47 getAnimationsCurrentTime, 48 getComputedStyle, 49 removeAnimationsCurrentTimeListener, 50 setDetailVisibility, 51 simulateAnimation, 52 simulateAnimationForKeyframesProgressBar, 53 timeScale, 54 } = this.props; 55 56 return dom.div( 57 { 58 className: "animation-detail-container", 59 }, 60 animation 61 ? AnimationDetailHeader({ 62 animation, 63 setDetailVisibility, 64 }) 65 : null, 66 animation 67 ? AnimatedPropertyListContainer({ 68 addAnimationsCurrentTimeListener, 69 animation, 70 emitEventForTest, 71 getAnimatedPropertyMap, 72 getAnimationsCurrentTime, 73 getComputedStyle, 74 removeAnimationsCurrentTimeListener, 75 simulateAnimation, 76 simulateAnimationForKeyframesProgressBar, 77 timeScale, 78 }) 79 : null 80 ); 81 } 82 } 83 84 const mapStateToProps = state => { 85 return { 86 animation: state.animations.selectedAnimation, 87 }; 88 }; 89 90 module.exports = connect(mapStateToProps)(AnimationDetailContainer);