updated name and cleanup
MODIFY
src/client/src/components/Card/index.tsx
src/client/src/components/Card/index.tsx
@@ -10,7 +10,7 @@ import styles from "./styles.module.css";
import { IOption } from "../../types/option";
import { Link } from "react-router-dom";
import { ROUTES } from "../../utils/constants";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IProps {
buttonText: string;
@@ -52,7 +52,7 @@ export const Card = ({
className={styles.details}
to={ROUTES.PAGE_DETAILS}
tabIndex={disabled! ? -1 : 0}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
<FormattedMessage id="card.details" defaultMessage="Details" />
</Link>

MODIFY
src/client/src/components/Details/index.tsx
src/client/src/components/Details/index.tsx
@@ -19,7 +19,7 @@ import {
InjectedIntl,
FormattedMessage
} from "react-intl";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IProps {
detailInfo: IOption;
@@ -42,7 +42,7 @@ const Details = ({
intl
}: IProps) => {
const LinkRenderer = (props: any) => (
- <a href={props.href} className={styles.link} onKeyUp={spaceKeyHandler}>
+ <a href={props.href} className={styles.link} onKeyUp={keyUpHandler}>
{props.children}
</a>
);
@@ -93,7 +93,7 @@ const Details = ({
role="button"
tabIndex={0}
onClick={handleBackClick}
- onKeyUp={keyDownHandler}
+ onKeyDown={keyDownHandler}
className={styles.innerBackContainer}
>
{backArrow && <BackArrow className={styles.backIcon} />}
@@ -157,7 +157,7 @@ const Details = ({
<a
className={styles.link}
href={licenseObject.url}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
{licenseObject.text}
</a>

MODIFY
src/client/src/components/LoginCard/index.tsx
src/client/src/components/LoginCard/index.tsx
@@ -11,7 +11,7 @@ import { FormattedMessage } from "react-intl";
import { IOption } from "../../types/option";
import { ROUTES } from "../../utils/constants";
import { azureMessages } from "../../mockData/azureServiceOptions";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IProps {
cardTitle: string;
@@ -43,7 +43,7 @@ const LoginCard = ({
<Link
className={styles.details}
onClick={() => handleDetailsClick(option)}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
to={ROUTES.PAGE_DETAILS}
>
<FormattedMessage id="loginCard.details" defaultMessage="Details" />
@@ -63,7 +63,7 @@ const LoginCard = ({
<a
className={styles.createAccountButton}
href="https://azure.microsoft.com/free/"
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
<FormattedMessage
id="loginCard.createAccount"

MODIFY
src/client/src/components/SelectableCard/index.tsx
src/client/src/components/SelectableCard/index.tsx
@@ -20,7 +20,7 @@ import { ReactComponent as Plus } from "../../assets/plus.svg";
import { ReactComponent as Subtract } from "../../assets/subtract.svg";
import plus from "../../assets/plus.svg";
import subtract from "../../assets/subtract.svg";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
const SelectableCard = ({
iconPath,
@@ -112,7 +112,7 @@ const SelectableCard = ({
onClick={detailsClickWrapper}
className={classNames(styles.link)}
to={ROUTES.PAGE_DETAILS}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
<FormattedMessage
id="selectableCard.details"

MODIFY
src/client/src/components/TopNavBarLink/index.tsx
src/client/src/components/TopNavBarLink/index.tsx
@@ -6,7 +6,7 @@ import { injectIntl, FormattedMessage, InjectedIntl } from "react-intl";
import { Link } from "react-router-dom";
import styles from "./styles.module.css";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
import { ARIA_LABELS_NAVIGATION } from "../../utils/constants";
const TopNavBarLink = ({
@@ -38,7 +38,7 @@ const TopNavBarLink = ({
to={path}
onClick={handleClick}
className={styles.container}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
<div
className={classnames(styles.text, {

MODIFY
src/client/src/containers/About/index.tsx
src/client/src/containers/About/index.tsx
@@ -6,7 +6,7 @@ import { getVersionsSelector } from "../../selectors/vscodeApiSelector";
import { IVersions } from "../../types/version";
import { defineMessages, InjectedIntlProps, injectIntl } from "react-intl";
import { AppState } from "../../reducers";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IStateProps {
versions: IVersions;
@@ -39,7 +39,7 @@ const About = ({ versions, intl }: Props) => {
<a
className={styles.link}
href="https://github.com/Microsoft/WebTemplateStudio"
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
Web Template Studio
</a>

MODIFY
src/client/src/containers/AzureFunctionsModal/index.tsx
src/client/src/containers/AzureFunctionsModal/index.tsx
@@ -42,7 +42,7 @@ import { getVSCodeApiSelector } from "../../selectors/vscodeApiSelector";
import RootAction from "../../actions/ActionType";
import { messages } from "./messages";
import classNames from "classnames";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
const DEFAULT_VALUE = {
value: "Select...",
@@ -336,7 +336,7 @@ const AzureFunctionsResourceModal = (props: Props) => {
tabIndex={disabled ? -1 : 0}
className={styles.link}
href={links[formSectionId]}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
{rightHeader}

MODIFY
src/client/src/containers/AzureLogin/index.tsx
src/client/src/containers/AzureLogin/index.tsx
@@ -25,7 +25,7 @@ import { withLocalPath } from "../../utils/getSvgUrl";
import { AppState } from "../../reducers";
import { Dispatch } from "redux";
import RootAction from "../../actions/ActionType";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IDispatchProps {
setDetailPage: (detailPageInfo: IOption) => any;
@@ -74,7 +74,7 @@ class AzureLogin extends React.Component<Props> {
tabIndex={0}
to={ROUTES.REVIEW_AND_GENERATE}
className={styles.optionalFlag}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
{azureMessages.azureSkipButton.defaultMessage}
</Link>

MODIFY
src/client/src/containers/CosmosResourceModal/index.tsx
src/client/src/containers/CosmosResourceModal/index.tsx
@@ -42,7 +42,7 @@ import { ThunkDispatch } from "redux-thunk";
import RootAction from "../../actions/ActionType";
import { messages } from "./messages";
import classNames from "classnames";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
const DEFAULT_VALUE = {
value: "Select...",
@@ -322,7 +322,7 @@ const CosmosResourceModal = (props: Props) => {
tabIndex={disabled! ? -1 : 0}
className={styles.link}
href={links[formSectionId]}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
{rightHeader}
</a>

MODIFY
src/client/src/containers/Footer/index.tsx
src/client/src/containers/Footer/index.tsx
@@ -50,7 +50,7 @@ import { IFunctionName } from "../AzureFunctionsSelection";
import { ReactComponent as NextArrow } from "../../assets/nextarrow.svg";
import nextArrow from "../../assets/nextarrow.svg";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IDispatchProps {
setRouteVisited: (route: string) => void;
@@ -226,7 +226,7 @@ class Footer extends React.Component<Props> {
onClick={event => {
this.handleLinkBackClick(event, pathname);
}}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
to={
pathsBack[pathname] === undefined
? ROUTES.NEW_PROJECT
@@ -251,7 +251,7 @@ class Footer extends React.Component<Props> {
onClick={event => {
this.handleLinkClick(event, pathname);
}}
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
to={pathsNext[pathname]}
>
<FormattedMessage id="footer.next" defaultMessage="Next" />

MODIFY
src/client/src/containers/Licenses/index.tsx
src/client/src/containers/Licenses/index.tsx
@@ -15,7 +15,7 @@ import {
} from "../../selectors/wizardNavigationSelector";
import { AppState } from "../../reducers";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IStateProps {
frameworkLicenses: string[];
@@ -40,7 +40,7 @@ const Licenses = ({
}: Props) => {
const LinkRenderer = (props: any) => {
return (
- <a href={props.href} className={styles.link} onKeyUp={spaceKeyHandler}>
+ <a href={props.href} className={styles.link} onKeyUp={keyUpHandler}>
{props.children}
</a>
);

MODIFY
src/client/src/containers/PostGenerationModal/index.tsx
src/client/src/containers/PostGenerationModal/index.tsx
@@ -26,7 +26,7 @@ import { getOutputPath } from "../../selectors/wizardSelectionSelector";
import { strings as messages } from "./strings";
import { resetWizardAction } from "../../actions/wizardInfoActions/resetWizardAction";
import { MODAL_TYPES } from "../../actions/modalActions/typeKeys";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface LinksDict {
[serviceId: string]: string;
@@ -74,7 +74,7 @@ const PostGenerationModal = ({
}: Props) => {
const { formatMessage } = intl;
const LinkRenderer = (props: any) => (
- <a href={props.href} className={styles.link} onKeyUp={spaceKeyHandler}>
+ <a href={props.href} className={styles.link} onKeyUp={keyUpHandler}>
{props.children}
</a>
);
@@ -222,7 +222,7 @@ const PostGenerationModal = ({
<a
className={styles.link}
href="https://github.com/Microsoft/WebTemplateStudio/issues"
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
{formatMessage(messages.help)}
</a>

MODIFY
src/client/src/containers/ReviewAndGenerate/index.tsx
src/client/src/containers/ReviewAndGenerate/index.tsx
@@ -12,7 +12,7 @@ import { defineMessages, InjectedIntlProps, injectIntl } from "react-intl";
import { ThunkDispatch } from "redux-thunk";
import { AppState } from "../../reducers";
import RootAction from "../../actions/ActionType";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IDispatchProps {
openViewLicensesModal: () => any;
@@ -66,7 +66,7 @@ const ReviewAndGenerate = (props: Props) => {
rel="noopener noreferrer"
className={styles.link}
href="https://github.com/Microsoft/WebTemplateStudio/issues"
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
>
{formatMessage(messages.giveFeedback)}
</a>

MODIFY
src/client/src/containers/RightSidebar/index.tsx
src/client/src/containers/RightSidebar/index.tsx
@@ -42,7 +42,7 @@ import { IOption } from "../../types/option";
import { IVSCodeObject } from "../../reducers/vscodeApiReducer";
import { getVSCodeApiSelector } from "../../selectors/vscodeApiSelector";
import { isValidNameAndProjectPathSelector } from "../../selectors/wizardSelectionSelector";
-import spaceKeyHandler from "../../utils/spaceKeyHandler";
+import keyUpHandler from "../../utils/keyUpHandler";
interface IDispatchProps {
selectBackendFramework: (framework: ISelected) => void;
@@ -225,7 +225,7 @@ class RightSidebar extends React.Component<Props, IRightSidebarState> {
<a
target="_blank"
rel="noopener noreferrer"
- onKeyUp={spaceKeyHandler}
+ onKeyUp={keyUpHandler}
className={styles.link}
href="https://github.com/Microsoft/WebTemplateStudio/issues"
>

RENAME
src/client/src/utils/spaceKeyHandler.ts
src/client/src/utils/keyUpHandler.ts
import * as React from "react";
import {KEY_EVENTS} from "./constants"
-// document.documentElement.addEventListener('keydown', (e) => {
-// if (e.key === KEY_EVENTS.SPACE) e.preventDefault();
-// })
+const keyUpHandler = (e: React.KeyboardEvent<HTMLAnchorElement>) => {
-const spaceKeyHandler = (e: React.KeyboardEvent<HTMLAnchorElement>) => {
-
- let anchor = e.target as HTMLAnchorElement;
+ const anchor = e.target as HTMLAnchorElement;
//if pressing space on an anchor, prevent page scroll.
anchor.onkeydown = (e) => {
@@ -19,4 +15,4 @@ const spaceKeyHandler = (e: React.KeyboardEvent<HTMLAnchorElement>) => {
}
}
-export default spaceKeyHandler;
\ No newline at end of file
+export default keyUpHandler;
\ No newline at end of file

updated name and cleanup