Feature/history

README.md

@@ -36,6 +36,8 @@ https://webscopeio.github.io/react-console/
 | wrapperClassName       | string                                                          | className for the wrapper |
 | promptClassName        | string                                                          | className for the prompt |
 | inputClassName         | string                                                          | className for the input |
+| history                | Array<string>                                                   | history array           |
+| onAddHistoryItem       | (entry: string) => void                                         | callback called when a new history entry should be created | 
 
 \*_are mandatory_
 
@@ -46,43 +48,62 @@ import React, { Component } from 'react'
 
 import ReactConsole from 'react-console'
 
-export default class App extends Component {
-  render () {
-    return (
-      <div>
-        <ReactConsole
-          autoFocus
-          welcomeMessage="Welcome"
-          commands={{
-            echo: {
-              description: 'Echo',
-              fn: (...args) => {
-                return new Promise((resolve, reject) => {
-                  setTimeout(() => {
-                    resolve(`${args.join(' ')}`)
-                  }, 2000)
-                })
-              }
-            },
-            test: {
-              description: 'Test',
-              fn: (...args) => {
-                return new Promise((resolve, reject) => {
-                  setTimeout(() => {
-                    resolve('Hello world \n\n hello \n')
-                  }, 2000)
-                })
-              }
+const App = () => {
+  const [history, setHistory] = useState([
+    "echo hello world",
+    "sleep 1000",
+    "sleep 2000",
+    "sleep 3000",
+    "echo ola",
+    "not found",
+  ])
+
+  return (
+    <div>
+      <ReactConsole
+        autoFocus
+        welcomeMessage="Welcome"
+        commands={{
+          history: {
+            description: 'History',
+            fn: () => new Promise(resolve => {
+               resolve(`${history.join('\r\n')}`)
+            })
+          },
+          echo: {
+            description: 'Echo',
+            fn: (...args) => {
+              return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  resolve(`${args.join(' ')}`)
+                }, 2000)
+              })
             }
-          }}
-        />
-      </div>
-    )
-  }
+          },
+          test: {
+            description: 'Test',
+            fn: (...args) => {
+              return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  resolve('Hello world \n\n hello \n')
+                }, 2000)
+              })
+            }
+          }
+        }}
+      />
+    </div>
+  )
 }
-
+export default App
 ```
 
+## History implementation
+
+You can provide your own history implementation by providing `onAddHistoryItem` and `history` properties.
+If you don't provide `history`, up/down arrows & reverse search won't work.
+
+
 ## License
 
-MIT © [jvorcak](https://github.com/jvorcak)
+IT © [jvorcak](https://github.com/jvorcak)

example/package.json

@@ -6,10 +6,10 @@
   "private": true,
   "dependencies": {
     "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "react-console": "link:.."
+    "react": "16.8.0",
+    "react-console": "link:..",
+    "react-dom": "16.8.0",
+    "react-scripts": "^1.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/App.js

@@ -1,31 +1,49 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 
 import ReactConsole from 'react-console'
 
-export default class App extends Component {
-  render() {
-    return (
-      <div>
-        <ReactConsole
-          autoFocus
-          welcomeMessage="This is a <b>welcome</b> message 🎉🎉🎉"
-          prompt={'$'}
-          commands={{
-            echo: {
-              description: 'Echo',
-              fn: (...args) => {
-                return new Promise((resolve, reject) => {
-                  setTimeout(() => {
-                    resolve(`${args.join(' ')}`)
-                  }, 0)
-                })
-              }
-            },
-            c: {
-              description: 'crashtest',
-              fn: () => {
-                return new Promise(resolve => {
-                  var x = `
+const App = () => {
+  const [history, setHistory] = useState([
+    "echo hello world",
+    "sleep 1000",
+    "sleep 2000",
+    "sleep 3000",
+    "echo ola",
+    "not found",
+  ])
+
+  return (
+    <div>
+      <ReactConsole
+        autoFocus
+        welcomeMessage="This is a <b>welcome</b> message 🎉🎉🎉"
+        prompt={'$'}
+        history={history}
+        onAddHistoryItem={(newEntry) => {
+          setHistory([...history, newEntry])
+        }}
+        commands={{
+          history: {
+            description: 'History',
+            fn: () => new Promise(resolve => {
+              resolve(`${history.join('\r\n')}`)
+            })
+          },
+          echo: {
+            description: 'Echo',
+            fn: (...args) => {
+              return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  resolve(`${args.join(' ')}`)
+                }, 0)
+              })
+            }
+          },
+          c: {
+            description: 'crashtest',
+            fn: () => {
+              return new Promise(resolve => {
+                var x = `
                   1234567890
                   1234567890
                   1234567890
@@ -82,36 +100,50 @@ export default class App extends Component {
                   k fj asdpf234567890
 
                   `
-                  resolve(x)
-                })
-              }
-            },
-            sleep: {
-              description: 'sleep',
-              fn: (timeout) => {
-                return new Promise((resolve, reject) => {
-                  setTimeout(() => {
-                    resolve('')
-                  }, timeout)
-                })
-              }
+                resolve(x)
+              })
             }
-          }}
-          noCommandFound={() => new Promise((resolve, reject) => {
-            resolve('No command found')
-          })}
-        />
-        <table>
-          <tr>
-            <td><code>echo ...args</code></td>
-            <td>Echo</td>
-          </tr>
-          <tr>
-            <td><code>sleep `ms`</code></td>
-            <td>Sleeps for a number of milliseconds</td>
-          </tr>
-        </table>
-      </div>
-    )
-  }
+          },
+          sleep: {
+            description: 'sleep',
+            fn: (timeout) => {
+              return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  resolve('')
+                }, timeout)
+              })
+            }
+          }
+        }}
+        noCommandFound={() => new Promise((resolve, reject) => {
+          resolve('No command found')
+        })}
+      />
+      <p>
+        ctrl+r, ctrl+c shortcuts as well as up/down arrows are supported.
+      </p>
+      <table>
+        <tbody>
+        <tr>
+          <td><code>echo ...args</code></td>
+          <td>Echo</td>
+        </tr>
+        <tr>
+          <td><code>sleep `ms`</code></td>
+          <td>Sleeps for a number of milliseconds</td>
+        </tr>
+        <tr>
+          <td><code>history</code></td>
+          <td>Shows a history</td>
+        </tr>
+        <tr>
+          <td><code>clear</code></td>
+          <td>Clear the terminal screen</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  )
 }
+
+export default App