From 5a528440eb42c77107aa92466cf70ebda213d60c Mon Sep 17 00:00:00 2001 From: Curran Date: Fri, 2 Aug 2024 15:09:40 -0400 Subject: [PATCH 1/2] Run Prettier --- src/client/VZCodeContext.tsx | 7 +- src/client/VZSidebar/Search.tsx | 419 +++++++++++++++++--------- src/client/VZSidebar/index.tsx | 2 +- src/client/useActions.ts | 8 +- src/client/vzReducer/index.ts | 16 +- src/client/vzReducer/searchReducer.ts | 11 +- 6 files changed, 297 insertions(+), 166 deletions(-) diff --git a/src/client/VZCodeContext.tsx b/src/client/VZCodeContext.tsx index bf59f310..adc372ad 100644 --- a/src/client/VZCodeContext.tsx +++ b/src/client/VZCodeContext.tsx @@ -121,14 +121,17 @@ export type VZCodeContextValue = { setSearchFileVisibility: ( files: ShareDBDoc, id: string, - visibility: SearchFileVisibility + visibility: SearchFileVisibility, ) => void; setSearchLineVisibility: ( files: ShareDBDoc, id: string, line: number, ) => void; - setSearchFocusedIndex: (focusedIndex: number, childIndex: number) => void; + setSearchFocusedIndex: ( + focusedIndex: number, + childIndex: number, + ) => void; toggleSearchFocused: () => void; isCreateFileModalOpen: boolean; diff --git a/src/client/VZSidebar/Search.tsx b/src/client/VZSidebar/Search.tsx index e8c982a2..37f75631 100644 --- a/src/client/VZSidebar/Search.tsx +++ b/src/client/VZSidebar/Search.tsx @@ -35,12 +35,17 @@ function jumpToPattern( function isResultElementWithinView(container, element) { const containerTop = container.scrollTop; - const containerBottom = containerTop + container.clientHeight; + const containerBottom = + containerTop + container.clientHeight; - const elementTop = element.offsetTop - container.offsetTop; + const elementTop = + element.offsetTop - container.offsetTop; const elementBottom = elementTop + element.clientHeight; - return elementTop >= (containerTop + 100) && elementBottom <= (containerBottom - 100); + return ( + elementTop >= containerTop + 100 && + elementBottom <= containerBottom - 100 + ); } export const Search = () => { @@ -57,10 +62,17 @@ export const Search = () => { shareDBDoc, editorCache, } = useContext(VZCodeContext); - const { pattern, results, focusedIndex, focusedChildIndex, focused } = search; + const { + pattern, + results, + focusedIndex, + focusedChildIndex, + focused, + } = search; const inputRef = useRef(null); - const files: [string, SearchFile][] = Object.entries(results) - .filter(([_, file]) => file.visibility !== 'closed'); + const files: [string, SearchFile][] = Object.entries( + results, + ).filter(([_, file]) => file.visibility !== 'closed'); useEffect(() => { if (isMounted) { @@ -83,23 +95,23 @@ export const Search = () => { setIsMounted(true); } }, [pattern]); - - const flattenResult = useCallback((fileId: string, file: SearchFile) => { - setSearchFileVisibility( - shareDBDoc, - fileId, - file.visibility === 'open' && focusedChildIndex === null - ? 'flattened' - : 'open' - ) - }, [focusedIndex, focusedChildIndex]); + + const flattenResult = useCallback( + (fileId: string, file: SearchFile) => { + setSearchFileVisibility( + shareDBDoc, + fileId, + file.visibility === 'open' && + focusedChildIndex === null + ? 'flattened' + : 'open', + ); + }, + [focusedIndex, focusedChildIndex], + ); const closeResult = useCallback((fileId: string) => { - setSearchFileVisibility( - shareDBDoc, - fileId, - 'closed' - ); + setSearchFileVisibility(shareDBDoc, fileId, 'closed'); }, []); const focusFileElement = useCallback((fileId, index) => { @@ -114,7 +126,8 @@ export const Search = () => { return; } - const matchingLines: number = files[focusedIndex][1].matches.length; + const matchingLines: number = + files[focusedIndex][1].matches.length; switch (event.key) { case 'Tab': @@ -122,35 +135,62 @@ export const Search = () => { setSearchFocusedIndex(focusedIndex, null); break; case 'ArrowUp': - if (focusedIndex == 0 && focusedChildIndex == null) { + if ( + focusedIndex == 0 && + focusedChildIndex == null + ) { // No effect on first search listing break; - } else if (focusedChildIndex === null || matchingLines == 0) { + } else if ( + focusedChildIndex === null || + matchingLines == 0 + ) { // Toggle the previous file last child, if any - const previousMatchingLines: number = files[focusedIndex - 1][1].matches.length; - setSearchFocusedIndex(focusedIndex - 1, previousMatchingLines > 0 ? previousMatchingLines - 1 : null); + const previousMatchingLines: number = + files[focusedIndex - 1][1].matches.length; + setSearchFocusedIndex( + focusedIndex - 1, + previousMatchingLines > 0 + ? previousMatchingLines - 1 + : null, + ); } else if (focusedChildIndex === 0) { // Toggle the file setSearchFocusedIndex(focusedIndex, null); } else { // Toggle the previous matching line - setSearchFocusedIndex(focusedIndex, focusedChildIndex - 1); + setSearchFocusedIndex( + focusedIndex, + focusedChildIndex - 1, + ); } break; case 'ArrowDown': - if (focusedIndex == files.length - 1 && focusedChildIndex == matchingLines - 1) { + if ( + focusedIndex == files.length - 1 && + focusedChildIndex == matchingLines - 1 + ) { // Last matching line should have no effect break; - } else if (focusedChildIndex === null && matchingLines > 0) { + } else if ( + focusedChildIndex === null && + matchingLines > 0 + ) { // Toggle the first matching line setSearchFocusedIndex(focusedIndex, 0); - } else if (focusedChildIndex == matchingLines - 1 || matchingLines == 0) { + } else if ( + focusedChildIndex == matchingLines - 1 || + matchingLines == 0 + ) { // Toggle the next file setSearchFocusedIndex(focusedIndex + 1, null); } else { // Toggle the next matching line - setSearchFocusedIndex(focusedIndex, focusedChildIndex + 1); + setSearchFocusedIndex( + focusedIndex, + focusedChildIndex + 1, + ); } break; @@ -158,13 +198,22 @@ export const Search = () => { if (focusedChildIndex !== null) { setSearchFocusedIndex(focusedIndex, null); } else { - flattenResult(files[focusedIndex][0], files[focusedIndex][1]); + flattenResult( + files[focusedIndex][0], + files[focusedIndex][1], + ); } break; case 'ArrowRight': if (files[focusedIndex][1].visibility !== 'open') { - flattenResult(files[focusedIndex][0], files[focusedIndex][1]); - } else if (focusedChildIndex === null && matchingLines !== 0) { + flattenResult( + files[focusedIndex][0], + files[focusedIndex][1], + ); + } else if ( + focusedChildIndex === null && + matchingLines !== 0 + ) { setSearchFocusedIndex(focusedIndex, 0); } @@ -176,11 +225,22 @@ export const Search = () => { if (focusedChildIndex !== null) { // Jump to matching line - const line: number = files[focusedIndex][1].matches[focusedChildIndex].line; - const index: number = files[focusedIndex][1].matches[focusedChildIndex].index; + const line: number = + files[focusedIndex][1].matches[ + focusedChildIndex + ].line; + const index: number = + files[focusedIndex][1].matches[ + focusedChildIndex + ].index; if (editorCache.get(fileId)) { - jumpToPattern(editorCache.get(fileId).editor, pattern, line, index); + jumpToPattern( + editorCache.get(fileId).editor, + pattern, + line, + index, + ); } } break; @@ -190,25 +250,35 @@ export const Search = () => { // Ensure keyboard navigation keeps results within the current view const file: string = files[focusedIndex][0]; - const container = document.getElementById("sidebar-view-container"); + const container = document.getElementById( + 'sidebar-view-container', + ); if (container) { if (focusedChildIndex === null) { const fileElement = document.getElementById(file); - if (!(isResultElementWithinView(container, fileElement))) { - fileElement.scrollIntoView({ block: "center" }); + if ( + !isResultElementWithinView(container, fileElement) + ) { + fileElement.scrollIntoView({ block: 'center' }); } } else { - const line = files[focusedIndex][1].matches[focusedChildIndex].line; - const lineElement = document.getElementById(file + "-" + line); + const line = + files[focusedIndex][1].matches[focusedChildIndex] + .line; + const lineElement = document.getElementById( + file + '-' + line, + ); - if (!(isResultElementWithinView(container, lineElement))) { - lineElement.scrollIntoView({ block: "center" }); + if ( + !isResultElementWithinView(container, lineElement) + ) { + lineElement.scrollIntoView({ block: 'center' }); } } } - } + }; useEffect(() => { // Focus the search input on mount and keyboard shortcut invocation @@ -226,56 +296,74 @@ export const Search = () => { setSearch(event.target.value)} + onChange={(event) => + setSearch(event.target.value) + } ref={inputRef} spellCheck="false" /> {Object.keys(results).length >= 1 && - pattern.trim().length >= 1 ? ( + pattern.trim().length >= 1 ? (
- {files.map(([fileId, file]: [string, SearchFile], index) => { - const matches = file.matches; - return ( -
+ className="search-results" + > + {files.map( + ( + [fileId, file]: [string, SearchFile], + index, + ) => { + const matches = file.matches; + return (
focusFileElement(fileId, index)} - id={fileId} - className={`search-file-heading - ${(focusedIndex == index && focusedChildIndex == null) - ? 'active' : ''}`} + className="search-result" + key={file.name} > -
-
flattenResult(fileId, file)} - style={{ - transform: `rotate(${file.visibility === 'open' ? 90 : 0}deg)`, - }} - > - -
-
- {getExtensionIcon(file.name)} -
{file.name}
+
+ focusFileElement(fileId, index) + } + id={fileId} + className={`search-file-heading + ${ + focusedIndex == index && + focusedChildIndex == null + ? 'active' + : '' + }`} + > +
+
+ flattenResult(fileId, file) + } + style={{ + transform: `rotate(${file.visibility === 'open' ? 90 : 0}deg)`, + }} + > + +
+
+ {getExtensionIcon(file.name)} +
{file.name}
+
-
-
- { - (index == focusedIndex && focusedChildIndex == null) ? ( +
+ {index == focusedIndex && + focusedChildIndex == null ? ( { event.stopPropagation(); closeResult(fileId); // Focus the previous search file, if possible - setSearchFocusedIndex(Math.max(0, index - 1), null); + setSearchFocusedIndex( + Math.max(0, index - 1), + null, + ); }} > @@ -284,86 +372,119 @@ export const Search = () => {
{matches.length}
- ) - } + )} +
-
-
- {((file.visibility === 'open') - || (file.visibility === "flattened" && index == focusedIndex && focusedChildIndex !== null)) && - file.matches.map((match, childIndex) => { - const before = match.text.substring( - 0, - match.index, - ); - const hit = match.text.substring( - match.index, - match.index + pattern.length, - ); - const after = match.text.substring( - match.index + pattern.length, - ); +
+ {(file.visibility === 'open' || + (file.visibility === 'flattened' && + index == focusedIndex && + focusedChildIndex !== null)) && + file.matches.map( + (match, childIndex) => { + const before = + match.text.substring( + 0, + match.index, + ); + const hit = match.text.substring( + match.index, + match.index + pattern.length, + ); + const after = + match.text.substring( + match.index + pattern.length, + ); - const identifier = file.name + "-" + match.line; + const identifier = + file.name + '-' + match.line; - return ( -
-

{ - setSearchFocusedIndex(index, childIndex); - - if (editorCache.get(fileId)) { - jumpToPattern(editorCache.get(fileId).editor, - pattern, match.line, match.index); + return ( +

- {before} - - {hit} - - {after} -

- { - (focusedIndex == index && focusedChildIndex === childIndex) && ( - { - event.stopPropagation(); - setSearchLineVisibility(shareDBDoc, fileId, match.line); + id={fileId + '-' + match.line} + className={`search-line + ${ + focusedIndex == index && + focusedChildIndex == + childIndex + ? 'active' + : '' + }`} + > +

{ + setSearchFocusedIndex( + index, + childIndex, + ); - if (childIndex == 0) { - // Removing remaining single line - setSearchFocusedIndex(index, null); + if ( + editorCache.get(fileId) + ) { + jumpToPattern( + editorCache.get( + fileId, + ).editor, + pattern, + match.line, + match.index, + ); } }} > - - - ) - } -

- ); - })} + {before} + + {hit} + + {after} +

+ {focusedIndex == index && + focusedChildIndex === + childIndex && ( + { + event.stopPropagation(); + setSearchLineVisibility( + shareDBDoc, + fileId, + match.line, + ); + + if (childIndex == 0) { + // Removing remaining single line + setSearchFocusedIndex( + index, + null, + ); + } + }} + > + + + )} +
+ ); + }, + )} +
-
- ) - })} + ); + }, + )}
) : (
diff --git a/src/client/VZSidebar/index.tsx b/src/client/VZSidebar/index.tsx index b1f8b5aa..808deaa8 100644 --- a/src/client/VZSidebar/index.tsx +++ b/src/client/VZSidebar/index.tsx @@ -372,7 +372,7 @@ export const VZSidebar = ({
-