mirror of
https://github.com/BorysLevytskyi/BitwiseCmd.git
synced 2025-12-10 15:02:07 +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 React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
import InputBox from './components/InputBox.jsx';
|
||||||
var rootView = <div>
|
var rootView = <div>
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
|
<h1>Bitwise<span style={{color: "#c5c5c5"}}>Cmd</span></h1>
|
||||||
@@ -19,7 +19,7 @@ var rootView = <div>
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="expressionInput-container">
|
<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 className="configPnl">
|
||||||
<span id="emphasizeBytes" data-cmd="em" className="indicator on" title="Emphasize Bytes">[em]</span>
|
<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 = {
|
module.exports = {
|
||||||
entry: __dirname + "/src/index.jsx",
|
entry: __dirname + "/src/app/index.jsx",
|
||||||
output: {
|
output: {
|
||||||
fileame: 'bundle.js',
|
fileame: 'bundle.js',
|
||||||
path: __dirname + '/src',
|
path: __dirname + '/src',
|
||||||
|
|||||||
Reference in New Issue
Block a user