Add callback prop for tab

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: <Terminal
+          style={globalStyles}
+          onTab={autocomplete}
+          commands={commands}
+          welcomeMessage='This terminal uses a simple autocomplete. Start to write and press "Tab".'
+        />
       }
     ]
 

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]
+    }
   }
 }

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` |

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
     }
   }
 

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
 }

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(<Terminal onTab={mockFn} commands={commands} />)
+    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', () => {