mirror of
https://github.com/quine-global/hyper.git
synced 2026-01-12 20:18:41 -09:00
Convert tab, tabs and searchBox to function components
This commit is contained in:
Labhansh Agrawal
GitHub
parent
a793a1d9a4
commit
6c8d0433d2
3 changed files with 360 additions and 391 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import React, {useCallback} from 'react';
|
||||
import React, {useCallback, useRef, useEffect} from 'react';
|
||||
import type {SearchBoxProps} from '../hyper';
|
||||
import {VscArrowUp} from '@react-icons/all-files/vsc/VscArrowUp';
|
||||
import {VscArrowDown} from '@react-icons/all-files/vsc/VscArrowDown';
|
||||
|
|
@ -82,179 +82,152 @@ const SearchButton = ({
|
|||
);
|
||||
};
|
||||
|
||||
class SearchBox extends React.PureComponent<SearchBoxProps> {
|
||||
searchTerm: string;
|
||||
input: HTMLInputElement | null = null;
|
||||
searchButtonColors: SearchButtonColors;
|
||||
const SearchBox = (props: SearchBoxProps) => {
|
||||
const {
|
||||
caseSensitive,
|
||||
wholeWord,
|
||||
regex,
|
||||
results,
|
||||
toggleCaseSensitive,
|
||||
toggleWholeWord,
|
||||
toggleRegex,
|
||||
next,
|
||||
prev,
|
||||
close,
|
||||
backgroundColor,
|
||||
foregroundColor,
|
||||
borderColor,
|
||||
selectionColor,
|
||||
font
|
||||
} = props;
|
||||
|
||||
constructor(props: SearchBoxProps) {
|
||||
super(props);
|
||||
this.searchTerm = '';
|
||||
this.searchButtonColors = {
|
||||
backgroundColor: this.props.borderColor,
|
||||
selectionColor: this.props.selectionColor,
|
||||
foregroundColor: this.props.foregroundColor
|
||||
};
|
||||
}
|
||||
const searchTermRef = useRef<string>('');
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
handleChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
this.searchTerm = event.currentTarget.value;
|
||||
if (event.shiftKey && event.key === 'Enter') {
|
||||
this.props.prev(this.searchTerm);
|
||||
} else if (event.key === 'Enter') {
|
||||
this.props.next(this.searchTerm);
|
||||
}
|
||||
const handleChange = useCallback(
|
||||
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
searchTermRef.current = event.currentTarget.value;
|
||||
if (event.shiftKey && event.key === 'Enter') {
|
||||
prev(searchTermRef.current);
|
||||
} else if (event.key === 'Enter') {
|
||||
next(searchTermRef.current);
|
||||
}
|
||||
},
|
||||
[prev, next]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, [inputRef.current]);
|
||||
|
||||
const searchButtonColors: SearchButtonColors = {
|
||||
backgroundColor: borderColor,
|
||||
selectionColor,
|
||||
foregroundColor
|
||||
};
|
||||
|
||||
componentDidMount(): void {
|
||||
this.input?.focus();
|
||||
}
|
||||
return (
|
||||
<div className="flex-row search-container">
|
||||
<div className="flex-row search-box">
|
||||
<input className="search-input" type="text" onKeyDown={handleChange} ref={inputRef} placeholder="Search" />
|
||||
|
||||
render() {
|
||||
const {
|
||||
caseSensitive,
|
||||
wholeWord,
|
||||
regex,
|
||||
results,
|
||||
toggleCaseSensitive,
|
||||
toggleWholeWord,
|
||||
toggleRegex,
|
||||
next,
|
||||
prev,
|
||||
close,
|
||||
backgroundColor,
|
||||
foregroundColor,
|
||||
borderColor,
|
||||
selectionColor,
|
||||
font
|
||||
} = this.props;
|
||||
<SearchButton onClick={toggleCaseSensitive} active={caseSensitive} title="Match Case" {...searchButtonColors}>
|
||||
<VscCaseSensitive size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
return (
|
||||
<div className="flex-row search-container">
|
||||
<div className="flex-row search-box">
|
||||
<input
|
||||
className="search-input"
|
||||
type="text"
|
||||
onKeyDown={this.handleChange}
|
||||
ref={(input) => {
|
||||
this.input = input;
|
||||
}}
|
||||
placeholder="Search"
|
||||
></input>
|
||||
<SearchButton onClick={toggleWholeWord} active={wholeWord} title="Match Whole Word" {...searchButtonColors}>
|
||||
<VscWholeWord size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
<SearchButton
|
||||
onClick={toggleCaseSensitive}
|
||||
active={caseSensitive}
|
||||
title="Match Case"
|
||||
{...this.searchButtonColors}
|
||||
>
|
||||
<VscCaseSensitive size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
<SearchButton
|
||||
onClick={toggleWholeWord}
|
||||
active={wholeWord}
|
||||
title="Match Whole Word"
|
||||
{...this.searchButtonColors}
|
||||
>
|
||||
<VscWholeWord size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
<SearchButton
|
||||
onClick={toggleRegex}
|
||||
active={regex}
|
||||
title="Use Regular Expression"
|
||||
{...this.searchButtonColors}
|
||||
>
|
||||
<VscRegex size="14px" />
|
||||
</SearchButton>
|
||||
</div>
|
||||
|
||||
<span style={{minWidth: '60px', marginLeft: '4px'}}>
|
||||
{results === undefined
|
||||
? ''
|
||||
: results.resultCount === 0
|
||||
? 'No results'
|
||||
: `${results.resultIndex + 1} of ${results.resultCount}`}
|
||||
</span>
|
||||
|
||||
<div className="flex-row">
|
||||
<SearchButton
|
||||
onClick={() => prev(this.searchTerm)}
|
||||
active={false}
|
||||
title="Previous Match"
|
||||
{...this.searchButtonColors}
|
||||
>
|
||||
<VscArrowUp size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
<SearchButton
|
||||
onClick={() => next(this.searchTerm)}
|
||||
active={false}
|
||||
title="Next Match"
|
||||
{...this.searchButtonColors}
|
||||
>
|
||||
<VscArrowDown size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
<SearchButton onClick={() => close()} active={false} title="Close" {...this.searchButtonColors}>
|
||||
<VscClose size="14px" />
|
||||
</SearchButton>
|
||||
</div>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.search-container {
|
||||
background-color: ${backgroundColor};
|
||||
border: 1px solid ${borderColor};
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 4px;
|
||||
z-index: 10;
|
||||
padding: 4px;
|
||||
font-family: ${font};
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: ${foregroundColor};
|
||||
align-self: stretch;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
outline: ${borderColor} solid 1px;
|
||||
background-color: ${backgroundColor};
|
||||
color: ${foregroundColor};
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: ${foregroundColor};
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
outline: ${selectionColor} solid 2px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<SearchButton onClick={toggleRegex} active={regex} title="Use Regular Expression" {...searchButtonColors}>
|
||||
<VscRegex size="14px" />
|
||||
</SearchButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
<span style={{minWidth: '60px', marginLeft: '4px'}}>
|
||||
{results === undefined
|
||||
? ''
|
||||
: results.resultCount === 0
|
||||
? 'No results'
|
||||
: `${results.resultIndex + 1} of ${results.resultCount}`}
|
||||
</span>
|
||||
|
||||
<div className="flex-row">
|
||||
<SearchButton
|
||||
onClick={() => prev(searchTermRef.current)}
|
||||
active={false}
|
||||
title="Previous Match"
|
||||
{...searchButtonColors}
|
||||
>
|
||||
<VscArrowUp size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
<SearchButton
|
||||
onClick={() => next(searchTermRef.current)}
|
||||
active={false}
|
||||
title="Next Match"
|
||||
{...searchButtonColors}
|
||||
>
|
||||
<VscArrowDown size="14px" />
|
||||
</SearchButton>
|
||||
|
||||
<SearchButton onClick={close} active={false} title="Close" {...searchButtonColors}>
|
||||
<VscClose size="14px" />
|
||||
</SearchButton>
|
||||
</div>
|
||||
|
||||
<style jsx>
|
||||
{`
|
||||
.search-container {
|
||||
background-color: ${backgroundColor};
|
||||
border: 1px solid ${borderColor};
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 4px;
|
||||
z-index: 10;
|
||||
padding: 4px;
|
||||
font-family: ${font};
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: ${foregroundColor};
|
||||
align-self: stretch;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
outline: ${borderColor} solid 1px;
|
||||
background-color: ${backgroundColor};
|
||||
color: ${foregroundColor};
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: ${foregroundColor};
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
outline: ${selectionColor} solid 2px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBox;
|
||||
|
|
|
|||
|
|
@ -1,164 +1,160 @@
|
|||
import React from 'react';
|
||||
import type {TabProps} from '../hyper';
|
||||
|
||||
export default class Tab extends React.PureComponent<TabProps> {
|
||||
constructor(props: TabProps) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleClick = (event: React.MouseEvent) => {
|
||||
const Tab = (props: TabProps) => {
|
||||
const handleClick = (event: React.MouseEvent) => {
|
||||
const isLeftClick = event.nativeEvent.which === 1;
|
||||
|
||||
if (isLeftClick && !this.props.isActive) {
|
||||
this.props.onSelect();
|
||||
if (isLeftClick && !props.isActive) {
|
||||
props.onSelect();
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseUp = (event: React.MouseEvent) => {
|
||||
const handleMouseUp = (event: React.MouseEvent) => {
|
||||
const isMiddleClick = event.nativeEvent.which === 2;
|
||||
|
||||
if (isMiddleClick) {
|
||||
this.props.onClose();
|
||||
props.onClose();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props;
|
||||
const {isActive, isFirst, isLast, borderColor, hasActivity} = props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<li
|
||||
onClick={this.props.onClick}
|
||||
style={{borderColor}}
|
||||
className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
|
||||
isFirst && isActive ? 'tab_firstActive' : ''
|
||||
} ${hasActivity ? 'tab_hasActivity' : ''}`}
|
||||
return (
|
||||
<>
|
||||
<li
|
||||
onClick={props.onClick}
|
||||
style={{borderColor}}
|
||||
className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
|
||||
isFirst && isActive ? 'tab_firstActive' : ''
|
||||
} ${hasActivity ? 'tab_hasActivity' : ''}`}
|
||||
>
|
||||
{props.customChildrenBefore}
|
||||
<span
|
||||
className={`tab_text ${isLast ? 'tab_textLast' : ''} ${isActive ? 'tab_textActive' : ''}`}
|
||||
onClick={handleClick}
|
||||
onMouseUp={handleMouseUp}
|
||||
>
|
||||
{this.props.customChildrenBefore}
|
||||
<span
|
||||
className={`tab_text ${isLast ? 'tab_textLast' : ''} ${isActive ? 'tab_textActive' : ''}`}
|
||||
onClick={this.handleClick}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
>
|
||||
<span title={this.props.text} className="tab_textInner">
|
||||
{this.props.text}
|
||||
</span>
|
||||
<span title={props.text} className="tab_textInner">
|
||||
{props.text}
|
||||
</span>
|
||||
<i className="tab_icon" onClick={this.props.onClose}>
|
||||
<svg className="tab_shape">
|
||||
<use xlinkHref="./renderer/assets/icons.svg#close-tab" />
|
||||
</svg>
|
||||
</i>
|
||||
{this.props.customChildren}
|
||||
</li>
|
||||
</span>
|
||||
<i className="tab_icon" onClick={props.onClose}>
|
||||
<svg className="tab_shape">
|
||||
<use xlinkHref="./renderer/assets/icons.svg#close-tab" />
|
||||
</svg>
|
||||
</i>
|
||||
{props.customChildren}
|
||||
</li>
|
||||
|
||||
<style jsx>{`
|
||||
.tab_tab {
|
||||
color: #ccc;
|
||||
border-color: #ccc;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
list-style-type: none;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
<style jsx>{`
|
||||
.tab_tab {
|
||||
color: #ccc;
|
||||
border-color: #ccc;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-left-style: solid;
|
||||
list-style-type: none;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab_tab:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
.tab_tab:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.tab_first {
|
||||
border-left-width: 0;
|
||||
padding-left: 1px;
|
||||
}
|
||||
.tab_first {
|
||||
border-left-width: 0;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.tab_firstActive {
|
||||
border-left-width: 1px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.tab_firstActive {
|
||||
border-left-width: 1px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.tab_active {
|
||||
color: #fff;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.tab_active:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.tab_active {
|
||||
color: #fff;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.tab_active:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab_hasActivity {
|
||||
color: #50e3c2;
|
||||
}
|
||||
.tab_hasActivity {
|
||||
color: #50e3c2;
|
||||
}
|
||||
|
||||
.tab_hasActivity:hover {
|
||||
color: #50e3c2;
|
||||
}
|
||||
.tab_hasActivity:hover {
|
||||
color: #50e3c2;
|
||||
}
|
||||
|
||||
.tab_text {
|
||||
transition: color 0.2s ease;
|
||||
height: 34px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tab_text {
|
||||
transition: color 0.2s ease;
|
||||
height: 34px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab_textInner {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tab_textInner {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab_icon {
|
||||
transition: opacity 0.2s ease, color 0.2s ease, transform 0.25s ease, background-color 0.1s ease;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 10px;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 100%;
|
||||
color: #e9e9e9;
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.tab_icon {
|
||||
transition: opacity 0.2s ease, color 0.2s ease, transform 0.25s ease, background-color 0.1s ease;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 10px;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 100%;
|
||||
color: #e9e9e9;
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.tab_icon:hover {
|
||||
background-color: rgba(255, 255, 255, 0.13);
|
||||
color: #fff;
|
||||
}
|
||||
.tab_icon:hover {
|
||||
background-color: rgba(255, 255, 255, 0.13);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab_icon:active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #909090;
|
||||
}
|
||||
.tab_icon:active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
.tab_tab:hover .tab_icon {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
.tab_tab:hover .tab_icon {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.tab_shape {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
`}</style>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
.tab_shape {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tab;
|
||||
|
|
|
|||
|
|
@ -9,103 +9,103 @@ import DropdownButton from './new-tab';
|
|||
const Tab = decorate(Tab_, 'Tab');
|
||||
const isMac = /Mac/.test(navigator.userAgent);
|
||||
|
||||
export default class Tabs extends React.PureComponent<TabsProps> {
|
||||
render() {
|
||||
const {tabs = [], borderColor, onChange, onClose, fullScreen} = this.props;
|
||||
const Tabs = (props: TabsProps) => {
|
||||
const {tabs = [], borderColor, onChange, onClose, fullScreen} = props;
|
||||
|
||||
const hide = !isMac && tabs.length === 1;
|
||||
const hide = !isMac && tabs.length === 1;
|
||||
|
||||
return (
|
||||
<nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`}>
|
||||
{this.props.customChildrenBefore}
|
||||
{tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
|
||||
{tabs.length > 1
|
||||
? [
|
||||
<ul key="list" className={`tabs_list ${fullScreen && isMac ? 'tabs_fullScreen' : ''}`}>
|
||||
{tabs.map((tab, i) => {
|
||||
const {uid, title, isActive, hasActivity} = tab;
|
||||
const props = getTabProps(tab, this.props, {
|
||||
text: title === '' ? 'Shell' : title,
|
||||
isFirst: i === 0,
|
||||
isLast: tabs.length - 1 === i,
|
||||
borderColor,
|
||||
isActive,
|
||||
hasActivity,
|
||||
onSelect: onChange.bind(null, uid),
|
||||
onClose: onClose.bind(null, uid)
|
||||
});
|
||||
return <Tab key={`tab-${uid}`} {...props} />;
|
||||
})}
|
||||
</ul>,
|
||||
isMac && (
|
||||
<div
|
||||
key="shim"
|
||||
style={{borderColor}}
|
||||
className={`tabs_borderShim ${fullScreen ? 'tabs_borderShimUndo' : ''}`}
|
||||
/>
|
||||
)
|
||||
]
|
||||
: null}
|
||||
<DropdownButton {...this.props} tabsVisible={tabs.length > 1} />
|
||||
{this.props.customChildren}
|
||||
return (
|
||||
<nav className={`tabs_nav ${hide ? 'tabs_hiddenNav' : ''}`}>
|
||||
{props.customChildrenBefore}
|
||||
{tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
|
||||
{tabs.length > 1 ? (
|
||||
<>
|
||||
<ul key="list" className={`tabs_list ${fullScreen && isMac ? 'tabs_fullScreen' : ''}`}>
|
||||
{tabs.map((tab, i) => {
|
||||
const {uid, title, isActive, hasActivity} = tab;
|
||||
const tabProps = getTabProps(tab, props, {
|
||||
text: title === '' ? 'Shell' : title,
|
||||
isFirst: i === 0,
|
||||
isLast: tabs.length - 1 === i,
|
||||
borderColor,
|
||||
isActive,
|
||||
hasActivity,
|
||||
onSelect: onChange.bind(null, uid),
|
||||
onClose: onClose.bind(null, uid)
|
||||
});
|
||||
return <Tab key={`tab-${uid}`} {...tabProps} />;
|
||||
})}
|
||||
</ul>
|
||||
{isMac && (
|
||||
<div
|
||||
key="shim"
|
||||
style={{borderColor}}
|
||||
className={`tabs_borderShim ${fullScreen ? 'tabs_borderShimUndo' : ''}`}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
<DropdownButton {...props} tabsVisible={tabs.length > 1} />
|
||||
{props.customChildren}
|
||||
|
||||
<style jsx>{`
|
||||
.tabs_nav {
|
||||
font-size: 12px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
vertical-align: middle;
|
||||
color: #9b9b9b;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: ${isMac ? 'drag' : ''};
|
||||
top: ${isMac ? '0px' : '34px'};
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
<style jsx>{`
|
||||
.tabs_nav {
|
||||
font-size: 12px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
vertical-align: middle;
|
||||
color: #9b9b9b;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: ${isMac ? 'drag' : ''};
|
||||
top: ${isMac ? '0px' : '34px'};
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.tabs_hiddenNav {
|
||||
display: none;
|
||||
}
|
||||
.tabs_hiddenNav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs_title {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 76px;
|
||||
padding-right: 76px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.tabs_title {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 76px;
|
||||
padding-right: 76px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tabs_list {
|
||||
max-height: 34px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-left: ${isMac ? '76px' : '0'};
|
||||
flex-grow: 1;
|
||||
}
|
||||
.tabs_list {
|
||||
max-height: 34px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-left: ${isMac ? '76px' : '0'};
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tabs_fullScreen {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.tabs_fullScreen {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.tabs_borderShim {
|
||||
position: absolute;
|
||||
width: 76px;
|
||||
bottom: 0;
|
||||
border-color: #ccc;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.tabs_borderShim {
|
||||
position: absolute;
|
||||
width: 76px;
|
||||
bottom: 0;
|
||||
border-color: #ccc;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.tabs_borderShimUndo {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
`}</style>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
.tabs_borderShimUndo {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
`}</style>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
|
|
|
|||
Loading…
Reference in a new issue