Change component function binding to class properties

firefox-devtools · Oct 5, 2017 · 323ce96 · 323ce96
1 parent 9bc5f56
commit 323ce96
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 111 deletions.
diff --git a/src/components/Editor/CallSite.js b/src/components/Editor/CallSite.js
@@ -25,25 +25,22 @@ export default class CallSite extends Component {
     super();
 
     this.marker = undefined;
-    const self: any = this;
-    self.addCallSite = this.addCallSite.bind(this);
-    self.clearCallSite = this.clearCallSite.bind(this);
   }
 
-  addCallSite(nextProps: props) {
+  addCallSite = (nextProps: ?props) => {
     const { editor, callSite, breakpoint, source } = nextProps || this.props;
     const className = !breakpoint ? "call-site" : "call-site-bp";
     const sourceId = source.get("id");
     const editorRange = toEditorRange(sourceId, callSite.location);
     this.marker = markText(editor, className, editorRange);
-  }
+  };
 
-  clearCallSite() {
+  clearCallSite = () => {
     if (this.marker) {
       this.marker.clear();
       this.marker = null;
     }
-  }
+  };
 
   shouldComponentUpdate(nextProps: any) {
     return this.props.editor !== nextProps.editor;

diff --git a/src/components/Editor/SearchBar.js b/src/components/Editor/SearchBar.js
@@ -79,22 +79,6 @@ class SearchBar extends Component {
       count: 0,
       index: -1
     };
-
-    const self: any = this;
-    self.onEscape = this.onEscape.bind(this);
-    self.clearSearch = this.clearSearch.bind(this);
-    self.closeSearch = this.closeSearch.bind(this);
-    self.toggleSearch = this.toggleSearch.bind(this);
-    self.setSearchValue = this.setSearchValue.bind(this);
-    self.selectSearchInput = this.selectSearchInput.bind(this);
-    self.searchInput = this.searchInput.bind(this);
-    self.doSearch = this.doSearch.bind(this);
-    self.searchContents = this.searchContents.bind(this);
-    self.traverseResults = this.traverseResults.bind(this);
-    self.onChange = this.onChange.bind(this);
-    self.onKeyUp = this.onKeyUp.bind(this);
-    self.buildSummaryMsg = this.buildSummaryMsg.bind(this);
-    self.renderSearchModifiers = this.renderSearchModifiers.bind(this);
   }
 
   componentWillUnmount() {
@@ -114,7 +98,6 @@ class SearchBar extends Component {
   componentDidMount() {
     // overwrite searchContents with a debounced version to reduce the
     // frequency of queries which improves perf on large files
-    // $FlowIgnore
     this.searchContents = debounce(this.searchContents, 100);
 
     const shortcuts = this.context.shortcuts;
@@ -146,19 +129,19 @@ class SearchBar extends Component {
     }
   }
 
-  onEscape(e: SyntheticKeyboardEvent) {
+  onEscape = (e: SyntheticKeyboardEvent) => {
     this.closeSearch(e);
-  }
+  };
 
-  clearSearch() {
+  clearSearch = () => {
     const { editor: ed, query, modifiers } = this.props;
     if (ed && modifiers) {
       const ctx = { ed, cm: ed.codeMirror };
       removeOverlay(ctx, query, modifiers.toJS());
     }
-  }
+  };
 
-  closeSearch(e: SyntheticEvent) {
+  closeSearch = (e: SyntheticEvent) => {
     const { editor, setFileSearchQuery, searchOn } = this.props;
 
     if (editor && searchOn) {
@@ -169,9 +152,9 @@ class SearchBar extends Component {
       e.stopPropagation();
       e.preventDefault();
     }
-  }
+  };
 
-  toggleSearch(e: SyntheticKeyboardEvent) {
+  toggleSearch = (e: SyntheticKeyboardEvent) => {
     e.stopPropagation();
     e.preventDefault();
     const { editor } = this.props;
@@ -188,26 +171,26 @@ class SearchBar extends Component {
       }
       this.selectSearchInput();
     }
-  }
+  };
 
-  setSearchValue(value: string) {
+  setSearchValue = (value: string) => {
     const searchInput = this.searchInput();
     if (value == "" || !searchInput) {
       return;
     }
 
     searchInput.value = value;
-  }
+  };
 
-  selectSearchInput() {
+  selectSearchInput = () => {
     const searchInput = this.searchInput();
     if (searchInput) {
       searchInput.setSelectionRange(0, searchInput.value.length);
       searchInput.focus();
     }
-  }
+  };
 
-  searchInput(): ?HTMLInputElement {
+  searchInput = (): ?HTMLInputElement => {
     const node = findDOMNode(this);
     if (node instanceof HTMLElement) {
       const input = node.querySelector("input");
@@ -216,9 +199,9 @@ class SearchBar extends Component {
       }
     }
     return null;
-  }
+  };
 
-  doSearch(query: string) {
+  doSearch = (query: string) => {
     const { selectedSource, setFileSearchQuery } = this.props;
     if (!selectedSource || !selectedSource.get("text")) {
       return;
@@ -227,9 +210,9 @@ class SearchBar extends Component {
     setFileSearchQuery(query);
 
     this.searchContents(query);
-  }
+  };
 
-  updateSearchResults(characterIndex, line, matches) {
+  updateSearchResults = (characterIndex, line, matches) => {
     const matchIndex = matches.findIndex(
       elm => elm.line === line && elm.ch === characterIndex
     );
@@ -239,9 +222,9 @@ class SearchBar extends Component {
       count: matches.length,
       index: characterIndex
     });
-  }
+  };
 
-  async searchContents(query: string) {
+  searchContents = async (query: string) => {
     const { selectedSource, modifiers, editor: ed } = this.props;
 
     if (
@@ -264,9 +247,9 @@ class SearchBar extends Component {
     );
     const { ch, line } = find(ctx, query, true, _modifiers);
     this.updateSearchResults(ch, line, matches);
-  }
+  };
 
-  traverseResults(e: SyntheticEvent, rev: boolean) {
+  traverseResults = (e: SyntheticEvent, rev: boolean) => {
     e.stopPropagation();
     e.preventDefault();
     const ed = this.props.editor;
@@ -290,22 +273,22 @@ class SearchBar extends Component {
         : findNext(ctx, query, true, modifiers.toJS());
       this.updateSearchResults(ch, line, matchedLocations);
     }
-  }
+  };
 
   // Handlers
 
-  onChange(e: any) {
+  onChange = (e: any) => {
     return this.doSearch(e.target.value);
-  }
+  };
 
-  onKeyUp(e: SyntheticKeyboardEvent) {
+  onKeyUp = (e: SyntheticKeyboardEvent) => {
     if (e.key !== "Enter" && e.key !== "F3") {
       return;
     }
 
     this.traverseResults(e, e.shiftKey);
     e.preventDefault();
-  }
+  };
   // Renderers
   buildSummaryMsg() {
     const { searchResults: { matchIndex, count, index }, query } = this.props;
@@ -325,7 +308,7 @@ class SearchBar extends Component {
     return L10N.getFormatStr("editor.searchResults", matchIndex + 1, count);
   }
 
-  renderSearchModifiers() {
+  renderSearchModifiers = () => {
     const { modifiers, toggleFileSearchModifier } = this.props;
 
     function SearchModBtn({ modVal, className, svgName, tooltip }) {
@@ -368,7 +351,7 @@ class SearchBar extends Component {
         />
       </div>
     );
-  }
+  };
 
   renderSearchType() {
     return (

diff --git a/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap b/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap
@@ -160,7 +160,6 @@ ShallowWrapper {
       "_hostParent": null,
       "_instance": SearchBar {
         "_reactInternalInstance": [Circular],
-        "buildSummaryMsg": [Function],
         "clearSearch": [Function],
         "closeSearch": [Function],
         "context": Object {
@@ -202,6 +201,7 @@ ShallowWrapper {
         },
         "toggleSearch": [Function],
         "traverseResults": [Function],
+        "updateSearchResults": [Function],
         "updater": Object {
           "enqueueCallback": [Function],
           "enqueueCallbackInternal": [Function],

diff --git a/src/components/SecondaryPanes/Frames/Group.js b/src/components/SecondaryPanes/Frames/Group.js
@@ -49,9 +49,6 @@ export default class Group extends Component {
   constructor(...args: any[]) {
     super(...args);
     this.state = { expanded: false };
-    const self: any = this;
-
-    self.toggleFrames = this.toggleFrames.bind(this);
   }
 
   onContextMenu(event: SyntheticKeyboardEvent) {
@@ -71,9 +68,9 @@ export default class Group extends Component {
     );
   }
 
-  toggleFrames() {
+  toggleFrames = () => {
     this.setState({ expanded: !this.state.expanded });
-  }
+  };
 
   renderFrames() {
     const {