Refactor and prevent selection within scroll margin

seek-oss · Sep 13, 2024 · 288d3cc · 288d3cc
1 parent 9286168
commit 288d3cc
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/src/Playroom/Snippets/Snippets.css.ts b/src/Playroom/Snippets/Snippets.css.ts
@@ -41,6 +41,28 @@ export const snippetsContainer = style([
   {
     listStyle: 'none',
     top: toolbarItemSize,
+    /*
+      These pseudo-elements create a buffer area at the top and bottom of the list, the same size as the scroll margin.
+      This prevents auto-scrolling when the cursor enters a snippet in the scroll margin, by preventing the element from being selected.
+    */
+    '::before': {
+      content: '',
+      position: 'fixed',
+      top: toolbarItemSize,
+      left: 0,
+      right: 0,
+      height: vars.space[snippetsBorderSpace],
+      zIndex: 1,
+    },
+    '::after': {
+      content: '',
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: vars.space[snippetsBorderSpace],
+      zIndex: 1,
+    },
   },
 ]);
 

diff --git a/src/Playroom/Snippets/Snippets.tsx b/src/Playroom/Snippets/Snippets.tsx
@@ -6,9 +6,9 @@ import type { PlayroomProps } from '../Playroom';
 import type { Snippet } from '../../../utils';
 import SearchField from './SearchField/SearchField';
 import { Text } from '../Text/Text';
+import { Stack } from '../Stack/Stack';
 
 import * as styles from './Snippets.css';
-import { Stack } from '../Stack/Stack';
 
 type HighlightIndex = number | null;
 type ReturnedSnippet = Snippet | null;
@@ -20,8 +20,8 @@ interface Props {
 
 const getLabel = (snippet: Snippet) => `${snippet.group}\n${snippet.name}`;
 
-function getSnippetId(group: string, name: string, index: number) {
-  return `${group}_${name}_${index}`;
+function getSnippetId(snippet: Snippet, index: number) {
+  return `${snippet.group}_${snippet.name}_${index}`;
 }
 
 const filterSnippetsForTerm = (snippets: Props['snippets'], term: string) =>
@@ -58,20 +58,16 @@ export default ({ snippets, onHighlight, onClose }: Props) => {
     [searchTerm, snippets]
   );
 
-  const highlightedItemId =
-    typeof highlightedIndex === 'number'
-      ? getSnippetId(
-          filteredSnippets[highlightedIndex].group,
-          filteredSnippets[highlightedIndex].name,
-          highlightedIndex
-        )
-      : null;
-
-  const highlightedItem = highlightedItemId
-    ? document.getElementById(highlightedItemId)
-    : null;
+  if (
+    typeof highlightedIndex === 'number' &&
+    filteredSnippets[highlightedIndex]
+  ) {
+    const highlightedItem = document.getElementById(
+      getSnippetId(filteredSnippets[highlightedIndex], highlightedIndex)
+    );
 
-  highlightedItem?.scrollIntoView({ block: 'nearest' });
+    highlightedItem?.scrollIntoView({ block: 'nearest' });
+  }
 
   useEffect(() => {
     debouncedPreview(
@@ -140,7 +136,7 @@ export default ({ snippets, onHighlight, onClose }: Props) => {
           return (
             <li
               ref={isHighlighted ? highlightedEl : undefined}
-              id={getSnippetId(snippet.group, snippet.name, index)}
+              id={getSnippetId(snippet, index)}
               key={`${snippet.group}_${snippet.name}_${index}`}
               className={classnames(styles.snippet, {
                 [styles.highlight]: isHighlighted,