Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Auto-select workspace name (#1464)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-12-10 12:26:42 -08:00 committed by GitHub
parent 9805ce4921
commit f7875bc4f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/app/element/input.tsx
View File

@ -67,6 +67,7 @@ interface InputProps {
required?: boolean; required?: boolean;
maxLength?: number; maxLength?: number;
autoFocus?: boolean; autoFocus?: boolean;
autoSelect?: boolean;
disabled?: boolean; disabled?: boolean;
isNumber?: boolean; isNumber?: boolean;
inputRef?: React.MutableRefObject<any>; inputRef?: React.MutableRefObject<any>;
@ -88,6 +89,7 @@ const Input = memo(
required, required,
maxLength, maxLength,
autoFocus, autoFocus,
autoSelect,
disabled, disabled,
isNumber, isNumber,
manageFocus, manageFocus,
@ -114,6 +116,9 @@ const Input = memo(
}; };
const handleFocus = () => { const handleFocus = () => {
if (autoSelect) {
inputRef.current?.select();
}
manageFocus?.(true); manageFocus?.(true);
onFocus?.(); onFocus?.();
}; };

2
frontend/app/tab/workspaceswitcher.scss
View File

@ -145,7 +145,7 @@
padding: 0; padding: 0;
} }
.color-icon-selector { .workspace-editor {
width: 100%; width: 100%;
.input { .input {
margin: 5px 0 10px; margin: 5px 0 10px;

12
frontend/app/tab/workspaceswitcher.tsx
View File

@ -106,7 +106,7 @@ const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSel
); );
}); });
interface ColorAndIconSelectorProps { interface WorkspaceEditorProps {
title: string; title: string;
icon: string; icon: string;
color: string; color: string;
@ -116,7 +116,7 @@ interface ColorAndIconSelectorProps {
onIconChange: (newIcon: string) => void; onIconChange: (newIcon: string) => void;
onDeleteWorkspace: () => void; onDeleteWorkspace: () => void;
} }
const ColorAndIconSelector = memo( const WorkspaceEditor = memo(
({ ({
title, title,
icon, icon,
@ -126,23 +126,25 @@ const ColorAndIconSelector = memo(
onColorChange, onColorChange,
onIconChange, onIconChange,
onDeleteWorkspace, onDeleteWorkspace,
}: ColorAndIconSelectorProps) => { }: WorkspaceEditorProps) => {
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
if (focusInput && inputRef.current) { if (focusInput && inputRef.current) {
inputRef.current.focus(); inputRef.current.focus();
inputRef.current.select();
} }
}, [focusInput]); }, [focusInput]);
return ( return (
<div className="color-icon-selector"> <div className="workspace-editor">
<Input <Input
ref={inputRef} ref={inputRef}
className={clsx("vertical-padding-3", { error: title === "" })} className={clsx("vertical-padding-3", { error: title === "" })}
onChange={onTitleChange} onChange={onTitleChange}
value={title} value={title}
autoFocus autoFocus
autoSelect
/> />
<ColorSelector selectedColor={color} colors={colors} onSelect={onColorChange} /> <ColorSelector selectedColor={color} colors={colors} onSelect={onColorChange} />
<IconSelector selectedIcon={icon} icons={icons} onSelect={onIconChange} /> <IconSelector selectedIcon={icon} icons={icons} onSelect={onIconChange} />
@ -354,7 +356,7 @@ const WorkspaceSwitcherItem = ({
</div> </div>
</ExpandableMenuItemGroupTitle> </ExpandableMenuItemGroupTitle>
<ExpandableMenuItem> <ExpandableMenuItem>
<ColorAndIconSelector <WorkspaceEditor
title={workspace.name} title={workspace.name}
icon={workspace.icon} icon={workspace.icon}
color={workspace.color} color={workspace.color}