tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

AnimationItem.js (3051B)

      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  Component,
     12  createFactory,
     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 AnimationTarget = createFactory(
     18  require("resource://devtools/client/inspector/animation/components/AnimationTarget.js")
     19 );
     20 const SummaryGraph = createFactory(
     21  require("resource://devtools/client/inspector/animation/components/graph/SummaryGraph.js")
     22 );
     23 
     24 class AnimationItem extends Component {
     25  static get propTypes() {
     26    return {
     27      animation: PropTypes.object.isRequired,
     28      dispatch: PropTypes.func.isRequired,
     29      getAnimatedPropertyMap: PropTypes.func.isRequired,
     30      getNodeFromActor: PropTypes.func.isRequired,
     31      isDisplayable: PropTypes.bool.isRequired,
     32      selectAnimation: PropTypes.func.isRequired,
     33      selectedAnimation: PropTypes.object.isRequired,
     34      setHighlightedNode: PropTypes.func.isRequired,
     35      setSelectedNode: PropTypes.func.isRequired,
     36      simulateAnimation: PropTypes.func.isRequired,
     37      timeScale: PropTypes.object.isRequired,
     38    };
     39  }
     40 
     41  shouldComponentUpdate(nextProps) {
     42    return (
     43      this.props.isDisplayable !== nextProps.isDisplayable ||
     44      this.props.animation !== nextProps.animation ||
     45      this.props.timeScale !== nextProps.timeScale ||
     46      this.isSelected(this.props) !== this.isSelected(nextProps)
     47    );
     48  }
     49 
     50  isSelected(props) {
     51    return (
     52      props.selectedAnimation &&
     53      props.animation.actorID === props.selectedAnimation.actorID
     54    );
     55  }
     56 
     57  render() {
     58    const {
     59      animation,
     60      dispatch,
     61      getAnimatedPropertyMap,
     62      getNodeFromActor,
     63      isDisplayable,
     64      selectAnimation,
     65      setHighlightedNode,
     66      setSelectedNode,
     67      simulateAnimation,
     68      timeScale,
     69    } = this.props;
     70    const isSelected = this.isSelected(this.props);
     71 
     72    return dom.li(
     73      {
     74        className:
     75          `animation-item ${animation.state.type} ` +
     76          (isSelected ? "selected" : ""),
     77      },
     78      isDisplayable
     79        ? [
     80            AnimationTarget({
     81              animation,
     82              dispatch,
     83              getNodeFromActor,
     84              setHighlightedNode,
     85              setSelectedNode,
     86            }),
     87            SummaryGraph({
     88              animation,
     89              getAnimatedPropertyMap,
     90              selectAnimation,
     91              simulateAnimation,
     92              timeScale,
     93            }),
     94          ]
     95        : null
     96    );
     97  }
     98 }
     99 
    100 const mapStateToProps = state => {
    101  return {
    102    selectedAnimation: state.animations.selectedAnimation,
    103  };
    104 };
    105 
    106 module.exports = connect(mapStateToProps)(AnimationItem);