forked from jonmbake/react-terminal-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.js
More file actions
2 lines (2 loc) · 8.29 KB
/
index.js
File metadata and controls
2 lines (2 loc) · 8.29 KB
1
2
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e);function r(e,n){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var r,a,l=t.call(e),i=[];try{for(;(void 0===n||n-- >0)&&!(r=l.next()).done;)i.push(r.value)}catch(e){a={error:e}}finally{try{r&&!r.done&&(t=l.return)&&t.call(l)}finally{if(a)throw a.error}}return i}function a(e,n,t){if(t||2===arguments.length)for(var r,a=0,l=n.length;a<l;a++)!r&&a in n||(r||(r=Array.prototype.slice.call(n,0,a)),r[a]=n[a]);return e.concat(r||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("/**\n * Modfied version of [termynal.js](https://github.com/ines/termynal/blob/master/termynal.css).\n *\n * @author Ines Montani <ines@ines.io>\n * @version 0.0.1\n * @license MIT\n */\n .react-terminal-wrapper {\n width: 100%;\n background: #252a33;\n color: #eee;\n font-size: 18px;\n font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;\n border-radius: 4px;\n padding: 75px 45px 35px;\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n.react-terminal {\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.react-terminal-wrapper.react-terminal-light {\n background: #ddd;\n color: #1a1e24;\n}\n\n.react-terminal-window-buttons {\n position: absolute;\n top: 15px;\n left: 15px;\n display: flex;\n flex-direction: row;\n gap: 10px;\n}\n\n.react-terminal-window-buttons button {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n border: 0;\n}\n\n.react-terminal-window-buttons button.clickable {\n cursor: pointer;\n}\n\n.react-terminal-window-buttons button.red-btn {\n background: #d9515d;\n}\n\n.react-terminal-window-buttons button.yellow-btn {\n background: #f4c025;\n}\n\n.react-terminal-window-buttons button.green-btn {\n background: #3ec930;\n}\n\n.react-terminal-wrapper:after {\n content: attr(data-terminal-name);\n position: absolute;\n color: #a2a2a2;\n top: 5px;\n left: 0;\n width: 100%;\n text-align: center;\n pointer-events: none;\n}\n\n.react-terminal-wrapper.react-terminal-light:after {\n color: #D76D77;\n}\n\n.react-terminal-line {\n white-space: pre;\n}\n\n.react-terminal-line:before {\n /* Set up defaults and ensure empty lines are displayed. */\n content: '';\n display: inline-block;\n vertical-align: middle;\n color: #a2a2a2;\n}\n\n.react-terminal-light .react-terminal-line:before {\n color: #D76D77;\n}\n\n.react-terminal-input:before {\n margin-right: 0.75em;\n content: '$';\n}\n\n.react-terminal-input[data-terminal-prompt]:before {\n content: attr(data-terminal-prompt);\n}\n\n.react-terminal-wrapper:focus-within .react-terminal-active-input .cursor {\n position: relative;\n display: inline-block;\n width: 0.55em;\n height: 1em;\n top: 0.225em;\n background: #fff;\n -webkit-animation: blink 1s infinite;\n animation: blink 1s infinite;\n}\n\n/* Cursor animation */\n\n@-webkit-keyframes blink {\n 50% {\n opacity: 0;\n }\n}\n\n@keyframes blink {\n 50% {\n opacity: 0;\n }\n}\n\n.terminal-hidden-input {\n position: fixed;\n left: -1000px;\n}\n\n/* .react-terminal-progress {\n display: flex;\n margin: .5rem 0;\n}\n\n.react-terminal-progress-bar {\n background-color: #fff;\n border-radius: .25rem;\n width: 25%;\n}\n\n.react-terminal-wrapper.react-terminal-light .react-terminal-progress-bar {\n background-color: #000;\n} */\n");var l,i=function(e){var n=e.redBtnCallback,r=e.yellowBtnCallback,a=e.greenBtnCallback;return t.default.createElement("div",{className:"react-terminal-window-buttons"},t.default.createElement("button",{className:"".concat(r?"clickable":""," red-btn"),disabled:!n,onClick:n}),t.default.createElement("button",{className:"".concat(r?"clickable":""," yellow-btn"),disabled:!r,onClick:r}),t.default.createElement("button",{className:"".concat(a?"clickable":""," green-btn"),disabled:!a,onClick:a}))};exports.ColorMode=void 0,(l=exports.ColorMode||(exports.ColorMode={}))[l.Light=0]="Light",l[l.Dark=1]="Dark";exports.TerminalInput=function(e){var n=e.children,r=e.prompt;return t.default.createElement("div",{className:"react-terminal-line react-terminal-input","data-terminal-prompt":r||"$"},n)},exports.TerminalOutput=function(e){var n=e.children;return t.default.createElement("div",{className:"react-terminal-line"},n)},exports.default=function(n){var l=n.name,o=n.prompt,c=n.height,u=void 0===c?"600px":c,d=n.colorMode,s=n.onInput,m=n.children,f=n.startingInputValue,p=void 0===f?"":f,b=n.redBtnCallback,y=n.yellowBtnCallback,h=n.greenBtnCallback,v=n.TopButtonsPanel,g=void 0===v?i:v,w=r(e.useState(""),2),k=w[0],x=w[1],C=r(e.useState(0),2),E=C[0],S=C[1],N=r(e.useState([]),2),B=N[0],M=N[1],D=r(e.useState(null),2);D[0];var T=D[1],A=e.useRef(null);e.useEffect((function(){var e=localStorage.getItem("terminal-command-history");e&&M(JSON.parse(e))}),[]),e.useEffect((function(){localStorage.setItem("terminal-command-history",JSON.stringify(B))}),[B]),e.useEffect((function(){x(p.trim())}),[p]),e.useEffect((function(){var e,n;if(null!=s){var t=[],r=function(e){var n=function(){var n;return null===(n=null==e?void 0:e.querySelector(".terminal-hidden-input"))||void 0===n?void 0:n.focus()};null==e||e.addEventListener("click",n),t.push({terminalEl:e,listener:n})};try{for(var a=function(e){var n="function"==typeof Symbol&&Symbol.iterator,t=n&&e[n],r=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(n?"Object is not iterable.":"Symbol.iterator is not defined.")}(document.getElementsByClassName("react-terminal-wrapper")),l=a.next();!l.done;l=a.next()){r(l.value)}}catch(n){e={error:n}}finally{try{l&&!l.done&&(n=a.return)&&n.call(a)}finally{if(e)throw e.error}}return function(){t.forEach((function(e){e.terminalEl.removeEventListener("click",e.listener)}))}}}),[s]);var I=["react-terminal-wrapper"];return d===exports.ColorMode.Light&&I.push("react-terminal-light"),t.default.createElement("div",{className:I.join(" "),"data-terminal-name":l},t.default.createElement(g,{redBtnCallback:b,yellowBtnCallback:y,greenBtnCallback:h}),t.default.createElement("div",{className:"react-terminal",style:{height:u}},m,"function"==typeof s&&t.default.createElement("div",{className:"react-terminal-line react-terminal-input react-terminal-active-input","data-terminal-prompt":o||"$",key:"terminal-line-prompt"},k,t.default.createElement("span",{className:"cursor",style:{left:"".concat(E+1,"px")}})),t.default.createElement("div",{ref:A})),t.default.createElement("input",{className:"terminal-hidden-input",placeholder:"Terminal Hidden Input",value:k,autoFocus:null!=s,onChange:function(e){x(e.target.value)},onKeyDown:function(e){if(s){var n,t,l,i=e.currentTarget;if("Enter"===e.key)k.trim()&&M((function(e){return a(a([],r(e),!1),[k],!1)})),T(null),s(k),S(0),x(""),setTimeout((function(){var e;return null===(e=null==A?void 0:A.current)||void 0===e?void 0:e.scrollIntoView({behavior:"auto",block:"nearest"})}),500);else if("ArrowUp"===e.key){if(e.preventDefault(),0===B.length)return;T((function(e){var n=null===e?B.length-1:Math.max(e-1,0);return x(B[n]),n}))}else if("ArrowDown"===e.key)e.preventDefault(),T((function(e){if(null===e)return null;var n=e+1;return n>=B.length?(x(""),null):(x(B[n]),n)}));else if(["ArrowLeft","ArrowRight","Delete"].includes(e.key)){var o="",c=k.length-(i.selectionStart||0);n=c,t=0,l=k.length,c=n>l?l:n<t?t:n,"ArrowLeft"===e.key?(c>k.length-1&&c--,o=k.slice(k.length-1-c)):"ArrowRight"!==e.key&&"Delete"!==e.key||(o=k.slice(k.length-c+1));var u=function(e,n){var t=document.createElement("span");t.style.visibility="hidden",t.style.position="absolute",t.style.fontSize=window.getComputedStyle(e).fontSize,t.style.fontFamily=window.getComputedStyle(e).fontFamily,t.innerText=n,document.body.appendChild(t);var r=t.getBoundingClientRect().width;return document.body.removeChild(t),-r}(i,o);S(u)}}}}))};
//# sourceMappingURL=index.js.map