From 323ce96b9c6492d6cc0fd0ce7a5fb10f58e64dfe Mon Sep 17 00:00:00 2001 From: Tomer Ohana Date: Thu, 5 Oct 2017 22:03:53 +0300 Subject: [PATCH] Change component function binding to class properties --- src/components/Editor/CallSite.js | 11 +-- src/components/Editor/SearchBar.js | 73 +++++++------------ .../__snapshots__/SearchBar.spec.js.snap | 2 +- src/components/SecondaryPanes/Frames/Group.js | 7 +- src/components/SymbolModal.js | 52 +++++-------- src/components/shared/Accordion.js | 7 +- src/components/shared/ManagedTree.js | 12 +-- src/components/shared/Modal.js | 10 +-- 8 files changed, 63 insertions(+), 111 deletions(-) diff --git a/src/components/Editor/CallSite.js b/src/components/Editor/CallSite.js index d19a1e11e2..cc94e6dc12 100644 --- 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 index 321da65371..5bf32e51d7 100644 --- 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 { /> ); - } + }; renderSearchType() { return ( diff --git a/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap b/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap index 1a6669c5f7..e1dc76326f 100644 --- 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 index 930f2bc974..9355f8d8b9 100644 --- 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 { diff --git a/src/components/SymbolModal.js b/src/components/SymbolModal.js index e515a1bfa9..8b1cc2cb9b 100644 --- a/src/components/SymbolModal.js +++ b/src/components/SymbolModal.js @@ -79,18 +79,6 @@ class SymbolModal extends Component { constructor(props) { super(props); this.state = { results: null, query: "", resultsIndex: 0 }; - - const self: any = this; - self.onClick = this.onClick.bind(this); - self.closeModal = this.closeModal.bind(this); - self.onChange = this.onChange.bind(this); - self.onKeyUp = this.onKeyUp.bind(this); - self.updateResults = this.updateResults.bind(this); - self.traverseResults = this.traverseResults.bind(this); - self.renderResults = this.renderResults.bind(this); - self.buildSummaryMsg = this.buildSummaryMsg.bind(this); - self.buildPlaceHolder = this.buildPlaceHolder.bind(this); - self.selectResultItem = this.selectResultItem.bind(this); } componentDidMount() { @@ -107,11 +95,11 @@ class SymbolModal extends Component { } } - onClick(e: SyntheticEvent) { + onClick = (e: SyntheticEvent) => { e.stopPropagation(); - } + }; - onChange(e: SyntheticInputEvent) { + onChange = (e: SyntheticInputEvent) => { const { selectedSource } = this.props; if (!selectedSource || !selectedSource.get("text")) { return; @@ -119,14 +107,14 @@ class SymbolModal extends Component { this.setState({ query: e.target.value }); return this.updateResults(e.target.value); - } + }; - closeModal() { + closeModal = () => { this.props.closeActiveSearch(); this.props.clearHighlightLineRange(); - } + }; - selectResultItem(e: SyntheticEvent, item: ?FormattedSymbolDeclaration) { + selectResultItem = (e: SyntheticEvent, item: ?FormattedSymbolDeclaration) => { const { selectSource, selectedSource } = this.props; if (!selectedSource || !item) { @@ -138,9 +126,9 @@ class SymbolModal extends Component { }); this.closeModal(); - } + }; - updateResults(query) { + updateResults = query => { const { symbolType, symbols } = this.props; let symbolSearchResults = symbols[symbolType]; @@ -154,9 +142,9 @@ class SymbolModal extends Component { }); this.setState({ results: symbolSearchResults }); - } + }; - traverseResults(direction: number) { + traverseResults = (direction: number) => { const { resultsIndex, results } = this.state; const resultCount = this.resultsCount(); const index = resultsIndex + direction; @@ -167,7 +155,7 @@ class SymbolModal extends Component { if (results) { this.onSelectResultItem(results[nextIndex]); } - } + }; onSelectResultItem(item: FormattedSymbolDeclaration) { const { @@ -192,7 +180,7 @@ class SymbolModal extends Component { } } - onKeyUp(e: SyntheticKeyboardEvent) { + onKeyUp = (e: SyntheticKeyboardEvent) => { e.preventDefault(); const { enabled } = this.props; const { results, resultsIndex } = this.state; @@ -211,9 +199,9 @@ class SymbolModal extends Component { } else if (e.key === "Tab") { this.closeModal(); } - } + }; - renderResults() { + renderResults = () => { const { resultsIndex, results } = this.state; const { enabled } = this.props; @@ -230,7 +218,7 @@ class SymbolModal extends Component { ref="resultList" /> ); - } + }; renderInput() { const { query } = this.state; @@ -252,7 +240,7 @@ class SymbolModal extends Component { ); } - buildSummaryMsg() { + buildSummaryMsg = () => { const { resultsIndex } = this.state; const count = this.resultsCount(); @@ -261,16 +249,16 @@ class SymbolModal extends Component { } else if (count === 1) { return L10N.getFormatStr("editor.singleResult"); } - } + }; resultsCount() { return this.state.results ? this.state.results.length : 0; } - buildPlaceHolder() { + buildPlaceHolder = () => { const { symbolType } = this.props; return L10N.getFormatStr(`symbolSearch.search.${symbolType}Placeholder`); - } + }; render() { const { enabled } = this.props; diff --git a/src/components/shared/Accordion.js b/src/components/shared/Accordion.js index 9fc92c38a1..243f010fa0 100644 --- a/src/components/shared/Accordion.js +++ b/src/components/shared/Accordion.js @@ -32,9 +32,6 @@ class Accordion extends Component { opened: props.items.map(item => item.opened), created: [] }; - - const self: any = this; - self.renderContainer = this.renderContainer.bind(this); } componentWillReceiveProps(nextProps: Props) { @@ -66,7 +63,7 @@ class Accordion extends Component { this.setState({ opened, created }); } - renderContainer(item: AccordionItem, i: number) { + renderContainer = (item: AccordionItem, i: number) => { const { opened, created } = this.state; const containerClassName = `${item.header .toLowerCase() @@ -91,7 +88,7 @@ class Accordion extends Component { ) : null} ); - } + }; render() { return ( diff --git a/src/components/shared/ManagedTree.js b/src/components/shared/ManagedTree.js index c8a2d5bc80..636c6f4621 100644 --- a/src/components/shared/ManagedTree.js +++ b/src/components/shared/ManagedTree.js @@ -46,10 +46,6 @@ class ManagedTree extends Component { expanded: props.expanded || new Set(), focusedItem: null }; - - const self: any = this; - self.setExpanded = this.setExpanded.bind(this); - self.focusItem = this.focusItem.bind(this); } componentWillReceiveProps(nextProps: Props) { @@ -72,7 +68,7 @@ class ManagedTree extends Component { } } - setExpanded(item: Item, isExpanded: boolean) { + setExpanded = (item: Item, isExpanded: boolean) => { const expanded = this.state.expanded; const itemPath = this.props.getPath(item); if (isExpanded) { @@ -87,7 +83,7 @@ class ManagedTree extends Component { } else if (!isExpanded && this.props.onCollapse) { this.props.onCollapse(item, expanded); } - } + }; expandListItems(listItems: Array) { const expanded = this.state.expanded; @@ -112,7 +108,7 @@ class ManagedTree extends Component { } } - focusItem(item: Item) { + focusItem = (item: Item) => { if (!this.props.disabledFocus && this.state.focusedItem !== item) { this.setState({ focusedItem: item }); @@ -120,7 +116,7 @@ class ManagedTree extends Component { this.props.onFocus(item); } } - } + }; render() { const { expanded, focusedItem } = this.state; diff --git a/src/components/shared/Modal.js b/src/components/shared/Modal.js index 086564d94f..3a8f567bf7 100644 --- a/src/components/shared/Modal.js +++ b/src/components/shared/Modal.js @@ -17,15 +17,9 @@ type ModalProps = { export class Modal extends Component { props: ModalProps; - constructor(props: ModalProps) { - super(props); - const self: any = this; - self.onClick = this.onClick.bind(this); - } - - onClick(e: SyntheticEvent) { + onClick = (e: SyntheticEvent) => { e.stopPropagation(); - } + }; render() { const { status } = this.props;