Add find selected index rendering

Author: tsck

packages/code-editor/src/SearchForm/SearchForm.styles.ts

@@ -13,6 +13,7 @@ import { color } from '@leafygreen-ui/tokens';
 const CONTAINER_MAX_WIDTH = 500;
 const SECTION_HEIGHT = 52;
 const INPUT_WIDTH = 240;
+const INPUT_MIN_WIDTH = 120;
 
 const getBaseContainerStyles = (theme: Theme) => css`
   background-color: ${color[theme].background[Variant.Secondary][
@@ -114,9 +115,13 @@ export const getToggleIconStyles = (isOpen: boolean) =>
 export const findInputContainerStyles = css`
   position: relative;
   flex: 1 1 ${INPUT_WIDTH}px;
-  min-width: 100px;
+  min-width: ${INPUT_MIN_WIDTH}px;
   max-width: ${INPUT_WIDTH}px;
   margin-right: ${spacing[100]}px;
+
+  & input {
+    padding-right: ${spacing[1200]}px;
+  }
 `;
 
 export const allButtonStyles = css`
@@ -127,12 +132,26 @@ export const closeButtonStyles = css`
   margin-left: auto;
 `;
 
-export const findInputIconButtonStyles = css`
+export const findOptionsContainerStyles = css`
   position: absolute;
   right: ${spacing[100]}px;
   top: ${spacing[100]}px;
+  display: flex;
+  align-items: center;
 `;
 
+// export const findInputIconButtonStyles = css`
+//   position: absolute;
+//   right: ${spacing[100]}px;
+//   top: ${spacing[100]}px;
+// `;
+
+// export const findCountStyles = css`
+//   position: absolute;
+//   right: ${spacing[200]}px;
+//   top: ${spacing[100]}px;
+// `;
+
 export const replaceInputContainerStyles = css`
   position: relative;
   flex: 1 1 ${INPUT_WIDTH}px;

packages/code-editor/src/SearchForm/SearchForm.tsx

@@ -19,15 +19,16 @@ import Button from '@leafygreen-ui/button';
 import IconButton from '@leafygreen-ui/icon-button';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import TextInput from '@leafygreen-ui/text-input';
+import { Body } from '@leafygreen-ui/typography';
 
 import { Icon } from '../../../icon/src/Icon';
 
 import {
   allButtonStyles,
   closeButtonStyles,
   findInputContainerStyles,
-  findInputIconButtonStyles,
   findInputStyles,
+  findOptionsContainerStyles,
   findSectionStyles,
   getContainerStyles,
   getReplaceInnerSectionStyles,
@@ -44,6 +45,7 @@ export function SearchForm({ view }: SearchFormProps) {
   const [searchString, setSearchString] = useState('');
   const [findCount, setFindCount] = useState(0);
   const { theme } = useDarkMode();
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
   const handleToggleButtonClick = useCallback(
     (_e: MouseEvent<HTMLButtonElement>) => {
@@ -66,6 +68,35 @@ export function SearchForm({ view }: SearchFormProps) {
     [],
   );
 
+  const computeSelectedIndex = useCallback(() => {
+    const query = new SearchQuery({
+      search: searchString,
+      caseSensitive: true,
+      regexp: false,
+      wholeWord: false,
+      replace: '',
+    });
+
+    const cursor = query.getCursor(view.state.doc);
+    const selection = view.state.selection.main;
+
+    let index = 1;
+    let result = cursor.next();
+
+    while (!result.done) {
+      if (
+        result.value.from === selection.from &&
+        result.value.to === selection.to
+      ) {
+        return index;
+      }
+      index++;
+      result = cursor.next();
+    }
+
+    return null;
+  }, [searchString, view]);
+
   useEffect(() => {
     const query = new SearchQuery({
       search: searchString,
@@ -87,16 +118,48 @@ export function SearchForm({ view }: SearchFormProps) {
     }
 
     setFindCount(count);
-  }, [searchString, view]);
+
+    // Update selected index if current selection matches one of the results
+    const selection = view.state.selection.main;
+    const cursor2 = query.getCursor(view.state.doc);
+    let idx = 1;
+    let res2 = cursor2.next();
+    let currentIndex: number | null = null;
+
+    while (!res2.done) {
+      if (
+        res2.value.from === selection.from &&
+        res2.value.to === selection.to
+      ) {
+        currentIndex = idx;
+        break;
+      }
+      idx++;
+      res2 = cursor2.next();
+    }
+
+    setSelectedIndex(currentIndex);
+  }, [searchString, view, computeSelectedIndex]);
 
   const handleFindFormSubmit = useCallback(
     (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       findNext(view);
+      setSelectedIndex(computeSelectedIndex());
     },
-    [view],
+    [view, computeSelectedIndex],
   );
 
+  const handleNextClick = useCallback(() => {
+    findNext(view);
+    setSelectedIndex(computeSelectedIndex());
+  }, [view, computeSelectedIndex]);
+
+  const handlePreviousClick = useCallback(() => {
+    findPrevious(view);
+    setSelectedIndex(computeSelectedIndex());
+  }, [view, computeSelectedIndex]);
+
   return (
     <div
       className={getContainerStyles({ theme, isOpen })}
@@ -123,31 +186,38 @@ export function SearchForm({ view }: SearchFormProps) {
               value={searchString}
             />
           </form>
-          <IconButton
-            className={findInputIconButtonStyles}
-            aria-label="filter button"
-          >
-            <Icon glyph="Filter" />
-          </IconButton>
+          <div className={findOptionsContainerStyles}>
+            {searchString && (
+              <Body>
+                {selectedIndex ?? '?'}/{findCount}
+              </Body>
+            )}
+            <IconButton aria-label="filter button">
+              <Icon glyph="Filter" />
+            </IconButton>
+          </div>
         </div>
         <IconButton
           aria-label="previous item button"
           disabled={!searchString || findCount === 0}
-          onClick={() => findPrevious(view)}
+          onClick={handlePreviousClick}
         >
           <Icon glyph="ArrowUp" />
         </IconButton>
         <IconButton
           aria-label="next item button"
           disabled={!searchString || findCount === 0}
-          onClick={() => findNext(view)}
+          onClick={handleNextClick}
         >
           <Icon glyph="ArrowDown" />
         </IconButton>
         <Button
           className={allButtonStyles}
           disabled={!searchString || findCount === 0}
-          onClick={() => selectMatches(view)}
+          onClick={() => {
+            selectMatches(view);
+            setSelectedIndex(null);
+          }}
         >
           All
         </Button>