vzcode 2.3.0 → 2.4.0

package/src/client/VZSidebar/Item.tsx

@@ -0,0 +1,237 @@
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useContext,
+} from 'react';
+import { ItemId } from '../../types';
+import { EditSVG, TrashSVG } from '../Icons';
+import { Tooltip, OverlayTrigger } from '../bootstrap';
+import { VZCodeContext } from '../VZCodeContext';
+import { FileTypeIcon } from './FileTypeIcon';
+
+// TODO consider moving this up to a higher level of the component tree
+import { DeleteConfirmationModal } from './DeleteConfirmationModal';
+
+const enableRenameDirectory = true;
+
+// A file or directory in the sidebar.
+export const Item = ({
+  id,
+  name,
+  children,
+  handleClick,
+  handleDoubleClick,
+  handleRenameClick,
+  handleDeleteClick,
+  isDirectory = false,
+  isActive = false,
+  renameFileTooltipText = isDirectory
+    ? 'Rename Directory'
+    : 'Rename File',
+  deleteFileTooltipText = isDirectory
+    ? 'Delete Directory'
+    : 'Delete File',
+}: {
+  id: ItemId;
+  name: string;
+  children: React.ReactNode;
+  handleClick: (event: React.MouseEvent) => void;
+  handleDoubleClick?: (event: React.MouseEvent) => void;
+  handleRenameClick: (newName: string) => void;
+  handleDeleteClick: () => void;
+  isDirectory?: boolean;
+  isActive?: boolean;
+  renameFileTooltipText?: string;
+  deleteFileTooltipText?: string;
+}) => {
+  const { hoveredItemId, setHoveredItemId } =
+    useContext(VZCodeContext);
+  // // Tracks whether the mouse is hovering over the file or directory
+  // const [isHovered, setIsHovered] = useState(false);
+  const isHovered = hoveredItemId === id;
+  const setIsHovered = useCallback(
+    (isHovered: boolean) => {
+      if (isHovered) {
+        setHoveredItemId(id);
+      } else {
+        setHoveredItemId(null);
+      }
+    },
+    [id, setHoveredItemId],
+  );
+
+  // Tracks whether the file is being renamed (inline text input)
+  const [isRenaming, setIsRenaming] = useState(false);
+
+  // Tracks the value of the input field when renaming
+  const [renameValue, setRenameValue] = useState('');
+
+  // Tracks whether the delete confirmation modal is open
+  const [showModal, setShowModal] = useState(false);
+
+  // Ref to track the input DOM, so that we can focus and blur it
+  const renameInputRef = useRef(null);
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Escape') {
+        setIsRenaming(false);
+      } else if (event.key === 'Enter') {
+        renameInputRef.current.blur();
+      }
+    },
+    [],
+  );
+
+  const onBlur = useCallback(() => {
+    setIsRenaming(false);
+    if (renameInputRef.current.value.trim() === '') {
+      // Renaming to empty signals deletion
+      setShowModal(true);
+    } else {
+      handleRenameClick(renameInputRef.current.value);
+    }
+  }, [handleRenameClick]);
+
+  const handleRenameIconClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setIsRenaming(!isRenaming);
+      setRenameValue(name);
+    },
+    [name, isRenaming],
+  );
+
+  // Focus the input field when renaming
+  useEffect(() => {
+    if (isRenaming) {
+      renameInputRef.current.focus();
+    }
+  }, [isRenaming]);
+
+  // Function to open the delete file confirmation modal
+  const handleModalOpen = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(true);
+    },
+    [],
+  );
+
+  // Function to close the modal
+  const handleModalClose = useCallback(() => {
+    setShowModal(false);
+  }, []);
+
+  // Function to handle confirmation on modal
+  const handleConfirmModal = useCallback(
+    (event: React.MouseEvent | undefined) => {
+      // TODO clean this up.
+      // This was added to prevent parent listeners from firing
+      // when the modal is confirmed.
+      event?.stopPropagation();
+      setShowModal(false);
+      handleDeleteClick();
+    },
+    [handleDeleteClick],
+  );
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const onChange = useCallback(() => {
+    setRenameValue(renameInputRef.current.value);
+  }, []);
+
+  return (
+    <div
+      className={`file-or-directory user-select-none ${
+        isActive ? 'active-file' : ''
+      }`}
+      onClick={isRenaming ? null : handleClick}
+      onDoubleClick={
+        isRenaming || !handleDoubleClick
+          ? null
+          : handleDoubleClick
+      }
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className="name">
+        {isRenaming ? (
+          <>
+            <FileTypeIcon name={renameValue} />
+            <input
+              className="rename-input"
+              ref={renameInputRef}
+              type="text"
+              aria-label="Field name"
+              value={renameValue}
+              onKeyDown={onKeyDown}
+              onBlur={onBlur}
+              onChange={onChange}
+            />
+          </>
+        ) : (
+          children
+        )}
+      </div>
+      {isHovered && !isRenaming ? (
+        <div
+          className="utils"
+          style={{ position: 'relative' }}
+        >
+          {(isDirectory ? enableRenameDirectory : true) ? (
+            <OverlayTrigger
+              placement="top"
+              overlay={
+                <Tooltip id="rename-file-tooltip">
+                  {renameFileTooltipText}
+                </Tooltip>
+              }
+            >
+              <i
+                onClick={handleRenameIconClick}
+                className="icon-button icon-button-dark"
+              >
+                <EditSVG />
+              </i>
+            </OverlayTrigger>
+          ) : null}
+          <OverlayTrigger
+            placement="top"
+            overlay={
+              <Tooltip id="delete-file-tooltip">
+                {deleteFileTooltipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleModalOpen}
+              className="icon-button icon-button-dark"
+            >
+              <TrashSVG />
+            </i>
+          </OverlayTrigger>
+        </div>
+      ) : null}
+      {/* TODO Move this up to a higher level of the tree */}
+      {showModal && (
+        <DeleteConfirmationModal
+          show={showModal}
+          onClose={handleModalClose}
+          onConfirm={handleConfirmModal}
+          isDirectory={isDirectory}
+          name={name}
+        />
+      )}
+    </div>
+  );
+};

