qsharp-lang 1.0.34-dev → 1.1.0-dev

package/ux/resultsTable.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { useRef, useState } from "preact/hooks";
+import { useRef, useState, useEffect } from "preact/hooks";
 
 export type CellValue = string | number | { value: string; sortBy: number };
 export type Row = {
@@ -14,10 +14,9 @@ export function ResultsTable(props: {
   columnNames: string[];
   rows: Row[];
   initialColumns: number[];
-  ensureSelected: boolean;
   onRowDeleted(rowId: string): void;
-  selectedRow: string | null; // type selected to confirm with the useState pattern on the parent component
-  setSelectedRow(rowId: string): void;
+  selectedRow: string | null;
+  onRowSelected(rowId: string): void;
 }) {
   const [showColumns, setShowColumns] = useState(props.initialColumns);
   const [sortColumn, setSortColumn] = useState<{
@@ -28,26 +27,9 @@ export function ResultsTable(props: {
   const [showColumnMenu, setShowColumnMenu] = useState(false);
   const [showRowMenu, setShowRowMenu] = useState("");
 
-  // Find the first row that is new in the current sort order
-  const newest = getSortedRows(props.rows).find(
-    (row) => (row.cells[row.cells.length - 1] as string) === "New",
-  );
-
-  // Select the first of the newest rows, otherwise preserve the existing selection
-  if (newest && props.ensureSelected) {
-    const rowId = newest.cells[0].toString();
-    setSelectedRow(rowId);
-  } else if (
-    !props.selectedRow &&
-    props.ensureSelected &&
-    props.rows.length > 0
-  ) {
-    const rowId = props.rows[0].cells[0].toString();
-    setSelectedRow(rowId);
-  }
-
   // Use to track the column being dragged
   const draggingCol = useRef("");
+  const columnMenu = useRef<HTMLDivElement>(null);
 
   /*
   Note: Drag and drop events can occur faster than preact reconciles state.
@@ -83,8 +65,8 @@ export function ResultsTable(props: {
     }
   }
 
-  function setSelectedRow(rowId: string) {
-    props.setSelectedRow(rowId);
+  function onRowSelected(rowId: string) {
+    props.onRowSelected(rowId);
   }
 
   function onDragOver(ev: DragEvent) {
@@ -200,11 +182,9 @@ export function ResultsTable(props: {
     }
   }
 
-  function rowClicked(rowId: string) {
-    if (props.selectedRow === rowId && props.ensureSelected) return;
-
+  function onRowClicked(rowId: string) {
     const newSelectedRow = props.selectedRow === rowId ? "" : rowId;
-    setSelectedRow(newSelectedRow);
+    onRowSelected(newSelectedRow);
   }
 
   function onClickRowMenu(ev: MouseEvent, rowid: string) {
@@ -254,17 +234,59 @@ export function ResultsTable(props: {
     // Clear out any menus or selections for the row if needed
     setShowRowMenu("");
     if (props.selectedRow === rowId) {
-      setSelectedRow("");
+      onRowSelected("");
     }
     props.onRowDeleted(rowId);
   }
 
+  function onKeyDown(ev: KeyboardEvent) {
+    if (!props.selectedRow) return;
+    const sortedRowNames = getSortedRows(props.rows).map((row) =>
+      row.cells[0].toString(),
+    );
+    const currIndex = sortedRowNames.indexOf(props.selectedRow);
+
+    switch (ev.code) {
+      case "ArrowDown":
+        if (currIndex < sortedRowNames.length - 1) {
+          ev.preventDefault();
+          props.onRowSelected(sortedRowNames[currIndex + 1]);
+        }
+        break;
+      case "ArrowUp":
+        if (currIndex > 0) {
+          ev.preventDefault();
+          props.onRowSelected(sortedRowNames[currIndex - 1]);
+        }
+        break;
+      default:
+      // Not of interest
+    }
+  }
+
+  useEffect(() => {
+    // Post rendering, if the column menu is displayed, then ensure it
+    // has focus so that clicking anywhere outside of it caused the blur
+    // event that closes it.
+    if (showColumnMenu && columnMenu.current) {
+      columnMenu.current.focus();
+    }
+  });
+
   return (
-    <table class="qs-resultsTable-sortedTable">
+    <table
+      class="qs-resultsTable-sortedTable"
+      tabIndex={0}
+      onKeyDown={onKeyDown}
+    >
       <thead>
         <tr>
           <th>
-            <div style="position: relative">
+            <div
+              style="position: relative"
+              tabIndex={0}
+              onBlur={() => setShowColumnMenu(false)}
+            >
               <svg
                 width="16"
                 height="16"
@@ -289,6 +311,7 @@ export function ResultsTable(props: {
                 />
               </svg>
               <div
+                ref={columnMenu}
                 class={
                   showColumnMenu
                     ? "qs-resultsTable-columnMenu qs-resultsTable-showColumnMenu"
@@ -354,7 +377,7 @@ export function ResultsTable(props: {
           const rowId = row.cells[0].toString();
           return (
             <tr
-              onClick={() => rowClicked(rowId)}
+              onClick={() => onRowClicked(rowId)}
               data-rowid={rowId}
               class={
                 rowId === props.selectedRow