feat: added new progress component and loader for async operations Fixes #4

demo/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, MouseEvent } from 'react'
 import ReactDOM from 'react-dom';
-import Terminal, { ColorMode, TerminalInput, TerminalOutput } from '../src/index';
+import Terminal, { ColorMode, TerminalInput, TerminalOutput, TerminalProgress } from '../src/index';
 
 import './style.css';
 
@@ -13,6 +13,7 @@ const TerminalController = (props = {}) => {
     <TerminalOutput>'view-source' will navigate to the React Terminal UI github source.</TerminalOutput>,
     <TerminalOutput>'view-react-docs' will navigate to the react docs.</TerminalOutput>,
     <TerminalOutput>'clear' will clear the terminal.</TerminalOutput>,
+    <TerminalProgress progressPercentage={0.2}></TerminalProgress>
   ]);
 
   function toggleColorMode (e: MouseEvent) {

src/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef, KeyboardEvent, ChangeEvent, ReactNode, ReactNodeArray } from 'react';
 import TerminalInput from './linetypes/TerminalInput';
 import TerminalOutput from './linetypes/TerminalOutput';
+import TerminalProgress from './linetypes/TerminalProgress';
+import TerminalLoader from './linetypes/TerminalLoader'
 import './style.css';
 
 export enum ColorMode {
@@ -19,9 +21,10 @@ export interface Props {
   redBtnCallback?: () => void;
   yellowBtnCallback?: () => void;
   greenBtnCallback?: () => void;
+  loading?: boolean;
 }
 
-const Terminal = ({name, prompt, height = "600px", colorMode, onInput, children, startingInputValue = "", redBtnCallback, yellowBtnCallback, greenBtnCallback}: Props) => {
+const Terminal = ({name, prompt, height = "600px", colorMode, onInput, children, startingInputValue = "", redBtnCallback, yellowBtnCallback, greenBtnCallback, loading}: Props) => {
   const [currentLineInput, setCurrentLineInput] = useState('');
   const [cursorPos, setCursorPos] = useState(0);
 
@@ -120,13 +123,13 @@ const Terminal = ({name, prompt, height = "600px", colorMode, onInput, children,
       </div>
       <div className="react-terminal" style={ { height } }>
         { children }
-        { typeof onInput === 'function' && <div className="react-terminal-line react-terminal-input react-terminal-active-input" data-terminal-prompt={ prompt || '$' } key="terminal-line-prompt" >{ currentLineInput }<span className="cursor" style={{ left: `${cursorPos+1}px` }}></span></div> }
+        { typeof onInput === 'function' && !loading && <div className="react-terminal-line react-terminal-input react-terminal-active-input" data-terminal-prompt={ prompt || '$' } key="terminal-line-prompt" >{ currentLineInput }<span className="cursor" style={{ left: `${cursorPos+1}px` }}></span></div> }
         <div ref={ scrollIntoViewRef }></div>
       </div>
-      <input className="terminal-hidden-input" placeholder="Terminal Hidden Input" value={ currentLineInput } autoFocus={ onInput != null } onChange={ updateCurrentLineInput } onKeyDown={ handleInputKeyDown }/>
+      {!loading && <input className="terminal-hidden-input" placeholder="Terminal Hidden Input" value={ currentLineInput } autoFocus={ onInput != null } onChange={ updateCurrentLineInput } onKeyDown={ handleInputKeyDown }/>}
     </div>
   );
 }
 
-export { TerminalInput, TerminalOutput };
+export { TerminalInput, TerminalOutput, TerminalProgress, TerminalLoader };
 export default Terminal;

src/linetypes/TerminalLoader.tsx

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren, useEffect, useState } from "react";
+export const loaderChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+type TerminalLoaderProps = PropsWithChildren<{
+    loaderCharacters?: Array<string>
+}>;
+
+
+const TerminalLoader = ({ loaderCharacters = loaderChars }: TerminalLoaderProps) => {
+    const [loaderIndex, setLoaderIndex] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setLoaderIndex((loaderIndex + 1) % loaderCharacters.length);
+        }, 100);
+        return () => clearInterval(interval);
+    }, [loaderIndex]);
+
+    return (
+        <div className="react-terminal-line react-terminal-loader">
+            {loaderCharacters[loaderIndex]}
+        </div>
+    );
+};
+
+export default TerminalLoader;

src/linetypes/TerminalProgress.tsx

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from "react";
+import TerminalLoader from "./TerminalLoader";
+
+type TerminalProgressProps = PropsWithChildren<{
+    progressPercentage?: number;
+    progressLength?: number;
+    progressChar?: string;
+}>;
+
+const TerminalProgress = ({
+    progressPercentage = 0,
+    progressLength = 20,
+    progressChar = "█",
+}: TerminalProgressProps) => {
+    return (
+        <div
+            className="react-terminal-line react-terminal-progress"
+            data-terminal-percentage={progressPercentage || 0}
+        >
+            <span className="react-terminal-progress-filled">
+                {progressChar.repeat(progressPercentage * progressLength)}
+            </span>
+            <span className="react-terminal-progress-empty">
+                {progressChar.repeat(
+                    progressLength - progressPercentage * progressLength
+                )}
+            </span>
+            <TerminalLoader />
+            <span className="react-terminal-progress-label">{Math.round(progressPercentage * 100).toString()}%</span>
+        </div>
+    );
+};
+
+export default TerminalProgress;

src/style.css

@@ -145,3 +145,36 @@
 .react-terminal-wrapper.react-terminal-light .react-terminal-progress-bar {
   background-color: #000;
 } */
+
+.react-terminal-progress {
+  display: flex;
+  margin: .5rem 0;
+  align-items: center;
+}
+
+.react-terminal-progress-filled {
+  color: #fff;
+}
+
+.react-terminal-progress-empty {
+  color: #000;
+}
+
+.react-terminal-light .react-terminal-progress-filled {
+  color: #1a1e24;
+}
+
+.react-terminal-light .react-terminal-progress-empty {
+  color: #fff;
+}
+
+.react-terminal-loader {
+  font-size: 20px;
+  margin-bottom: -2px;
+  margin-left: 0.5rem;
+}
+
+.react-terminal-progress-label {
+  margin-left: 1rem;
+  font-size: 16px;
+}