Bug 1404801 - Part 2: Implement DOM for animation list. r?gl draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 17 Oct 2017 10:27:52 +0900
changeset 681132 b168397271f42516e84bb753f3a5b3b9c86a1943
parent 681131 749c17ecca5e273e7e478f3018cc669a85a62e8a
child 681133 51fd2d1367307b622ec01e8bccb7a9548541e57b
push id84768
push userbmo:dakatsuka@mozilla.com
push dateTue, 17 Oct 2017 01:35:07 +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,20 @@
+/* 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 { createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+
+module.exports = createClass({
+  displayName: "AnimationItem",
+
+  propTypes: {
+    animation: PropTypes.object.isRequired,
+  },
+
+  render() {
+    return dom.li({ className: "animation-item" });
+  }
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimationList.js
@@ -0,0 +1,27 @@
+/* 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 { createClass, createFactory, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+
+const AnimationItem = createFactory(require("./AnimationItem"));
+
+module.exports = createClass({
+  displayName: "AnimationList",
+
+  propTypes: {
+    animations: PropTypes.arrayOf(PropTypes.object).isRequired,
+  },
+
+  render() {
+    return dom.ul(
+      { className: "animation-list" },
+      this.props.animations.map(animation => AnimationItem({
+        animation
+      }))
+    );
+  }
+});
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -1,23 +1,34 @@
 /* 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 { createClass, DOM: dom, PropTypes } =
+const { createClass, createFactory, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
+const AnimationList = createFactory(require("./AnimationList"));
+
 const App = createClass({
   displayName: "AnimationInspector",
 
   propTypes: {
     animations: PropTypes.arrayOf(PropTypes.object).isRequired,
   },
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.animations.length !== 0 || nextProps.animations.length !== 0;
+  },
+
   render() {
-    return dom.div({ id: "animation-container" });
+    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'
 )