quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-13 04:28:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

header > function component

Browse source
This commit is contained in:
Labhansh Agrawal 2023-08-01 19:35:50 +05:30
parent 1c92452e61
commit 4faad31120
1 changed files with 189 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

377
lib/components/header.tsx
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, {forwardRef, useState} from 'react';
import type {HeaderProps} from '../../typings/hyper'; import type {HeaderProps} from '../../typings/hyper';
import {decorate, getTabsProps} from '../utils/plugins'; import {decorate, getTabsProps} from '../utils/plugins';
@ -7,21 +7,21 @@ import Tabs_ from './tabs';
const Tabs = decorate(Tabs_, '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 // we ignore clicks if they're a byproduct of a drag
// motion to move the window // motion to move the window
if (window.screenX !== this.headerMouseDownWindowX || window.screenY !== this.headerMouseDownWindowY) { if (window.screenX !== headerMouseDownWindowX || window.screenY !== headerMouseDownWindowY) {
return; return;
} }
this.props.onChangeTab(active); props.onChangeTab(active);
}; };
handleHeaderMouseDown = () => { const handleHeaderMouseDown = () => {
// the hack of all hacks, this prevents the term // the hack of all hacks, this prevents the term
// iframe from losing focus, for example, when // iframe from losing focus, for example, when
// the user drags the nav around // 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 // persist start positions of a potential drag motion
// to differentiate dragging from clicking // 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(); let {right: x, bottom: y} = event.currentTarget.getBoundingClientRect();
x -= 15; // to compensate padding x -= 15; // to compensate padding
y -= 12; // ^ same 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 { } 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 = { 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 // don't allow the user to change defaults on macOS
if (this.props.isMac) { if (props.isMac) {
return defaults; return defaults;
} }
@ -74,186 +74,187 @@ export default class Header extends React.PureComponent<HeaderProps> {
hambMenu: showHamburgerMenu === '' ? defaults.hambMenu : showHamburgerMenu, hambMenu: showHamburgerMenu === '' ? defaults.hambMenu : showHamburgerMenu,
winCtrls: showWindowControls === '' ? defaults.winCtrls : showWindowControls 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() { return (
const {isMac} = this.props; <header
const props = getTabsProps(this.props, { className={`header_header ${isMac && 'header_headerRounded'}`}
tabs: this.props.tabs, onMouseDown={handleHeaderMouseDown}
borderColor: this.props.borderColor, onMouseUp={() => window.focusActiveTerm()}
backgroundColor: this.props.backgroundColor, onDoubleClick={handleMaximizeClick}
onClose: this.props.onCloseTab, ref={ref}
onChange: this.onChangeIntent, >
fullScreen: this.props.fullScreen, {!isMac && (
defaultProfile: this.props.defaultProfile, <div
profiles: this.props.profiles.asMutable({deep: true}), className={`header_windowHeader ${props.tabs.length > 1 ? 'header_windowHeaderWithBorder' : ''}`}
openNewTab: this.props.openNewTab style={{borderColor}}
}); >
const {borderColor} = props; {hambMenu && (
let title = 'Hyper'; <svg
if (props.tabs.length === 1 && props.tabs[0].title) { className={`header_shape ${left ? 'header_hamburgerMenuRight' : 'header_hamburgerMenuLeft'}`}
// if there's only one tab we use its title as the window title onClick={handleHamburgerMenuClick}
title = props.tabs[0].title; >
} <use xlinkHref="./renderer/assets/icons.svg#hamburger-menu" />
const {hambMenu, winCtrls} = this.getWindowHeaderConfig(); </svg>
const left = winCtrls === 'left'; )}
const maxButtonHref = this.props.maximized <span className="header_appTitle">{title}</span>
? './renderer/assets/icons.svg#restore-window' {winCtrls && (
: './renderer/assets/icons.svg#maximize-window'; <div className={`header_windowControls ${left ? 'header_windowControlsLeft' : ''}`}>
<div className={`${left ? 'header_minimizeWindowLeft' : ''}`} onClick={handleMinimizeClick}>
return ( <svg className="header_shape">
<header <use xlinkHref="./renderer/assets/icons.svg#minimize-window" />
className={`header_header ${isMac && 'header_headerRounded'}`} </svg>
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>
</div> </div>
)} <div className={`${left ? 'header_maximizeWindowLeft' : ''}`} onClick={handleMaximizeClick}>
</div> <svg className="header_shape">
)} <use xlinkHref={maxButtonHref} />
{this.props.customChildrenBefore} </svg>
<Tabs {...props} /> </div>
{this.props.customChildren} <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>{` <style jsx>{`
.header_header { .header_header {
position: fixed; position: fixed;
top: 1px; top: 1px;
left: 1px; left: 1px;
right: 1px; right: 1px;
z-index: 100; z-index: 100;
} }
.header_headerRounded { .header_headerRounded {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
} }
.header_windowHeader { .header_windowHeader {
height: 34px; height: 34px;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 1px; top: 1px;
left: 1px; left: 1px;
right: 1px; right: 1px;
-webkit-app-region: drag; -webkit-app-region: drag;
-webkit-user-select: none; -webkit-user-select: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.header_windowHeaderWithBorder { .header_windowHeaderWithBorder {
border-color: #ccc; border-color: #ccc;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.header_appTitle { .header_appTitle {
font-size: 12px; font-size: 12px;
} }
.header_shape, .header_shape,
.header_shape > svg { .header_shape > svg {
width: 40px; width: 40px;
height: 34px; height: 34px;
padding: 12px 15px 12px 15px; padding: 12px 15px 12px 15px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
color: #fff; color: #fff;
opacity: 0.5; opacity: 0.5;
shape-rendering: crispEdges; shape-rendering: crispEdges;
} }
.header_shape:hover { .header_shape:hover {
opacity: 1; opacity: 1;
} }
.header_shape:active { .header_shape:active {
opacity: 0.3; opacity: 0.3;
} }
.header_hamburgerMenuLeft { .header_hamburgerMenuLeft {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
} }
.header_hamburgerMenuRight { .header_hamburgerMenuRight {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
} }
.header_windowControls { .header_windowControls {
display: flex; display: flex;
width: 120px; width: 120px;
height: 34px; height: 34px;
justify-content: space-between; justify-content: space-between;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
} }
.header_windowControlsLeft { .header_windowControlsLeft {
left: 0px; left: 0px;
} }
.header_closeWindowLeft { .header_closeWindowLeft {
order: 1; order: 1;
} }
.header_minimizeWindowLeft { .header_minimizeWindowLeft {
order: 2; order: 2;
} }
.header_maximizeWindowLeft { .header_maximizeWindowLeft {
order: 3; order: 3;
} }
.header_closeWindow:hover { .header_closeWindow:hover {
color: #fe354e; color: #fe354e;
} }
.header_closeWindow:active { .header_closeWindow:active {
color: #fe354e; color: #fe354e;
} }
`}</style> `}</style>
</header> </header>
); );
} });
}
Header.displayName = 'Header';
export default Header;