port some components to ts

lib/components/header.tsx

@@ -3,11 +3,15 @@ import React from 'react';
 import {decorate, getTabsProps} from '../utils/plugins';
 
 import Tabs_ from './tabs';
+import {HeaderProps} from '../hyper';
 
 const Tabs = decorate(Tabs_, 'Tabs');
 
-export default class Header extends React.PureComponent {
+export default class Header extends React.PureComponent<HeaderProps> {
-  onChangeIntent = active => {
+  headerMouseDownWindowX!: number;
+  headerMouseDownWindowY!: number;
+
+  onChangeIntent = (active: string) => {
     // 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) {
@@ -30,7 +34,7 @@ export default class Header extends React.PureComponent {
     this.headerMouseDownWindowY = window.screenY;
   };
 
-  handleHamburgerMenuClick = event => {
+  handleHamburgerMenuClick = (event: React.MouseEvent) => {
     let {right: x, bottom: y} = event.currentTarget.getBoundingClientRect();
     x -= 15; // to compensate padding
     y -= 12; // ^ same

lib/components/style-sheet.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import {StyleSheetProps} from '../hyper';
 
-export default class StyleSheet extends React.PureComponent {
+export default class StyleSheet extends React.PureComponent<StyleSheetProps> {
   render() {
     const {backgroundColor, fontFamily, foregroundColor, borderColor} = this.props;
 

lib/components/tab.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import {TabProps} from '../hyper';
 
-export default class Tab extends React.PureComponent {
+export default class Tab extends React.PureComponent<TabProps, {hovered: boolean}> {
-  constructor() {
+  constructor(props: TabProps) {
-    super();
+    super(props);
 
     this.state = {
       hovered: false
@@ -21,7 +22,7 @@ export default class Tab extends React.PureComponent {
     });
   };
 
-  handleClick = event => {
+  handleClick = (event: React.MouseEvent) => {
     const isLeftClick = event.nativeEvent.which === 1;
 
     if (isLeftClick && !this.props.isActive) {
@@ -29,7 +30,7 @@ export default class Tab extends React.PureComponent {
     }
   };
 
-  handleMouseUp = event => {
+  handleMouseUp = (event: React.MouseEvent) => {
     const isMiddleClick = event.nativeEvent.which === 2;
 
     if (isMiddleClick) {

lib/components/tabs.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 import {decorate, getTabProps} from '../utils/plugins';
 
 import Tab_ from './tab';
+import {TabsProps} from '../hyper';
 
 const Tab = decorate(Tab_, 'Tab');
 const isMac = /Mac/.test(navigator.userAgent);
 
-export default class Tabs extends React.PureComponent {
+export default class Tabs extends React.PureComponent<TabsProps> {
   render() {
     const {tabs = [], borderColor, onChange, onClose, fullScreen} = this.props;
 

lib/containers/header.ts

@@ -4,7 +4,7 @@ import Header from '../components/header';
 import {closeTab, changeTab, maximize, openHamburgerMenu, unmaximize, minimize, close} from '../actions/header';
 import {connect} from '../utils/plugins';
 import {getRootGroups} from '../selectors';
-import {HyperState, HyperDispatch} from '../hyper';
+import {HyperState, HyperDispatch, ITab} from '../hyper';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
@@ -15,16 +15,18 @@ const getActivityMarkers = ({ui}: HyperState) => ui.activityMarkers;
 const getTabs = createSelector(
   [getSessions, getRootGroups, getActiveSessions, getActiveRootGroup, getActivityMarkers],
   (sessions, rootGroups, activeSessions, activeRootGroup, activityMarkers) =>
-    rootGroups.map(t => {
+    rootGroups.map(
-      const activeSessionUid = activeSessions[t.uid];
+      (t): ITab => {
-      const session = sessions[activeSessionUid];
+        const activeSessionUid = activeSessions[t.uid];
-      return {
+        const session = sessions[activeSessionUid];
-        uid: t.uid,
+        return {
-        title: session.title,
+          uid: t.uid,
-        isActive: t.uid === activeRootGroup,
+          title: session.title,
-        hasActivity: activityMarkers[session.uid]
+          isActive: t.uid === activeRootGroup,
-      };
+          hasActivity: activityMarkers[session.uid]
-    })
+        };
+      }
+    )
 );
 
 const mapStateToProps = (state: HyperState) => {

lib/hyper.d.ts

@@ -207,3 +207,37 @@ export type NotificationsProps = NotificationsConnectedProps & extensionProps;
 
 import {TermsConnectedProps} from './containers/terms';
 export type TermsProps = TermsConnectedProps & extensionProps & {ref_: any};
+
+export type StyleSheetProps = {
+  backgroundColor: string;
+  borderColor: string;
+  fontFamily: string;
+  foregroundColor: string;
+} & extensionProps;
+
+export type TabProps = {
+  borderColor: string;
+  hasActivity: boolean;
+  isActive: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+  onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onClose: () => void;
+  onSelect: () => void;
+  text: string;
+} & extensionProps;
+
+export type ITab = {
+  uid: string;
+  title: string;
+  isActive: boolean;
+  hasActivity: boolean;
+};
+
+export type TabsProps = {
+  tabs: ITab[];
+  borderColor: string;
+  onChange: () => void;
+  onClose: () => void;
+  fullScreen: boolean;
+} & extensionProps;