Fixed auto-focus in prompt and env dropdown

This commit is contained in:
Gregory Schier
2023-10-28 22:14:12 -07:00
parent 3206651248
commit 2b21e28096
5 changed files with 25 additions and 23 deletions

View File

@@ -36,21 +36,17 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
[activeEnvironment?.id], [activeEnvironment?.id],
), ),
{ type: 'separator', label: 'Environments' }, { type: 'separator', label: 'Environments' },
...((environments.length > 0 {
? [ key: 'edit',
{ label: 'Manage Environments',
key: 'edit', leftSlot: <Icon icon="gear" />,
label: 'Manage Environments', onSelect: async () => {
leftSlot: <Icon icon="gear" />, dialog.show({
onSelect: async () => { title: 'Environments',
dialog.show({ render: () => <EnvironmentEditDialog />,
title: 'Environments', });
render: () => <EnvironmentEditDialog />, },
}); },
},
},
]
: []) as DropdownItem[]),
], ],
[activeEnvironment, dialog, environments, routes], [activeEnvironment, dialog, environments, routes],
); );

View File

@@ -23,7 +23,6 @@ import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown'; import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
import { IconButton } from './core/IconButton'; import { IconButton } from './core/IconButton';
import { useCreateRequest } from '../hooks/useCreateRequest'; import { useCreateRequest } from '../hooks/useCreateRequest';
import { w } from '@tauri-apps/api/clipboard-79413165';
interface Props { interface Props {
className?: string; className?: string;
@@ -156,7 +155,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
); );
return ( return (
<div aria-hidden={hidden} className="relative h-full"> <div aria-hidden={hidden} className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
<HStack className="mt-1 pt-1 mx-2" justifyContent="between" alignItems="center" space={1}> <HStack className="mt-1 pt-1 mx-2" justifyContent="between" alignItems="center" space={1}>
<WorkspaceActionsDropdown forDropdown={false} className="text-left mb-0" justify="start" /> <WorkspaceActionsDropdown forDropdown={false} className="text-left mb-0" justify="start" />
<IconButton <IconButton
@@ -176,12 +175,12 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
tabIndex={hidden ? -1 : 0} tabIndex={hidden ? -1 : 0}
className={classNames( className={classNames(
className, className,
'h-full relative grid grid-rows-[auto_minmax(0,1fr)_auto]', 'h-full grid grid-rows-[auto_minmax(0,1fr)_auto]',
)} )}
> >
<VStack <VStack
as="ul" as="ul"
className="relative pb-3 overflow-y-auto overflow-x-visible pt-2" className="pb-3 overflow-y-auto overflow-x-visible pt-2"
draggable={false} draggable={false}
> >
<SidebarItems <SidebarItems
@@ -249,7 +248,7 @@ function SidebarItems({ requests, focused, selectedIndex, onSelect, onClearSelec
updateRequest.mutate({ id: requestId, update }); updateRequest.mutate({ id: requestId, update });
} }
}, },
[hoveredIndex, requests, updateRequest], [hoveredIndex, requests, updateRequest, onClearSelected],
); );
return ( return (

View File

@@ -28,6 +28,7 @@ export interface EditorProps {
contentType?: string | null; contentType?: string | null;
forceUpdateKey?: string; forceUpdateKey?: string;
autoFocus?: boolean; autoFocus?: boolean;
autoSelect?: boolean;
defaultValue?: string | null; defaultValue?: string | null;
placeholder?: string; placeholder?: string;
tooltipContainer?: HTMLElement; tooltipContainer?: HTMLElement;
@@ -50,6 +51,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
heightMode, heightMode,
contentType, contentType,
autoFocus, autoFocus,
autoSelect,
placeholder, placeholder,
useTemplating, useTemplating,
defaultValue, defaultValue,
@@ -170,7 +172,12 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
view = new EditorView({ state, parent: container }); view = new EditorView({ state, parent: container });
cm.current = { view, languageCompartment }; cm.current = { view, languageCompartment };
syncGutterBg({ parent: container, className }); syncGutterBg({ parent: container, className });
if (autoFocus) view.focus(); if (autoFocus) {
view.focus();
}
if (autoSelect) {
view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
}
} catch (e) { } catch (e) {
console.log('Failed to initialize Codemirror', e); console.log('Failed to initialize Codemirror', e);
} }

View File

@@ -8,7 +8,7 @@ import { IconButton } from './IconButton';
import { HStack, VStack } from './Stacks'; import { HStack, VStack } from './Stacks';
export type InputProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> & export type InputProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &
Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete' | 'forceUpdateKey'> & { Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete' | 'forceUpdateKey' | 'autoFocus' | 'autoSelect'> & {
name: string; name: string;
type?: 'text' | 'password'; type?: 'text' | 'password';
label: string; label: string;
@@ -24,7 +24,6 @@ export type InputProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange' | 'on
size?: 'sm' | 'md' | 'auto'; size?: 'sm' | 'md' | 'auto';
className?: string; className?: string;
placeholder?: string; placeholder?: string;
autoFocus?: boolean;
validate?: (v: string) => boolean; validate?: (v: string) => boolean;
require?: boolean; require?: boolean;
}; };

View File

@@ -30,6 +30,7 @@ export function Prompt({ onHide, label, name, defaultValue, onResult }: PromptPr
<Input <Input
hideLabel hideLabel
require require
autoSelect
label={label} label={label}
name={name} name={name}
defaultValue={defaultValue} defaultValue={defaultValue}