diff --git a/lib/components/header.tsx b/lib/components/header.tsx index e48a3c40..7eb05231 100644 --- a/lib/components/header.tsx +++ b/lib/components/header.tsx @@ -81,9 +81,13 @@ export default class Header extends React.PureComponent { 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 + 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'; diff --git a/lib/components/new-tab.tsx b/lib/components/new-tab.tsx new file mode 100644 index 00000000..76ce6fa7 --- /dev/null +++ b/lib/components/new-tab.tsx @@ -0,0 +1,147 @@ +import React, {useRef, useState} from 'react'; +import {VscChevronDown} from '@react-icons/all-files/vsc/VscChevronDown'; +import type {configOptions} from '../config'; +import useClickAway from 'react-use/lib/useClickAway'; + +interface Props { + defaultProfile: string; + profiles: configOptions['profiles']; + openNewTab: (name: string) => void; + backgroundColor: string; + borderColor: string; + tabsVisible: boolean; +} +const isMac = /Mac/.test(navigator.userAgent); + +const DropdownButton = ({defaultProfile, profiles, openNewTab, backgroundColor, borderColor, tabsVisible}: Props) => { + const [dropdownOpen, setDropdownOpen] = useState(false); + const ref = useRef(null); + + const toggleDropdown = () => { + setDropdownOpen(!dropdownOpen); + }; + + useClickAway(ref, () => { + setDropdownOpen(false); + }); + + return ( +
e.stopPropagation()} + onBlur={() => setDropdownOpen(false)} + > + + + {dropdownOpen && ( +
    + {profiles.map((profile) => ( +
  • { + openNewTab(profile.name); + setDropdownOpen(false); + }} + className={`profile_dropdown_item ${ + profile.name === defaultProfile && profiles.length > 1 ? 'profile_dropdown_item_default' : '' + }`} + > + {profile.name} +
    • + ))} +
+ )} + + +
+ ); +}; + +export default DropdownButton; diff --git a/lib/components/tabs.tsx b/lib/components/tabs.tsx index eec52295..bd5a37de 100644 --- a/lib/components/tabs.tsx +++ b/lib/components/tabs.tsx @@ -4,6 +4,7 @@ import {decorate, getTabProps} from '../utils/plugins'; import Tab_ from './tab'; import type {TabsProps} from '../hyper'; +import DropdownButton from './new-tab'; const Tab = decorate(Tab_, 'Tab'); const isMac = /Mac/.test(navigator.userAgent); @@ -45,6 +46,7 @@ export default class Tabs extends React.PureComponent { ) ] : null} + 1} /> {this.props.customChildren}