react-terminal
Version:
React component that renders a terminal
2 lines (1 loc) • 15 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("ua-parser-js");function t(e){var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var r=t(e),o=function(){return o=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},o.apply(this,arguments)};function i(e,n,t,r){return new(t||(t=Promise))((function(o,i){function a(e){try{c(r.next(e))}catch(e){i(e)}}function l(e){try{c(r.throw(e))}catch(e){i(e)}}function c(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(a,l)}c((r=r.apply(e,n||[])).next())}))}function a(e,n){var t,r,o,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},a=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return a.next=l(0),a.throw=l(1),a.return=l(2),"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(l){return function(c){return function(l){if(t)throw new TypeError("Generator is already executing.");for(;a&&(a=0,l[0]&&(i=0)),i;)try{if(t=1,r&&(o=2&l[0]?r.return:l[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,l[1])).done)return o;switch(r=0,o&&(l=[2&l[0],o.value]),l[0]){case 0:case 1:o=l;break;case 4:return i.label++,{value:l[1],done:!1};case 5:i.label++,r=l[1],l=[0];continue;case 7:l=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==l[0]&&2!==l[0])){i=0;continue}if(3===l[0]&&(!o||l[1]>o[0]&&l[1]<o[3])){i.label=l[1];break}if(6===l[0]&&i.label<o[1]){i.label=o[1],o=l;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(l);break}o[2]&&i.ops.pop(),i.trys.pop();continue}l=n.call(e,i)}catch(e){l=[6,e],r=0}finally{t=o=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}}"function"==typeof SuppressedError&&SuppressedError;!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");\n#index_terminalContainer__4seT6 {\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\n.index_controls__sXDjs {\n text-align: left;\n height: 26px;\n position: relative;\n top: 4px;\n margin-left: 4px;\n}\n.index_controls__sXDjs .index_consoleCtrl__DI2H1 {\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}\n.index_controls__sXDjs .index_close__XGN9U {\n background: var(--control-close-bg-color);\n}\n.index_controls__sXDjs .index_minimize__pZYTU {\n background: var(--control-minimize-bg-color);\n}\n.index_controls__sXDjs .index_maximize__szRK7 {\n background: var(--control-maximize-bg-color);\n}\n\n.index_editor__JoDSg {\n text-align: left;\n height: 100%;\n padding: 10px 15px;\n overflow-wrap: break-word;\n overflow-y: scroll;\n outline: none;\n font-family: "Source Code Pro", monospace;\n font-size: 18px;\n line-height: 22px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n.index_editor__JoDSg .index_mobileInput__WloSq {\n position: absolute;\n top: -2000px;\n left: -2000px;\n}\n.index_editor__JoDSg .index_lineText__j6qNj {\n display: inline;\n position: relative;\n top: -1px;\n margin-left: 8px;\n}\n.index_editor__JoDSg .index_preWhiteSpace__7KwuG {\n white-space: pre-wrap;\n}\n.index_editor__JoDSg .index_caret__VS4iV {\n position: relative;\n -webkit-animation: index_blink__FJp0- 0.75s ease-in-out infinite;\n -moz-animation: index_blink__FJp0- 0.75s ease-in-out infinite;\n -o-animation: index_blink__FJp0- 0.75s ease-in-out infinite;\n -ms-animation: index_blink__FJp0- 0.75s ease-in-out infinite;\n animation: index_blink__FJp0- 0.75s ease-in-out infinite;\n}\n.index_editor__JoDSg .index_caret__VS4iV .index_caretAfter__6aXPx {\n content: "";\n position: absolute;\n top: 2px;\n width: 10px;\n height: 22px;\n z-index: 10;\n}\n@-moz-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-webkit-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@-o-keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n@keyframes index_blink__FJp0- {\n 0% {\n opacity: 0;\n -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";\n filter: alpha(opacity=0);\n }\n 100% {\n opacity: 1;\n -ms-filter: none;\n filter: none;\n }\n}\n.index_editor__JoDSg a {\n color: #1a87b5;\n}\n\n.index_editorWithTopBar__L6XKw {\n height: calc(100% - 46px);\n}\n\n.index_curvedTop__LX9XS {\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n}\n\n#index_terminalContainer__4seT6 {\n height: 100%;\n}\n\n.index_terminal__teubZ {\n height: 100%;\n width: 100%;\n margin: auto;\n border-radius: 5px;\n}');var l={terminalContainer:"index_terminalContainer__4seT6",controls:"index_controls__sXDjs",consoleCtrl:"index_consoleCtrl__DI2H1",close:"index_close__XGN9U",minimize:"index_minimize__pZYTU",maximize:"index_maximize__szRK7",editor:"index_editor__JoDSg",mobileInput:"index_mobileInput__WloSq",lineText:"index_lineText__j6qNj",preWhiteSpace:"index_preWhiteSpace__7KwuG",caret:"index_caret__VS4iV",blink:"index_blink__FJp0-",caretAfter:"index_caretAfter__6aXPx",editorWithTopBar:"index_editorWithTopBar__L6XKw",curvedTop:"index_curvedTop__LX9XS",terminal:"index_terminal__teubZ"},c=r.createContext(null),s=function(e){var n=e.children;return r.createElement(c.Provider,{value:l},n)},u={dark:{themeBGColor:"#022833",themeToolbarColor:"#131519",themeColor:"#839496",themePromptColor:"#a917a8"},light:{themeBGColor:"#fdf6e4",themeToolbarColor:"#d8d8d8",themeColor:"#333333",themePromptColor:"#a917a8"},dracula:{themeBGColor:"#272B36",themeToolbarColor:"#DBDBDB",themeColor:"#FFFEFC",themePromptColor:"#a917a8"},"material-dark":{themeBGColor:"#151515",themeToolbarColor:"#424242",themeColor:"#fff",themePromptColor:"#42A5F5"},"material-light":{themeBGColor:"#fafafa",themeToolbarColor:"#424242",themeColor:"#151515",themePromptColor:"#42A5F5"},"material-ocean":{themeBGColor:"#263238",themeToolbarColor:"#37474F",themeColor:"#fff",themePromptColor:"#C3D82C"},matrix:{themeBGColor:"#0D0208",themeToolbarColor:"#0D0208",themeColor:"#00FF41",themePromptColor:"#008F11"}},m=r.createContext(null),d=function(e){var n=e.children,t=o(o({},u),n.props.themes||{}),i=t[n.props.theme]||t.light;return r.createElement(m.Provider,{value:i},n)},f=function(){function e(){}return e.splitStringAtIndex=function(e,n){return e?[e.substring(0,n),e.substring(n)]:["",""]},e.isMobile=function(){return n.UAParser(window.navigator.userAgent).device.is("mobile")},e}();function p(e){var n=r.useContext(c),t=e.controlButtonLabels,o=e.showControlButtons?t.map((function(e){return r.createElement("div",{key:e,className:"".concat(n.consoleCtrl," ").concat(n[e])})})):null;return r.createElement("div",{className:n.controls},o)}var _=r.createContext({bufferedContent:"",temporaryContent:"",setBufferedContent:function(e){},setTemporaryContent:function(e){},appendCommandToHistory:function(){},getNextCommand:function(){return""},getPreviousCommand:function(){return""}}),h=function(e,n,t,o,l,s,u,d){var p=r.useContext(c),h=r.useContext(m),x=r.useContext(_),g=x.appendCommandToHistory,b=x.temporaryContent,v=r.useRef(null),C=r.useState(""),y=C[0],E=C[1],w=r.useState(!1),T=w[0],S=w[1],k=r.useState(0),B=k[0],D=k[1],F=r.useState(""),P=F[0],N=F[1],j=r.useState(""),A=j[0],z=j[1];r.useEffect((function(){f.isMobile()}),[n]),r.useEffect((function(){T&&g(y)}),[T]),r.useEffect((function(){null!==d.current&&null!==v.current&&(d.current.onclick=function(){v.current.focus()})}),[]);var I=f.isMobile()&&s?r.createElement("div",{className:p.mobileInput},r.createElement("input",{type:"text",autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",spellCheck:"false",value:y,onChange:function(e){return E(e.target.value)},ref:v,"data-testid":"editor-input"})):null,X=T?r.createElement(r.Fragment,null,I,r.createElement("div",{className:p.lineText},n&&e?r.createElement("span",{className:p.caret},r.createElement("span",{className:p.caretAfter,style:{background:h.themeColor}})):null,r.createElement("span",{className:p.preWhiteSpace},b))):r.createElement(r.Fragment,null,I,r.createElement("span",{style:{color:h.themePromptColor}},t),r.createElement("div",{className:p.lineText},r.createElement("span",{className:p.preWhiteSpace},P),n&&e?r.createElement("span",{className:p.caret},r.createElement("span",{className:p.caretAfter,style:{background:h.themeColor}})):null,r.createElement("span",{className:p.preWhiteSpace},A)));return function(e,n,t,o,i,a,l,c,s,u){var m=r.useContext(_),d=m.getPreviousCommand,p=m.getNextCommand,h=function(r){if(e&&s){r.preventDefault();var l=r.key;if("Enter"!==l){var c=null;if("Backspace"===l){var m=f.splitStringAtIndex(n,i),_=m[0],h=m[1];c=_.slice(0,-1)+h,n&&0!==n.length&&a(i-1)}else if("ArrowUp"===l)(c=d())&&a(c.length);else if("ArrowDown"===l)c=p(),a(c?c.length:0);else if("ArrowLeft"===l)i>0&&a(i-1),c=n;else if("ArrowRight"===l)i<n.length&&a(i+1),c=n;else if("Tab"===l){var x=Object.keys(u).find((function(e){return e.substring(0,n.length)===n}));if(x)return t(x),void a(x.length)}else if((r.metaKey||r.ctrlKey)&&"v"===l.toLowerCase())navigator.clipboard.readText().then((function(e){var r=f.splitStringAtIndex(n||"",i),o=r[0],l=r[1];c=o+e+l,a(i+e.length),t(c)}));else if((r.metaKey||r.ctrlKey)&&"c"===l.toLowerCase()){var g=window.getSelection().toString();navigator.clipboard.writeText(g).then((function(){t(c=n)}))}else if(l&&1===l.length){var b=f.splitStringAtIndex(n,i);_=b[0],h=b[1],c=_+l+h,a(i+1)}else c=n;t(c),o(!1)}else o(!0)}};r.useEffect((function(){return document.addEventListener("keydown",h),function(){document.removeEventListener("keydown",h)}})),r.useEffect((function(){var e=f.splitStringAtIndex(n,i),t=e[0],r=e[1];l(t),c(r)}),[n,i])}(n,y,E,S,B,D,N,z,s,o),function(e,n,t,o,l,s,u,d,f,p,h){var x=r.useContext(_);x.bufferedContent;var g=x.setBufferedContent,b=x.setTemporaryContent;r.useContext(c);var v=r.useContext(m);r.useEffect((function(){var c;e&&(c=o,i(void 0,void 0,void 0,(function(){var e,i,m,_,x,C,y,E;return a(this,(function(a){switch(a.label){case 0:return e=c.trim().split(" "),i=e[0],m=e.slice(1),_="","clear"===i?(g(""),l(""),n(!1),s(0),u(""),d(""),[2]):(x=r.createElement(r.Fragment,null,r.createElement("span",{style:{color:v.themePromptColor}},t," "),r.createElement("span",null,o),r.createElement("br",null)),g((function(e){return r.createElement(r.Fragment,null,e,x)})),l(""),s(0),u(""),d(""),c?(C=m.join(" "),i&&f[i]?"function"!=typeof(y=f[i])?[3,2]:[4,y(C)]:[3,4]):[3,9]);case 1:return _=a.sent(),[3,3];case 2:_=y,a.label=3;case 3:return[3,9];case 4:return"function"!=typeof h?[3,6]:[4,h(i,C)];case 5:return _=a.sent(),[3,9];case 6:return"function"!=typeof p?[3,8]:[4,p(i,C)];case 7:return _=a.sent(),[3,9];case 8:_=p,a.label=9;case 9:return E=r.createElement(r.Fragment,null,_?r.createElement("span",null,_,r.createElement("br",null)):null),g((function(e){return r.createElement(r.Fragment,null,e,E)})),b(""),n(!1),[2]}}))})))}),[e])}(T,S,t,y,E,D,N,z,o,l,u),X};function x(e){var n=r.useRef(null),t=r.useContext(c),o=r.useContext(m),i=r.useContext(_).bufferedContent;!function(e,n){r.useEffect((function(){n.current&&(n.current.scrollTop=n.current.scrollHeight)}),[e])}(i,n);var a=e.enableInput,l=e.caret,s=e.consoleFocused,u=e.prompt,d=e.commands,f=e.welcomeMessage,p=e.errorMessage,x=e.showControlBar,g=e.defaultHandler,b=h(l,s,u,d,p,a,g,n);return r.createElement("div",{id:"terminalEditor",ref:n,className:"".concat(t.editor," ").concat(x?null:t.curvedTop," ").concat(x?t.editorWithTopBar:null),style:{background:o.themeBGColor}},f,i,b)}var g=function(e){var n,t,o,i,a=e.enableInput,l=void 0===a||a,s=e.caret,u=void 0===s||s,d=e.theme,_=void 0===d?"light":d,h=e.showControlBar,g=void 0===h||h,b=e.showControlButtons,v=void 0===b||b,C=e.controlButtonLabels,y=void 0===C?["close","minimize","maximize"]:C,E=e.prompt,w=void 0===E?">>>":E,T=e.commands,S=void 0===T?{}:T,k=e.welcomeMessage,B=void 0===k?"":k,D=e.errorMessage,F=void 0===D?"not found!":D,P=e.defaultHandler,N=void 0===P?null:P,j=r.useRef(null),A=r.useState(!f.isMobile()),z=A[0],I=A[1],X=r.useContext(c),J=r.useContext(m);n=j,t=z,o=I,i=function(e){n.current&&!n.current.contains(e.target)?o(!1):f.isMobile()?o(!t):o(!0)},r.useEffect((function(){return document.addEventListener("mousedown",i),function(){document.removeEventListener("mousedown",i)}}));var O=g?r.createElement(p,{consoleFocused:z,showControlButtons:v,controlButtonLabels:y}):null,M=r.createElement(x,{caret:u,consoleFocused:z,prompt:w,commands:S,welcomeMessage:B,errorMessage:F,enableInput:l,showControlBar:g,defaultHandler:N});return r.createElement("div",{ref:j,id:X.terminalContainer,className:X["theme--".concat(_)],"data-testid":"terminal"},r.createElement("div",{className:"".concat(X.terminal),style:{background:J.themeToolbarColor,color:J.themeColor}},O,M))};function b(e){var n=e.children;return r.createElement(s,null,r.createElement(d,null,n))}function v(e){return r.createElement(b,null,r.createElement(g,o({},e)))}var C=function(e){var n=e.children,t=r.useState(""),o=t[0],i=t[1],a=r.useState(""),l=a[0],c=a[1],s=r.useState([]),u=s[0],m=s[1],d=r.useState(null),f=d[0],p=d[1];r.useEffect((function(){p(u.length)}),[u]);return r.createElement(_.Provider,{value:{bufferedContent:o,temporaryContent:l,setTemporaryContent:c,setBufferedContent:i,appendCommandToHistory:function(e){e&&m(u.concat(e))},getPreviousCommand:function(){if(0===f)return 0===u.length?"":u[0];var e=u[f-1];return f>0&&p(f-1),e},getNextCommand:function(){if(f+1<=u.length){var e=u[f+1];return p(f+1),e}return""}}},n)},y=_,E={ReactTerminal:v,TerminalContextProvider:C,TerminalContext:y};exports.ReactTerminal=v,exports.TerminalContext=y,exports.TerminalContextProvider=C,exports.default=E;