react-terminal
Version:
React component that renders a terminal
2 lines (1 loc) • 14.6 kB
JavaScript
import*as e from"react";import{UAParser as n}from"ua-parser-js";var t=function(){return t=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},t.apply(this,arguments)};function o(e,n,t,o){return new(t||(t=Promise))((function(r,i){function a(e){try{c(o.next(e))}catch(e){i(e)}}function l(e){try{c(o.throw(e))}catch(e){i(e)}}function c(e){var n;e.done?r(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(a,l)}c((o=o.apply(e,n||[])).next())}))}function r(e,n){var t,o,r,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[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,o&&(r=2&l[0]?o.return:l[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,l[1])).done)return r;switch(o=0,r&&(l=[2&l[0],r.value]),l[0]){case 0:case 1:r=l;break;case 4:return i.label++,{value:l[1],done:!1};case 5:i.label++,o=l[1],l=[0];continue;case 7:l=i.ops.pop(),i.trys.pop();continue;default:if(!(r=i.trys,(r=r.length>0&&r[r.length-1])||6!==l[0]&&2!==l[0])){i=0;continue}if(3===l[0]&&(!r||l[1]>r[0]&&l[1]<r[3])){i.label=l[1];break}if(6===l[0]&&i.label<r[1]){i.label=r[1],r=l;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(l);break}r[2]&&i.ops.pop(),i.trys.pop();continue}l=n.call(e,i)}catch(e){l=[6,e],o=0}finally{t=r=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 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__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 i={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"},a=e.createContext(null),l=function(n){var t=n.children;return e.createElement(a.Provider,{value:i},t)},c={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"}},s=e.createContext(null),u=function(n){var o=n.children,r=t(t({},c),o.props.themes||{}),i=r[o.props.theme]||r.light;return e.createElement(s.Provider,{value:i},o)},m=function(){function e(){}return e.splitStringAtIndex=function(e,n){return e?[e.substring(0,n),e.substring(n)]:["",""]},e.isMobile=function(){return n(window.navigator.userAgent).device.is("mobile")},e}();function d(n){var t=e.useContext(a),o=n.controlButtonLabels,r=n.showControlButtons?o.map((function(n){return e.createElement("div",{key:n,className:"".concat(t.consoleCtrl," ").concat(t[n])})})):null;return e.createElement("div",{className:t.controls},r)}var f=e.createContext({bufferedContent:"",temporaryContent:"",setBufferedContent:function(e){},setTemporaryContent:function(e){},appendCommandToHistory:function(){},getNextCommand:function(){return""},getPreviousCommand:function(){return""}}),p=function(n,t,i,l,c,u,d,p){var _=e.useContext(a),h=e.useContext(s),x=e.useContext(f),g=x.appendCommandToHistory,C=x.temporaryContent,v=e.useRef(null),b=e.useState(""),y=b[0],E=b[1],w=e.useState(!1),T=w[0],S=w[1],k=e.useState(0),B=k[0],F=k[1],D=e.useState(""),N=D[0],A=D[1],P=e.useState(""),I=P[0],X=P[1];e.useEffect((function(){m.isMobile()}),[t]),e.useEffect((function(){T&&g(y)}),[T]),e.useEffect((function(){null!==p.current&&null!==v.current&&(p.current.onclick=function(){v.current.focus()})}),[]);var z=m.isMobile()&&u?e.createElement("div",{className:_.mobileInput},e.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,J=T?e.createElement(e.Fragment,null,z,e.createElement("div",{className:_.lineText},t&&n?e.createElement("span",{className:_.caret},e.createElement("span",{className:_.caretAfter,style:{background:h.themeColor}})):null,e.createElement("span",{className:_.preWhiteSpace},C))):e.createElement(e.Fragment,null,z,e.createElement("span",{style:{color:h.themePromptColor}},i),e.createElement("div",{className:_.lineText},e.createElement("span",{className:_.preWhiteSpace},N),t&&n?e.createElement("span",{className:_.caret},e.createElement("span",{className:_.caretAfter,style:{background:h.themeColor}})):null,e.createElement("span",{className:_.preWhiteSpace},I)));return function(n,t,o,r,i,a,l,c,s,u){var d=e.useContext(f),p=d.getPreviousCommand,_=d.getNextCommand,h=function(e){if(n&&s){e.preventDefault();var l=e.key;if("Enter"!==l){var c=null;if("Backspace"===l){var d=m.splitStringAtIndex(t,i),f=d[0],h=d[1];c=f.slice(0,-1)+h,t&&0!==t.length&&a(i-1)}else if("ArrowUp"===l)(c=p())&&a(c.length);else if("ArrowDown"===l)c=_(),a(c?c.length:0);else if("ArrowLeft"===l)i>0&&a(i-1),c=t;else if("ArrowRight"===l)i<t.length&&a(i+1),c=t;else if("Tab"===l){var x=Object.keys(u).find((function(e){return e.substring(0,t.length)===t}));if(x)return o(x),void a(x.length)}else if((e.metaKey||e.ctrlKey)&&"v"===l.toLowerCase())navigator.clipboard.readText().then((function(e){var n=m.splitStringAtIndex(t||"",i),r=n[0],l=n[1];c=r+e+l,a(i+e.length),o(c)}));else if((e.metaKey||e.ctrlKey)&&"c"===l.toLowerCase()){var g=window.getSelection().toString();navigator.clipboard.writeText(g).then((function(){o(c=t)}))}else if(l&&1===l.length){var C=m.splitStringAtIndex(t,i);f=C[0],h=C[1],c=f+l+h,a(i+1)}else c=t;o(c),r(!1)}else r(!0)}};e.useEffect((function(){return document.addEventListener("keydown",h),function(){document.removeEventListener("keydown",h)}})),e.useEffect((function(){var e=m.splitStringAtIndex(t,i),n=e[0],o=e[1];l(n),c(o)}),[t,i])}(t,y,E,S,B,F,A,X,u,l),function(n,t,i,l,c,u,m,d,p,_,h){var x=e.useContext(f);x.bufferedContent;var g=x.setBufferedContent,C=x.setTemporaryContent;e.useContext(a);var v=e.useContext(s);e.useEffect((function(){var a;n&&(a=l,o(void 0,void 0,void 0,(function(){var n,o,s,f,x,b,y,E;return r(this,(function(r){switch(r.label){case 0:return n=a.trim().split(" "),o=n[0],s=n.slice(1),f="","clear"===o?(g(""),c(""),t(!1),u(0),m(""),d(""),[2]):(x=e.createElement(e.Fragment,null,e.createElement("span",{style:{color:v.themePromptColor}},i," "),e.createElement("span",null,l),e.createElement("br",null)),g((function(n){return e.createElement(e.Fragment,null,n,x)})),c(""),u(0),m(""),d(""),a?(b=s.join(" "),o&&p[o]?"function"!=typeof(y=p[o])?[3,2]:[4,y(b)]:[3,4]):[3,9]);case 1:return f=r.sent(),[3,3];case 2:f=y,r.label=3;case 3:return[3,9];case 4:return"function"!=typeof h?[3,6]:[4,h(o,b)];case 5:return f=r.sent(),[3,9];case 6:return"function"!=typeof _?[3,8]:[4,_(o,b)];case 7:return f=r.sent(),[3,9];case 8:f=_,r.label=9;case 9:return E=e.createElement(e.Fragment,null,f?e.createElement("span",null,f,e.createElement("br",null)):null),g((function(n){return e.createElement(e.Fragment,null,n,E)})),C(""),t(!1),[2]}}))})))}),[n])}(T,S,i,y,E,F,A,X,l,c,d),J};function _(n){var t=e.useRef(null),o=e.useContext(a),r=e.useContext(s),i=e.useContext(f).bufferedContent;!function(n,t){e.useEffect((function(){t.current&&(t.current.scrollTop=t.current.scrollHeight)}),[n])}(i,t);var l=n.enableInput,c=n.caret,u=n.consoleFocused,m=n.prompt,d=n.commands,_=n.welcomeMessage,h=n.errorMessage,x=n.showControlBar,g=n.defaultHandler,C=p(c,u,m,d,h,l,g,t);return e.createElement("div",{id:"terminalEditor",ref:t,className:"".concat(o.editor," ").concat(x?null:o.curvedTop," ").concat(x?o.editorWithTopBar:null),style:{background:r.themeBGColor}},_,i,C)}var h=function(n){var t,o,r,i,l=n.enableInput,c=void 0===l||l,u=n.caret,f=void 0===u||u,p=n.theme,h=void 0===p?"light":p,x=n.showControlBar,g=void 0===x||x,C=n.showControlButtons,v=void 0===C||C,b=n.controlButtonLabels,y=void 0===b?["close","minimize","maximize"]:b,E=n.prompt,w=void 0===E?">>>":E,T=n.commands,S=void 0===T?{}:T,k=n.welcomeMessage,B=void 0===k?"":k,F=n.errorMessage,D=void 0===F?"not found!":F,N=n.defaultHandler,A=void 0===N?null:N,P=e.useRef(null),I=e.useState(!m.isMobile()),X=I[0],z=I[1],J=e.useContext(a),j=e.useContext(s);t=P,o=X,r=z,i=function(e){t.current&&!t.current.contains(e.target)?r(!1):m.isMobile()?r(!o):r(!0)},e.useEffect((function(){return document.addEventListener("mousedown",i),function(){document.removeEventListener("mousedown",i)}}));var M=g?e.createElement(d,{consoleFocused:X,showControlButtons:v,controlButtonLabels:y}):null,L=e.createElement(_,{caret:f,consoleFocused:X,prompt:w,commands:S,welcomeMessage:B,errorMessage:D,enableInput:c,showControlBar:g,defaultHandler:A});return e.createElement("div",{ref:P,id:J.terminalContainer,className:J["theme--".concat(h)],"data-testid":"terminal"},e.createElement("div",{className:"".concat(J.terminal),style:{background:j.themeToolbarColor,color:j.themeColor}},M,L))};function x(n){var t=n.children;return e.createElement(l,null,e.createElement(u,null,t))}function g(n){return e.createElement(x,null,e.createElement(h,t({},n)))}var C=function(n){var t=n.children,o=e.useState(""),r=o[0],i=o[1],a=e.useState(""),l=a[0],c=a[1],s=e.useState([]),u=s[0],m=s[1],d=e.useState(null),p=d[0],_=d[1];e.useEffect((function(){_(u.length)}),[u]);return e.createElement(f.Provider,{value:{bufferedContent:r,temporaryContent:l,setTemporaryContent:c,setBufferedContent:i,appendCommandToHistory:function(e){e&&m(u.concat(e))},getPreviousCommand:function(){if(0===p)return 0===u.length?"":u[0];var e=u[p-1];return p>0&&_(p-1),e},getNextCommand:function(){if(p+1<=u.length){var e=u[p+1];return _(p+1),e}return""}}},t)},v=f,b={ReactTerminal:g,TerminalContextProvider:C,TerminalContext:v};export{g as ReactTerminal,v as TerminalContext,C as TerminalContextProvider,b as default};