react-terminal - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/hooks/terminal.d.ts

@@ -1,5 +0,5 @@
-export declare const useClickOutsideEvent: (ref: any, setClickedInside: any) => void;
+export declare const useClickOutsideEvent: (ref: any, clickedInside: boolean, setClickedInside: any) => void;
 declare const _default: {
-    useClickOutsideEvent: (ref: any, setClickedInside: any) => void;
+    useClickOutsideEvent: (ref: any, clickedInside: boolean, setClickedInside: any) => void;
 };
 export default _default;

dist/index.es.js

@@ -1,2 +0,5 @@
-import{createContext as e,createElement as n,useEffect as t,useContext as o,useState as r,Fragment as i,useRef as a}from"react";import l from"prop-types";
+import { createContext, createElement, useEffect, useContext, useState, useRef, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { isMobile } from 'react-device-detect';
+
 /*! *****************************************************************************
@@ -15,2 +18,266 @@ Copyright (c) Microsoft Corporation. All rights reserved.
 and limitations under the License.
-***************************************************************************** */var c=function(){return(c=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");\n#index_terminalContainer__3q4m3 {\n  --prompt-color: #a917a8;\n  --light-theme-bg-color: #fdf6e4;\n  --dark-theme-bg-color: #022833;\n  --light-theme-toolbar-color: #d8d8d8;\n  --dark-theme-toolbar-color: #131519;\n  --light-theme-color: #333333;\n  --dark-theme-color: #839496;\n  --light-theme-anchor-color: #1a87b5;\n  --dark-theme-anchor-color: #ffffff;\n  --control-default-bg-color: #ccc;\n  --control-close-bg-color: #fc5b57;\n  --control-minimize-bg-color: #e5bf3c;\n  --control-maximize-bg-color: #57c038; }\n\n.index_controls__9z-dM {\n  text-align: left;\n  height: 26px;\n  position: relative;\n  top: 4px;\n  margin-left: 4px; }\n  .index_controls__9z-dM .index_consoleCtrl__PQnAL {\n    display: inline-block;\n    width: 13px;\n    height: 13px;\n    margin: 0 3px;\n    border-radius: 50%;\n    background: var(--control-default-bg-color); }\n  .index_controls__9z-dM .index_close__2o6CK {\n    background: var(--control-close-bg-color); }\n  .index_controls__9z-dM .index_minimize__E9mwB {\n    background: var(--control-minimize-bg-color); }\n  .index_controls__9z-dM .index_maximize__sbbYF {\n    background: var(--control-maximize-bg-color); }\n\n.index_editor__2tqRz {\n  text-align: left;\n  height: calc(100% - 46px);\n  padding: 10px 15px;\n  overflow-wrap: break-word;\n  overflow-y: scroll;\n  outline: none;\n  font-family: "Source Code Pro", monospace;\n  background: var(--light-theme-bg-color);\n  font-size: 18px;\n  line-height: 22px;\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px; }\n  .index_theme--light__15c4Z .index_editor__2tqRz {\n    background: var(--light-theme-bg-color); }\n  .index_theme--dark__1YsDI .index_editor__2tqRz {\n    background: var(--dark-theme-bg-color); }\n  .index_editor__2tqRz .index_editArea__1Y6QT {\n    display: inline-block;\n    width: 94%;\n    height: 20px;\n    outline: none;\n    border: none;\n    background: inherit;\n    color: transparent;\n    text-shadow: 0 0 0 var(--light-theme-color);\n    font-size: 18px;\n    line-height: 20px;\n    white-space: nowrap; }\n    .index_theme--light__15c4Z .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--light-theme-color); }\n    .index_theme--dark__1YsDI .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--dark-theme-color); }\n    .index_editor__2tqRz .index_editArea__1Y6QT br {\n      display: none; }\n  .index_editor__2tqRz .index_prompt__2NwNP {\n    color: var(--prompt-color); }\n  .index_editor__2tqRz .index_lineText__2Poex {\n    display: inline;\n    position: relative;\n    top: -1px;\n    margin-left: 8px; }\n  .index_editor__2tqRz .index_preWhiteSpace__3nCT2 {\n    white-space: pre; }\n  .index_editor__2tqRz .index_caret__MYxcn {\n    position: relative;\n    -webkit-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -moz-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -o-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -ms-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    animation: index_blink__RQDX- 0.75s ease-in-out infinite; }\n    .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n      content: "";\n      position: absolute;\n      top: 2px;\n      width: 10px;\n      height: 22px;\n      background: var(--light-theme-color);\n      z-index: 10; }\n      .index_theme--light__15c4Z .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--light-theme-color); }\n      .index_theme--dark__1YsDI .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--dark-theme-color); }\n\n@-moz-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-webkit-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-o-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n  .index_editor__2tqRz a {\n    color: var(--light-theme-anchor-color); }\n    .index_theme--light__15c4Z .index_editor__2tqRz a {\n      color: var(--light-theme-anchor-colo) r; }\n    .index_theme--dark__1YsDI .index_editor__2tqRz a {\n      color: var(--dark-theme-anchor-colo) r; }\n\n#index_terminalContainer__3q4m3 {\n  height: 100%; }\n\n.index_terminal__1dSq1 {\n  height: 100%;\n  width: 100%;\n  margin: auto;\n  border-radius: 5px;\n  color: var(--light-theme-color);\n  background: var(--light-theme-toolbar-color); }\n  .index_theme--light__15c4Z .index_terminal__1dSq1 {\n    color: var(--light-theme-color);\n    background: var(--light-theme-toolbar-color); }\n  .index_theme--dark__1YsDI .index_terminal__1dSq1 {\n    color: var(--dark-theme-color);\n    background: var(--dark-theme-toolbar-color); }\n');var _={terminalContainer:"index_terminalContainer__3q4m3",controls:"index_controls__9z-dM",consoleCtrl:"index_consoleCtrl__PQnAL",close:"index_close__2o6CK",minimize:"index_minimize__E9mwB",maximize:"index_maximize__sbbYF",editor:"index_editor__2tqRz","theme--light":"index_theme--light__15c4Z","theme--dark":"index_theme--dark__1YsDI",editArea:"index_editArea__1Y6QT",prompt:"index_prompt__2NwNP",lineText:"index_lineText__2Poex",preWhiteSpace:"index_preWhiteSpace__3nCT2",caret:"index_caret__MYxcn",blink:"index_blink__RQDX-",caretAfter:"index_caretAfter__2B8sk",terminal:"index_terminal__1dSq1"},d=e(null),s=function(e){var t=e.children;return n(d.Provider,{value:_},t)};function m(e){var t=o(d),r=e.controlButtonLabels,i=e.showControlButtons?r.map((function(e){return n("div",{key:e,className:t.consoleCtrl+" "+t[e]})})):null;return n("div",{className:t.controls},i)}var p=e(null),h=function(e,a){var l=o(d),c=r(""),_=c[0],s=c[1],m=r(!1),p=m[0],h=m[1];return function(e,n,o,r){var i=function(t){if(e)if(t.preventDefault(),"Enter"!==t.key){var i=null;i="Backspace"===t.key?n.slice(0,-1):t.key&&1===t.key.length?n+t.key:n,o(i),r(!1)}else r(!0)};t((function(){return document.addEventListener("keydown",i),function(){document.removeEventListener("keydown",i)}}))}(e,_,s,h),[n(i,null,n("span",{className:l.prompt},a),n("div",{className:l.lineText},n("span",{className:l.preWhiteSpace},_),e?n("span",{className:l.caret},n("span",{className:l.caretAfter})):null)),_,s,p,h]};function x(e){var r=a(null),l=o(d),c=o(p),_=c[0],s=c[1],m=e.consoleFocused,x=e.prompt,u=e.commands,f=e.welcomeMessage,g=e.errorMessage,b=h(m,x),v=b[0],k=b[1],y=b[2];return function(e,r,a,l,c,_,s,m,p){var h=o(d);t((function(){if(e){var t=l.trim().split(" "),o=t[0],d=t.slice(1),x="";if(l){var u=d.join(" ");if(o&&m[o]){var f=m[o];x="function"==typeof f?f(u):f}else x="function"==typeof p?p(u):p}var g=n(i,null,_,n("span",{className:h.prompt},a),n("span",{className:h.lineText+" "+h.preWhiteSpace},l),x?n("span",null,n("br",null),x):null,n("br",null));s(g),r(!1),c("")}}),[e])}(b[3],b[4],x,k,y,_,s,u,g),function(e,n){t((function(){n.current.scrollTop=n.current.scrollHeight}),[e])}(_,r),n("div",{ref:r,className:l.editor},f,_,v)}function u(e){var i,l,c,_=a(null),s=r(!0),p=s[0],h=s[1],u=o(d);i=_,l=h,c=function(e){i.current&&!i.current.contains(e.target)?l(!1):l(!0)},t((function(){return document.addEventListener("mousedown",c),function(){document.removeEventListener("mousedown",c)}}));var f=e.theme,g=e.showControlButtons,b=e.controlButtonLabels,v=e.prompt,k=e.commands,y=e.welcomeMessage,z=e.errorMessage;return n("div",{ref:_,id:u.terminalContainer,className:u["theme--"+f]},n("div",{className:""+u.terminal},n(m,{consoleFocused:p,showControlButtons:g,controlButtonLabels:b}),n(x,{consoleFocused:p,prompt:v,commands:k,welcomeMessage:y,errorMessage:z})))}function f(e){var t=e.children;return n(s,null,t)}function g(e){return n(f,null,n(u,c({},e)))}u.propTypes={theme:l.string,showControlButtons:l.bool,controlButtonLabels:l.arrayOf(l.string),prompt:l.string,commands:l.objectOf(l.oneOfType([l.string,l.func,l.node])),welcomeMessage:l.oneOfType([l.string,l.func,l.node]),errorMessage:l.string},u.defaultProps={theme:"light",showControlButtons:!0,controlButtonLabels:["close","minimize","maximize"],prompt:">>>",commands:{},welcomeMessage:"",errorMessage:"not found!"};var b=function(e){var t=e.children,o=r(""),i=o[0],a=o[1];return n(p.Provider,{value:[i,a]},t)},v={ReactTerminal:g,TerminalContextProvider:b};export default v;export{g as ReactTerminal,b as TerminalContextProvider};
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = "@import url(\"https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap\");\n#index_terminalContainer__3q4m3 {\n  --prompt-color: #a917a8;\n  --light-theme-bg-color: #fdf6e4;\n  --dark-theme-bg-color: #022833;\n  --light-theme-toolbar-color: #d8d8d8;\n  --dark-theme-toolbar-color: #131519;\n  --light-theme-color: #333333;\n  --dark-theme-color: #839496;\n  --light-theme-anchor-color: #1a87b5;\n  --dark-theme-anchor-color: #ffffff;\n  --control-default-bg-color: #ccc;\n  --control-close-bg-color: #fc5b57;\n  --control-minimize-bg-color: #e5bf3c;\n  --control-maximize-bg-color: #57c038; }\n\n.index_controls__9z-dM {\n  text-align: left;\n  height: 26px;\n  position: relative;\n  top: 4px;\n  margin-left: 4px; }\n  .index_controls__9z-dM .index_consoleCtrl__PQnAL {\n    display: inline-block;\n    width: 13px;\n    height: 13px;\n    margin: 0 3px;\n    border-radius: 50%;\n    background: var(--control-default-bg-color); }\n  .index_controls__9z-dM .index_close__2o6CK {\n    background: var(--control-close-bg-color); }\n  .index_controls__9z-dM .index_minimize__E9mwB {\n    background: var(--control-minimize-bg-color); }\n  .index_controls__9z-dM .index_maximize__sbbYF {\n    background: var(--control-maximize-bg-color); }\n\n.index_editor__2tqRz {\n  text-align: left;\n  height: calc(100% - 46px);\n  padding: 10px 15px;\n  overflow-wrap: break-word;\n  overflow-y: scroll;\n  outline: none;\n  font-family: \"Source Code Pro\", monospace;\n  background: var(--light-theme-bg-color);\n  font-size: 18px;\n  line-height: 22px;\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px; }\n  .index_theme--light__15c4Z .index_editor__2tqRz {\n    background: var(--light-theme-bg-color); }\n  .index_theme--dark__1YsDI .index_editor__2tqRz {\n    background: var(--dark-theme-bg-color); }\n  .index_editor__2tqRz .index_mobileInput__jGtyc {\n    position: absolute;\n    top: -2000px;\n    left: -2000px; }\n  .index_editor__2tqRz .index_editArea__1Y6QT {\n    display: inline-block;\n    width: 94%;\n    height: 20px;\n    outline: none;\n    border: none;\n    background: inherit;\n    color: transparent;\n    text-shadow: 0 0 0 var(--light-theme-color);\n    font-size: 18px;\n    line-height: 20px;\n    white-space: nowrap; }\n    .index_theme--light__15c4Z .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--light-theme-color); }\n    .index_theme--dark__1YsDI .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--dark-theme-color); }\n    .index_editor__2tqRz .index_editArea__1Y6QT br {\n      display: none; }\n  .index_editor__2tqRz .index_prompt__2NwNP {\n    color: var(--prompt-color); }\n  .index_editor__2tqRz .index_lineText__2Poex {\n    display: inline;\n    position: relative;\n    top: -1px;\n    margin-left: 8px; }\n  .index_editor__2tqRz .index_preWhiteSpace__3nCT2 {\n    white-space: pre; }\n  .index_editor__2tqRz .index_caret__MYxcn {\n    position: relative;\n    -webkit-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -moz-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -o-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -ms-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    animation: index_blink__RQDX- 0.75s ease-in-out infinite; }\n    .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n      content: \"\";\n      position: absolute;\n      top: 2px;\n      width: 10px;\n      height: 22px;\n      background: var(--light-theme-color);\n      z-index: 10; }\n      .index_theme--light__15c4Z .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--light-theme-color); }\n      .index_theme--dark__1YsDI .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--dark-theme-color); }\n\n@-moz-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-webkit-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-o-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n  .index_editor__2tqRz a {\n    color: var(--light-theme-anchor-color); }\n    .index_theme--light__15c4Z .index_editor__2tqRz a {\n      color: var(--light-theme-anchor-colo) r; }\n    .index_theme--dark__1YsDI .index_editor__2tqRz a {\n      color: var(--dark-theme-anchor-colo) r; }\n\n#index_terminalContainer__3q4m3 {\n  height: 100%; }\n\n.index_terminal__1dSq1 {\n  height: 100%;\n  width: 100%;\n  margin: auto;\n  border-radius: 5px;\n  color: var(--light-theme-color);\n  background: var(--light-theme-toolbar-color); }\n  .index_theme--light__15c4Z .index_terminal__1dSq1 {\n    color: var(--light-theme-color);\n    background: var(--light-theme-toolbar-color); }\n  .index_theme--dark__1YsDI .index_terminal__1dSq1 {\n    color: var(--dark-theme-color);\n    background: var(--dark-theme-toolbar-color); }\n";
+var index = {"terminalContainer":"index_terminalContainer__3q4m3","controls":"index_controls__9z-dM","consoleCtrl":"index_consoleCtrl__PQnAL","close":"index_close__2o6CK","minimize":"index_minimize__E9mwB","maximize":"index_maximize__sbbYF","editor":"index_editor__2tqRz","theme--light":"index_theme--light__15c4Z","theme--dark":"index_theme--dark__1YsDI","mobileInput":"index_mobileInput__jGtyc","editArea":"index_editArea__1Y6QT","prompt":"index_prompt__2NwNP","lineText":"index_lineText__2Poex","preWhiteSpace":"index_preWhiteSpace__3nCT2","caret":"index_caret__MYxcn","blink":"index_blink__RQDX-","caretAfter":"index_caretAfter__2B8sk","terminal":"index_terminal__1dSq1"};
+styleInject(css);
+
+var styles = index;
+var StyleContext = createContext(null);
+var StyleContextProvider = function (props) {
+    var children = props.children;
+    return (createElement(StyleContext.Provider, { value: styles }, children));
+};
+
+var useClickOutsideEvent = function (ref, clickedInside, setClickedInside) {
+    var handleClickOutside = function (event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+            setClickedInside(false);
+        }
+        else if (isMobile) {
+            setClickedInside(!clickedInside);
+        }
+        else {
+            setClickedInside(true);
+        }
+    };
+    useEffect(function () {
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    });
+};
+
+function Controls(props) {
+    var style = useContext(StyleContext);
+    var controlButtonLabels = props.controlButtonLabels;
+    var showControlButtons = props.showControlButtons;
+    var controlButtons = showControlButtons
+        ? controlButtonLabels.map(function (buttonLabel) { return (createElement("div", { key: buttonLabel, className: style.consoleCtrl + " " + style[buttonLabel] })); })
+        : null;
+    return createElement("div", { className: style.controls }, controlButtons);
+}
+
+var TerminalContext = createContext(null);
+var TerminalContextProvider = function (props) {
+    var children = props.children;
+    var _a = useState(""), bufferedContent = _a[0], setBufferedContent = _a[1];
+    return (createElement(TerminalContext.Provider, { value: [bufferedContent, setBufferedContent] }, children));
+};
+
+var useEditorInput = function (consoleFocused, editorInput, setEditorInput, setProcessCurrentLine) {
+    var handleKeyDownEvent = function (event) {
+        if (!consoleFocused) {
+            return;
+        }
+        event.preventDefault();
+        var eventKey = event.key;
+        if (eventKey === "Enter") {
+            setProcessCurrentLine(true);
+            return;
+        }
+        var nextInput = null;
+        if (eventKey === "Backspace") {
+            nextInput = editorInput.slice(0, -1);
+        }
+        else {
+            nextInput = eventKey && eventKey.length === 1
+                ? editorInput + eventKey
+                : editorInput;
+        }
+        setEditorInput(nextInput);
+        setProcessCurrentLine(false);
+    };
+    useEffect(function () {
+        // Bind the event listener
+        document.addEventListener("keydown", handleKeyDownEvent);
+        return function () {
+            // Unbind the event listener on clean up
+            document.removeEventListener("keydown", handleKeyDownEvent);
+        };
+    });
+};
+var useCurrentLine = function (consoleFocused, prompt) {
+    var style = useContext(StyleContext);
+    var mobileInputRef = useRef(null);
+    var _a = useState(""), editorInput = _a[0], setEditorInput = _a[1];
+    var _b = useState(false), processCurrentLine = _b[0], setProcessCurrentLine = _b[1];
+    useEditorInput(consoleFocused, editorInput, setEditorInput, setProcessCurrentLine);
+    useEffect(function () {
+        if (!isMobile) {
+            return;
+        }
+        if (consoleFocused) {
+            mobileInputRef.current.focus();
+        }
+    }, [consoleFocused]);
+    var mobileInput = isMobile ? (createElement("div", { className: style.mobileInput },
+        createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", value: editorInput, onChange: function (event) { return setEditorInput(event.target.value); }, ref: mobileInputRef }))) : null;
+    var currentLine = (createElement(Fragment, null,
+        mobileInput,
+        createElement("span", { className: style.prompt }, prompt),
+        createElement("div", { className: style.lineText },
+            createElement("span", { className: style.preWhiteSpace }, editorInput),
+            consoleFocused ? (createElement("span", { className: style.caret },
+                createElement("span", { className: style.caretAfter }))) : null)));
+    return [
+        currentLine,
+        editorInput,
+        setEditorInput,
+        processCurrentLine,
+        setProcessCurrentLine
+    ];
+};
+var useBufferedContent = function (processCurrentLine, setProcessCurrentLine, prompt, currentText, setCurrentText, bufferedContent, setBufferedContent, commands, errorMessage) {
+    var style = useContext(StyleContext);
+    useEffect(function () {
+        if (!processCurrentLine) {
+            return;
+        }
+        var _a = currentText.trim().split(" "), command = _a[0], rest = _a.slice(1);
+        var output = "";
+        if (currentText) {
+            var commandArguments = rest.join(" ");
+            if (command && commands[command]) {
+                var executor = commands[command];
+                if (typeof executor === "function") {
+                    output = executor(commandArguments);
+                }
+                else {
+                    output = executor;
+                }
+            }
+            else if (typeof errorMessage === "function") {
+                output = errorMessage(commandArguments);
+            }
+            else {
+                output = errorMessage;
+            }
+        }
+        var nextBufferedContent = (createElement(Fragment, null,
+            bufferedContent,
+            createElement("span", { className: style.prompt }, prompt),
+            createElement("span", { className: style.lineText + " " + style.preWhiteSpace }, currentText),
+            output ? (createElement("span", null,
+                createElement("br", null),
+                output)) : null,
+            createElement("br", null)));
+        setBufferedContent(nextBufferedContent);
+        setProcessCurrentLine(false);
+        setCurrentText("");
+    }, [processCurrentLine]);
+};
+var useScrollToBottom = function (changesToWatch, wrapperRef) {
+    useEffect(function () {
+        // eslint-disable-next-line no-param-reassign
+        wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }, [changesToWatch]);
+};
+
+function Editor(props) {
+    var wrapperRef = useRef(null);
+    var style = useContext(StyleContext);
+    var _a = useContext(TerminalContext), bufferedContent = _a[0], setBufferedContent = _a[1];
+    var consoleFocused = props.consoleFocused, prompt = props.prompt, commands = props.commands, welcomeMessage = props.welcomeMessage, errorMessage = props.errorMessage;
+    var _b = useCurrentLine(consoleFocused, prompt), currentLine = _b[0], currentText = _b[1], setCurrentText = _b[2], processCurrentLine = _b[3], setProcessCurrentLine = _b[4];
+    useBufferedContent(processCurrentLine, setProcessCurrentLine, prompt, currentText, setCurrentText, bufferedContent, setBufferedContent, commands, errorMessage);
+    useScrollToBottom(bufferedContent, wrapperRef);
+    return (createElement("div", { ref: wrapperRef, className: style.editor },
+        welcomeMessage,
+        bufferedContent,
+        currentLine));
+}
+
+function Terminal(props) {
+    var wrapperRef = useRef(null);
+    var _a = useState(!isMobile), consoleFocused = _a[0], setConsoleFocused = _a[1];
+    var style = useContext(StyleContext);
+    useClickOutsideEvent(wrapperRef, consoleFocused, setConsoleFocused);
+    // Get all props destructively
+    var theme = props.theme, showControlButtons = props.showControlButtons, controlButtonLabels = props.controlButtonLabels, prompt = props.prompt, commands = props.commands, welcomeMessage = props.welcomeMessage, errorMessage = props.errorMessage;
+    return (createElement("div", { ref: wrapperRef, id: style.terminalContainer, className: style["theme--" + theme] },
+        createElement("div", { className: "" + style.terminal },
+            createElement(Controls, { consoleFocused: consoleFocused, showControlButtons: showControlButtons, controlButtonLabels: controlButtonLabels }),
+            createElement(Editor, { consoleFocused: consoleFocused, prompt: prompt, commands: commands, welcomeMessage: welcomeMessage, errorMessage: errorMessage }))));
+}
+Terminal.propTypes = {
+    theme: PropTypes.string,
+    showControlButtons: PropTypes.bool,
+    controlButtonLabels: PropTypes.arrayOf(PropTypes.string),
+    prompt: PropTypes.string,
+    commands: PropTypes.objectOf(PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+        PropTypes.node
+    ])),
+    welcomeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
+    errorMessage: PropTypes.string
+};
+Terminal.defaultProps = {
+    theme: "light",
+    showControlButtons: true,
+    controlButtonLabels: ["close", "minimize", "maximize"],
+    prompt: ">>>",
+    commands: {},
+    welcomeMessage: "",
+    errorMessage: "not found!",
+};
+
+function ContextProvider(props) {
+    var children = props.children;
+    return (createElement(StyleContextProvider, null, children));
+}
+
+function ReactTerminal(props) {
+    return (createElement(ContextProvider, null,
+        createElement(Terminal, __assign({}, props))));
+}
+var TerminalContextProvider$1 = TerminalContextProvider;
+var index$1 = {
+    ReactTerminal: ReactTerminal,
+    TerminalContextProvider: TerminalContextProvider$1
+};
+
+export default index$1;
+export { ReactTerminal, TerminalContextProvider$1 as TerminalContextProvider };

dist/index.js

@@ -1,1 +0,289 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),PropTypes=_interopDefault(require("prop-types")),__assign=function(){return(__assign=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)};function styleInject(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}var css='@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");\n#index_terminalContainer__3q4m3 {\n  --prompt-color: #a917a8;\n  --light-theme-bg-color: #fdf6e4;\n  --dark-theme-bg-color: #022833;\n  --light-theme-toolbar-color: #d8d8d8;\n  --dark-theme-toolbar-color: #131519;\n  --light-theme-color: #333333;\n  --dark-theme-color: #839496;\n  --light-theme-anchor-color: #1a87b5;\n  --dark-theme-anchor-color: #ffffff;\n  --control-default-bg-color: #ccc;\n  --control-close-bg-color: #fc5b57;\n  --control-minimize-bg-color: #e5bf3c;\n  --control-maximize-bg-color: #57c038; }\n\n.index_controls__9z-dM {\n  text-align: left;\n  height: 26px;\n  position: relative;\n  top: 4px;\n  margin-left: 4px; }\n  .index_controls__9z-dM .index_consoleCtrl__PQnAL {\n    display: inline-block;\n    width: 13px;\n    height: 13px;\n    margin: 0 3px;\n    border-radius: 50%;\n    background: var(--control-default-bg-color); }\n  .index_controls__9z-dM .index_close__2o6CK {\n    background: var(--control-close-bg-color); }\n  .index_controls__9z-dM .index_minimize__E9mwB {\n    background: var(--control-minimize-bg-color); }\n  .index_controls__9z-dM .index_maximize__sbbYF {\n    background: var(--control-maximize-bg-color); }\n\n.index_editor__2tqRz {\n  text-align: left;\n  height: calc(100% - 46px);\n  padding: 10px 15px;\n  overflow-wrap: break-word;\n  overflow-y: scroll;\n  outline: none;\n  font-family: "Source Code Pro", monospace;\n  background: var(--light-theme-bg-color);\n  font-size: 18px;\n  line-height: 22px;\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px; }\n  .index_theme--light__15c4Z .index_editor__2tqRz {\n    background: var(--light-theme-bg-color); }\n  .index_theme--dark__1YsDI .index_editor__2tqRz {\n    background: var(--dark-theme-bg-color); }\n  .index_editor__2tqRz .index_editArea__1Y6QT {\n    display: inline-block;\n    width: 94%;\n    height: 20px;\n    outline: none;\n    border: none;\n    background: inherit;\n    color: transparent;\n    text-shadow: 0 0 0 var(--light-theme-color);\n    font-size: 18px;\n    line-height: 20px;\n    white-space: nowrap; }\n    .index_theme--light__15c4Z .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--light-theme-color); }\n    .index_theme--dark__1YsDI .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--dark-theme-color); }\n    .index_editor__2tqRz .index_editArea__1Y6QT br {\n      display: none; }\n  .index_editor__2tqRz .index_prompt__2NwNP {\n    color: var(--prompt-color); }\n  .index_editor__2tqRz .index_lineText__2Poex {\n    display: inline;\n    position: relative;\n    top: -1px;\n    margin-left: 8px; }\n  .index_editor__2tqRz .index_preWhiteSpace__3nCT2 {\n    white-space: pre; }\n  .index_editor__2tqRz .index_caret__MYxcn {\n    position: relative;\n    -webkit-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -moz-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -o-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -ms-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    animation: index_blink__RQDX- 0.75s ease-in-out infinite; }\n    .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n      content: "";\n      position: absolute;\n      top: 2px;\n      width: 10px;\n      height: 22px;\n      background: var(--light-theme-color);\n      z-index: 10; }\n      .index_theme--light__15c4Z .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--light-theme-color); }\n      .index_theme--dark__1YsDI .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--dark-theme-color); }\n\n@-moz-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-webkit-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-o-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n  .index_editor__2tqRz a {\n    color: var(--light-theme-anchor-color); }\n    .index_theme--light__15c4Z .index_editor__2tqRz a {\n      color: var(--light-theme-anchor-colo) r; }\n    .index_theme--dark__1YsDI .index_editor__2tqRz a {\n      color: var(--dark-theme-anchor-colo) r; }\n\n#index_terminalContainer__3q4m3 {\n  height: 100%; }\n\n.index_terminal__1dSq1 {\n  height: 100%;\n  width: 100%;\n  margin: auto;\n  border-radius: 5px;\n  color: var(--light-theme-color);\n  background: var(--light-theme-toolbar-color); }\n  .index_theme--light__15c4Z .index_terminal__1dSq1 {\n    color: var(--light-theme-color);\n    background: var(--light-theme-toolbar-color); }\n  .index_theme--dark__1YsDI .index_terminal__1dSq1 {\n    color: var(--dark-theme-color);\n    background: var(--dark-theme-toolbar-color); }\n',index={terminalContainer:"index_terminalContainer__3q4m3",controls:"index_controls__9z-dM",consoleCtrl:"index_consoleCtrl__PQnAL",close:"index_close__2o6CK",minimize:"index_minimize__E9mwB",maximize:"index_maximize__sbbYF",editor:"index_editor__2tqRz","theme--light":"index_theme--light__15c4Z","theme--dark":"index_theme--dark__1YsDI",editArea:"index_editArea__1Y6QT",prompt:"index_prompt__2NwNP",lineText:"index_lineText__2Poex",preWhiteSpace:"index_preWhiteSpace__3nCT2",caret:"index_caret__MYxcn",blink:"index_blink__RQDX-",caretAfter:"index_caretAfter__2B8sk",terminal:"index_terminal__1dSq1"};styleInject(css);var styles=index,StyleContext=React.createContext(null),StyleContextProvider=function(e){var n=e.children;return React.createElement(StyleContext.Provider,{value:styles},n)},useClickOutsideEvent=function(e,n){var t=function(t){e.current&&!e.current.contains(t.target)?n(!1):n(!0)};React.useEffect((function(){return document.addEventListener("mousedown",t),function(){document.removeEventListener("mousedown",t)}}))};function Controls(e){var n=React.useContext(StyleContext),t=e.controlButtonLabels,o=e.showControlButtons?t.map((function(e){return React.createElement("div",{key:e,className:n.consoleCtrl+" "+n[e]})})):null;return React.createElement("div",{className:n.controls},o)}var TerminalContext=React.createContext(null),TerminalContextProvider=function(e){var n=e.children,t=React.useState(""),o=t[0],r=t[1];return React.createElement(TerminalContext.Provider,{value:[o,r]},n)},useEditorInput=function(e,n,t,o){var r=function(r){if(e)if(r.preventDefault(),"Enter"!==r.key){var i=null;i="Backspace"===r.key?n.slice(0,-1):r.key&&1===r.key.length?n+r.key:n,t(i),o(!1)}else o(!0)};React.useEffect((function(){return document.addEventListener("keydown",r),function(){document.removeEventListener("keydown",r)}}))},useCurrentLine=function(e,n){var t=React.useContext(StyleContext),o=React.useState(""),r=o[0],i=o[1],a=React.useState(!1),l=a[0],c=a[1];return useEditorInput(e,r,i,c),[React.createElement(React.Fragment,null,React.createElement("span",{className:t.prompt},n),React.createElement("div",{className:t.lineText},React.createElement("span",{className:t.preWhiteSpace},r),e?React.createElement("span",{className:t.caret},React.createElement("span",{className:t.caretAfter})):null)),r,i,l,c]},useBufferedContent=function(e,n,t,o,r,i,a,l,c){var s=React.useContext(StyleContext);React.useEffect((function(){if(e){var d=o.trim().split(" "),_=d[0],m=d.slice(1),p="";if(o){var u=m.join(" ");if(_&&l[_]){var x=l[_];p="function"==typeof x?x(u):x}else p="function"==typeof c?c(u):c}var f=React.createElement(React.Fragment,null,i,React.createElement("span",{className:s.prompt},t),React.createElement("span",{className:s.lineText+" "+s.preWhiteSpace},o),p?React.createElement("span",null,React.createElement("br",null),p):null,React.createElement("br",null));a(f),n(!1),r("")}}),[e])},useScrollToBottom=function(e,n){React.useEffect((function(){n.current.scrollTop=n.current.scrollHeight}),[e])};function Editor(e){var n=React.useRef(null),t=React.useContext(StyleContext),o=React.useContext(TerminalContext),r=o[0],i=o[1],a=e.consoleFocused,l=e.prompt,c=e.commands,s=e.welcomeMessage,d=e.errorMessage,_=useCurrentLine(a,l),m=_[0],p=_[1],u=_[2],x=_[3],f=_[4];return useBufferedContent(x,f,l,p,u,r,i,c,d),useScrollToBottom(r,n),React.createElement("div",{ref:n,className:t.editor},s,r,m)}function Terminal(e){var n=React.useRef(null),t=React.useState(!0),o=t[0],r=t[1],i=React.useContext(StyleContext);useClickOutsideEvent(n,r);var a=e.theme,l=e.showControlButtons,c=e.controlButtonLabels,s=e.prompt,d=e.commands,_=e.welcomeMessage,m=e.errorMessage;return React.createElement("div",{ref:n,id:i.terminalContainer,className:i["theme--"+a]},React.createElement("div",{className:""+i.terminal},React.createElement(Controls,{consoleFocused:o,showControlButtons:l,controlButtonLabels:c}),React.createElement(Editor,{consoleFocused:o,prompt:s,commands:d,welcomeMessage:_,errorMessage:m})))}function ContextProvider(e){var n=e.children;return React.createElement(StyleContextProvider,null,n)}function ReactTerminal(e){return React.createElement(ContextProvider,null,React.createElement(Terminal,__assign({},e)))}Terminal.propTypes={theme:PropTypes.string,showControlButtons:PropTypes.bool,controlButtonLabels:PropTypes.arrayOf(PropTypes.string),prompt:PropTypes.string,commands:PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string,PropTypes.func,PropTypes.node])),welcomeMessage:PropTypes.oneOfType([PropTypes.string,PropTypes.func,PropTypes.node]),errorMessage:PropTypes.string},Terminal.defaultProps={theme:"light",showControlButtons:!0,controlButtonLabels:["close","minimize","maximize"],prompt:">>>",commands:{},welcomeMessage:"",errorMessage:"not found!"};var TerminalContextProvider$1=TerminalContextProvider,index$1={ReactTerminal:ReactTerminal,TerminalContextProvider:TerminalContextProvider$1};exports.ReactTerminal=ReactTerminal,exports.TerminalContextProvider=TerminalContextProvider$1,exports.default=index$1;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var PropTypes = _interopDefault(require('prop-types'));
+var reactDeviceDetect = require('react-device-detect');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = "@import url(\"https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap\");\n#index_terminalContainer__3q4m3 {\n  --prompt-color: #a917a8;\n  --light-theme-bg-color: #fdf6e4;\n  --dark-theme-bg-color: #022833;\n  --light-theme-toolbar-color: #d8d8d8;\n  --dark-theme-toolbar-color: #131519;\n  --light-theme-color: #333333;\n  --dark-theme-color: #839496;\n  --light-theme-anchor-color: #1a87b5;\n  --dark-theme-anchor-color: #ffffff;\n  --control-default-bg-color: #ccc;\n  --control-close-bg-color: #fc5b57;\n  --control-minimize-bg-color: #e5bf3c;\n  --control-maximize-bg-color: #57c038; }\n\n.index_controls__9z-dM {\n  text-align: left;\n  height: 26px;\n  position: relative;\n  top: 4px;\n  margin-left: 4px; }\n  .index_controls__9z-dM .index_consoleCtrl__PQnAL {\n    display: inline-block;\n    width: 13px;\n    height: 13px;\n    margin: 0 3px;\n    border-radius: 50%;\n    background: var(--control-default-bg-color); }\n  .index_controls__9z-dM .index_close__2o6CK {\n    background: var(--control-close-bg-color); }\n  .index_controls__9z-dM .index_minimize__E9mwB {\n    background: var(--control-minimize-bg-color); }\n  .index_controls__9z-dM .index_maximize__sbbYF {\n    background: var(--control-maximize-bg-color); }\n\n.index_editor__2tqRz {\n  text-align: left;\n  height: calc(100% - 46px);\n  padding: 10px 15px;\n  overflow-wrap: break-word;\n  overflow-y: scroll;\n  outline: none;\n  font-family: \"Source Code Pro\", monospace;\n  background: var(--light-theme-bg-color);\n  font-size: 18px;\n  line-height: 22px;\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px; }\n  .index_theme--light__15c4Z .index_editor__2tqRz {\n    background: var(--light-theme-bg-color); }\n  .index_theme--dark__1YsDI .index_editor__2tqRz {\n    background: var(--dark-theme-bg-color); }\n  .index_editor__2tqRz .index_mobileInput__jGtyc {\n    position: absolute;\n    top: -2000px;\n    left: -2000px; }\n  .index_editor__2tqRz .index_editArea__1Y6QT {\n    display: inline-block;\n    width: 94%;\n    height: 20px;\n    outline: none;\n    border: none;\n    background: inherit;\n    color: transparent;\n    text-shadow: 0 0 0 var(--light-theme-color);\n    font-size: 18px;\n    line-height: 20px;\n    white-space: nowrap; }\n    .index_theme--light__15c4Z .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--light-theme-color); }\n    .index_theme--dark__1YsDI .index_editor__2tqRz .index_editArea__1Y6QT {\n      text-shadow: 0 0 0 var(--dark-theme-color); }\n    .index_editor__2tqRz .index_editArea__1Y6QT br {\n      display: none; }\n  .index_editor__2tqRz .index_prompt__2NwNP {\n    color: var(--prompt-color); }\n  .index_editor__2tqRz .index_lineText__2Poex {\n    display: inline;\n    position: relative;\n    top: -1px;\n    margin-left: 8px; }\n  .index_editor__2tqRz .index_preWhiteSpace__3nCT2 {\n    white-space: pre; }\n  .index_editor__2tqRz .index_caret__MYxcn {\n    position: relative;\n    -webkit-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -moz-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -o-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    -ms-animation: index_blink__RQDX- 0.75s ease-in-out infinite;\n    animation: index_blink__RQDX- 0.75s ease-in-out infinite; }\n    .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n      content: \"\";\n      position: absolute;\n      top: 2px;\n      width: 10px;\n      height: 22px;\n      background: var(--light-theme-color);\n      z-index: 10; }\n      .index_theme--light__15c4Z .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--light-theme-color); }\n      .index_theme--dark__1YsDI .index_editor__2tqRz .index_caret__MYxcn .index_caretAfter__2B8sk {\n        background: var(--dark-theme-color); }\n\n@-moz-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-webkit-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@-o-keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n\n@keyframes index_blink__RQDX- {\n  0% {\n    opacity: 0;\n    -ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n    filter: alpha(opacity=0); }\n  100% {\n    opacity: 1;\n    -ms-filter: none;\n    filter: none; } }\n  .index_editor__2tqRz a {\n    color: var(--light-theme-anchor-color); }\n    .index_theme--light__15c4Z .index_editor__2tqRz a {\n      color: var(--light-theme-anchor-colo) r; }\n    .index_theme--dark__1YsDI .index_editor__2tqRz a {\n      color: var(--dark-theme-anchor-colo) r; }\n\n#index_terminalContainer__3q4m3 {\n  height: 100%; }\n\n.index_terminal__1dSq1 {\n  height: 100%;\n  width: 100%;\n  margin: auto;\n  border-radius: 5px;\n  color: var(--light-theme-color);\n  background: var(--light-theme-toolbar-color); }\n  .index_theme--light__15c4Z .index_terminal__1dSq1 {\n    color: var(--light-theme-color);\n    background: var(--light-theme-toolbar-color); }\n  .index_theme--dark__1YsDI .index_terminal__1dSq1 {\n    color: var(--dark-theme-color);\n    background: var(--dark-theme-toolbar-color); }\n";
+var index = {"terminalContainer":"index_terminalContainer__3q4m3","controls":"index_controls__9z-dM","consoleCtrl":"index_consoleCtrl__PQnAL","close":"index_close__2o6CK","minimize":"index_minimize__E9mwB","maximize":"index_maximize__sbbYF","editor":"index_editor__2tqRz","theme--light":"index_theme--light__15c4Z","theme--dark":"index_theme--dark__1YsDI","mobileInput":"index_mobileInput__jGtyc","editArea":"index_editArea__1Y6QT","prompt":"index_prompt__2NwNP","lineText":"index_lineText__2Poex","preWhiteSpace":"index_preWhiteSpace__3nCT2","caret":"index_caret__MYxcn","blink":"index_blink__RQDX-","caretAfter":"index_caretAfter__2B8sk","terminal":"index_terminal__1dSq1"};
+styleInject(css);
+
+var styles = index;
+var StyleContext = React.createContext(null);
+var StyleContextProvider = function (props) {
+    var children = props.children;
+    return (React.createElement(StyleContext.Provider, { value: styles }, children));
+};
+
+var useClickOutsideEvent = function (ref, clickedInside, setClickedInside) {
+    var handleClickOutside = function (event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+            setClickedInside(false);
+        }
+        else if (reactDeviceDetect.isMobile) {
+            setClickedInside(!clickedInside);
+        }
+        else {
+            setClickedInside(true);
+        }
+    };
+    React.useEffect(function () {
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    });
+};
+
+function Controls(props) {
+    var style = React.useContext(StyleContext);
+    var controlButtonLabels = props.controlButtonLabels;
+    var showControlButtons = props.showControlButtons;
+    var controlButtons = showControlButtons
+        ? controlButtonLabels.map(function (buttonLabel) { return (React.createElement("div", { key: buttonLabel, className: style.consoleCtrl + " " + style[buttonLabel] })); })
+        : null;
+    return React.createElement("div", { className: style.controls }, controlButtons);
+}
+
+var TerminalContext = React.createContext(null);
+var TerminalContextProvider = function (props) {
+    var children = props.children;
+    var _a = React.useState(""), bufferedContent = _a[0], setBufferedContent = _a[1];
+    return (React.createElement(TerminalContext.Provider, { value: [bufferedContent, setBufferedContent] }, children));
+};
+
+var useEditorInput = function (consoleFocused, editorInput, setEditorInput, setProcessCurrentLine) {
+    var handleKeyDownEvent = function (event) {
+        if (!consoleFocused) {
+            return;
+        }
+        event.preventDefault();
+        var eventKey = event.key;
+        if (eventKey === "Enter") {
+            setProcessCurrentLine(true);
+            return;
+        }
+        var nextInput = null;
+        if (eventKey === "Backspace") {
+            nextInput = editorInput.slice(0, -1);
+        }
+        else {
+            nextInput = eventKey && eventKey.length === 1
+                ? editorInput + eventKey
+                : editorInput;
+        }
+        setEditorInput(nextInput);
+        setProcessCurrentLine(false);
+    };
+    React.useEffect(function () {
+        // Bind the event listener
+        document.addEventListener("keydown", handleKeyDownEvent);
+        return function () {
+            // Unbind the event listener on clean up
+            document.removeEventListener("keydown", handleKeyDownEvent);
+        };
+    });
+};
+var useCurrentLine = function (consoleFocused, prompt) {
+    var style = React.useContext(StyleContext);
+    var mobileInputRef = React.useRef(null);
+    var _a = React.useState(""), editorInput = _a[0], setEditorInput = _a[1];
+    var _b = React.useState(false), processCurrentLine = _b[0], setProcessCurrentLine = _b[1];
+    useEditorInput(consoleFocused, editorInput, setEditorInput, setProcessCurrentLine);
+    React.useEffect(function () {
+        if (!reactDeviceDetect.isMobile) {
+            return;
+        }
+        if (consoleFocused) {
+            mobileInputRef.current.focus();
+        }
+    }, [consoleFocused]);
+    var mobileInput = reactDeviceDetect.isMobile ? (React.createElement("div", { className: style.mobileInput },
+        React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", value: editorInput, onChange: function (event) { return setEditorInput(event.target.value); }, ref: mobileInputRef }))) : null;
+    var currentLine = (React.createElement(React.Fragment, null,
+        mobileInput,
+        React.createElement("span", { className: style.prompt }, prompt),
+        React.createElement("div", { className: style.lineText },
+            React.createElement("span", { className: style.preWhiteSpace }, editorInput),
+            consoleFocused ? (React.createElement("span", { className: style.caret },
+                React.createElement("span", { className: style.caretAfter }))) : null)));
+    return [
+        currentLine,
+        editorInput,
+        setEditorInput,
+        processCurrentLine,
+        setProcessCurrentLine
+    ];
+};
+var useBufferedContent = function (processCurrentLine, setProcessCurrentLine, prompt, currentText, setCurrentText, bufferedContent, setBufferedContent, commands, errorMessage) {
+    var style = React.useContext(StyleContext);
+    React.useEffect(function () {
+        if (!processCurrentLine) {
+            return;
+        }
+        var _a = currentText.trim().split(" "), command = _a[0], rest = _a.slice(1);
+        var output = "";
+        if (currentText) {
+            var commandArguments = rest.join(" ");
+            if (command && commands[command]) {
+                var executor = commands[command];
+                if (typeof executor === "function") {
+                    output = executor(commandArguments);
+                }
+                else {
+                    output = executor;
+                }
+            }
+            else if (typeof errorMessage === "function") {
+                output = errorMessage(commandArguments);
+            }
+            else {
+                output = errorMessage;
+            }
+        }
+        var nextBufferedContent = (React.createElement(React.Fragment, null,
+            bufferedContent,
+            React.createElement("span", { className: style.prompt }, prompt),
+            React.createElement("span", { className: style.lineText + " " + style.preWhiteSpace }, currentText),
+            output ? (React.createElement("span", null,
+                React.createElement("br", null),
+                output)) : null,
+            React.createElement("br", null)));
+        setBufferedContent(nextBufferedContent);
+        setProcessCurrentLine(false);
+        setCurrentText("");
+    }, [processCurrentLine]);
+};
+var useScrollToBottom = function (changesToWatch, wrapperRef) {
+    React.useEffect(function () {
+        // eslint-disable-next-line no-param-reassign
+        wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }, [changesToWatch]);
+};
+
+function Editor(props) {
+    var wrapperRef = React.useRef(null);
+    var style = React.useContext(StyleContext);
+    var _a = React.useContext(TerminalContext), bufferedContent = _a[0], setBufferedContent = _a[1];
+    var consoleFocused = props.consoleFocused, prompt = props.prompt, commands = props.commands, welcomeMessage = props.welcomeMessage, errorMessage = props.errorMessage;
+    var _b = useCurrentLine(consoleFocused, prompt), currentLine = _b[0], currentText = _b[1], setCurrentText = _b[2], processCurrentLine = _b[3], setProcessCurrentLine = _b[4];
+    useBufferedContent(processCurrentLine, setProcessCurrentLine, prompt, currentText, setCurrentText, bufferedContent, setBufferedContent, commands, errorMessage);
+    useScrollToBottom(bufferedContent, wrapperRef);
+    return (React.createElement("div", { ref: wrapperRef, className: style.editor },
+        welcomeMessage,
+        bufferedContent,
+        currentLine));
+}
+
+function Terminal(props) {
+    var wrapperRef = React.useRef(null);
+    var _a = React.useState(!reactDeviceDetect.isMobile), consoleFocused = _a[0], setConsoleFocused = _a[1];
+    var style = React.useContext(StyleContext);
+    useClickOutsideEvent(wrapperRef, consoleFocused, setConsoleFocused);
+    // Get all props destructively
+    var theme = props.theme, showControlButtons = props.showControlButtons, controlButtonLabels = props.controlButtonLabels, prompt = props.prompt, commands = props.commands, welcomeMessage = props.welcomeMessage, errorMessage = props.errorMessage;
+    return (React.createElement("div", { ref: wrapperRef, id: style.terminalContainer, className: style["theme--" + theme] },
+        React.createElement("div", { className: "" + style.terminal },
+            React.createElement(Controls, { consoleFocused: consoleFocused, showControlButtons: showControlButtons, controlButtonLabels: controlButtonLabels }),
+            React.createElement(Editor, { consoleFocused: consoleFocused, prompt: prompt, commands: commands, welcomeMessage: welcomeMessage, errorMessage: errorMessage }))));
+}
+Terminal.propTypes = {
+    theme: PropTypes.string,
+    showControlButtons: PropTypes.bool,
+    controlButtonLabels: PropTypes.arrayOf(PropTypes.string),
+    prompt: PropTypes.string,
+    commands: PropTypes.objectOf(PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func,
+        PropTypes.node
+    ])),
+    welcomeMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
+    errorMessage: PropTypes.string
+};
+Terminal.defaultProps = {
+    theme: "light",
+    showControlButtons: true,
+    controlButtonLabels: ["close", "minimize", "maximize"],
+    prompt: ">>>",
+    commands: {},
+    welcomeMessage: "",
+    errorMessage: "not found!",
+};
+
+function ContextProvider(props) {
+    var children = props.children;
+    return (React.createElement(StyleContextProvider, null, children));
+}
+
+function ReactTerminal(props) {
+    return (React.createElement(ContextProvider, null,
+        React.createElement(Terminal, __assign({}, props))));
+}
+var TerminalContextProvider$1 = TerminalContextProvider;
+var index$1 = {
+    ReactTerminal: ReactTerminal,
+    TerminalContextProvider: TerminalContextProvider$1
+};
+
+exports.ReactTerminal = ReactTerminal;
+exports.TerminalContextProvider = TerminalContextProvider$1;
+exports.default = index$1;

package.json

 {
   "name": "react-terminal",
-  "version": "1.0.5",
+  "version": "v1.0.6",
   "description": "React component that renders a terminal",
@@ -72,5 +72,5 @@ "main": "dist/index.js",
   "peerDependencies": {
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "prop-types": "^15.7.2"
+    "react-dom": "^16.12.0"
   },
@@ -105,4 +105,5 @@ "jest": {
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-device-detect": "^1.11.14"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46650

increased by46.14%

Number of package files

18

increased by5.88%

Lines of code

659

increased by280.92%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-device-detect@^1.11.14

• + Addedreact-device-detect@1.17.0(transitive)

• + Addedua-parser-js@0.7.37(transitive)