Some details & styling

Author: jvorcak

example/src/App.js

@@ -7,6 +7,8 @@ export default class App extends Component {
     return (
       <div>
         <ReactConsole
+          autoFocus
+          welcomeMessage="Welcome"
           commands={{
             echo: {
               description: 'Echo',
@@ -17,6 +19,16 @@ export default class App extends Component {
                   }, 2000)
                 })
               }
+            },
+            test: {
+              description: 'Test',
+              fn: (...args) => {
+                return new Promise((resolve, reject) => {
+                  setTimeout(() => {
+                    resolve('Hello world \n\n hello \n')
+                  }, 2000)
+                })
+              }
             }
           }}
         />

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-console",
-  "version": "1.0.0",
+  "name": "@webscopeio/react-console",
+  "version": "1.0.3",
   "description": "React component that emulates console behaviour",
   "author": "jvorcak",
   "license": "MIT",

src/index.tsx

@@ -10,6 +10,8 @@ export type Props = {
   text: string,
   prompt: React.Component,
   commands: any,
+  welcomeMessage?: string,
+  autoFocus: boolean,
 }
 
 type State = {
@@ -19,37 +21,63 @@ type State = {
 
 export default class ReactConsole extends React.Component<Props, State> {
 
-  formRef : any = null;
+  formRef: any = null;
   inputRef: any = null;
   wrapperRef: any = null;
 
   static defaultProps = {
     prompt: '$',
+    autoFocus: false,
   };
 
   state = {
     output: [],
     commandInProgress: false,
   };
 
+  componentDidMount() {
+    const {welcomeMessage} = this.props
+    if (welcomeMessage) {
+      this.setState({
+        output: [welcomeMessage],
+      })
+    }
+  }
+
+
   scrollToBottom = () => {
-      this.wrapperRef.scrollTo(0, this.wrapperRef.scrollHeight)
+    this.wrapperRef.scrollTo(0, this.wrapperRef.scrollHeight)
   };
 
   onSubmit = async (e: any) => {
-    const { prompt } = this.props
+    const {prompt} = this.props
     e.preventDefault();
     const data = new FormData(e.target);
     const inputString: string = data.get('input') as string;
     if (inputString === null) {
       return
     }
+
+    const log = `${prompt}\xa0${inputString}`;
+
+    if(inputString === '') {
+      this.setState({ output: [...this.state.output, log]})
+      this.formRef.reset()
+      return
+    }
+
     const [cmd, ...args] = inputString.split(" ");
+
+    if(cmd === 'clear') {
+      this.formRef.reset()
+      this.setState({output: []})
+      return
+    }
+
     const command = this.props.commands[cmd];
 
-    const log = `${prompt}\xa0${inputString}`;
 
-    await this.setState({ commandInProgress: true });
+    await this.setState({commandInProgress: true});
 
     if (command) {
       try {
@@ -67,25 +95,22 @@ export default class ReactConsole extends React.Component<Props, State> {
         output: [...this.state.output, log, `Command '${cmd}' does not exist`]
       }, this.scrollToBottom)
     }
-    if(this.formRef) {
-      this.formRef.reset()
-    }
-    this.setState({ commandInProgress: false });
+    this.formRef.reset()
+    this.setState({commandInProgress: false});
     this.inputRef.focus()
   };
 
   render() {
     const {
       prompt,
+      autoFocus,
     } = this.props;
 
     return (
       <div className={styles.wrapper} onClick={this.focusConsole} ref={ref => this.wrapperRef = ref}>
-        <div
-          className={styles.output}
-        >
+        <div>
           {this.state.output.map((line, key) =>
-            <div key={key}>{line}</div>
+            <pre key={key} className={styles.line}>{line}</pre>
           )}
         </div>
         <form
@@ -97,7 +122,7 @@ export default class ReactConsole extends React.Component<Props, State> {
             <input
               disabled={this.state.commandInProgress}
               ref={ref => this.inputRef = ref}
-              autoFocus
+              autoFocus={autoFocus}
               autoComplete={'off'}
               spellCheck={false}
               autoCapitalize={'false'}

src/styles.css

@@ -12,16 +12,19 @@
   overflow-y: auto;
 }
 
-.output {
-}
-
 .promptWrapper {
   display: flex;
 }
 
+.line {
+  font-size: 13px;
+  line-height: 13px;
+  background: transparent !important; /* we want to make this transparent whatever happens in the app*/
+}
+
 .input {
   flex: 1;
-  background: transparent;
+  background: transparent !important; /* we want to make this transparent whatever happens in the app*/
   border: none;
   outline: none;
   color: white;