Skip to content

Commit

Permalink
Merge pull request #17 from CVarisco/master
Browse files Browse the repository at this point in the history
added history with new terminal code
  • Loading branch information
nitin42 authored Jul 9, 2017
2 parents 0f2bde7 + 2fab3d5 commit 92a4cbf
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 0 deletions.
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,10 @@ Follow me on Twitter [@NTulswani](https://twitter.com/NTulswani) for new updates
* `echo` - Outputs anything given
* `edit-line` - Edits the last line or a given line using the `-l` argument

## Built-in functionality

* Check history of your commands by pressing key up and key down.

## Where to use ?

* Embed it as a toy on your website
Expand Down
3 changes: 3 additions & 0 deletions components/Content.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ class Content extends Component {
prompt: PropTypes.objectOf(PropTypes.string),
inputStyles: PropTypes.objectOf(PropTypes.string),
handleChange: PropTypes.func,
setHistoryCommand: PropTypes.func,
};

static contextTypes = {
Expand All @@ -36,6 +37,7 @@ class Content extends Component {
prompt,
inputStyles,
handleChange,
setHistoryCommand,
} = this.props;
const { symbol, maximise } = this.context;

Expand All @@ -60,6 +62,7 @@ class Content extends Component {
type="text"
ref={com => (this.com = com)}
onKeyPress={handleChange}
onKeyDown={(e)=> setHistoryCommand(e, this.com)}
/>
</div>
</div>
Expand Down
36 changes: 36 additions & 0 deletions components/Terminal.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ class Terminal extends Component {
summary: [],
commands: {},
description: {},
history: [],
historyCounter: 0,
show: true,
minimise: false,
maximise: false,
Expand Down Expand Up @@ -248,6 +250,34 @@ class Terminal extends Component {
}
};

/**
* set the input value with the possible history value
* @param {number} next position on the history
*/
setValueWithHistory = (position, inputRef) => {
const { history } = this.state;
if (history[position]) {
this.setState({ historyCounter: position });
inputRef.value = history[position];
}
};

/**
* Base of key code set the value of the input
* with the history
* 38 is key up
* 40 is key down
* @param {event} event of input
*/
setHistoryCommand = (e, inputRef) => {
const { historyCounter } = this.state;
if (e.keyCode === 38) {
this.setValueWithHistory(historyCounter - 1, inputRef);
} else if (e.keyCode === 40) {
this.setValueWithHistory(historyCounter + 1, inputRef);
}
};

handleChange = (e) => {
if (e.key === 'Enter') {
this.adder(`${this.state.prompt} ${e.target.value}`);
Expand All @@ -258,6 +288,11 @@ class Terminal extends Component {
this.adder(res);
}

const history = [...this.state.history, e.target.value];
this.setState({
history,
historyCounter: history.length,
});
e.target.value = ''; // eslint-disable-line no-param-reassign
}
};
Expand Down Expand Up @@ -313,6 +348,7 @@ class Terminal extends Component {
prompt={promptStyles}
inputStyles={inputStyles}
handleChange={this.handleChange}
setHistoryCommand={this.setHistoryCommand}
/>
</div>
);
Expand Down

0 comments on commit 92a4cbf

Please sign in to comment.