Skip to content

Commit

Permalink
Bind methods in the class body instead of ctor
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiffon
tiffon committed Oct 19, 2017
1 parent 3cc5817 commit 7a6fb5e
Show file tree
Hide file tree
Showing 16 changed files with 76 additions and 167 deletions.
5 changes: 2 additions & 3 deletions src/components/SearchTracePage/SearchDropdownInput.js
View file
Expand Up @@ -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(',')) {
Expand All @@ -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;
Expand Down
18 changes: 6 additions & 12 deletions src/components/TracePage/ScrollManager.js
View file
Expand Up @@ -46,7 +46,7 @@ export type Accessors = {

interface Scroller {
scrollTo: number => void,
scrollBy: number => void,
scrollBy: (number, ?boolean) => void,
}

/**
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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);
};

Expand All @@ -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);
};

Expand Down
3 changes: 1 addition & 2 deletions src/components/TracePage/SpanGraph/CanvasSpanGraph.js
View file
Expand Up @@ -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() {
Expand All @@ -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;
};

Expand Down
41 changes: 14 additions & 27 deletions src/components/TracePage/SpanGraph/ViewingLayer.js
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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');
}
Expand All @@ -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 });
Expand Down
40 changes: 12 additions & 28 deletions src/components/TracePage/TraceTimelineViewer/ListView/index.js
View file
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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();
};
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
10 changes: 2 additions & 8 deletions src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
View file
Expand Up @@ -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);
};

Expand Down
7 changes: 1 addition & 6 deletions src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
View file
Expand Up @@ -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);
};

Expand Down

0 comments on commit 7a6fb5e

Please sign in to comment.