Add auto scroll to bottom.

WTFAcademy · May 3, 2023 · 07e1e2b · 07e1e2b
1 parent f50d781
commit 07e1e2b
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/core/src/components/Console/index.tsx b/packages/core/src/components/Console/index.tsx
@@ -4,6 +4,7 @@ import NavBar from "../NavBar";
 import {useEditor} from "../../editor/contexts/editorContext";
 import {generateConsoleMessageToShow} from "../../types/console";
 import {useConsole} from "../../editor/contexts/consoleContext";
+import {useEffect, useRef} from "react";
 
 const NAVS = [
   {label: "Console", id: "console"},
@@ -17,15 +18,20 @@ type TProps = {
 const Console = (props: TProps) => {
   const { id } = useEditor();
   const {consoles} = useConsole();
+  const consoleRef = useRef<HTMLDivElement>(null)
 
   const consoleMessages = consoles || [];
 
   const handleDeleteClick = () => props.onDeleteClick && props.onDeleteClick();
 
+  useEffect(() => {
+    consoleRef.current?.scrollTo(0, consoleRef.current.scrollHeight)
+  }, [consoleMessages])
+
   return (
     <div key={id + "_console"} className="h-full flex flex-col flex-1 bg-primary-700 pt-2 rounded-b-[12px]">
       <NavBar globalId={id} navs={NAVS} onDeleteClick={handleDeleteClick} />
-      <div className="flex-auto mb-4 text-primary-100 p-2 text-[12px] overflow-scroll">
+      <div ref={consoleRef} className="flex-auto mb-4 text-primary-100 p-2 text-[12px] overflow-scroll">
         {consoleMessages.map((item, index) => {
           let data
           try {
@@ -35,7 +41,7 @@ const Console = (props: TProps) => {
             return (
               <div key={index} className={`flex ${item.type === 'error' ? 'text-red-500' : 'text-white'}`}>
                 <span>[{new Date(item.timestamp).toLocaleTimeString()}]:</span>
-                <ReactJson src={data} theme="ocean" style={{backgroundColor: 'transparent'}} />
+                <ReactJson src={data} theme="ocean" collapsed style={{backgroundColor: 'transparent'}} />
               </div>
             )
           } else