mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-11 10:13:52 +01:00
parent
bda1daf49f
commit
7050c90378
100
src/ScriptEditor/ui/Tab.tsx
Normal file
100
src/ScriptEditor/ui/Tab.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { DraggableProvided } from "react-beautiful-dnd";
|
||||
|
||||
import Button from "@mui/material/Button";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
|
||||
import SyncIcon from "@mui/icons-material/Sync";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
|
||||
import { Settings } from "../../Settings/Settings";
|
||||
|
||||
interface IProps {
|
||||
provided: DraggableProvided;
|
||||
title: string;
|
||||
isActive: boolean;
|
||||
isExternal: boolean;
|
||||
|
||||
onClick: () => void;
|
||||
onClose: () => void;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
const tabMargin = 5;
|
||||
const tabIconWidth = 25;
|
||||
const tabIconHeight = 38.5;
|
||||
|
||||
export function Tab({ provided, title, isActive, isExternal, onClick, onClose, onUpdate }: IProps) {
|
||||
const colorProps = isActive
|
||||
? {
|
||||
background: Settings.theme.button,
|
||||
borderColor: Settings.theme.button,
|
||||
color: Settings.theme.primary,
|
||||
}
|
||||
: {
|
||||
background: Settings.theme.backgroundsecondary,
|
||||
borderColor: Settings.theme.backgroundsecondary,
|
||||
color: Settings.theme.secondary,
|
||||
};
|
||||
|
||||
if (isExternal) {
|
||||
colorProps.color = Settings.theme.info;
|
||||
}
|
||||
const iconButtonStyle = {
|
||||
maxWidth: tabIconWidth,
|
||||
minWidth: tabIconWidth,
|
||||
minHeight: tabIconHeight,
|
||||
maxHeight: tabIconHeight,
|
||||
...colorProps,
|
||||
};
|
||||
|
||||
const tabRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (tabRef.current && isActive) {
|
||||
tabRef.current?.scrollIntoView();
|
||||
}
|
||||
}, [isActive]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={(element) => {
|
||||
tabRef.current = element;
|
||||
provided.innerRef(element);
|
||||
}}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={{
|
||||
...provided.draggableProps.style,
|
||||
marginRight: tabMargin,
|
||||
flexShrink: 0,
|
||||
border: "1px solid " + Settings.theme.well,
|
||||
}}
|
||||
>
|
||||
<Tooltip title={title}>
|
||||
<Button
|
||||
onClick={onClick}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
if (e.button === 1) onClose();
|
||||
}}
|
||||
style={{
|
||||
minHeight: tabIconHeight,
|
||||
overflow: "hidden",
|
||||
...colorProps,
|
||||
}}
|
||||
>
|
||||
<span style={{ overflow: "hidden", direction: "rtl", textOverflow: "ellipsis" }}>{title}</span>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="Overwrite editor content with saved file content">
|
||||
<Button onClick={onUpdate} style={iconButtonStyle}>
|
||||
<SyncIcon fontSize="small" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button onClick={onClose} style={iconButtonStyle}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -1,20 +1,24 @@
|
||||
import React, { useState } from "react";
|
||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||
import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
|
||||
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
|
||||
import { Box, Button, TextField, Tooltip } from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import SyncIcon from "@mui/icons-material/Sync";
|
||||
|
||||
import { useRerender } from "../../ui/React/hooks";
|
||||
import { useBoolean, useRerender } from "../../ui/React/hooks";
|
||||
import { Settings } from "../../Settings/Settings";
|
||||
|
||||
import { dirty, reorder } from "./utils";
|
||||
import { OpenScript } from "./OpenScript";
|
||||
import { Tab } from "./Tab";
|
||||
|
||||
const tabsMaxWidth = 1640;
|
||||
const tabMargin = 5;
|
||||
const tabIconWidth = 25;
|
||||
const searchWidth = 180;
|
||||
|
||||
interface IProps {
|
||||
scripts: OpenScript[];
|
||||
@ -27,160 +31,123 @@ interface IProps {
|
||||
|
||||
export function Tabs({ scripts, currentScript, onTabClick, onTabClose, onTabUpdate }: IProps) {
|
||||
const [filter, setFilter] = useState("");
|
||||
const [isSearchTooltipOpen, { on: openSearchTooltip, off: closeSearchTooltip }] = useBoolean(false);
|
||||
const [searchExpanded, setSearchExpanded] = useState(false);
|
||||
const rerender = useRerender();
|
||||
|
||||
function onDragEnd(result: any): void {
|
||||
const filteredScripts = Object.values(scripts)
|
||||
.map((script, originalIndex) => ({ script, originalIndex }))
|
||||
.filter(({ script }) => script.hostname.includes(filter) || script.path.includes(filter));
|
||||
|
||||
function onDragEnd(result: DropResult): void {
|
||||
// Dropped outside of the list
|
||||
if (!result.destination) return;
|
||||
reorder(scripts, result.source.index, result.destination.index);
|
||||
reorder(
|
||||
scripts,
|
||||
filteredScripts[result.source.index].originalIndex,
|
||||
filteredScripts[result.destination.index].originalIndex,
|
||||
);
|
||||
rerender();
|
||||
}
|
||||
|
||||
const filteredOpenScripts = Object.values(scripts).filter(
|
||||
(script) => script.hostname.includes(filter) || script.path.includes(filter),
|
||||
);
|
||||
|
||||
function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
setFilter(event.target.value);
|
||||
}
|
||||
|
||||
function handleExpandSearch(): void {
|
||||
function toggleSearch(): void {
|
||||
setFilter("");
|
||||
setSearchExpanded(!searchExpanded);
|
||||
closeSearchTooltip();
|
||||
}
|
||||
|
||||
function handleScroll(e: React.WheelEvent<HTMLDivElement>): void {
|
||||
e.currentTarget.scrollLeft += e.deltaY;
|
||||
}
|
||||
|
||||
const tabMaxWidth = filteredOpenScripts.length ? tabsMaxWidth / filteredOpenScripts.length - tabMargin : 0;
|
||||
const tabTextWidth = tabMaxWidth - tabIconWidth * 2;
|
||||
return (
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="tabs" direction="horizontal">
|
||||
{(provided, snapshot) => (
|
||||
<Box
|
||||
maxWidth={`${tabsMaxWidth}px`}
|
||||
display="flex"
|
||||
flexGrow="0"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
whiteSpace="nowrap"
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
style={{
|
||||
backgroundColor: snapshot.isDraggingOver
|
||||
? Settings.theme.backgroundsecondary
|
||||
: Settings.theme.backgroundprimary,
|
||||
overflowX: "scroll",
|
||||
}}
|
||||
>
|
||||
<Tooltip title={"Search Open Scripts"}>
|
||||
{searchExpanded ? (
|
||||
<TextField
|
||||
value={filter}
|
||||
onChange={handleFilterChange}
|
||||
autoFocus
|
||||
InputProps={{
|
||||
startAdornment: <SearchIcon />,
|
||||
spellCheck: false,
|
||||
endAdornment: <CloseIcon onClick={handleExpandSearch} />,
|
||||
// TODO: reapply
|
||||
// sx: { minWidth: 200 },
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Button onClick={handleExpandSearch}>
|
||||
<SearchIcon />
|
||||
</Button>
|
||||
)}
|
||||
</Tooltip>
|
||||
{filteredOpenScripts.map(({ path: fileName, hostname }, index) => {
|
||||
const editingCurrentScript =
|
||||
currentScript?.path === filteredOpenScripts[index].path &&
|
||||
currentScript.hostname === filteredOpenScripts[index].hostname;
|
||||
const externalScript = hostname !== "home";
|
||||
const colorProps = editingCurrentScript
|
||||
? {
|
||||
background: Settings.theme.button,
|
||||
borderColor: Settings.theme.button,
|
||||
color: Settings.theme.primary,
|
||||
}
|
||||
: {
|
||||
background: Settings.theme.backgroundsecondary,
|
||||
borderColor: Settings.theme.backgroundsecondary,
|
||||
color: Settings.theme.secondary,
|
||||
};
|
||||
<Box display="flex" flexGrow="0" flexDirection="row" alignItems="center">
|
||||
<Tooltip
|
||||
title={"Search Open Scripts"}
|
||||
open={isSearchTooltipOpen}
|
||||
onOpen={openSearchTooltip}
|
||||
onClose={closeSearchTooltip}
|
||||
>
|
||||
<span style={{ marginRight: 5 }}>
|
||||
{searchExpanded ? (
|
||||
<TextField
|
||||
value={filter}
|
||||
onChange={handleFilterChange}
|
||||
autoFocus
|
||||
sx={{ minWidth: searchWidth, maxWidth: searchWidth }}
|
||||
InputProps={{
|
||||
startAdornment: <SearchIcon />,
|
||||
spellCheck: false,
|
||||
endAdornment: (
|
||||
<IconButton onClick={toggleSearch}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Button onClick={toggleSearch}>
|
||||
<SearchIcon />
|
||||
</Button>
|
||||
)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="tabs" direction="horizontal">
|
||||
{(provided, snapshot) => (
|
||||
<Box
|
||||
maxWidth={`${tabsMaxWidth}px`}
|
||||
display="flex"
|
||||
flexGrow="1"
|
||||
flexDirection="row"
|
||||
alignItems="center"
|
||||
whiteSpace="nowrap"
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
style={{
|
||||
backgroundColor: snapshot.isDraggingOver
|
||||
? Settings.theme.backgroundsecondary
|
||||
: Settings.theme.backgroundprimary,
|
||||
overflowX: "scroll",
|
||||
}}
|
||||
onWheel={handleScroll}
|
||||
>
|
||||
{filteredScripts.map(({ script, originalIndex }, index) => {
|
||||
const { path: fileName, hostname } = script;
|
||||
const isActive = currentScript?.path === script.path && currentScript.hostname === script.hostname;
|
||||
|
||||
if (externalScript) {
|
||||
colorProps.color = Settings.theme.info;
|
||||
}
|
||||
const iconButtonStyle = {
|
||||
maxWidth: `${tabIconWidth}px`,
|
||||
minWidth: `${tabIconWidth}px`,
|
||||
minHeight: "38.5px",
|
||||
maxHeight: "38.5px",
|
||||
...colorProps,
|
||||
};
|
||||
const title = `${hostname}:~${fileName.startsWith("/") ? "" : "/"}${fileName} ${dirty(scripts, index)}`;
|
||||
|
||||
const scriptTabText = `${hostname}:~${fileName.startsWith("/") ? "" : "/"}${fileName} ${dirty(
|
||||
scripts,
|
||||
index,
|
||||
)}`;
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={fileName + hostname}
|
||||
draggableId={fileName + hostname}
|
||||
index={index}
|
||||
disableInteractiveElementBlocking={true}
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={{
|
||||
...provided.draggableProps.style,
|
||||
// maxWidth: `${tabMaxWidth}px`,
|
||||
marginRight: `${tabMargin}px`,
|
||||
flexShrink: 0,
|
||||
border: "1px solid " + Settings.theme.well,
|
||||
}}
|
||||
>
|
||||
<Tooltip title={scriptTabText}>
|
||||
<Button
|
||||
onClick={() => onTabClick(index)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
if (e.button === 1) onTabClose(index);
|
||||
}}
|
||||
style={{
|
||||
maxWidth: `${tabTextWidth}px`,
|
||||
minHeight: "38.5px",
|
||||
overflow: "hidden",
|
||||
...colorProps,
|
||||
}}
|
||||
>
|
||||
<span style={{ overflow: "hidden", direction: "rtl", textOverflow: "ellipsis" }}>
|
||||
{scriptTabText}
|
||||
</span>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="Overwrite editor content with saved file content">
|
||||
<Button onClick={() => onTabUpdate(index)} style={iconButtonStyle}>
|
||||
<SyncIcon fontSize="small" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button onClick={() => onTabClose(index)} style={iconButtonStyle}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
{provided.placeholder}
|
||||
</Box>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
return (
|
||||
<Draggable
|
||||
key={fileName + hostname}
|
||||
draggableId={fileName + hostname}
|
||||
index={index}
|
||||
disableInteractiveElementBlocking
|
||||
>
|
||||
{(provided) => (
|
||||
<Tab
|
||||
provided={provided}
|
||||
title={title}
|
||||
isActive={isActive}
|
||||
isExternal={hostname !== "home"}
|
||||
onClick={() => onTabClick(originalIndex)}
|
||||
onClose={() => onTabClose(originalIndex)}
|
||||
onUpdate={() => onTabUpdate(originalIndex)}
|
||||
/>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
{provided.placeholder}
|
||||
</Box>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user