vzcode 1.4.0 → 1.6.0

package/src/client/VZSidebar/Search.tsx

@@ -0,0 +1,242 @@
+import {
+  JavaScriptSVG,
+  TypeScriptSVG,
+  ReactSVG,
+  SvelteSVG,
+  JsonSVG,
+  MarkdownSVG,
+  HtmlSVG,
+  CssSVG,
+  SearchFileSVG,
+  DirectoryArrowSVG,
+  CloseSVG,
+} from '../Icons';
+import {
+  useRef,
+  useEffect,
+  useContext,
+  useState,
+} from 'react';
+import { Form } from '../bootstrap';
+import { VZCodeContext } from '../VZCodeContext';
+import { SearchFile } from '../../types';
+import { EditorView } from 'codemirror';
+
+function getExtensionIcon(extension: string) {
+  switch (extension) {
+    case 'jsx':
+    case 'tsx':
+      return <ReactSVG />;
+    case 'js':
+      return <JavaScriptSVG />;
+    case 'ts':
+      return <TypeScriptSVG />;
+    case 'json':
+      return <JsonSVG />;
+    case 'md':
+      return <MarkdownSVG />;
+    case 'html':
+      return <HtmlSVG />;
+    case 'css':
+      return <CssSVG />;
+    case 'svelte':
+      return <SvelteSVG />;
+    default:
+      return <SearchFileSVG />;
+  }
+}
+
+function jumpToPattern(
+  editor: EditorView,
+  pattern: string,
+  line: number,
+  index: number,
+) {
+  const position: number =
+    editor.state.doc.line(line).from + index;
+
+  editor.dispatch({
+    selection: {
+      anchor: position,
+      head: position + pattern.length,
+    },
+    scrollIntoView: true,
+    effects: EditorView.scrollIntoView(position, {
+      y: 'center',
+    }),
+  });
+}
+
+export const Search = () => {
+  const inputRef = useRef(null);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const {
+    search,
+    setSearch,
+    setActiveFileId,
+    openTab,
+    setSearchResults,
+    setSearchFileVisibility,
+    shareDBDoc,
+    editorCache,
+  } = useContext(VZCodeContext);
+  const { pattern, results } = search;
+
+  useEffect(() => {
+    if (isMounted) {
+      // Only conduct a search after fully mounting and entering a new non-empty pattern
+      setIsSearching(pattern.trim().length >= 1);
+
+      // Search about 2 seconds after entering a new pattern
+      const delaySearch = setTimeout(() => {
+        if (
+          pattern.trim().length >= 1 &&
+          inputRef.current
+        ) {
+          setSearchResults(shareDBDoc);
+          setIsSearching(false);
+        }
+      }, 2000);
+
+      return () => clearTimeout(delaySearch);
+    } else {
+      setIsMounted(true);
+    }
+  }, [pattern]);
+
+  return (
+    <div>
+      <Form.Group
+        className="sidebar-search-form mb-3"
+        controlId="searchName"
+      >
+        <Form.Control
+          type="text"
+          value={pattern}
+          onChange={(e) => setSearch(e.target.value)}
+          ref={inputRef}
+          spellCheck="false"
+        />
+      </Form.Group>
+      {Object.keys(results).length >= 1 &&
+      pattern.trim().length >= 1 ? (
+        <div className="search-results">
+          {Object.entries(results)
+            .filter(
+              ([_, file]) => file.visibility !== 'closed',
+            )
+            .map(([fileId, file]: [string, SearchFile]) => (
+              <div
+                className="search-result"
+                key={file.name}
+              >
+                <div className="search-file-heading">
+                  <div className="search-file-title">
+                    <div
+                      className="arrow-wrapper"
+                      style={{
+                        transform: `rotate(${file.visibility === 'open' ? 90 : 0}deg)`,
+                      }}
+                      onClick={() => {
+                        setSearchFileVisibility(
+                          shareDBDoc,
+                          fileId,
+                          file.visibility === 'open'
+                            ? 'flattened'
+                            : 'open',
+                        );
+                      }}
+                    >
+                      <DirectoryArrowSVG />
+                    </div>
+                    <div className="search-file-name">
+                      {getExtensionIcon(
+                        file.name.split('.')[1],
+                      )}
+                      <h5>{file.name}</h5>
+                    </div>
+                  </div>
+                  <div className="search-file-info">
+                    <h6 className="search-file-count">
+                      {file.matches.length}
+                    </h6>
+                    <div
+                      className="search-file-close"
+                      onClick={() => {
+                        setSearchFileVisibility(
+                          shareDBDoc,
+                          fileId,
+                          'closed',
+                        );
+                      }}
+                    >
+                      <CloseSVG />
+                    </div>
+                  </div>
+                </div>
+                <div className="search-file-lines">
+                  {file.visibility != 'flattened' &&
+                    file.matches.map((match) => {
+                      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,
+                      );
+
+                      return (
+                        <p
+                          className="search-line"
+                          key={
+                            file.name +
+                            ' - ' +
+                            match.line +
+                            ' - ' +
+                            match.index
+                          }
+                          onClick={() => {
+                            setActiveFileId(fileId);
+                            openTab({
+                              fileId: fileId,
+                              isTransient: false,
+                            });
+
+                            if (editorCache.get(fileId)) {
+                              jumpToPattern(
+                                editorCache.get(fileId)
+                                  .editor,
+                                pattern,
+                                match.line,
+                                match.index,
+                              );
+                            }
+                          }}
+                        >
+                          {before}
+                          <span className="search-pattern">
+                            {hit}
+                          </span>
+                          {after}
+                        </p>
+                      );
+                    })}
+                </div>
+              </div>
+            ))}
+        </div>
+      ) : (
+        <div className="search-results">
+          <h6>
+            {isSearching ? 'Searching...' : 'No Results'}
+          </h6>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/client/VZSidebar/index.tsx

@@ -5,10 +5,13 @@ import {
   FileTreeFile,
 } from '../../types';
 import { Tooltip, OverlayTrigger } from '../bootstrap';
+import { Search } from './Search';
 import { getFileTree } from '../getFileTree';
 import { sortFileTree } from '../sortFileTree';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import {
+  FolderSVG,
+  SearchSVG,
   BugSVG,
   GearSVG,
   NewSVG,
@@ -31,18 +34,24 @@ export const VZSidebar = ({
   openSettingsTooltipText = 'Open Settings',
   openKeyboardShortcuts = 'Keyboard Shortcuts',
   reportBugTooltipText = 'Report Bug',
+  searchToolTipText = 'Search',
+  filesToolTipText = 'Files',
 }: {
   createFileTooltipText?: string;
   createDirTooltipText?: string;
   openSettingsTooltipText?: string;
   reportBugTooltipText?: string;
   openKeyboardShortcuts?: string;
+  searchToolTipText?: string;
+  filesToolTipText?: string;
 }) => {
   const {
     files,
     openTab,
     setIsSettingsOpen,
     setIsDocOpen,
+    isSearchOpen,
+    setIsSearchOpen,
     handleOpenCreateFileModal,
     handleOpenCreateDirModal,
     connected,
@@ -103,126 +112,170 @@ export const VZSidebar = ({
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="files" ref={sidebarRef} tabIndex={-1}>
-        <div className="full-box">
-          <div className="sidebar-section-hint">Files</div>
-          <div className="sidebar-section-buttons">
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="open-keyboard-shortcuts">
-                  {openKeyboardShortcuts}
-                </Tooltip>
-              }
+      <div
+        className="full-box"
+        ref={sidebarRef}
+        tabIndex={-1}
+      >
+        <div className="sidebar-section-buttons">
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="files-tooltip">
+                {filesToolTipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={() => setIsSearchOpen(false)}
+              className="icon-button icon-button-dark"
             >
-              <i
-                onClick={handleQuestionMarkClick}
-                className="icon-button icon-button-dark"
-              >
-                <QuestionMarkSVG />
-              </i>
-            </OverlayTrigger>
-
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="report-bug-tooltip">
-                  {reportBugTooltipText}
-                </Tooltip>
-              }
+              <FolderSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="search-tooltip">
+                {searchToolTipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={() => setIsSearchOpen(true)}
+              className="icon-button icon-button-dark"
             >
-              <a
-                href="https://github.com/vizhub-core/vzcode/issues/new"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <i className="icon-button icon-button-dark">
-                  <BugSVG />
-                </i>
-              </a>
-            </OverlayTrigger>
-
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="open-settings-tooltip">
-                  {openSettingsTooltipText}
-                </Tooltip>
-              }
+              <SearchSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="open-keyboard-shortcuts">
+                {openKeyboardShortcuts}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleQuestionMarkClick}
+              className="icon-button icon-button-dark"
             >
-              <i
-                onClick={handleSettingsClick}
-                className="icon-button icon-button-dark"
-              >
-                <GearSVG />
-              </i>
-            </OverlayTrigger>
-
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="create-file-tooltip">
-                  {createFileTooltipText}
-                </Tooltip>
-              }
+              <QuestionMarkSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="report-bug-tooltip">
+                {reportBugTooltipText}
+              </Tooltip>
+            }
+          >
+            <a
+              href="https://github.com/vizhub-core/vzcode/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
             >
-              <i
-                onClick={handleOpenCreateFileModal}
-                className="icon-button icon-button-dark"
-              >
-                <NewSVG />
+              <i className="icon-button icon-button-dark">
+                <BugSVG />
               </i>
-            </OverlayTrigger>
-
-            {/*Directory Rename*/}
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="create-dir-tooltip">
-                  {createDirTooltipText}
-                </Tooltip>
-              }
+            </a>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="open-settings-tooltip">
+                {openSettingsTooltipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleSettingsClick}
+              className="icon-button icon-button-dark"
             >
-              <i
-                onClick={handleOpenCreateDirModal}
-                className="icon-button icon-button-dark"
-              >
-                <FileSVG />
-              </i>
-            </OverlayTrigger>
-          </div>
+              <GearSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="create-file-tooltip">
+                {createFileTooltipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleOpenCreateFileModal}
+              className="icon-button icon-button-dark"
+            >
+              <NewSVG />
+            </i>
+          </OverlayTrigger>
+
+          {/*Directory Rename*/}
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="create-dir-tooltip">
+                {createDirTooltipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleOpenCreateDirModal}
+              className="icon-button icon-button-dark"
+            >
+              <FileSVG />
+            </i>
+          </OverlayTrigger>
         </div>
-        {isDragOver ? (
-          <div className="empty">
-            <div className="empty-text">
-              Drop files here!
+
+        <div className="files">
+          {!isSearchOpen ? (
+            <div className="sidebar-files">
+              {isDragOver ? (
+                <div className="empty">
+                  <div className="empty-text">
+                    Drop files here!
+                  </div>
+                </div>
+              ) : filesExist ? (
+                fileTree.children.map((entity) => {
+                  const { fileId } = entity as FileTreeFile;
+                  const { path } = entity as FileTree;
+                  const key = fileId ? fileId : path;
+                  return (
+                    <Listing
+                      key={key}
+                      entity={entity}
+                      handleFileClick={handleFileClick}
+                      handleFileDoubleClick={
+                        handleFileDoubleClick
+                      }
+                    />
+                  );
+                })
+              ) : (
+                <div className="empty">
+                  <div className="empty-text">
+                    It looks like you don't have any files
+                    yet! Click the "Create file" button
+                    above to create your first file.
+                  </div>
+                </div>
+              )}
             </div>
-          </div>
-        ) : filesExist ? (
-          fileTree.children.map((entity) => {
-            const { fileId } = entity as FileTreeFile;
-            const { path } = entity as FileTree;
-            const key = fileId ? fileId : path;
-            return (
-              <Listing
-                key={key}
-                entity={entity}
-                handleFileClick={handleFileClick}
-                handleFileDoubleClick={
-                  handleFileDoubleClick
-                }
-              />
-            );
-          })
-        ) : (
-          <div className="empty">
-            <div className="empty-text">
-              It looks like you don't have any files yet!
-              Click the "Create file" button above to create
-              your first file.
+          ) : (
+            <div className="sidebar-search">
+              <Search />
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
 
       {enableConnectionStatus && (