Merge pull request #13073 from storybookjs/fix-escape-listener

UI: Fix Escape key handling perf
storybookjs · Nov 10, 2020 · e90dd04 · e90dd04
2 parents c1e2477 + 9f50330
commit e90dd04
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 75 deletions.
diff --git a/lib/ui/src/components/sidebar/SearchResults.tsx b/lib/ui/src/components/sidebar/SearchResults.tsx
@@ -169,83 +169,101 @@ export const SearchResults: FunctionComponent<{
   getMenuProps: ControllerStateAndHelpers<DownshiftItem>['getMenuProps'];
   getItemProps: ControllerStateAndHelpers<DownshiftItem>['getItemProps'];
   highlightedIndex: number | null;
-}> = React.memo(({ query, results, closeMenu, getMenuProps, getItemProps, highlightedIndex }) => {
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      const target = event.target as Element;
-      if (target?.id === 'storybook-explorer-searchfield') return; // handled by downshift
-      closeMenu();
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, []);
-
-  return (
-    <ResultsList {...getMenuProps()}>
-      {results.length > 0 && !query && (
-        <li>
-          <RootNode>Recently opened</RootNode>
-        </li>
-      )}
-      {results.length === 0 && query && (
-        <li>
-          <NoResults>
-            <strong>No components found</strong>
-            <br />
-            <small>Find components by name or path.</small>
-          </NoResults>
-        </li>
-      )}
-      {results.map((result: DownshiftItem, index) => {
-        if (isCloseType(result)) {
-          return (
-            <BackActionRow
-              {...result}
-              {...getItemProps({ key: index, index, item: result })}
-              isHighlighted={highlightedIndex === index}
-            >
-              <ActionIcon icon="arrowleft" />
-              <ActionLabel>Back to components</ActionLabel>
-              <ActionKey>ESC</ActionKey>
-            </BackActionRow>
-          );
-        }
-        if (isClearType(result)) {
-          return (
-            <ActionRow
-              {...result}
-              {...getItemProps({ key: index, index, item: result })}
-              isHighlighted={highlightedIndex === index}
-            >
-              <ActionIcon icon="trash" />
-              <ActionLabel>Clear history</ActionLabel>
-            </ActionRow>
-          );
+  isLoading?: boolean;
+  enableShortcuts?: boolean;
+}> = React.memo(
+  ({
+    query,
+    results,
+    closeMenu,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    isLoading = false,
+    enableShortcuts = true,
+  }) => {
+    useEffect(() => {
+      const handleEscape = (event: KeyboardEvent) => {
+        if (!enableShortcuts || isLoading) return;
+        if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) return;
+        if (event.key === 'Escape') {
+          const target = event.target as Element;
+          if (target?.id === 'storybook-explorer-searchfield') return; // handled by downshift
+          event.preventDefault();
+          closeMenu();
         }
-        if (isExpandType(result)) {
+      };
+
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }, [enableShortcuts, isLoading]);
+
+    return (
+      <ResultsList {...getMenuProps()}>
+        {results.length > 0 && !query && (
+          <li>
+            <RootNode>Recently opened</RootNode>
+          </li>
+        )}
+        {results.length === 0 && query && (
+          <li>
+            <NoResults>
+              <strong>No components found</strong>
+              <br />
+              <small>Find components by name or path.</small>
+            </NoResults>
+          </li>
+        )}
+        {results.map((result: DownshiftItem, index) => {
+          if (isCloseType(result)) {
+            return (
+              <BackActionRow
+                {...result}
+                {...getItemProps({ key: index, index, item: result })}
+                isHighlighted={highlightedIndex === index}
+              >
+                <ActionIcon icon="arrowleft" />
+                <ActionLabel>Back to components</ActionLabel>
+                <ActionKey>ESC</ActionKey>
+              </BackActionRow>
+            );
+          }
+          if (isClearType(result)) {
+            return (
+              <ActionRow
+                {...result}
+                {...getItemProps({ key: index, index, item: result })}
+                isHighlighted={highlightedIndex === index}
+              >
+                <ActionIcon icon="trash" />
+                <ActionLabel>Clear history</ActionLabel>
+              </ActionRow>
+            );
+          }
+          if (isExpandType(result)) {
+            return (
+              <ActionRow
+                {...result}
+                {...getItemProps({ key: index, index, item: result })}
+                isHighlighted={highlightedIndex === index}
+              >
+                <ActionIcon icon="plus" />
+                <ActionLabel>Show {result.moreCount} more results</ActionLabel>
+              </ActionRow>
+            );
+          }
+
+          const { item } = result;
+          const key = `${item.refId}::${item.id}`;
           return (
-            <ActionRow
+            <Result
               {...result}
-              {...getItemProps({ key: index, index, item: result })}
+              {...getItemProps({ key, index, item: result })}
               isHighlighted={highlightedIndex === index}
-            >
-              <ActionIcon icon="plus" />
-              <ActionLabel>Show {result.moreCount} more results</ActionLabel>
-            </ActionRow>
+            />
           );
-        }
-
-        const { item } = result;
-        const key = `${item.refId}::${item.id}`;
-        return (
-          <Result
-            {...result}
-            {...getItemProps({ key, index, item: result })}
-            isHighlighted={highlightedIndex === index}
-          />
-        );
-      })}
-    </ResultsList>
-  );
-});
+        })}
+      </ResultsList>
+    );
+  }
+);
diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -142,6 +142,8 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
                     getMenuProps={getMenuProps}
                     getItemProps={getItemProps}
                     highlightedIndex={highlightedIndex}
+                    enableShortcuts={enableShortcuts}
+                    isLoading={isLoading}
                   />
                 </Swap>
               )}