package/src/client/VZSidebar/Listing.tsx

@@ -0,0 +1,47 @@
+import { useContext } from 'react';
+import { VizFileId } from '@vizhub/viz-types';
+import type { FileTree, FileTreeFile } from '../../types';
+import { VZCodeContext } from '../VZCodeContext';
+import { DirectoryListing } from './DirectoryListing';
+import { FileListing } from './FileListing';
+
+// A "Listing" is a "FileListing" or a "DirectoryListing"
+// that appears in the Sidebar.
+export const Listing = ({
+  entity,
+  handleFileClick,
+  handleFileDoubleClick,
+}: {
+  entity: FileTree | FileTreeFile;
+  handleFileClick: (fileId: VizFileId) => void;
+  handleFileDoubleClick: (fileId: VizFileId) => void;
+}) => {
+  const { activePane, sidebarPresenceIndicators } =
+    useContext(VZCodeContext);
+  const { name, file, fileId } = entity as FileTreeFile;
+  const { path, children } = entity as FileTree;
+
+  const presence =
+    sidebarPresenceIndicators?.filter(
+      (indicator) => indicator.fileId === fileId,
+    ) || [];
+
+  return file ? (
+    <FileListing
+      fileId={fileId}
+      name={name}
+      handleFileClick={handleFileClick}
+      handleFileDoubleClick={handleFileDoubleClick}
+      isActive={fileId === activePane.activeFileId}
+      presence={presence}
+    />
+  ) : (
+    <DirectoryListing
+      name={name}
+      path={path}
+      children={children}
+      handleFileClick={handleFileClick}
+      handleFileDoubleClick={handleFileDoubleClick}
+    />
+  );
+};