From 4faad31120c6a9e88496c762227e80dba20177bb Mon Sep 17 00:00:00 2001
From: Labhansh Agrawal <labhansh.agrawal@gmail.com>
Date: Tue, 1 Aug 2023 19:35:50 +0530
Subject: [PATCH] header > function component

---
 lib/components/header.tsx | 377 +++++++++++++++++++-------------------
 1 file changed, 189 insertions(+), 188 deletions(-)

diff --git a/lib/components/header.tsx b/lib/components/header.tsx
index 61525684..416ecbc5 100644
--- a/lib/components/header.tsx
+++ b/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> {
-  headerMouseDownWindowX!: number;
-  headerMouseDownWindowY!: number;
+const Header = forwardRef<HTMLElement, HeaderProps>((props, ref) => {
+  const [headerMouseDownWindowX, setHeaderMouseDownWindowX] = useState<number>(0);
+  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;
-    this.headerMouseDownWindowY = window.screenY;
+    setHeaderMouseDownWindowX(window.screenX);
+    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 = () => {
-    if (this.props.maximized) {
-      this.props.unmaximize();
+  const handleMaximizeClick = () => {
+    if (props.maximized) {
+      props.unmaximize();
     } else {
-      this.props.maximize();
+      props.maximize();
     }
   };
 
-  handleMinimizeClick = () => {
-    this.props.minimize();
+  const handleMinimizeClick = () => {
+    props.minimize();
   };
 
-  handleCloseClick = () => {
-    this.props.close();
+  const handleCloseClick = () => {
+    props.close();
   };
 
-  getWindowHeaderConfig() {
-    const {showHamburgerMenu, showWindowControls} = this.props;
+  const getWindowHeaderConfig = () => {
+    const {showHamburgerMenu, showWindowControls} = props;
 
     const defaults = {
-      hambMenu: !this.props.isMac, // show by default on windows and linux
-      winCtrls: !this.props.isMac // show by default on Windows and Linux
+      hambMenu: !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,186 +74,187 @@ export default class Header extends React.PureComponent<HeaderProps> {
       hambMenu: showHamburgerMenu === '' ? defaults.hambMenu : showHamburgerMenu,
       winCtrls: showWindowControls === '' ? defaults.winCtrls : showWindowControls
     };
+  };
+
+  const {isMac} = props;
+  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} = getWindowHeaderConfig();
+  const left = winCtrls === 'left';
+  const maxButtonHref = props.maximized
+    ? './renderer/assets/icons.svg#restore-window'
+    : './renderer/assets/icons.svg#maximize-window';
 
-  render() {
-    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 left = winCtrls === 'left';
-    const maxButtonHref = this.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}
-        onMouseUp={() => window.focusActiveTerm()}
-        onDoubleClick={this.handleMaximizeClick}
-      >
-        {!isMac && (
-          <div
-            className={`header_windowHeader ${props.tabs.length > 1 ? 'header_windowHeaderWithBorder' : ''}`}
-            style={{borderColor}}
-          >
-            {hambMenu && (
-              <svg
-                className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
-                onClick={this.handleHamburgerMenuClick}
-              >
-                <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
-              </svg>
-            )}
-            <span className="header_appTitle">{title}</span>
-            {winCtrls && (
-              <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
-                <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={this.handleMinimizeClick}>
-                  <svg className="header_shape">
-                    <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
-                  </svg>
-                </div>
-                <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={this.handleMaximizeClick}>
-                  <svg className="header_shape">
-                    <use xlinkHref={maxButtonHref} />
-                  </svg>
-                </div>
-                <div
-                  className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`}
-                  onClick={this.handleCloseClick}
-                >
-                  <svg className="header_shape">
-                    <use xlinkHref="./renderer/assets/icons.svg#close-window" />
-                  </svg>
-                </div>
+  return (
+    <header
+      className={`header_header ${isMac && 'header_headerRounded'}`}
+      onMouseDown={handleHeaderMouseDown}
+      onMouseUp={() => window.focusActiveTerm()}
+      onDoubleClick={handleMaximizeClick}
+      ref={ref}
+    >
+      {!isMac && (
+        <div
+          className={`header_windowHeader ${props.tabs.length > 1 ? 'header_windowHeaderWithBorder' : ''}`}
+          style={{borderColor}}
+        >
+          {hambMenu && (
+            <svg
+              className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
+              onClick={handleHamburgerMenuClick}
+            >
+              <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
+            </svg>
+          )}
+          <span className="header_appTitle">{title}</span>
+          {winCtrls && (
+            <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
+              <div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={handleMinimizeClick}>
+                <svg className="header_shape">
+                  <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
+                </svg>
               </div>
-            )}
-          </div>
-        )}
-        {this.props.customChildrenBefore}
-        <Tabs {...props} />
-        {this.props.customChildren}
+              <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={handleMaximizeClick}>
+                <svg className="header_shape">
+                  <use xlinkHref={maxButtonHref} />
+                </svg>
+              </div>
+              <div className={`header_closeWindow ${left ? 'header_closeWindowLeft' : ''}`} onClick={handleCloseClick}>
+                <svg className="header_shape">
+                  <use xlinkHref="./renderer/assets/icons.svg#close-window" />
+                </svg>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      {props.customChildrenBefore}
+      <Tabs
+        {...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 {
-            position: fixed;
-            top: 1px;
-            left: 1px;
-            right: 1px;
-            z-index: 100;
-          }
+      <style jsx>{`
+        .header_header {
+          position: fixed;
+          top: 1px;
+          left: 1px;
+          right: 1px;
+          z-index: 100;
+        }
 
-          .header_headerRounded {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-          }
+        .header_headerRounded {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
 
-          .header_windowHeader {
-            height: 34px;
-            width: 100%;
-            position: fixed;
-            top: 1px;
-            left: 1px;
-            right: 1px;
-            -webkit-app-region: drag;
-            -webkit-user-select: none;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
+        .header_windowHeader {
+          height: 34px;
+          width: 100%;
+          position: fixed;
+          top: 1px;
+          left: 1px;
+          right: 1px;
+          -webkit-app-region: drag;
+          -webkit-user-select: none;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
 
-          .header_windowHeaderWithBorder {
-            border-color: #ccc;
-            border-bottom-style: solid;
-            border-bottom-width: 1px;
-          }
+        .header_windowHeaderWithBorder {
+          border-color: #ccc;
+          border-bottom-style: solid;
+          border-bottom-width: 1px;
+        }
 
-          .header_appTitle {
-            font-size: 12px;
-          }
+        .header_appTitle {
+          font-size: 12px;
+        }
 
-          .header_shape,
-          .header_shape > svg {
-            width: 40px;
-            height: 34px;
-            padding: 12px 15px 12px 15px;
-            -webkit-app-region: no-drag;
-            color: #fff;
-            opacity: 0.5;
-            shape-rendering: crispEdges;
-          }
+        .header_shape,
+        .header_shape > svg {
+          width: 40px;
+          height: 34px;
+          padding: 12px 15px 12px 15px;
+          -webkit-app-region: no-drag;
+          color: #fff;
+          opacity: 0.5;
+          shape-rendering: crispEdges;
+        }
 
-          .header_shape:hover {
-            opacity: 1;
-          }
+        .header_shape:hover {
+          opacity: 1;
+        }
 
-          .header_shape:active {
-            opacity: 0.3;
-          }
+        .header_shape:active {
+          opacity: 0.3;
+        }
 
-          .header_hamburgerMenuLeft {
-            position: fixed;
-            top: 0;
-            left: 0;
-          }
+        .header_hamburgerMenuLeft {
+          position: fixed;
+          top: 0;
+          left: 0;
+        }
 
-          .header_hamburgerMenuRight {
-            position: fixed;
-            top: 0;
-            right: 0;
-          }
+        .header_hamburgerMenuRight {
+          position: fixed;
+          top: 0;
+          right: 0;
+        }
 
-          .header_windowControls {
-            display: flex;
-            width: 120px;
-            height: 34px;
-            justify-content: space-between;
-            position: fixed;
-            top: 0;
-            right: 0;
-          }
+        .header_windowControls {
+          display: flex;
+          width: 120px;
+          height: 34px;
+          justify-content: space-between;
+          position: fixed;
+          top: 0;
+          right: 0;
+        }
 
-          .header_windowControlsLeft {
-            left: 0px;
-          }
+        .header_windowControlsLeft {
+          left: 0px;
+        }
 
-          .header_closeWindowLeft {
-            order: 1;
-          }
+        .header_closeWindowLeft {
+          order: 1;
+        }
 
-          .header_minimizeWindowLeft {
-            order: 2;
-          }
+        .header_minimizeWindowLeft {
+          order: 2;
+        }
 
-          .header_maximizeWindowLeft {
-            order: 3;
-          }
+        .header_maximizeWindowLeft {
+          order: 3;
+        }
 
-          .header_closeWindow:hover {
-            color: #fe354e;
-          }
+        .header_closeWindow:hover {
+          color: #fe354e;
+        }
 
-          .header_closeWindow:active {
-            color: #fe354e;
-          }
-        `}</style>
-      </header>
-    );
-  }
-}
+        .header_closeWindow:active {
+          color: #fe354e;
+        }
+      `}</style>
+    </header>
+  );
+});
+
+Header.displayName = 'Header';
+
+export default Header;