Convert ResultList and Accordion to es modules (firefox-devtools#2477)

Author: irfanhudda

src/components/Editor/SearchBar.js

@@ -27,7 +27,7 @@ const { scrollList } = require("../../utils/result-list");
 const classnames = require("classnames");
 const debounce = require("lodash/debounce");
 const SearchInput = createFactory(require("../shared/SearchInput"));
-const ResultList = createFactory(require("../shared/ResultList"));
+const ResultList = createFactory(require("../shared/ResultList").default);
 const ImPropTypes = require("react-immutable-proptypes");
 
 import type { FormattedSymbolDeclaration } from "../../utils/parser/utils";

src/components/SecondaryPanes/index.js

@@ -29,7 +29,7 @@ const Scopes = isEnabled("chromeScopes")
 
 const Frames = createFactory(require("./Frames").default);
 const EventListeners = createFactory(require("./EventListeners").default);
-const Accordion = createFactory(require("../shared/Accordion"));
+const Accordion = createFactory(require("../shared/Accordion").default);
 const CommandBar = createFactory(require("./CommandBar").default);
 
 import "./SecondaryPanes.css";

src/components/shared/Accordion.js

@@ -1,11 +1,8 @@
 // @flow
-const React = require("react");
-const { DOM: dom, PropTypes } = React;
+import { DOM as dom, PropTypes, createClass, createElement } from "react";
+import Svg from "./Svg";
 
-const { div } = dom;
-const Svg = require("./Svg");
-
-require("./Accordion.css");
+import "./Accordion.css";
 
 type AccordionItem = {
   buttons?: Array<Object>,
@@ -18,7 +15,7 @@ type AccordionItem = {
 
 type Props = { items: Array<Object> };
 
-const Accordion = React.createClass({
+const Accordion = createClass({
   propTypes: { items: PropTypes.array.isRequired },
   displayName: "Accordion",
   getInitialState() {
@@ -57,9 +54,9 @@ const Accordion = React.createClass({
       .toLowerCase()
       .replace(/\s/g, "-")}-pane`;
 
-    return div(
+    return dom.div(
       { className: containerClassName, key: i },
-      div(
+      dom.div(
         { className: "_header", onClick: () => this.handleHeaderClick(i) },
         Svg("arrow", { className: opened[i] ? "expanded" : "" }),
         item.header,
@@ -68,22 +65,22 @@ const Accordion = React.createClass({
           : null
       ),
       created[i] || opened[i]
-        ? div(
+        ? dom.div(
             {
               className: "_content",
               style: { display: opened[i] ? "block" : "none" },
             },
-            React.createElement(item.component, item.componentProps || {})
+            createElement(item.component, item.componentProps || {})
           )
         : null
     );
   },
   render() {
-    return div(
+    return dom.div(
       { className: "accordion" },
       this.props.items.map(this.renderContainer)
     );
   },
 });
 
-module.exports = Accordion;
+export default Accordion;

src/components/shared/Autocomplete.js

@@ -7,7 +7,7 @@ const classnames = require("classnames");
 const { scrollList } = require("../../utils/result-list");
 const Svg = require("./Svg");
 const SearchInput = createFactory(require("./SearchInput"));
-const ResultList = createFactory(require("./ResultList"));
+const ResultList = createFactory(require("./ResultList").default);
 
 require("./Autocomplete.css");
 

src/components/shared/ResultList.js

@@ -1,9 +1,8 @@
 // @flow
-const React = require("react");
-const { DOM: dom, PropTypes } = React;
-const classnames = require("classnames");
+import { DOM as dom, PropTypes, createClass } from "react";
+import classnames from "classnames";
 
-require("./ResultList.css");
+import "./ResultList.css";
 
 type ResultListItem = {
   id: string,
@@ -12,7 +11,7 @@ type ResultListItem = {
   value: string,
 };
 
-const ResultList = React.createClass({
+const ResultList = createClass({
   propTypes: {
     items: PropTypes.array.isRequired,
     selected: PropTypes.number.isRequired,
@@ -56,4 +55,4 @@ const ResultList = React.createClass({
   },
 });
 
-module.exports = ResultList;
+export default ResultList;