diff --git a/demo/App.jsx b/demo/App.jsx
index 1c082fae..918b10a2 100644
--- a/demo/App.jsx
+++ b/demo/App.jsx
@@ -52,7 +52,7 @@ export default class App extends Component {
}
render () {
- const { globalStyles, commands, casingCommands } = config
+ const { globalStyles, commands, casingCommands, autocomplete } = config
const terminals = [
{
@@ -269,6 +269,16 @@ export default class App extends Component {
disabled={this.state.isProgressing}
locked={this.state.isProgressing}
/>
+ },
+ {
+ title: 'Autocomplete demo',
+ link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L276-L303',
+ component:
}
]
diff --git a/demo/extra/config.js b/demo/extra/config.js
index 9746bc7e..149384ca 100644
--- a/demo/extra/config.js
+++ b/demo/extra/config.js
@@ -36,5 +36,14 @@ export default {
description: 'In terminals with case-insensitive matching, this command can be executed regardless of whether the casing is correct.',
fn: () => 'This command is called "CaSeMatTeRs", but in case-insensitive terminals it can also be called with "casematters"!'
}
+ },
+ autocomplete: (input) => {
+ const commandsList = ['echo', 'danger', 'async', 'delay', 'help', 'clear']
+ const currentValue = input.value
+ const completionValue = commandsList.filter(key => key.startsWith(currentValue))
+
+ if (completionValue && completionValue.length === 1) {
+ input.value = completionValue[0]
+ }
}
}
diff --git a/docs/CONFIG.md b/docs/CONFIG.md
index 205ee835..4766e151 100644
--- a/docs/CONFIG.md
+++ b/docs/CONFIG.md
@@ -46,6 +46,7 @@ The terminal has several options you can use to change the behaviour of it. All
| noEchoBack | Disable command echoes (Terminal outputs of any commands entered). | Boolean | `false` |
| noHistory | Disable the storing and scrolling of history of the commands entered in the terminal. | Boolean | `false` |
| noNewlineParsing | Disable the parsing line breaks (\n) in command outputs as separate message, leave them unchanged. | Boolean | `false` |
+| onTab | Function, that is executed, when the Tab-Key is pressed. Passes the input element as an argument. | Function | undefined |
| promptLabel | The prefix to use for the input field. Can be either string or element. | Node | `$` |
| readOnly | Hides the entire prompt, thus setting the terminal to read-only mode. | Boolean | `false` |
| styleEchoBack | Inherit style for command echoes (Terminal outputs of any commands entered) from prompt (Fully or partially, i.e. label or text only), or style them as regular messages. Omitting this prop enables default behaviour. | String<'labelOnly'/'textOnly'/'fullInherit'/'messageInherit'\> | `undefined` |
diff --git a/src/Terminal.jsx b/src/Terminal.jsx
index 49bbe720..e805d8e6 100644
--- a/src/Terminal.jsx
+++ b/src/Terminal.jsx
@@ -203,6 +203,7 @@ export default class Terminal extends Component {
case 'Enter': this.processCommand(); break
case 'ArrowUp': this.scrollHistory('up'); break
case 'ArrowDown': this.scrollHistory('down'); break
+ case 'Tab': if (this.props.onTab) event.preventDefault(); this.props.onTab(this.terminalInput.current); break
}
}
diff --git a/src/defs/types/Terminal.js b/src/defs/types/Terminal.js
index 3747a182..2c185ee1 100644
--- a/src/defs/types/Terminal.js
+++ b/src/defs/types/Terminal.js
@@ -62,11 +62,16 @@ const messageTypes = {
messageClassName: PropTypes.string
}
+const handlerTypes = {
+ onTab: PropTypes.func
+}
+
export default {
...styleTypes,
...classNameTypes,
...optionTypes,
...labelTypes,
...commandTypes,
- ...messageTypes
+ ...messageTypes,
+ ...handlerTypes
}
diff --git a/test/Terminal.test.js b/test/Terminal.test.js
index 8b83604d..cd7ee0e8 100644
--- a/test/Terminal.test.js
+++ b/test/Terminal.test.js
@@ -169,6 +169,16 @@ describe('Terminal functionality', () => {
wrapper.unmount()
})
+
+ it('Calls a callback function on key tab', () => {
+ const mockFn = jest.fn()
+ const wrapper = mount()
+ const input = wrapper.find('[name="react-console-emulator__input"]')
+ input.simulate('keydown', { key: 'Tab' })
+ expect(mockFn).toBeCalledWith(input.instance())
+
+ wrapper.unmount()
+ })
})
describe('Terminal command validator', () => {