remove throttle for now

timc1 · Oct 30, 2021 · c1a97b2 · c1a97b2
1 parent 3665431
commit c1a97b2
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 31 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -17,6 +17,7 @@ import { createAction } from "../../src/utils";
 import { useAnalytics } from "./utils";
 import Blog from "./Blog";
 import { ActionImpl } from "../../src/action";
+import { ActionId, useKBar } from "../../src";
 
 const searchStyle = {
   padding: "12px 16px",
@@ -124,10 +125,7 @@ const App = () => {
       <KBarPortal>
         <KBarPositioner>
           <KBarAnimator style={animatorStyle}>
-            <KBarSearch
-              style={searchStyle}
-              placeholder="Type a command or search…"
-            />
+            <KBarSearch style={searchStyle} />
             <RenderResults />
           </KBarAnimator>
         </KBarPositioner>
@@ -155,6 +153,10 @@ const App = () => {
 function RenderResults() {
   const deepMatches = useDeepMatches();
 
+  const { currentRootActionId } = useKBar((state) => ({
+    currentRootActionId: state.currentRootActionId,
+  }));
+
   const flattened = React.useMemo(
     () =>
       deepMatches.reduce((acc, curr) => {
@@ -172,7 +174,11 @@ function RenderResults() {
         typeof item === "string" ? (
           <div style={groupNameStyle}>{item}</div>
         ) : (
-          <ResultItem action={item} active={active} />
+          <ResultItem
+            action={item}
+            active={active}
+            currentRootActiveId={currentRootActionId}
+          />
         )
       }
     />
@@ -184,12 +190,21 @@ const ResultItem = React.forwardRef(
     {
       action,
       active,
+      currentRootActiveId,
     }: {
       action: ActionImpl;
       active: boolean;
+      currentRootActiveId: ActionId;
     },
     ref: React.Ref<HTMLDivElement>
   ) => {
+    const ancestors = React.useMemo(() => {
+      let index = action.ancestors.findIndex(
+        (action) => action.id === currentRootActiveId
+      );
+      return action.ancestors.slice(index + 1);
+    }, [action.ancestors, currentRootActiveId]);
+
     return (
       <div
         ref={ref}
@@ -205,12 +220,19 @@ const ResultItem = React.forwardRef(
           cursor: "pointer",
         }}
       >
-        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+        <div
+          style={{
+            display: "flex",
+            gap: "8px",
+            alignItems: "center",
+            fontSize: 14,
+          }}
+        >
           {action.icon && action.icon}
           <div style={{ display: "flex", flexDirection: "column" }}>
             <div>
-              {action.ancestors.length > 0 &&
-                action.ancestors.map((ancestor) => (
+              {ancestors.length > 0 &&
+                ancestors.map((ancestor) => (
                   <React.Fragment key={ancestor.id}>
                     <span
                       style={{
@@ -245,6 +267,7 @@ const ResultItem = React.forwardRef(
                   padding: "4px 6px",
                   background: "rgba(0 0 0 / .1)",
                   borderRadius: "4px",
+                  fontSize: 14,
                 }}
               >
                 {sc}

diff --git a/example/src/Blog.tsx b/example/src/Blog.tsx
@@ -23,7 +23,7 @@ const greatgrandchild = createAction({
 
 export default function Blog() {
   const [actions, setActions] = React.useState([
-    ...Array.from(Array(4)).map((_, i) =>
+    ...Array.from(Array(20000)).map((_, i) =>
       createAction({
         name: i.toString(),
         shortcut: [],

diff --git a/src/KBarResults.tsx b/src/KBarResults.tsx
@@ -83,7 +83,12 @@ const KBarResults: React.FC<KBarResultsProps> = (props) => {
   // entire rowVirtualizer in the dependencies array.
   const { scrollToIndex } = rowVirtualizer;
   React.useEffect(() => {
-    scrollToIndex(activeIndex);
+    scrollToIndex(activeIndex, {
+      // ensure that if the first item in the list is a group
+      // name and we are focused on the second item, to not
+      // scroll past that group, hiding it.
+      align: activeIndex <= 1 ? "end" : "auto",
+    });
   }, [activeIndex, scrollToIndex]);
 
   React.useEffect(() => {

diff --git a/src/KBarSearch.tsx b/src/KBarSearch.tsx
@@ -18,11 +18,20 @@ export default function KBarSearch(
     return () => query.setSearch("");
   }, [currentRootActionId, query]);
 
+  const placeholder = React.useMemo(
+    () =>
+      currentRootActionId
+        ? actions[currentRootActionId].name
+        : "Type a command or search…",
+    [actions, currentRootActionId]
+  );
+
   return (
     <input
       ref={ownRef}
       autoFocus
       {...props}
+      placeholder={placeholder}
       value={search}
       onChange={(event) => {
         props.onChange?.(event);

diff --git a/src/useDeepMatches.tsx b/src/useDeepMatches.tsx
@@ -34,7 +34,7 @@ export default function useDeepMatches() {
     let all: ActionImpl[] = [...actions];
     (function collectChildren(actions: ActionImpl[]) {
       actions.forEach((action) => {
-        if (action.children) {
+        if (action.children.length > 0) {
           all.push(...action.children);
           collectChildren(action.children);
         }
@@ -75,35 +75,34 @@ export default function useDeepMatches() {
 }
 
 function useInternalMatches(filtered: ActionImpl[], search: string) {
-  const throttledFiltered = useThrottledValue(filtered);
-  const throttledSearch = useThrottledValue(search);
+  // const throttledFiltered = useThrottledValue(filtered);
+  // const throttledSearch = useThrottledValue(search);
 
   return React.useMemo(
     () =>
       search.trim() === ""
-        ? throttledFiltered
-        : matchSorter(throttledFiltered, throttledSearch, {
+        ? filtered
+        : matchSorter(filtered, search, {
             keys: ["name", "keywords", "subtitle"],
           }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [throttledFiltered, throttledSearch]
+    [filtered, search]
   );
 }
 
-function useThrottledValue(value: any, ms: number = 100) {
-  const [throttledValue, setThrottledValue] = React.useState(value);
-  const lastRan = React.useRef(Date.now());
+// function useThrottledValue(value: any, ms: number = 100) {
+//   const [throttledValue, setThrottledValue] = React.useState(value);
+//   const lastRan = React.useRef(Date.now());
 
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      setThrottledValue(value);
-      lastRan.current = Date.now();
-    }, lastRan.current - (Date.now() - ms));
+//   React.useEffect(() => {
+//     const timeout = setTimeout(() => {
+//       setThrottledValue(value);
+//       lastRan.current = Date.now();
+//     }, lastRan.current - (Date.now() - ms));
 
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [ms, value]);
+//     return () => {
+//       clearTimeout(timeout);
+//     };
+//   }, [ms, value]);
 
-  return throttledValue;
-}
+//   return throttledValue;
+// }