c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Scroll.

Browse Source
This commit is contained in:
Daniel Kluge 2022-02-05 00:47:36 +01:00
parent 4ba79f63d0
commit 5485bf3bfa
4 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/REPL/REPLHistory.tsx
View File

@ -1,11 +1,11 @@
import { NextPage } from "next";
import Link from "next/link";
import { BaseSyntheticEvent, MutableRefObject } from "react";
import { BaseSyntheticEvent, MutableRefObject, useEffect, useRef } from "react";
import styles from "../../styles/REPL/REPLHistory.module.css";
interface REPLHistoryParams {
history: string[];
inputRef: MutableRefObject<HTMLInputElement|undefined>;
inputRef: MutableRefObject<HTMLInputElement|null>;
}
const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {

2
components/REPL/REPLInput.tsx
View File

@ -8,7 +8,7 @@ import { Project } from "../../lib/projects/types";
interface REPLInputParams {
historyCallback: CallableFunction;
historyClear: CallableFunction;
inputRef: MutableRefObject<HTMLInputElement|undefined>;
inputRef: MutableRefObject<HTMLInputElement|null>;
modalManipulation: {
setModalVisible: CallableFunction;
setModalProject: CallableFunction;

14
components/REPL/index.tsx
View File

@ -1,11 +1,11 @@
import { MutableRefObject, useRef, useState } from "react";
import { MutableRefObject, useEffect, useRef, useState } from "react";
import REPLInput from "./REPLInput";
import REPLHistory from "./REPLHistory";
import styles from "../../styles/REPL/REPLComplete.module.css";
import type { NextPage } from "next";
interface IREPLProps {
inputRef: MutableRefObject<HTMLInputElement|undefined>;
inputRef: MutableRefObject<HTMLInputElement|null>;
modalManipulation: {
setModalVisible: CallableFunction;
setModalProject: CallableFunction;
@ -13,7 +13,9 @@ interface IREPLProps {
}
const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
const [history, manipulateHistory] = useState<string[]>([]);
const date = new Date();
const [history, manipulateHistory] = useState<string[]>([`cer0 0S - ${date.toLocaleDateString()}`]);
const containerRef = useRef<HTMLDivElement>(null);
const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
const onClearHistory = () => manipulateHistory([]);
@ -21,7 +23,11 @@ const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
if (inputRef.current) inputRef.current.focus();
};
return (<div className={styles.container}>
useEffect(() => {
if(containerRef && containerRef.current) containerRef.current.scrollTo(0, containerRef.current.scrollHeight);
}, [history]);
return (<div className={styles.container} ref={containerRef}>
<REPLHistory history={history} inputRef={inputRef} />
<REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} />
<div style={{flexGrow: 2}} onClick={focusInput}></div>

2
pages/index.tsx
View File

@ -8,7 +8,7 @@ import REPL from "../components/REPL";
import styles from "../styles/Home.module.css";
const Home: NextPage = () => {
const inputRef = useRef<HTMLInputElement>();
const inputRef = useRef<HTMLInputElement>(null);
const [modalVisible, setModalVisible] = useState<boolean>(false);
const [modalProject, setModalProject] = useState<string>("");