convert manual bind to arrow

lib/components/header.js

@@ -7,17 +7,7 @@ import Tabs_ from './tabs';
 const Tabs = decorate(Tabs_, 'Tabs');
 
 export default class Header extends React.PureComponent {
-  constructor() {
+  onChangeIntent = active => {
-    super();
-    this.onChangeIntent = this.onChangeIntent.bind(this);
-    this.handleHeaderMouseDown = this.handleHeaderMouseDown.bind(this);
-    this.handleHamburgerMenuClick = this.handleHamburgerMenuClick.bind(this);
-    this.handleMaximizeClick = this.handleMaximizeClick.bind(this);
-    this.handleMinimizeClick = this.handleMinimizeClick.bind(this);
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-  }
-
-  onChangeIntent(active) {
     // we ignore clicks if they're a byproduct of a drag
     // motion to move the window
     if (window.screenX !== this.headerMouseDownWindowX || window.screenY !== this.headerMouseDownWindowY) {
@@ -25,9 +15,9 @@ export default class Header extends React.PureComponent {
     }
 
     this.props.onChangeTab(active);
-  }
+  };
 
-  handleHeaderMouseDown() {
+  handleHeaderMouseDown = () => {
     // the hack of all hacks, this prevents the term
     // iframe from losing focus, for example, when
     // the user drags the nav around
@@ -38,30 +28,30 @@ export default class Header extends React.PureComponent {
     // to differentiate dragging from clicking
     this.headerMouseDownWindowX = window.screenX;
     this.headerMouseDownWindowY = window.screenY;
-  }
+  };
 
-  handleHamburgerMenuClick(event) {
+  handleHamburgerMenuClick = event => {
     let {right: x, bottom: y} = event.currentTarget.getBoundingClientRect();
     x -= 15; // to compensate padding
     y -= 12; // ^ same
     this.props.openHamburgerMenu({x, y});
-  }
+  };
 
-  handleMaximizeClick() {
+  handleMaximizeClick = () => {
     if (this.props.maximized) {
       this.props.unmaximize();
     } else {
       this.props.maximize();
     }
-  }
+  };
 
-  handleMinimizeClick() {
+  handleMinimizeClick = () => {
     this.props.minimize();
-  }
+  };
 
-  handleCloseClick() {
+  handleCloseClick = () => {
     this.props.close();
-  }
+  };
 
   componentWillUnmount() {
     delete this.clicks;

lib/components/notification.js

@@ -6,8 +6,6 @@ export default class Notification extends React.PureComponent {
     this.state = {
       dismissing: false
     };
-    this.handleDismiss = this.handleDismiss.bind(this);
-    this.onElement = this.onElement.bind(this);
   }
 
   componentDidMount() {
@@ -29,11 +27,11 @@ export default class Notification extends React.PureComponent {
     }
   }
 
-  handleDismiss() {
+  handleDismiss = () => {
     this.setState({dismissing: true});
-  }
+  };
 
-  onElement(el) {
+  onElement = el => {
     if (el) {
       el.addEventListener('webkitTransitionEnd', () => {
         if (this.state.dismissing) {
@@ -45,7 +43,7 @@ export default class Notification extends React.PureComponent {
         el.style.setProperty('background-color', backgroundColor, 'important');
       }
     }
-  }
+  };
 
   setDismissTimer() {
     this.dismissTimer = setTimeout(() => {

lib/components/searchBox.js

@@ -16,16 +16,15 @@ const enterKey = 13;
 export default class SearchBox extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.handleChange = this.handleChange.bind(this);
     this.searchTerm = '';
   }
 
-  handleChange(event) {
+  handleChange = event => {
     this.searchTerm = event.target.value;
     if (event.keyCode === enterKey) {
       this.props.search(event.target.value);
     }
-  }
+  };
 
   render() {
     return (

lib/components/split-pane.js

@@ -5,10 +5,6 @@ import _ from 'lodash';
 export default class SplitPane extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.handleDragStart = this.handleDragStart.bind(this);
-    this.handleAutoResize = this.handleAutoResize.bind(this);
-    this.onDrag = this.onDrag.bind(this);
-    this.onDragEnd = this.onDragEnd.bind(this);
     this.state = {dragging: false};
   }
 
@@ -25,7 +21,7 @@ export default class SplitPane extends React.PureComponent {
     this.paneIndex -= Math.ceil(this.paneIndex / 2);
   }
 
-  handleAutoResize(ev) {
+  handleAutoResize = ev => {
     ev.preventDefault();
 
     this.setupPanes(ev);
@@ -39,9 +35,9 @@ export default class SplitPane extends React.PureComponent {
     sizes_[this.paneIndex + 1] = availableWidth / 2;
 
     this.props.onResize(sizes_);
-  }
+  };
 
-  handleDragStart(ev) {
+  handleDragStart = ev => {
     ev.preventDefault();
     this.setState({dragging: true});
     window.addEventListener('mousemove', this.onDrag);
@@ -62,7 +58,7 @@ export default class SplitPane extends React.PureComponent {
     this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2];
     this.panesSize = ev.target.parentNode.getBoundingClientRect()[this.d1];
     this.setupPanes(ev);
-  }
+  };
 
   getSizes() {
     const {sizes} = this.props;
@@ -79,7 +75,7 @@ export default class SplitPane extends React.PureComponent {
     return sizes_;
   }
 
-  onDrag(ev) {
+  onDrag = ev => {
     const sizes_ = this.getSizes();
 
     const i = this.paneIndex;
@@ -93,15 +89,15 @@ export default class SplitPane extends React.PureComponent {
       sizes_[i + 1] += d;
     }
     this.props.onResize(sizes_);
-  }
+  };
 
-  onDragEnd() {
+  onDragEnd = () => {
     if (this.state.dragging) {
       window.removeEventListener('mousemove', this.onDrag);
       window.removeEventListener('mouseup', this.onDragEnd);
       this.setState({dragging: false});
     }
-  }
+  };
 
   render() {
     const children = this.props.children;

lib/components/tab.js

@@ -4,43 +4,38 @@ export default class Tab extends React.PureComponent {
   constructor() {
     super();
 
-    this.handleHover = this.handleHover.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-
     this.state = {
       hovered: false
     };
   }
 
-  handleHover() {
+  handleHover = () => {
     this.setState({
       hovered: true
     });
-  }
+  };
 
-  handleBlur() {
+  handleBlur = () => {
     this.setState({
       hovered: false
     });
-  }
+  };
 
-  handleClick(event) {
+  handleClick = event => {
     const isLeftClick = event.nativeEvent.which === 1;
 
     if (isLeftClick && !this.props.isActive) {
       this.props.onSelect();
     }
-  }
+  };
 
-  handleMouseUp(event) {
+  handleMouseUp = event => {
     const isMiddleClick = event.nativeEvent.which === 2;
 
     if (isMiddleClick) {
       this.props.onClose();
     }
-  }
+  };
 
   render() {
     const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props;

lib/components/term-group.js

@@ -13,7 +13,6 @@ class TermGroup_ extends React.PureComponent {
     super(props, context);
     this.bound = new WeakMap();
     this.termRefs = {};
-    this.onTermRef = this.onTermRef.bind(this);
   }
 
   bind(fn, thisObj, uid) {
@@ -46,10 +45,10 @@ class TermGroup_ extends React.PureComponent {
     );
   }
 
-  onTermRef(uid, term) {
+  onTermRef = (uid, term) => {
     this.term = term;
     this.props.ref_(uid, term);
-  }
+  };
 
   renderTerm(uid) {
     const session = this.props.sessions[uid];

lib/components/term.js

@@ -85,13 +85,6 @@ export default class Term extends React.PureComponent {
     this.termRef = null;
     this.termWrapperRef = null;
     this.termRect = null;
-    this.onWindowPaste = this.onWindowPaste.bind(this);
-    this.onTermWrapperRef = this.onTermWrapperRef.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
-    this.search = this.search.bind(this);
-    this.searchNext = this.searchNext.bind(this);
-    this.searchPrevious = this.searchPrevious.bind(this);
-    this.closeSearchBox = this.closeSearchBox.bind(this);
     this.termOptions = {};
     this.disposableListeners = [];
     this.termDefaultBellSound = null;
@@ -230,7 +223,7 @@ export default class Term extends React.PureComponent {
 
   // intercepting paste event for any necessary processing of
   // clipboard data, if result is falsy, paste event continues
-  onWindowPaste(e) {
+  onWindowPaste = e => {
     if (!this.props.isTermActive) return;
 
     const processed = processClipboard();
@@ -239,9 +232,9 @@ export default class Term extends React.PureComponent {
       e.stopPropagation();
       this.term._core.handler(processed);
     }
-  }
+  };
 
-  onMouseUp(e) {
+  onMouseUp = e => {
     if (this.props.quickEdit && e.button === 2) {
       if (this.term.hasSelection()) {
         clipboard.writeText(this.term.getSelection());
@@ -252,7 +245,7 @@ export default class Term extends React.PureComponent {
     } else if (this.props.copyOnSelect && this.term.hasSelection()) {
       clipboard.writeText(this.term.getSelection());
     }
-  }
+  };
 
   write(data) {
     this.term.write(data);
@@ -270,21 +263,21 @@ export default class Term extends React.PureComponent {
     this.term.reset();
   }
 
-  search(searchTerm) {
+  search = searchTerm => {
     this.searchAddon.findNext(searchTerm);
-  }
+  };
 
-  searchNext(searchTerm) {
+  searchNext = searchTerm => {
     this.searchAddon.findNext(searchTerm);
-  }
+  };
 
-  searchPrevious(searchTerm) {
+  searchPrevious = searchTerm => {
     this.searchAddon.findPrevious(searchTerm);
-  }
+  };
 
-  closeSearchBox() {
+  closeSearchBox = () => {
     this.props.toggleSearch();
-  }
+  };
 
   resize(cols, rows) {
     this.term.resize(cols, rows);
@@ -423,7 +416,7 @@ export default class Term extends React.PureComponent {
     }
   }
 
-  onTermWrapperRef(component) {
+  onTermWrapperRef = component => {
     this.termWrapperRef = component;
 
     if (component) {
@@ -437,7 +430,7 @@ export default class Term extends React.PureComponent {
     } else {
       this.resizeObserver.disconnect();
     }
-  }
+  };
 
   componentWillUnmount() {
     terms[this.props.uid] = null;

lib/components/terms.js

@@ -14,7 +14,6 @@ export default class Terms extends React.Component {
     super(props, context);
     this.terms = {};
     this.bound = new WeakMap();
-    this.onRef = this.onRef.bind(this);
     this.registerCommands = registerCommandHandlers;
     props.ref_(this);
   }
@@ -39,11 +38,11 @@ export default class Terms extends React.Component {
     return false;
   }
 
-  onRef(uid, term) {
+  onRef = (uid, term) => {
     if (term) {
       this.terms[uid] = term;
     }
-  }
+  };
 
   getTermByUid(uid) {
     return this.terms[uid];

lib/containers/hyper.tsx

@@ -21,10 +21,6 @@ class Hyper extends React.PureComponent<any, any> {
   terms: any;
   constructor(props: any) {
     super(props);
-    this.handleFocusActive = this.handleFocusActive.bind(this);
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.onTermsRef = this.onTermsRef.bind(this);
-
     this.state = {
       lastConfigUpdate: 0
     };
@@ -43,19 +39,19 @@ class Hyper extends React.PureComponent<any, any> {
     }
   }
 
-  handleFocusActive(uid: string) {
+  handleFocusActive = (uid: string) => {
     const term = this.terms.getTermByUid(uid);
     if (term) {
       term.focus();
     }
-  }
+  };
 
-  handleSelectAll() {
+  handleSelectAll = () => {
     const term = this.terms.getActiveTerm();
     if (term) {
       term.selectAll();
     }
-  }
+  };
 
   attachKeyListeners() {
     if (!this.mousetrap) {
@@ -89,10 +85,10 @@ class Hyper extends React.PureComponent<any, any> {
     window.rpc.on('term selectAll', this.handleSelectAll);
   }
 
-  onTermsRef(terms: any) {
+  onTermsRef = (terms: any) => {
     this.terms = terms;
     window.focusActiveTerm = this.handleFocusActive;
-  }
+  };
 
   componentDidUpdate(prev: any) {
     if (prev.activeSession !== this.props.activeSession) {

lib/utils/plugins.ts

@@ -55,9 +55,8 @@ function exposeDecorated(Component_: any) {
   return class DecoratedComponent extends React.Component<any, any> {
     constructor(props: any, context: any) {
       super(props, context);
-      this.onRef = this.onRef.bind(this);
     }
-    onRef(decorated_: any) {
+    onRef = (decorated_: any) => {
       if (this.props.onDecorated) {
         try {
           this.props.onDecorated(decorated_);
@@ -65,7 +64,7 @@ function exposeDecorated(Component_: any) {
           notify('Plugin error', `Error occurred. Check Developer Tools for details`, {error: e});
         }
       }
-    }
+    };
     render() {
       return React.createElement(Component_, Object.assign({}, this.props, {ref: this.onRef}));
     }

lib/utils/rpc.ts

@@ -8,7 +8,6 @@ export default class Client {
   constructor() {
     this.emitter = new EventEmitter();
     this.ipc = electron.ipcRenderer;
-    this.ipcListener = this.ipcListener.bind(this);
     if (window.__rpcId) {
       setTimeout(() => {
         this.id = window.__rpcId;
@@ -28,9 +27,9 @@ export default class Client {
     }
   }
 
-  ipcListener(event: any, {ch, data}: {ch: string; data: any}) {
+  ipcListener = (event: any, {ch, data}: {ch: string; data: any}) => {
     this.emitter.emit(ch, data);
-  }
+  };
 
   on(ev: string, fn: (...args: any[]) => void) {
     this.emitter.on(ev, fn);