Skip to content

Commit

Permalink
add key press listener
Browse files Browse the repository at this point in the history
  • Loading branch information
@KhudaDad414
KhudaDad414 committed Apr 3, 2024
1 parent 05bc587 commit 98d78e2
Show file tree
Hide file tree
Showing 2 changed files with 176 additions and 23 deletions.
89 changes: 78 additions & 11 deletions apps/studio-next/src/components/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';

import { useServices } from '@/services';
import { useDocumentsState, useFilesState } from '@/state';

import { NAVIGATION_SECTION_STYLE, NAVIGATION_SUB_SECTION_STYLE } from './Navigationv3';
import type { AsyncAPIDocumentInterface } from '@asyncapi/parser';

interface NavigationProps {
Expand All @@ -26,12 +26,16 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
return (
<>
<div
className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
className={`${NAVIGATION_SECTION_STYLE} ${
hash === 'servers' ? 'bg-gray-800' : ''
}`}
onClick={() =>
navigationSvc.scrollTo('/servers', 'servers')
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo('/servers', 'servers');
}}
>
Servers
</div>
Expand All @@ -40,7 +44,7 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
const serverName = server.id();
return <li
key={serverName}
className={`p-2 pl-3 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 ${
className={`${NAVIGATION_SUB_SECTION_STYLE} ${
hash === `server-${serverName}` ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -49,6 +53,13 @@ const ServersNavigation: React.FunctionComponent<NavigationSectionProps> = ({
`server-${serverName}`,
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
`/servers/${serverName.replace(/\//g, '~1')}`,
`server-${serverName}`,
);
}}
>
<div className="flex flex-row">
<div className="flex-none">
Expand Down Expand Up @@ -85,7 +96,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
channels.push(
<li
key={`${channelName}-publish`}
className={`p-2 pl-3 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 ${
className={`${NAVIGATION_SUB_SECTION_STYLE} ${
hash === `operation-publish-${channelName}` ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -94,6 +105,13 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
`operation-publish-${channelName}`,
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
`/channels/${channelName.replace(/\//g, '~1')}`,
`operation-publish-${channelName}`,
);
}}
>
<div className="flex flex-row">
<div className="flex-none">
Expand All @@ -110,7 +128,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
channels.push(
<li
key={`${channelName}-subscribe`}
className={`p-2 pl-3 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 ${
className={`${NAVIGATION_SUB_SECTION_STYLE} ${
hash === `operation-subscribe-${channelName}` ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -119,6 +137,13 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
`operation-subscribe-${channelName}`,
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
`/channels/${channelName.replace(/\//g, '~1')}`,
`operation-subscribe-${channelName}`,
);
}}
>
<div className="flex flex-row">
<div className="flex-none">
Expand All @@ -139,7 +164,7 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
return (
<>
<div
className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
className={`${NAVIGATION_SECTION_STYLE} ${
hash === 'operations' ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -148,6 +173,13 @@ const OperationsNavigation: React.FunctionComponent<NavigationSectionProps> = ({
'operations',
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
'/channels',
'operations',
);
}}
>
Operations
</div>
Expand All @@ -167,7 +199,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
const messageName = message.id();
return <li
key={messageName}
className={`p-2 pl-6 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 truncate ${
className={`${NAVIGATION_SUB_SECTION_STYLE} truncate ${
hash === `message-${messageName}` ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -176,6 +208,13 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
`message-${messageName}`,
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
`/components/messages/${messageName.replace(/\//g, '~1')}`,
`message-${messageName}`,
);
}}
>
{messageName}
</li>
Expand All @@ -185,7 +224,7 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
return (
<>
<div
className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
className={`${NAVIGATION_SECTION_STYLE} ${
hash === 'messages' ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -194,6 +233,13 @@ const MessagesNavigation: React.FunctionComponent<NavigationSectionProps> = ({
'messages',
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
'/components/messages',
'messages',
);
}}
>
Messages
</div>
Expand All @@ -213,7 +259,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
const schemaName = schema.id();
return <li
key={schemaName}
className={`p-2 pl-6 text-white cursor-pointer text-xs border-t border-gray-700 hover:bg-gray-900 truncate ${
className={`${NAVIGATION_SUB_SECTION_STYLE} truncate ${
hash === `schema-${schemaName}` ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -222,6 +268,13 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
`schema-${schemaName}`,
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
`/components/schemas/${schemaName.replace(/\//g, '~1')}`,
`schema-${schemaName}`,
);
}}
>
{schemaName}
</li>
Expand All @@ -231,7 +284,7 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
return (
<>
<div
className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
className={`${NAVIGATION_SECTION_STYLE} ${
hash === 'schemas' ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -240,6 +293,13 @@ const SchemasNavigation: React.FunctionComponent<NavigationSectionProps> = ({
'schemas',
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
'/components/schemas',
'schemas',
);
}}
>
Schemas
</div>
Expand Down Expand Up @@ -300,7 +360,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
<ul>
<li className="mb-4">
<div
className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
className={`${NAVIGATION_SECTION_STYLE} ${
hash === 'introduction' ? 'bg-gray-800' : ''
}`}
onClick={() =>
Expand All @@ -309,6 +369,13 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
'introduction',
)
}
tabIndex={0}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') navigationSvc.scrollTo(
'/info',
'introduction',
);
}}
>
Information
</div>
Expand Down
Loading

0 comments on commit 98d78e2

Please sign in to comment.