retro-react/dist/cjs/components/terminal/Terminal.js

A React component library for building retro-style websites

"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react"),s=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),t=require("../../utils/classNames.js"),n=require("../../constants/commonClassNames.js"),i=require("./Terminal.styled.js");const u=r.forwardRef(((u,a)=>{var{id:l,className:o,prompt:c="C:\\>",onCommandSubmit:m,sx:d,getCurrentText:v}=u,p=e.__rest(u,["id","className","prompt","onCommandSubmit","sx","getCurrentText"]);const[j,x]=r.useState(""),[f,h]=r.useState([]),T=r.useRef(null),g=r.useRef(null);return r.useEffect((()=>{g.current&&g.current.focus()}),[]),s.jsxs(i.Terminal,Object.assign({ref:T,id:l,sx:d,className:t.classNames("terminal-root",o,n.default),onClick:()=>{var e;return null===(e=g.current)||void 0===e?void 0:e.focus()}},p,{children:[s.jsx("div",Object.assign({className:"terminal-history"},{children:f.map(((e,r)=>s.jsxs("div",{children:["input"===e.type?s.jsxs("span",{children:[c," "]},void 0):null,e.value]},r)))}),void 0),s.jsxs("span",{children:[c," "]},void 0),s.jsx(i.TerminalInput,{value:j,onChange:e=>{x(e.target.value),v&&v(e.target.value)},onKeyDown:e=>{"Enter"===e.key&&(h((e=>[...e,{type:"input",value:j}])),m?m(j):h((e=>[...e,{type:"output",value:j}])),x(""),setTimeout((()=>{T.current&&(T.current.scrollTop=T.current.scrollHeight)}),0))},ref:g},void 0)]}),void 0)}));u.displayName="Terminal",exports.Terminal=u;