react-hackterm
Version:
Hackable terminal emulator in React
287 lines (241 loc) • 10.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _cookie_js = require("cookie_js");
var _cookie_js2 = _interopRequireDefault(_cookie_js);
var _Command = require("./Command");
var _Command2 = _interopRequireDefault(_Command);
var _Prefix = require("./Prefix");
var _Prefix2 = _interopRequireDefault(_Prefix);
var _Bar = require("./Bar");
var _Bar2 = _interopRequireDefault(_Bar);
var _themes = require("./themes");
var _themes2 = _interopRequireDefault(_themes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Terminal = function (_React$Component) {
_inherits(Terminal, _React$Component);
function Terminal(props) {
_classCallCheck(this, Terminal);
var _this = _possibleConstructorReturn(this, (Terminal.__proto__ || Object.getPrototypeOf(Terminal)).call(this, props));
_this.state = {
terminalHistory: "",
commands: [{
name: "info",
description: "Get terminal information",
value: "Hackable terminal emulator in React"
}, {
name: "repo",
description: "Get terminal repo",
value: "https://github.com/kimolalekan/react-hackterm.git"
}, {
name: "date",
description: "Get date",
value: new Date()
}]
};
return _this;
}
_createClass(Terminal, [{
key: "goToBottom",
value: function goToBottom() {
document.querySelector("#terminal-editor").focus();
document.querySelector("#terminal-editor").scrollIntoView();
}
}, {
key: "help",
value: function help(config) {
var val = "";
this.state.commands.forEach(function (item, key) {
var command = "<div><span class='command'>" + item.name + "</span> - " + item.description + "</div>";
val += command;
});
var input = document.querySelector("#terminal-editor").value;
input = input.trim();
if (input === "help") {
document.querySelector(".output").innerHTML += "<div style='margin-bottom: 20px; font-family: " + config.font + "; font-size: " + config.text + "px;'>Available commands: <div style='margin-top: 10px'>" + val + "</div></div>";
document.querySelector("#terminal-editor").value = "";
this.goToBottom();
}
}
}, {
key: "clear",
value: function clear() {
var input = document.querySelector("#terminal-editor").value;
input = input.trim();
if (input === "clear") {
document.querySelector(".output").innerHTML = "";
document.querySelector("#terminal-editor").value = "";
this.goToBottom();
}
}
}, {
key: "noCommand",
value: function noCommand(config) {
var input = document.querySelector("#terminal-editor").value;
input = input.trim();
if (input.length >= 1 && input !== "help" && input !== "clear") {
document.querySelector(".output").innerHTML += "<div style='margin-bottom: 20px; font-family: " + config.font + "; font-size: " + config.text + "px;'><span class='command'>" + input + "</span>: command not found</div>";
document.querySelector("#terminal-editor").value = "";
this.goToBottom();
}
}
}, {
key: "emptyCommand",
value: function emptyCommand(config) {
var input = document.querySelector("#terminal-editor").value;
input = input.trim();
if (input.length < 1) {
document.querySelector(".output").innerHTML += "<div style='width:100%; display: block;'>" + (0, _Prefix2.default)(config) + "</div>";
document.querySelector("#terminal-editor").value = "";
this.goToBottom();
}
}
}, {
key: "realCommand",
value: function realCommand() {
var _this2 = this;
var input = document.querySelector("#terminal-editor").value;
input = input.trim();
this.state.commands.forEach(function (item) {
if (item.name === input) {
document.querySelector(".output").innerHTML += "<div style='margin-bottom: 20px'>" + (0, _Command2.default)(_this2.props.config, item.name, item.value) + "</div>";
document.querySelector("#terminal-editor").value = "";
_this2.goToBottom();
}
});
}
}, {
key: "navigateHistory",
value: function navigateHistory(e) {
e = e || window.event;
if (e.keyCode === 38) {
// up arrow
console.log("GOING UP");
} else if (e.keyCode === 40) {
// down arrow
console.log("GOING DOWN");
}
}
}, {
key: "handleTerminal",
value: function handleTerminal(e) {
e.preventDefault();
var input = document.querySelector("#terminal-editor").value;
var val = [input];
var history = _cookie_js2.default.get("terminal_history");
history = history ? JSON.parse(history) : [];
history = [].concat(val, _toConsumableArray(history));
history = JSON.stringify(history);
_cookie_js2.default.set("terminal_history", history);
//If there is empty command return empty value
this.emptyCommand(this.props.config);
//Offer help, if command is called
this.help(this.props.config);
//Real commands
this.realCommand();
//If there is no command return default
this.noCommand(this.props.config);
//Clear first
this.clear();
}
}, {
key: "loadCommands",
value: function loadCommands() {
var commands = this.state.commands;
var command = this.props.command ? this.props.command : [];
commands = [].concat(_toConsumableArray(commands), _toConsumableArray(command));
this.setState({ commands: commands });
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.loadCommands();
}
}, {
key: "render",
value: function render() {
var _props = this.props,
bar = _props.bar,
config = _props.config,
terminalHistory = _props.terminalHistory,
theme = _props.theme;
return _react2.default.createElement(
"div",
{
className: "terminal-theme",
style: { borderRadius: config.edge ? 5 : 0, width: config.width }
},
_react2.default.createElement(_themes2.default, { value: theme }),
_react2.default.createElement(_Bar2.default, { type: bar, size: config.width }),
_react2.default.createElement(
"div",
{
id: "terminal",
className: "terminal",
style: {
width: config.width,
height: config.height,
borderRadius: config.edge ? 5 : 0
}
},
_react2.default.createElement(
"div",
{ className: "inner" },
_react2.default.createElement("div", { className: "output" }),
_react2.default.createElement(
"form",
{ className: "editor", onSubmit: this.handleTerminal.bind(this) },
_react2.default.createElement(
"span",
{
className: "prefix",
style: {
fontFamily: "" + config.font,
fontSize: config.text
}
},
config.mode === "default" ? "$" : "",
config.mode === "root" && config.modeText ? "root@" + config.modeText + " #" : "",
config.mode === "custom" && config.modeText ? _react2.default.createElement(
"span",
null,
"\u276F"
) : ""
),
_react2.default.createElement("input", {
id: "terminal-editor",
className: "input",
autoComplete: "off",
spellCheck: false,
value: terminalHistory,
style: {
fontFamily: "" + config.font,
fontSize: config.text
},
onKeyUp: this.navigateHistory.bind(this)
})
)
)
)
);
}
}]);
return Terminal;
}(_react2.default.Component);
Terminal.propTypes = {
bar: _propTypes2.default.string,
config: _propTypes2.default.object.isRequired,
command: _propTypes2.default.array,
theme: _propTypes2.default.string
};
exports.default = Terminal;