Bug 1404801 - Part 2: Implement DOM for animation list. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 26 Oct 2017 16:55:27 +0900
changeset 688126 d0e460f14cae081458466becb14e38d9a7728bd3
parent 688125 623f9e2bd3164c9c6180563b8a2a3f8a894e5d53
child 688127 c53b1e78bd886f9e3f7e3d645928a3d42e6e948b
push id86669
push userhikezoe@mozilla.com
push dateSat, 28 Oct 2017 10:13:18 +0000
reviewersgl
bugs1404801
milestone58.0a1
Bug 1404801 - Part 2: Implement DOM for animation list. r=gl MozReview-Commit-ID: 8iYTuFlkcSr
devtools/client/inspector/animation/components/AnimationItem.js
devtools/client/inspector/animation/components/AnimationList.js
devtools/client/inspector/animation/components/App.js
devtools/client/inspector/animation/components/moz.build
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationItem.js
@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { DOM: dom, PropTypes, PureComponent } =
+  require("devtools/client/shared/vendor/react");
+
+class AnimationItem extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    return dom.li(
+      {
+        className: "animation-item"
+      }
+    );
+  }
+}
+
+module.exports = AnimationItem;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationList.js
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createFactory, DOM: dom, PropTypes, PureComponent } =
+  require("devtools/client/shared/vendor/react");
+
+const AnimationItem = createFactory(require("./AnimationItem"));
+
+class AnimationList extends PureComponent {
+  static get propTypes() {
+    return {
+      animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+    };
+  }
+
+  render() {
+    return dom.ul(
+      {
+        className: "animation-list"
+      },
+      this.props.animations.map(animation => AnimationItem({ animation }))
+    );
+  }
+}
+
+module.exports = AnimationList;
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -1,26 +1,40 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { DOM: dom, PropTypes, PureComponent } = require("devtools/client/shared/vendor/react");
+const { createFactory, DOM: dom, PropTypes, PureComponent } =
+  require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
+const AnimationList = createFactory(require("./AnimationList"));
+
 class App extends PureComponent {
   static get propTypes() {
     return {
       animations: PropTypes.arrayOf(PropTypes.object).isRequired,
     };
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.animations.length !== 0 || nextProps.animations.length !== 0;
+  }
+
   render() {
+    const { animations } = this.props;
+
     return dom.div(
       {
         id: "animation-container"
-      }
+      },
+      AnimationList(
+        {
+          animations
+        }
+      )
     );
   }
 }
 
 module.exports = connect(state => state)(App);
--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -1,7 +1,9 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'AnimationItem.js',
+    'AnimationList.js',
     'App.js'
 )