Initial commit

Author: jvorcak

.gitignore

@@ -1,4 +1,4 @@
-
+.idea
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies

.idea/vcs.xml

@@ -1,12 +1,25 @@
 import React, { Component } from 'react'
 
-import ExampleComponent from 'react-console'
+import ReactConsole from 'react-console'
 
 export default class App extends Component {
   render () {
     return (
       <div>
-        <ExampleComponent text='Modern React component module' />
+        <ReactConsole
+          commands={{
+            echo: {
+              description: 'Echo',
+              fn: (...args) => {
+                return new Promise((resolve, reject) => {
+                  setTimeout(() => {
+                    resolve(`${args.join(' ')}`)
+                  }, 2000)
+                })
+              }
+            }
+          }}
+        />
       </div>
     )
   }

example/src/App.js

@@ -1,22 +1,97 @@
 /**
- * @class ExampleComponent
+ * @class ReactConsole
  */
 
 import * as React from 'react'
 
 import styles from './styles.css'
 
-export type Props = { text: string }
+export type Props = {
+  text: string,
+  prompt: React.Component,
+  commands: any,
+}
+
+type State = {
+  output: Array<string>,
+}
+
+export default class ReactConsole extends React.Component<Props, State> {
+
+  formRef : any = null;
+  inputRef: any = null;
+  outputRef: any = null;
+
+  static defaultProps = {
+    prompt: '$',
+  };
+
+  state = {
+    output: []
+  };
+
+  scrollToBottom = () => {
+    this.outputRef.scrollTo(0, this.outputRef.scrollHeight)
+  };
+
+  onSubmit = async (e: any) => {
+    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 [cmd, ...args] = inputString.split(" ");
+    const command = this.props.commands[cmd];
+
+    if (command) {
+      try {
+        const ret = await command.fn(...args)
+        this.setState({
+          output: [...this.state.output, `${prompt} ${ret}`]
+        }, this.scrollToBottom)
+      } catch (err) {
+
+      }
+    } else {
+      this.setState({
+        output: [...this.state.output, `${prompt} Command '${cmd}' does not exist`]
+      }, this.scrollToBottom)
+    }
+    if(this.formRef) {
+      this.formRef.reset()
+    }
+  };
 
-export default class ExampleComponent extends React.Component<Props> {
   render() {
     const {
-      text
-    } = this.props
+      prompt,
+    } = this.props;
 
     return (
-      <div className={styles.test}>
-        Example Component: {text}
+      <div className={styles.wrapper}>
+        <div className={styles.output} ref={ref => this.outputRef = ref}>
+          {this.state.output.map((line, key) =>
+            <div key={key}>{line}</div>
+          )}
+        </div>
+        <form
+          ref={ref => this.formRef = ref}
+          onSubmit={this.onSubmit}
+        >
+          <div className={styles.promptWrapper}>
+            <span>{prompt}</span>
+            <input
+              ref={ref => this.inputRef = ref}
+              autoFocus
+              autoComplete={'off'}
+              autoCapitalize={'false'}
+              name="input"
+              className={styles.input}
+            />
+          </div>
+        </form>
       </div>
     )
   }

src/index.tsx

@@ -1,8 +1,29 @@
 /* add css styles here (optional) */
 
-.test {
-  display: inline-block;
-  margin: 2em auto;
-  border: 2px solid #000;
-  font-size: 2em;
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  background-color: black;
+  color: white;
+  font-family: monospace;
+  font-size: 13px;
+  padding: 10px;
+  height: 300px;
+}
+
+.output {
+  overflow-y: auto;
+}
+
+.promptWrapper {
+  display: flex;
+}
+
+.input {
+  margin-left: 3px;
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: white;
 }