feat(keyboard-events): add keyboard event listener to stories

ubilabs · Nov 28, 2019 · eb7a567 · eb7a567
1 parent cac3981
commit eb7a567
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/src/scripts/components/story-header/story-header.tsx b/src/scripts/components/story-header/story-header.tsx
@@ -1,6 +1,6 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, useEffect} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Link} from 'react-router-dom';
+import {Link, useHistory} from 'react-router-dom';
 import cx from 'classnames';
 
 import {StoryListItem} from '../../types/story-list';
@@ -15,6 +15,7 @@ interface Props {
 }
 
 const StoryHeader: FunctionComponent<Props> = ({storyIds, story, mode}) => {
+  const history = useHistory();
   const isPresenterMode = mode === StoryMode.Present;
   const isShowcaseMode = mode === StoryMode.Showcase;
 
@@ -26,6 +27,21 @@ const StoryHeader: FunctionComponent<Props> = ({storyIds, story, mode}) => {
 
   const backLink = storyIds ? `/showcase/${storyIds}` : `/${mode}`;
 
+  const onKeyDownHandler = (event: KeyboardEvent) => {
+    if (event.keyCode === 27) {
+      history.push(backLink);
+    }
+  };
+
+  // add and remove event listener for keyboard events
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDownHandler);
+    return () => {
+      window.removeEventListener('keydown', onKeyDownHandler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className={storyClasses}>
       {!isPresenterMode && (

diff --git a/src/scripts/components/story-pagination/story-pagination.tsx b/src/scripts/components/story-pagination/story-pagination.tsx
@@ -1,5 +1,5 @@
-import React, {FunctionComponent} from 'react';
-import {Link} from 'react-router-dom';
+import React, {FunctionComponent, useEffect, useCallback} from 'react';
+import {Link, useHistory} from 'react-router-dom';
 import {useIntl} from 'react-intl';
 import cx from 'classnames';
 
@@ -26,14 +26,38 @@ const StoryPagination: FunctionComponent<Props> = ({
   previousSlideLink,
   nextSlideLink
 }) => {
+  const history = useHistory();
   const intl = useIntl();
   const isPresenterMode = mode === StoryMode.Present;
+  const isShowcaseMode = mode === StoryMode.Showcase;
   const classes = cx(styles.pagination, isPresenterMode && styles.present);
 
+  const onKeyDownHandler = useCallback(
+    event => {
+      if (!isShowcaseMode) {
+        if (event.keyCode === 37) {
+          previousSlideLink && history.push(previousSlideLink);
+        }
+        if (event.keyCode === 39) {
+          nextSlideLink && history.push(nextSlideLink);
+        }
+      }
+    },
+    [isShowcaseMode, history, previousSlideLink, nextSlideLink]
+  );
+
+  // add and remove event listener for keyboard events
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDownHandler);
+    return () => {
+      window.removeEventListener('keydown', onKeyDownHandler);
+    };
+  }, [onKeyDownHandler]);
+
   return (
     <div className={classes}>
       <div className={styles.controls}>
-        {previousSlideLink ? (
+        {previousSlideLink && !isShowcaseMode ? (
           <Link to={previousSlideLink} className={styles.icon}>
             <PreviousIcon />
           </Link>
@@ -45,7 +69,7 @@ const StoryPagination: FunctionComponent<Props> = ({
           {slideIndex + 1}/{numberOfSlides}
         </span>
 
-        {nextSlideLink ? (
+        {nextSlideLink && !isShowcaseMode ? (
           <Link to={nextSlideLink} className={styles.icon}>
             <NextIcon />
           </Link>