mirror of
https://github.com/BorysLevytskyi/BitwiseCmd.git
synced 2025-12-10 06:52:05 +01:00
Add images folder. Migrate input controller into InputBox component
This commit is contained in:
47
src/app/components/InputBox.jsx
Normal file
47
src/app/components/InputBox.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class InputBox extends React.Component {
|
||||
history = [];
|
||||
historyIndex = 0;
|
||||
render() {
|
||||
return <input type="text"
|
||||
onKeyUp={e => this.onKeyUp(e)}
|
||||
onKeyDown={e => this.onKeyDown(e)}
|
||||
className="expressionInput mono"
|
||||
placeholder="type expression like '1>>2' or 'help' "/>;
|
||||
}
|
||||
|
||||
onKeyUp(e) {
|
||||
var input = e.target;
|
||||
if (e.keyCode != 13 || input.value.trim().length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var value = input.value;
|
||||
console.log(value);
|
||||
this.history.unshift(value);
|
||||
input.value = '';
|
||||
console.log(this.history);
|
||||
}
|
||||
|
||||
onKeyDown(args) {
|
||||
if(args.keyCode == 38) {
|
||||
|
||||
if (this.history.length > this.historyIndex) { // up
|
||||
args.target.value = this.history[this.historyIndex++];
|
||||
}
|
||||
|
||||
args.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if(args.keyCode == 40) {
|
||||
|
||||
if(this.historyIndex > 0) { // up
|
||||
args.target.value = this.history[--this.historyIndex];
|
||||
}
|
||||
|
||||
args.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import InputBox from './components/InputBox.jsx';
|
||||
var rootView = <div>
|
||||
<div className="header">
|
||||
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
|
||||
@@ -19,7 +19,7 @@ var rootView = <div>
|
||||
</div>
|
||||
|
||||
<div className="expressionInput-container">
|
||||
<input id="in" type="text" className="expressionInput mono" placeholder="type expression like '1>>2' or 'help' "/>
|
||||
<InputBox />
|
||||
|
||||
<span className="configPnl">
|
||||
<span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span>
|
||||
BIN
src/img/feedback-dark.png
Normal file
BIN
src/img/feedback-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/img/feedback-light.png
Normal file
BIN
src/img/feedback-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/img/github-dark.png
Normal file
BIN
src/img/github-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
BIN
src/img/github-light.png
Normal file
BIN
src/img/github-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 605 B |
BIN
src/img/twitter-dark.png
Normal file
BIN
src/img/twitter-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/img/twitter-light.png
Normal file
BIN
src/img/twitter-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,5 +1,5 @@
|
||||
module.exports = {
|
||||
entry: __dirname + "/src/index.jsx",
|
||||
entry: __dirname + "/src/app/index.jsx",
|
||||
output: {
|
||||
fileame: 'bundle.js',
|
||||
path: __dirname + '/src',
|
||||
|
||||
Reference in New Issue
Block a user