Skip to content

Commit fb004a6

Browse files
jvorcakjvorcak
committed
History implementation closes #3 
1 parent 3075474 commit fb004a6

File tree

5 files changed

+246
-1247
lines changed

5 files changed

+246
-1247
lines changed

‎README.md‎

Lines changed: 49 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ https://webscopeio.github.io/react-console/
3636
| wrapperClassName | string | className for the wrapper |
3737
| promptClassName | string | className for the prompt |
3838
| inputClassName | string | className for the input |
39+
| history | Array<string> | history array |
40+
| onAddHistoryItem | (entry: string) => void | callback called when a new history entry should be created |
3941

4042
\*_are mandatory_
4143

@@ -46,43 +48,56 @@ import React, { Component } from 'react'
4648

4749
import ReactConsole from 'react-console'
4850

49-
export default class App extends Component {
50-
render () {
51-
return (
52-
<div>
53-
<ReactConsole
54-
autoFocus
55-
welcomeMessage="Welcome"
56-
commands={{
57-
echo: {
58-
description: 'Echo',
59-
fn: (...args) => {
60-
return new Promise((resolve, reject) => {
61-
setTimeout(() => {
62-
resolve(`${args.join(' ')}`)
63-
}, 2000)
64-
})
65-
}
66-
},
67-
test: {
68-
description: 'Test',
69-
fn: (...args) => {
70-
return new Promise((resolve, reject) => {
71-
setTimeout(() => {
72-
resolve('Hello world \n\n hello \n')
73-
}, 2000)
74-
})
75-
}
51+
const App = () => {
52+
const [history, setHistory] = useState([
53+
"echo hello world",
54+
"sleep 1000",
55+
"sleep 2000",
56+
"sleep 3000",
57+
"echo ola",
58+
"not found",
59+
])
60+
61+
return (
62+
<div>
63+
<ReactConsole
64+
autoFocus
65+
welcomeMessage="Welcome"
66+
commands={{
67+
history: {
68+
description: 'History',
69+
fn: () => new Promise(resolve => {
70+
resolve(`${history.join('\r\n')}`)
71+
})
72+
},
73+
echo: {
74+
description: 'Echo',
75+
fn: (...args) => {
76+
return new Promise((resolve, reject) => {
77+
setTimeout(() => {
78+
resolve(`${args.join(' ')}`)
79+
}, 2000)
80+
})
7681
}
77-
}}
78-
/>
79-
</div>
80-
)
81-
}
82+
},
83+
test: {
84+
description: 'Test',
85+
fn: (...args) => {
86+
return new Promise((resolve, reject) => {
87+
setTimeout(() => {
88+
resolve('Hello world \n\n hello \n')
89+
}, 2000)
90+
})
91+
}
92+
}
93+
}}
94+
/>
95+
</div>
96+
)
8297
}
83-
98+
export default App
8499
```
85100

86101
## License
87102

88-
MIT © [jvorcak](https://github.com/jvorcak)
103+
IT © [jvorcak](https://github.com/jvorcak)

‎example/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
"private": true,
77
"dependencies": {
88
"prop-types": "^15.6.2",
9-
"react": "^16.4.1",
10-
"react-dom": "^16.4.1",
11-
"react-scripts": "^1.1.4",
12-
"react-console": "link:.."
9+
"react": "16.8.0",
10+
"react-console": "link:..",
11+
"react-dom": "16.8.0",
12+
"react-scripts": "^1.1.4"
1313
},
1414
"scripts": {
1515
"start": "react-scripts start",

‎example/src/App.js‎

Lines changed: 77 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,49 @@
1-
import React, { Component } from 'react'
1+
import React, { useState } from 'react'
22

33
import ReactConsole from 'react-console'
44

5-
export default class App extends Component {
6-
render() {
7-
return (
8-
<div>
9-
<ReactConsole
10-
autoFocus
11-
welcomeMessage="This is a <b>welcome</b> message 🎉🎉🎉"
12-
prompt={'$'}
13-
commands={{
14-
echo: {
15-
description: 'Echo',
16-
fn: (...args) => {
17-
return new Promise((resolve, reject) => {
18-
setTimeout(() => {
19-
resolve(`${args.join(' ')}`)
20-
}, 0)
21-
})
22-
}
23-
},
24-
c: {
25-
description: 'crashtest',
26-
fn: () => {
27-
return new Promise(resolve => {
28-
var x = `
5+
const App = () => {
6+
const [history, setHistory] = useState([
7+
"echo hello world",
8+
"sleep 1000",
9+
"sleep 2000",
10+
"sleep 3000",
11+
"echo ola",
12+
"not found",
13+
])
14+
15+
return (
16+
<div>
17+
<ReactConsole
18+
autoFocus
19+
welcomeMessage="This is a <b>welcome</b> message 🎉🎉🎉"
20+
prompt={'$'}
21+
history={history}
22+
onAddHistoryItem={(newEntry) => {
23+
setHistory([...history, newEntry])
24+
}}
25+
commands={{
26+
history: {
27+
description: 'History',
28+
fn: () => new Promise(resolve => {
29+
resolve(`${history.join('\r\n')}`)
30+
})
31+
},
32+
echo: {
33+
description: 'Echo',
34+
fn: (...args) => {
35+
return new Promise((resolve, reject) => {
36+
setTimeout(() => {
37+
resolve(`${args.join(' ')}`)
38+
}, 0)
39+
})
40+
}
41+
},
42+
c: {
43+
description: 'crashtest',
44+
fn: () => {
45+
return new Promise(resolve => {
46+
var x = `
2947
1234567890
3048
1234567890
3149
1234567890
@@ -82,38 +100,39 @@ export default class App extends Component {
82100
k fj asdpf234567890
83101
84102
`
85-
resolve(x)
86-
})
87-
}
88-
},
89-
sleep: {
90-
description: 'sleep',
91-
fn: (timeout) => {
92-
return new Promise((resolve, reject) => {
93-
setTimeout(() => {
94-
resolve('')
95-
}, timeout)
96-
})
97-
}
103+
resolve(x)
104+
})
98105
}
99-
}}
100-
noCommandFound={() => new Promise((resolve, reject) => {
101-
resolve('No command found')
102-
})}
103-
/>
104-
<table>
105-
<tbody>
106-
<tr>
107-
<td><code>echo ...args</code></td>
108-
<td>Echo</td>
109-
</tr>
110-
<tr>
111-
<td><code>sleep `ms`</code></td>
112-
<td>Sleeps for a number of milliseconds</td>
113-
</tr>
114-
</tbody>
115-
</table>
116-
</div>
117-
)
118-
}
106+
},
107+
sleep: {
108+
description: 'sleep',
109+
fn: (timeout) => {
110+
return new Promise((resolve, reject) => {
111+
setTimeout(() => {
112+
resolve('')
113+
}, timeout)
114+
})
115+
}
116+
}
117+
}}
118+
noCommandFound={() => new Promise((resolve, reject) => {
119+
resolve('No command found')
120+
})}
121+
/>
122+
<table>
123+
<tbody>
124+
<tr>
125+
<td><code>echo ...args</code></td>
126+
<td>Echo</td>
127+
</tr>
128+
<tr>
129+
<td><code>sleep `ms`</code></td>
130+
<td>Sleeps for a number of milliseconds</td>
131+
</tr>
132+
</tbody>
133+
</table>
134+
</div>
135+
)
119136
}
137+
138+
export default App

0 commit comments

Comments
 (0)