header > function component

lib/components/header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {forwardRef, useState} from 'react';
 
 import type {HeaderProps} from '../../typings/hyper';
 import {decorate, getTabsProps} from '../utils/plugins';
@@ -7,21 +7,21 @@ import Tabs_ from './tabs';
 
 const Tabs = decorate(Tabs_, 'Tabs');
 
-export default class Header extends React.PureComponent<HeaderProps> {
+const Header = forwardRef<HTMLElement, HeaderProps>((props, ref) => {
-  headerMouseDownWindowX!: number;
+  const [headerMouseDownWindowX, setHeaderMouseDownWindowX] = useState<number>(0);
-  headerMouseDownWindowY!: number;
+  const [headerMouseDownWindowY, setHeaderMouseDownWindowY] = useState<number>(0);
 
-  onChangeIntent = (active: string) => {
+  const 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) {
+    if (window.screenX !== headerMouseDownWindowX || window.screenY !== headerMouseDownWindowY) {
       return;
     }
 
-    this.props.onChangeTab(active);
+    props.onChangeTab(active);
   };
 
-  handleHeaderMouseDown = () => {
+  const handleHeaderMouseDown = () => {
     // the hack of all hacks, this prevents the term
     // iframe from losing focus, for example, when
     // the user drags the nav around
@@ -30,43 +30,43 @@ export default class Header extends React.PureComponent<HeaderProps> {
 
     // persist start positions of a potential drag motion
     // to differentiate dragging from clicking
-    this.headerMouseDownWindowX = window.screenX;
+    setHeaderMouseDownWindowX(window.screenX);
-    this.headerMouseDownWindowY = window.screenY;
+    setHeaderMouseDownWindowY(window.screenY);
   };
 
-  handleHamburgerMenuClick = (event: React.MouseEvent) => {
+  const handleHamburgerMenuClick = (event: React.MouseEvent) => {
     let {right: x, bottom: y} = event.currentTarget.getBoundingClientRect();
     x -= 15; // to compensate padding
     y -= 12; // ^ same
-    this.props.openHamburgerMenu({x, y});
+    props.openHamburgerMenu({x, y});
   };
 
-  handleMaximizeClick = () => {
+  const handleMaximizeClick = () => {
-    if (this.props.maximized) {
+    if (props.maximized) {
-      this.props.unmaximize();
+      props.unmaximize();
     } else {
-      this.props.maximize();
+      props.maximize();
     }
   };
 
-  handleMinimizeClick = () => {
+  const handleMinimizeClick = () => {
-    this.props.minimize();
+    props.minimize();
   };
 
-  handleCloseClick = () => {
+  const handleCloseClick = () => {
-    this.props.close();
+    props.close();
   };
 
-  getWindowHeaderConfig() {
+  const getWindowHeaderConfig = () => {
-    const {showHamburgerMenu, showWindowControls} = this.props;
+    const {showHamburgerMenu, showWindowControls} = props;
 
     const defaults = {
-      hambMenu: !this.props.isMac, // show by default on windows and linux
+      hambMenu: !props.isMac, // show by default on windows and linux
-      winCtrls: !this.props.isMac // show by default on Windows and Linux
+      winCtrls: !props.isMac // show by default on Windows and Linux
     };
 
     // don't allow the user to change defaults on macOS
-    if (this.props.isMac) {
+    if (props.isMac) {
       return defaults;
     }
 
@@ -74,39 +74,28 @@ export default class Header extends React.PureComponent<HeaderProps> {
       hambMenu: showHamburgerMenu === '' ? defaults.hambMenu : showHamburgerMenu,
       winCtrls: showWindowControls === '' ? defaults.winCtrls : showWindowControls
     };
-  }
+  };
 
-  render() {
+  const {isMac} = props;
-    const {isMac} = this.props;
-    const props = getTabsProps(this.props, {
-      tabs: this.props.tabs,
-      borderColor: this.props.borderColor,
-      backgroundColor: this.props.backgroundColor,
-      onClose: this.props.onCloseTab,
-      onChange: this.onChangeIntent,
-      fullScreen: this.props.fullScreen,
-      defaultProfile: this.props.defaultProfile,
-      profiles: this.props.profiles.asMutable({deep: true}),
-      openNewTab: this.props.openNewTab
-    });
   const {borderColor} = props;
   let title = 'Hyper';
   if (props.tabs.length === 1 && props.tabs[0].title) {
     // if there's only one tab we use its title as the window title
     title = props.tabs[0].title;
   }
-    const {hambMenu, winCtrls} = this.getWindowHeaderConfig();
+  const {hambMenu, winCtrls} = getWindowHeaderConfig();
   const left = winCtrls === 'left';
-    const maxButtonHref = this.props.maximized
+  const maxButtonHref = props.maximized
     ? './renderer/assets/icons.svg#restore-window'
     : './renderer/assets/icons.svg#maximize-window';
 
   return (
     <header
       className={`header_header ${isMac && 'header_headerRounded'}`}
-        onMouseDown={this.handleHeaderMouseDown}
+      onMouseDown={handleHeaderMouseDown}
       onMouseUp={() => window.focusActiveTerm()}
-        onDoubleClick={this.handleMaximizeClick}
+      onDoubleClick={handleMaximizeClick}
+      ref={ref}
     >
       {!isMac && (
         <div
@@ -116,7 +105,7 @@ export default class Header extends React.PureComponent<HeaderProps> {
           {hambMenu && (
             <svg
               className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
-                onClick={this.handleHamburgerMenuClick}
+              onClick={handleHamburgerMenuClick}
             >
               <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
             </svg>
@@ -124,20 +113,17 @@ export default class Header extends React.PureComponent<HeaderProps> {
           <span className="header_appTitle">{title}</span>
           {winCtrls && (
             <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
-                <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={this.handleMinimizeClick}>
+              <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={handleMinimizeClick}>
                 <svg className="header_shape">
                   <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
                 </svg>
               </div>
-                <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={this.handleMaximizeClick}>
+              <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={handleMaximizeClick}>
                 <svg className="header_shape">
                   <use xlinkHref={maxButtonHref} />
                 </svg>
               </div>
-                <div
+              <div className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`} onClick={handleCloseClick}>
-                  className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`}
-                  onClick={this.handleCloseClick}
-                >
                 <svg className="header_shape">
                   <use xlinkHref="./renderer/assets/icons.svg#close-window" />
                 </svg>
@@ -146,9 +132,21 @@ export default class Header extends React.PureComponent<HeaderProps> {
           )}
         </div>
       )}
-        {this.props.customChildrenBefore}
+      {props.customChildrenBefore}
-        <Tabs {...props} />
+      <Tabs
-        {this.props.customChildren}
+        {...getTabsProps(props, {
+          tabs: props.tabs,
+          borderColor: props.borderColor,
+          backgroundColor: props.backgroundColor,
+          onClose: props.onCloseTab,
+          onChange: onChangeIntent,
+          fullScreen: props.fullScreen,
+          defaultProfile: props.defaultProfile,
+          profiles: props.profiles.asMutable({deep: true}),
+          openNewTab: props.openNewTab
+        })}
+      />
+      {props.customChildren}
 
       <style jsx>{`
         .header_header {
@@ -255,5 +253,8 @@ export default class Header extends React.PureComponent<HeaderProps> {
       `}</style>
     </header>
   );
-  }
+});
-}
+
+Header.displayName = 'Header';
+
+export default Header;