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

A React component library for building retro-style websites

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