Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

🐛 Fixed Admin navigation settings, pressing ENTER will now create a new navigation item (#21591)

Browse source 
Ref
https://linear.app/ghost/issue/DES-73/enter-should-create-new-navigation-itemmove-to-next-field
This commit is contained in:
Princi Vershwal 2024-11-12 10:40:15 +05:30 committed by GitHub
parent c41bc5c237
commit 7f158c0e18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/admin-x-settings/src/components/settings/site/navigation/NavigationEditForm.tsx
View file

@ -26,6 +26,7 @@ const NavigationEditForm: React.FC<{
<Icon colorClass='text-grey-300 dark:text-grey-900 mt-1' name='add' size='sm' /> <Icon colorClass='text-grey-300 dark:text-grey-900 mt-1' name='add' size='sm' />
<NavigationItemEditor <NavigationItemEditor
action={<Button className='mx-2 mt-1 self-center rounded bg-green p-1' data-testid="add-button" icon="add" iconColorClass='text-white' size='sm' unstyled onClick={navigation.addItem} />} action={<Button className='mx-2 mt-1 self-center rounded bg-green p-1' data-testid="add-button" icon="add" iconColorClass='text-white' size='sm' unstyled onClick={navigation.addItem} />}
addItem={navigation.addItem}
baseUrl={baseUrl} baseUrl={baseUrl}
className="mt-1" className="mt-1"
clearError={key => navigation.clearError(navigation.newItem.id, key)} clearError={key => navigation.clearError(navigation.newItem.id, key)}

28
apps/admin-x-settings/src/components/settings/site/navigation/NavigationItemEditor.tsx
View file

@ -1,7 +1,7 @@
import React, {ReactNode} from 'react'; import React, {ReactNode} from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import {EditableItem, NavigationItem, NavigationItemErrors} from '../../../../hooks/site/useNavigationEditor'; import {EditableItem, NavigationItem, NavigationItemErrors} from '../../../../hooks/site/useNavigationEditor';
import {TextField, URLTextField} from '@tryghost/admin-x-design-system'; import {TextField, URLTextField, formatUrl} from '@tryghost/admin-x-design-system';
export type NavigationItemEditorProps = React.HTMLAttributes<HTMLDivElement> & { export type NavigationItemEditorProps = React.HTMLAttributes<HTMLDivElement> & {
baseUrl: string; baseUrl: string;
@ -12,9 +12,10 @@ export type NavigationItemEditorProps = React.HTMLAttributes<HTMLDivElement> & {
unstyled?: boolean unstyled?: boolean
textFieldClasses?: string textFieldClasses?: string
action?: ReactNode action?: ReactNode
addItem?: () => void
} }
const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, item, updateItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, ...props}) => { const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, item, updateItem, addItem, clearError, labelPlaceholder, unstyled, textFieldClasses, action, className, ...props}) => {
return ( return (
<div className={clsx('flex w-full items-start gap-3', className)} data-testid='navigation-item-editor' {...props}> <div className={clsx('flex w-full items-start gap-3', className)} data-testid='navigation-item-editor' {...props}>
<div className="flex flex-1 pt-1"> <div className="flex flex-1 pt-1">
@ -29,7 +30,14 @@ const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, ite
value={item.label} value={item.label}
hideTitle hideTitle
onChange={e => updateItem?.({label: e.target.value})} onChange={e => updateItem?.({label: e.target.value})}
onKeyDown={() => clearError?.('label')} onKeyDown={(e) => {
updateItem?.({label: (e.target as HTMLInputElement).value});
if (e.key === 'Enter') {
e.preventDefault();
addItem?.();
}
!!item.errors.label && clearError?.('label');
}}
/> />
</div> </div>
<div className="flex flex-1 pt-1"> <div className="flex flex-1 pt-1">
@ -44,7 +52,19 @@ const NavigationItemEditor: React.FC<NavigationItemEditorProps> = ({baseUrl, ite
value={item.url} value={item.url}
hideTitle hideTitle
onChange={value => updateItem?.({url: value || ''})} onChange={value => updateItem?.({url: value || ''})}
onKeyDown={() => clearError?.('url')} onKeyDown={(e) => {
const urls = formatUrl((e.target as HTMLInputElement).value, baseUrl, true);
updateItem?.({url: urls.save || ''});
}}
onKeyUp={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
const urls = formatUrl((e.target as HTMLInputElement).value, baseUrl, true);
updateItem?.({url: urls.save || ''});
addItem?.();
}
!!item.errors.url && clearError?.('url');
}}
/> />
</div> </div>
{action} {action}