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 { NextPage } from "next";
import Link from "next/link"; 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"; import styles from "../../styles/REPL/REPLHistory.module.css";
interface REPLHistoryParams { interface REPLHistoryParams {
history: string[]; history: string[];
inputRef: MutableRefObject<HTMLInputElement|undefined>; inputRef: MutableRefObject<HTMLInputElement|null>;
} }
const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => { 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 { interface REPLInputParams {
historyCallback: CallableFunction; historyCallback: CallableFunction;
historyClear: CallableFunction; historyClear: CallableFunction;
inputRef: MutableRefObject<HTMLInputElement|undefined>; inputRef: MutableRefObject<HTMLInputElement|null>;
modalManipulation: { modalManipulation: {
setModalVisible: CallableFunction; setModalVisible: CallableFunction;
setModalProject: 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 REPLInput from "./REPLInput";
import REPLHistory from "./REPLHistory"; import REPLHistory from "./REPLHistory";
import styles from "../../styles/REPL/REPLComplete.module.css"; import styles from "../../styles/REPL/REPLComplete.module.css";
import type { NextPage } from "next"; import type { NextPage } from "next";
interface IREPLProps { interface IREPLProps {
inputRef: MutableRefObject<HTMLInputElement|undefined>; inputRef: MutableRefObject<HTMLInputElement|null>;
modalManipulation: { modalManipulation: {
setModalVisible: CallableFunction; setModalVisible: CallableFunction;
setModalProject: CallableFunction; setModalProject: CallableFunction;
@ -13,7 +13,9 @@ interface IREPLProps {
} }
const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => { 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 onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
const onClearHistory = () => manipulateHistory([]); const onClearHistory = () => manipulateHistory([]);
@ -21,7 +23,11 @@ const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
if (inputRef.current) inputRef.current.focus(); 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} /> <REPLHistory history={history} inputRef={inputRef} />
<REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} /> <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} />
<div style={{flexGrow: 2}} onClick={focusInput}></div> <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"; import styles from "../styles/Home.module.css";
const Home: NextPage = () => { const Home: NextPage = () => {
const inputRef = useRef<HTMLInputElement>(); const inputRef = useRef<HTMLInputElement>(null);
const [modalVisible, setModalVisible] = useState<boolean>(false); const [modalVisible, setModalVisible] = useState<boolean>(false);
const [modalProject, setModalProject] = useState<string>(""); const [modalProject, setModalProject] = useState<string>("");