Bind methods in the class body instead of ctor

Author: tiffon

src/components/SearchTracePage/SearchDropdownInput.js

@@ -37,7 +37,6 @@ export default class SearchDropdownInput extends Component {
     this.state = {
       currentItems: props.items.slice(0, props.maxResults),
     };
-    this.onSearch = this.onSearch.bind(this);
   }
   componentWillReceiveProps(nextProps) {
     if (this.props.items.map(i => i.text).join(',') !== nextProps.items.map(i => i.text).join(',')) {
@@ -46,12 +45,12 @@ export default class SearchDropdownInput extends Component {
       });
     }
   }
-  onSearch(_, searchText) {
+  onSearch = (_, searchText) => {
     const { items, maxResults } = this.props;
     const regexStr = regexpEscape(searchText);
     const regex = new RegExp(regexStr, 'i');
     return items.filter(v => regex.test(v.text)).slice(0, maxResults);
-  }
+  };
   render() {
     const { input: { value, onChange } } = this.props;
     const { currentItems } = this.state;

src/components/TracePage/ScrollManager.js

@@ -46,7 +46,7 @@ export type Accessors = {
 
 interface Scroller {
   scrollTo: number => void,
-  scrollBy: number => void,
+  scrollBy: (number, ?boolean) => void,
 }
 
 /**
@@ -100,12 +100,6 @@ export default class ScrollManager {
     this._trace = trace;
     this._scroller = scroller;
     this._accessors = undefined;
-
-    this.scrollToNextVisibleSpan = this.scrollToNextVisibleSpan.bind(this);
-    this.scrollToPrevVisibleSpan = this.scrollToPrevVisibleSpan.bind(this);
-    this.scrollPageDown = this.scrollPageDown.bind(this);
-    this.scrollPageUp = this.scrollPageUp.bind(this);
-    this.setAccessors = this.setAccessors.bind(this);
   }
 
   _scrollPast(rowIndex: number, direction: 1 | -1) {
@@ -205,15 +199,15 @@ export default class ScrollManager {
    * `setAccessors` is bound in the ctor, so it can be passed as a prop to
    * children components.
    */
-  setAccessors = function setAccessors(accessors: Accessors) {
+  setAccessors = (accessors: Accessors) => {
     this._accessors = accessors;
   };
 
   /**
    * Scrolls around one page down (0.95x). It is bounds in the ctor, so it can
    * be used as a keyboard shortcut handler.
    */
-  scrollPageDown = function scrollPageDown() {
+  scrollPageDown = () => {
     if (!this._scroller || !this._accessors) {
       return;
     }
@@ -224,7 +218,7 @@ export default class ScrollManager {
    * Scrolls around one page up (0.95x). It is bounds in the ctor, so it can
    * be used as a keyboard shortcut handler.
    */
-  scrollPageUp = function scrollPageUp() {
+  scrollPageUp = () => {
     if (!this._scroller || !this._accessors) {
       return;
     }
@@ -236,7 +230,7 @@ export default class ScrollManager {
    * text filter, if there is one. It is bounds in the ctor, so it can
    * be used as a keyboard shortcut handler.
    */
-  scrollToNextVisibleSpan = function scrollToNextVisibleSpan() {
+  scrollToNextVisibleSpan = () => {
     this._scrollToVisibleSpan(1);
   };
 
@@ -245,7 +239,7 @@ export default class ScrollManager {
    * text filter, if there is one. It is bounds in the ctor, so it can
    * be used as a keyboard shortcut handler.
    */
-  scrollToPrevVisibleSpan = function scrollToPrevVisibleSpan() {
+  scrollToPrevVisibleSpan = () => {
     this._scrollToVisibleSpan(-1);
   };
 

src/components/TracePage/SpanGraph/CanvasSpanGraph.js

@@ -41,7 +41,6 @@ export default class CanvasSpanGraph extends React.PureComponent<CanvasSpanGraph
   constructor(props: CanvasSpanGraphProps) {
     super(props);
     this._canvasElm = undefined;
-    this._setCanvasRef = this._setCanvasRef.bind(this);
   }
 
   componentDidMount() {
@@ -52,7 +51,7 @@ export default class CanvasSpanGraph extends React.PureComponent<CanvasSpanGraph
     this._draw();
   }
 
-  _setCanvasRef = function _setCanvasRef(elm: React.Node) {
+  _setCanvasRef = (elm: ?HTMLCanvasElement) => {
     this._canvasElm = elm;
   };
 

src/components/TracePage/SpanGraph/ViewingLayer.js

@@ -110,15 +110,6 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
 
   constructor(props: ViewingLayerProps) {
     super(props);
-    this._setRoot = this._setRoot.bind(this);
-    this._getDraggingBounds = this._getDraggingBounds.bind(this);
-    this._handleReframeMouseMove = this._handleReframeMouseMove.bind(this);
-    this._handleReframeMouseLeave = this._handleReframeMouseLeave.bind(this);
-    this._handleReframeDragUpdate = this._handleReframeDragUpdate.bind(this);
-    this._handleReframeDragEnd = this._handleReframeDragEnd.bind(this);
-    this._handleScrubberEnterLeave = this._handleScrubberEnterLeave.bind(this);
-    this._handleScrubberDragUpdate = this._handleScrubberDragUpdate.bind(this);
-    this._handleScrubberDragEnd = this._handleScrubberDragEnd.bind(this);
 
     this._draggerReframe = new DraggableManager({
       getBounds: this._getDraggingBounds,
@@ -162,11 +153,11 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
     this._draggerStart.dispose();
   }
 
-  _setRoot = function _setRoot(elm: ?Element) {
+  _setRoot = (elm: ?Element) => {
     this._root = elm;
   };
 
-  _getDraggingBounds = function _getDraggingBounds(tag: ?string): DraggableBounds {
+  _getDraggingBounds = (tag: ?string): DraggableBounds => {
     if (!this._root) {
       throw new Error('invalid state');
     }
@@ -182,60 +173,56 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
     return { clientXLeft, maxValue, minValue, width };
   };
 
-  _handleReframeMouseMove = function _handleReframeMouseMove({ value }: DraggingUpdate) {
+  _handleReframeMouseMove = ({ value }: DraggingUpdate) => {
     this.props.updateNextViewRangeTime({ cursor: value });
   };
 
-  _handleReframeMouseLeave = function _handleReframeMouseLeave() {
+  _handleReframeMouseLeave = () => {
     this.props.updateNextViewRangeTime({ cursor: null });
   };
 
-  _handleReframeDragUpdate = function _handleReframeDragUpdate({ value }: DraggingUpdate) {
+  _handleReframeDragUpdate = ({ value }: DraggingUpdate) => {
     const shift = value;
     const { time } = this.props.viewRange;
     const anchor = time.reframe ? time.reframe.anchor : shift;
     const update = { reframe: { anchor, shift } };
     this.props.updateNextViewRangeTime(update);
   };
 
-  _handleReframeDragEnd = function _handleReframeDragEnd({ manager, value }: DraggingUpdate) {
+  _handleReframeDragEnd = ({ manager, value }: DraggingUpdate) => {
     const { time } = this.props.viewRange;
     const anchor = time.reframe ? time.reframe.anchor : value;
     const [start, end] = value < anchor ? [value, anchor] : [anchor, value];
     manager.resetBounds();
     this.props.updateViewRangeTime(start, end);
   };
 
-  _handleScrubberEnterLeave = function _handleScrubberEnterLeave({ type }: DraggingUpdate) {
+  _handleScrubberEnterLeave = ({ type }: DraggingUpdate) => {
     const preventCursorLine = type === updateTypes.MOUSE_ENTER;
     this.setState({ preventCursorLine });
   };
 
-  _handleScrubberDragUpdate = function _handleScrubberDragUpdate({
-    event,
-    tag,
-    type,
-    value,
-  }: DraggingUpdate) {
+  _handleScrubberDragUpdate = ({ event, tag, type, value }: DraggingUpdate) => {
     if (type === updateTypes.DRAG_START) {
       event.stopPropagation();
     }
-    const update = {};
     if (tag === dragTypes.SHIFT_START) {
-      update.shiftStart = value;
+      this.props.updateNextViewRangeTime({ shiftStart: value });
     } else if (tag === dragTypes.SHIFT_END) {
-      update.shiftEnd = value;
+      this.props.updateNextViewRangeTime({ shiftEnd: value });
     }
-    this.props.updateNextViewRangeTime(update);
   };
 
-  _handleScrubberDragEnd = function _handleScrubberDragEnd({ manager, tag, value }: DraggingUpdate) {
+  _handleScrubberDragEnd = ({ manager, tag, value }: DraggingUpdate) => {
     const [viewStart, viewEnd] = this.props.viewRange.time.current;
     let update: [number, number];
     if (tag === dragTypes.SHIFT_START) {
       update = [value, viewEnd];
     } else if (tag === dragTypes.SHIFT_END) {
       update = [viewStart, value];
+    } else {
+      // to satisfy flow
+      throw new Error('bad state');
     }
     manager.resetBounds();
     this.setState({ preventCursorLine: false });

src/components/TracePage/TraceTimelineViewer/ListView/index.js

@@ -178,17 +178,6 @@ export default class ListView extends React.Component<ListViewProps> {
   constructor(props: ListViewProps) {
     super(props);
 
-    this.getViewHeight = this.getViewHeight.bind(this);
-    this.getBottomVisibleIndex = this.getBottomVisibleIndex.bind(this);
-    this.getTopVisibleIndex = this.getTopVisibleIndex.bind(this);
-    this.getRowPosition = this.getRowPosition.bind(this);
-    this._getHeight = this._getHeight.bind(this);
-    this._scanItemHeights = this._scanItemHeights.bind(this);
-    this._onScroll = this._onScroll.bind(this);
-    this._positionList = this._positionList.bind(this);
-    this._initWrapper = this._initWrapper.bind(this);
-    this._initItemHolder = this._initItemHolder.bind(this);
-
     this._yPositions = new Positions(200);
     // _knownHeights is (item-key -> observed height) of list items
     this._knownHeights = new Map();
@@ -232,34 +221,29 @@ export default class ListView extends React.Component<ListViewProps> {
     }
   }
 
-  getViewHeight = function getViewHeight(): number {
-    return this._viewHeight;
-  };
+  getViewHeight = () => this._viewHeight;
 
   /**
    * Get the index of the item at the bottom of the current view.
    */
-  getBottomVisibleIndex = function getBottomVisibleIndex(): number {
+  getBottomVisibleIndex = (): number => {
     const bottomY = this._scrollTop + this._viewHeight;
-    return this._yPositions.findFloorIndex(bottomY);
+    return this._yPositions.findFloorIndex(bottomY, this._getHeight);
   };
 
   /**
    * Get the index of the item at the top of the current view.
    */
-  getTopVisibleIndex = function getTopVisibleIndex(): number {
-    return this._yPositions.findFloorIndex(this._scrollTop, this._getHeight);
-  };
+  getTopVisibleIndex = (): number => this._yPositions.findFloorIndex(this._scrollTop, this._getHeight);
 
-  getRowPosition = function getRowPosition(index: number): { height: number, y: number } {
-    return this._yPositions.getRowPosition(index, this._getHeight);
-  };
+  getRowPosition = (index: number): { height: number, y: number } =>
+    this._yPositions.getRowPosition(index, this._getHeight);
 
   /**
    * Scroll event listener that schedules a remeasuring of which items should be
    * rendered.
    */
-  _onScroll = function _onScroll() {
+  _onScroll = () => {
     if (!this._isScrolledOrResized) {
       this._isScrolledOrResized = true;
       window.requestAnimationFrame(this._positionList);
@@ -309,7 +293,7 @@ export default class ListView extends React.Component<ListViewProps> {
    * Checked to see if the currently rendered items are sufficient, if not,
    * force an update to trigger more items to be rendered.
    */
-  _positionList = function _positionList() {
+  _positionList = () => {
     this._isScrolledOrResized = false;
     if (!this._wrapperElm) {
       return;
@@ -329,14 +313,14 @@ export default class ListView extends React.Component<ListViewProps> {
     }
   };
 
-  _initWrapper = function _initWrapper(elm: HTMLElement) {
+  _initWrapper = (elm: HTMLElement) => {
     this._wrapperElm = elm;
     if (!this.props.windowScroller) {
       this._viewHeight = elm && elm.clientHeight;
     }
   };
 
-  _initItemHolder = function _initItemHolder(elm: HTMLElement) {
+  _initItemHolder = (elm: HTMLElement) => {
     this._itemHolderElm = elm;
     this._scanItemHeights();
   };
@@ -346,7 +330,7 @@ export default class ListView extends React.Component<ListViewProps> {
    * item-key (which is on a data-* attribute). If any new or adjusted heights
    * are found, re-measure the current known y-positions (via .yPositions).
    */
-  _scanItemHeights = function _scanItemHeights() {
+  _scanItemHeights = () => {
     const getIndexFromKey = this.props.getIndexFromKey;
     if (!this._itemHolderElm) {
       return;
@@ -399,7 +383,7 @@ export default class ListView extends React.Component<ListViewProps> {
    * Get the height of the element at index `i`; first check the known heigths,
    * fallbck to `.props.itemHeightGetter(...)`.
    */
-  _getHeight = function _getHeight(i: number) {
+  _getHeight = (i: number) => {
     const key = this.props.getKeyFromIndex(i);
     const known = this._knownHeights.get(key);
     // known !== known iff known is NaN

src/components/TracePage/TraceTimelineViewer/SpanBarRow.js

@@ -73,17 +73,11 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
     rpc: null,
   };
 
-  constructor(props: SpanBarRowProps) {
-    super(props);
-    this._detailToggle = this._detailToggle.bind(this);
-    this._childrenToggle = this._childrenToggle.bind(this);
-  }
-
-  _detailToggle = function _detailToggle() {
+  _detailToggle = () => {
     this.props.onDetailToggled(this.props.spanID);
   };
 
-  _childrenToggle = function _childrenToggle() {
+  _childrenToggle = () => {
     this.props.onChildrenToggled(this.props.spanID);
   };
 

src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js

@@ -47,12 +47,7 @@ type SpanDetailRowProps = {
 export default class SpanDetailRow extends React.PureComponent<SpanDetailRowProps> {
   props: SpanDetailRowProps;
 
-  constructor(props: SpanDetailRowProps) {
-    super(props);
-    this._detailToggle = this._detailToggle.bind(this);
-  }
-
-  _detailToggle = function _detailToggle() {
+  _detailToggle = () => {
     this.props.onDetailToggled(this.props.span.spanID);
   };