mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

removing unused code in terminal.js and adding props to remix-ui-terminal.ts

Browse Source
pull/5370/head
tizah 3 years ago
parent 1c17f24ae4
commit e18559a4b7
4 changed files with 94 additions and 603 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 653
      apps/remix-ide/src/app/panels/terminal.js
  2. 0
      libs/remix-ui/terminal/src/lib/actions/terminalAction.ts
  3. 0
      libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts
  4. 44
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

653
apps/remix-ide/src/app/panels/terminal.js
Unescape View File

@ -1,10 +1,9 @@
/* global Node, requestAnimationFrame */
/* global Node, requestAnimationFrame */ // eslint-disable-line
import React from 'react' // eslint-disable-line
import ReactDOM from 'react-dom'
import { RemixUiTerminal } from '@remix-ui/terminal'
import { RemixUiTerminal } from '@remix-ui/terminal' // eslint-disable-line
import { Plugin } from '@remixproject/engine'
import * as packageJson from '../../../../../package.json'
import * as remixBleach from '../../lib/remixBleach'
var yo = require('yo-yo')
var javascriptserialize = require('javascript-serialize')
@ -15,9 +14,6 @@ var EventManager = require('../../lib/events')
var CommandInterpreterAPI = require('../../lib/cmdInterpreterAPI')
var AutoCompletePopup = require('../ui/auto-complete-popup')
var TxLogger = require('../../app/ui/txLogger')
var csjs = require('csjs-inject')
var css = require('./styles/terminal-styles')
@ -25,8 +21,6 @@ var KONSOLES = []
function register (api) { KONSOLES.push(api) }
var ghostbar = yo`<div class=${css.ghostbar} bg-secondary></div>`
const profile = {
displayName: 'Terminal',
name: 'terminal',
@ -41,623 +35,84 @@ class Terminal extends Plugin {
super(profile)
this.element = document.createElement('div')
this.element.setAttribute('id', 'terminalView')
var self = this
self.event = new EventManager()
self.blockchain = opts.blockchain
self._api = api
self._opts = opts
self.data = {
this.event = new EventManager()
this.blockchain = opts.blockchain
this._api = api
this._opts = opts
this.data = {
lineLength: opts.lineLength || 80, // ????
session: [],
activeFilters: { commands: {}, input: '' },
filterFns: {}
}
self._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
self._components = {}
self._components.cmdInterpreter = new CommandInterpreterAPI(this, null, self.blockchain)
self._components.autoCompletePopup = new AutoCompletePopup(self._opts)
self._components.autoCompletePopup.event.register('handleSelect', function (input) {
const textList = self._view.input.innerText.split(' ')
this._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
this._components = {}
this._components.cmdInterpreter = new CommandInterpreterAPI(this, null, this.blockchain)
this._components.autoCompletePopup = new AutoCompletePopup(this._opts)
this._components.autoCompletePopup.event.register('handleSelect', function (input) {
const textList = this._view.input.innerText.split(' ')
textList.pop()
textList.push(input)
self._view.input.innerText = textList
self._view.input.focus()
self.putCursor2End(self._view.input)
this._view.input.innerText = textList
this._view.input.focus()
this.putCursor2End(this._view.input)
})
self._commands = {}
self.commands = {}
self._JOURNAL = []
self._jobs = []
self._INDEX = {}
self._INDEX.all = []
self._INDEX.allMain = []
self._INDEX.commands = {}
self._INDEX.commandsMain = {}
self.registerCommand('html', self._blocksRenderer('html'), { activate: true })
self.registerCommand('log', self._blocksRenderer('log'), { activate: true })
self.registerCommand('info', self._blocksRenderer('info'), { activate: true })
self.registerCommand('warn', self._blocksRenderer('warn'), { activate: true })
self.registerCommand('error', self._blocksRenderer('error'), { activate: true })
self.registerCommand('script', function execute (args, scopedCommands, append) {
this._commands = {}
this.commands = {}
this._JOURNAL = []
this._jobs = []
this._INDEX = {}
this._INDEX.all = []
this._INDEX.allMain = []
this._INDEX.commands = {}
this._INDEX.commandsMain = {}
this.registerCommand('html', this._blocksRenderer('html'), { activate: true })
this.registerCommand('log', this._blocksRenderer('log'), { activate: true })
this.registerCommand('info', this._blocksRenderer('info'), { activate: true })
this.registerCommand('warn', this._blocksRenderer('warn'), { activate: true })
this.registerCommand('error', this._blocksRenderer('error'), { activate: true })
this.registerCommand('script', function execute (args, scopedCommands, append) {
var script = String(args[0])
self._shell(script, scopedCommands, function (error, output) {
this._shell(script, scopedCommands, function (error, output) {
if (error) scopedCommands.error(error)
else if (output) scopedCommands.log(output)
})
}, { activate: true })
function basicFilter (value, query) { try { return value.indexOf(query) !== -1 } catch (e) { return false } }
self.registerFilter('log', basicFilter)
self.registerFilter('info', basicFilter)
self.registerFilter('warn', basicFilter)
self.registerFilter('error', basicFilter)
self.registerFilter('script', basicFilter)
this.registerFilter('log', basicFilter)
this.registerFilter('info', basicFilter)
this.registerFilter('warn', basicFilter)
this.registerFilter('error', basicFilter)
this.registerFilter('script', basicFilter)
if (opts.shell) self._shell = opts.shell // ???
register(self)
if (opts.shell) this._shell = opts.shell // ???
register(this)
}
onActivation () {
this.renderComponent()
}
// onActivation () {
// this.on('scriptRunner', 'log', (msg) => {
// this.commands.log.apply(this.commands, msg.data)
// })
// this.on('scriptRunner', 'info', (msg) => {
// this.commands.info.apply(this.commands, msg.data)
// })
// this.on('scriptRunner', 'warn', (msg) => {
// this.commands.warn.apply(this.commands, msg.data)
// })
// this.on('scriptRunner', 'error', (msg) => {
// this.commands.error.apply(this.commands, msg.data)
// })
// }
// onDeactivation () {
// this.off('scriptRunner', 'log')
// this.off('scriptRunner', 'info')
// this.off('scriptRunner', 'warn')
// this.off('scriptRunner', 'error')
// }
// log (message) {
// var command = this.commands[message.type]
// if (typeof command === 'function') {
// if (typeof message.value === 'string' && message.type === 'html') {
// var el = document.createElement('div')
// el.innerHTML = remixBleach.sanitize(message.value, {
// list: [
// 'a',
// 'b',
// 'p',
// 'em',
// 'strong',
// 'div',
// 'span',
// 'ul',
// 'li',
// 'ol',
// 'hr'
// ]
// })
// message.value = el
// }
// command(message.value)
// };
// }
// logHtml (html) {
// var command = this.commands.html
// if (typeof command === 'function') command(html)
// }
// focus () {
// if (this._view.input) this._view.input.focus()
// }
render () {
// var self = this
// if (self._view.el) return self._view.el
//self._view.journal = yo`<div id="journal" class=${css.journal} data-id="terminalJournal"></div>`
// self._view.input = yo`
// <span class=${css.input} onload=${() => { this.focus() }} onpaste=${paste} onkeydown=${change}></span>
// `
// self._view.input.setAttribute('spellcheck', 'false')
// self._view.input.setAttribute('contenteditable', 'true')
// self._view.input.setAttribute('id', 'terminalCliInput')
// self._view.input.setAttribute('data-id', 'terminalCliInput')
// self._view.input.innerText = '\n'
// self._view.cli = yo`
// <div id="terminalCli" data-id="terminalCli" class="${css.cli}" onclick=${focusinput}>
// <span class=${css.prompt}>${'>'}</span>
// ${self._view.input}
// </div>
// `
// self._view.icon = yo`
// <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
// class="mx-2 ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
// self._view.dragbar = yo`
// <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
// self._view.pendingTxCount = yo`<div class="mx-2" title='Pending Transactions'>0</div>`
// self._view.inputSearch = yo`<input
// spellcheck="false"
// type="text"
// class="border ${css.filter} form-control"
// id="searchInput"
// onkeydown=${filter}
// placeholder="Search with transaction hash or address"
// data-id="terminalInputSearch">
// </input>`
// self._view.bar = yo`
// <div class="${css.bar}">
// ${self._view.dragbar}
// <div class="${css.menu} border-top border-dark bg-light" data-id="terminalToggleMenu">
// ${self._view.icon}
// <div class="mx-2" id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
// <i class="fas fa-ban" aria-hidden="true" title="Clear console"
// onmouseenter=${hover} onmouseleave=${hover}></i>
// </div>
// ${self._view.pendingTxCount}
// <div class=${css.verticalLine}></div>
// <div class="pt-1 h-80 mx-3 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
// <input
// class="custom-control-input"
// id="listenNetworkCheck"
// onchange=${listenOnNetwork}
// type="checkbox"
// title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
// >
// <label
// class="pt-1 form-check-label custom-control-label text-nowrap""
// title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
// for="listenNetworkCheck"
// >
// listen on network
// </label>
// </div>
// <div class=${css.search}>
// <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
// ${self._view.inputSearch}
// </div>
// </div>
// </div>
// `
// self._view.term = yo`
// <div class="${css.terminal_container}" tabindex="-1" data-id="terminalContainer" onscroll=${throttle(reattach, 10)} onkeydown=${focusinput}>
// ${self._components.autoCompletePopup.render()}
// <div data-id="terminalContainerDisplay" style="
// position: absolute;
// height: 100%;
// width: 100%;
// opacity: 0.1;
// z-index: -1;
// "></div>
// <div class=${css.terminal}>
// ${self._view.journal}
// ${self._view.cli}
// </div>
// </div>
// `
// self._view.el = yo`
// <div class="${css.panel}" style="height: 180px;">
// ${self._view.bar}
// ${self._view.term}
// </div>
// `
// setInterval(async () => {
// try {
// self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount')
// } catch (err) {}
// }, 1000)
// function listenOnNetwork (ev) {
// self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
// }
//function paste (event) {
// const selection = window.getSelection()
// if (!selection.rangeCount) return false
// event.preventDefault()
// event.stopPropagation()
// var clipboard = (event.clipboardData || window.clipboardData)
// var text = clipboard.getData('text/plain')
// text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters
// var temp = document.createElement('div')
// temp.innerHTML = text
// var textnode = document.createTextNode(temp.textContent)
// selection.getRangeAt(0).insertNode(textnode)
// selection.empty()
// self.scroll2bottom()
// placeCaretAtEnd(event.currentTarget)
//}
//function placeCaretAtEnd (el) {
// el.focus()
// var range = document.createRange()
// range.selectNodeContents(el)
// range.collapse(false)
// var sel = window.getSelection()
// sel.removeAllRanges()
// sel.addRange(range)
// }
// function throttle (fn, wait) {
// var time = Date.now()
// return function debounce () {
// if ((time + wait - Date.now()) < 0) {
// fn.apply(this, arguments)
// time = Date.now()
// }
// }
// }
// var css2 = csjs`
// .anchor {
// position : static;
// border-top : 2px dotted blue;
// height : 10px;
// }
// .overlay {
// position : absolute;
// width : 100%;
// display : flex;
// align-items : center;
// justify-content : center;
// bottom : 0;
// right : 15px;
// min-height : 20px;
// }
// .text {
// z-index : 2;
// color : black;
// font-weight : bold;
// pointer-events : none;
// }
// .background {
// z-index : 1;
// opacity : 0.8;
// background-color : #a6aeba;
// cursor : pointer;
// }
// .ul {
// padding-left : 20px;
// padding-bottom : 5px;
// }
// `
// var text = yo`<div class="${css2.overlay} ${css2.text}"></div>`
// var background = yo`<div class="${css2.overlay} ${css2.background}"></div>`
// var placeholder = yo`<div class=${css2.anchor}>${background}${text}</div>`
// var inserted = false
// window.addEventListener('resize', function (event) {
// self.event.trigger('resize', [])
// self.event.trigger('resize', [])
// })
//function focusinput (event) {
// if (
// event.altKey ||
// event.ctrlKey ||
// event.metaKey ||
// event.shiftKey ||
// event.key === 'Down' ||
// event.key === 'ArrowDown' ||
// event.key === 'Up' ||
// event.key === 'ArrowUp' ||
// event.key === 'Left' ||
// event.key === 'ArrowLeft' ||
// event.key === 'Right' ||
// event.key === 'ArrowRight' ||
// event.key === 'Esc' ||
// event.key === 'Escape'
// ) return
// refocus()
//}
// function refocus () {
// self._view.input.focus()
// reattach({ currentTarget: self._view.term })
// delete self.scroll2bottom
// self.scroll2bottom()
// }
//function reattach (event) {
// var el = event.currentTarget
// var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30
// if (isBottomed) {
// if (inserted) {
// text.innerText = ''
// background.onclick = undefined
// if (placeholder.parentElement) self._view.journal.removeChild(placeholder)
// }
// inserted = false
// delete self.scroll2bottom
// } else {
// if (!inserted) self._view.journal.appendChild(placeholder)
// inserted = true
// check()
// if (!placeholder.nextElementSibling) {
// placeholder.style.display = 'none'
// } else {
// placeholder.style = ''
// }
// self.scroll2bottom = function () {
// var next = placeholder.nextElementSibling
// if (next) {
// placeholder.style = ''
// check()
// var messages = 1
// while ((next = next.nextElementSibling)) messages += 1
// text.innerText = `${messages} new unread log entries`
// } else {
// placeholder.style.display = 'none'
// }
// }
// }
//}
//function check () {
// var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15)
// var pos2 = placeholder.offsetTop
// if ((pos1 - pos2) > 0) {
// text.style.display = 'none'
// background.style.position = 'relative'
// background.style.opacity = 0.3
// background.style.right = 0
// background.style.borderBox = 'content-box'
// background.style.padding = '2px'
// background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px'
// background.onclick = undefined
// background.style.cursor = 'default'
// background.style.pointerEvents = 'none'
// } else {
// background.style = ''
// text.style = ''
// background.onclick = function (event) {
// placeholder.scrollIntoView()
// check()
// }
// }
//}
//function hover (event) { event.currentTarget.classList.toggle(css.hover) }
//function minimize (event) {
// event.preventDefault()
// event.stopPropagation()
// if (event.button === 0) {
// var classList = self._view.icon.classList
// classList.toggle('fa-angle-double-down')
// classList.toggle('fa-angle-double-up')
// self.event.trigger('resize', [])
// }
//}
// var filtertimeout = null
//function filter (event) {
// if (filtertimeout) {
// clearTimeout(filtertimeout)
// }
// filtertimeout = setTimeout(() => {
// self.updateJournal({ type: 'search', value: self._view.inputSearch.value })
// self.scroll2bottom()
// }, 500)
// }
// function clear (event) {
// refocus()
// self._view.journal.innerHTML = ''
// }
// ----------------- resizeable ui ---------------
//function mousedown (event) {
// event.preventDefault()
// if (event.which === 1) {
// moveGhostbar(event)
// document.body.appendChild(ghostbar)
// document.addEventListener('mousemove', moveGhostbar)
// document.addEventListener('mouseup', removeGhostbar)
// document.addEventListener('keydown', cancelGhostbar)
// }
//}
//function cancelGhostbar (event) {
// if (event.keyCode === 27) {
// document.body.removeChild(ghostbar)
// document.removeEventListener('mousemove', moveGhostbar)
// document.removeEventListener('mouseup', removeGhostbar)
// document.removeEventListener('keydown', cancelGhostbar)
// }
// }
// function moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar
// ghostbar.style.top = self._api.getPosition(event) + 'px'
// }
// function removeGhostbar (event) {
// if (self._view.icon.classList.contains('fa-angle-double-up')) {
// self._view.icon.classList.toggle('fa-angle-double-down')
// self._view.icon.classList.toggle('fa-angle-double-up')
// }
// document.body.removeChild(ghostbar)
// document.removeEventListener('mousemove', moveGhostbar)
// document.removeEventListener('mouseup', removeGhostbar)
// document.removeEventListener('keydown', cancelGhostbar)
// self.event.trigger('resize', [self._api.getPosition(event)])
// }
// self._cmdHistory = []
// self._cmdIndex = -1
// self._cmdTemp = ''
// var intro = yo`
// <div><div> - Welcome to Remix ${packageJson.version} - </div><br>
// <div>You can use this terminal to: </div>
// <ul class=${css2.ul}>
// <li>Check transactions details and start debugging.</li>
// <li>Execute JavaScript scripts:
// <br />
// <i> - Input a script directly in the command line interface </i>
// <br />
// <i> - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\` in the command line interface </i>
// <br />
// <i> - Right click on a JavaScript file in the file explorer and then click \`Run\` </i>
// </li>
// </ul>
// <div>The following libraries are accessible:</div>
// <ul class=${css2.ul}>
// <li><a target="_blank" href="https://web3js.readthedocs.io/en/1.0/">web3 version 1.0.0</a></li>
// <li><a target="_blank" href="https://docs.ethers.io">ethers.js</a> </li>
// <li><a target="_blank" href="https://www.npmjs.com/package/swarmgw">swarmgw</a> </li>
// <li>remix (run remix.help() for more info)</li>
// </ul>
// </div>
// `
//self._shell('remix.help()', self.commands, () => {})
//self.commands.html(intro)
//self._components.txLogger = new TxLogger(this, self.blockchain)
// self._components.txLogger.event.register('debuggingRequested', async (hash) => {
// // TODO should probably be in the run module
// if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger')
// this.call('menuicons', 'select', 'debugger')
// this.call('debugger', 'debug', hash)
// })
// return self._view.el
return this.element
// function wrapScript (script) {
// const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix))
// if (isKnownScript) return script
// return `
// try {
// const ret = ${script};
// if (ret instanceof Promise) {
// ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) })
// } else {
// console.log(ret)
// }
// } catch (e) {
// console.log(e.message)
// }
// `
// }
//function change (event) {
// if (self._components.autoCompletePopup.handleAutoComplete(
// event,
// self._view.input.innerText)) return
// if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n'
// if (event.which === 13) {
// if (event.ctrlKey) { // <ctrl+enter>
// self._view.input.innerText += '\n'
// self.putCursor2End(self._view.input)
// self.scroll2bottom()
// self._components.autoCompletePopup.removeAutoComplete()
// } else { // <enter>
// self._cmdIndex = -1
// self._cmdTemp = ''
// event.preventDefault()
// var script = self._view.input.innerText.trim()
// self._view.input.innerText = '\n'
// if (script.length) {
// self._cmdHistory.unshift(script)
// self.commands.script(wrapScript(script))
// }
// self._components.autoCompletePopup.removeAutoComplete()
// }
// } else if (event.which === 38) { // <arrowUp>
// var len = self._cmdHistory.length
// if (len === 0) return event.preventDefault()
// if (self._cmdHistory.length - 1 > self._cmdIndex) {
// self._cmdIndex++
// }
// self._view.input.innerText = self._cmdHistory[self._cmdIndex]
// self.putCursor2End(self._view.input)
// self.scroll2bottom()
// } else if (event.which === 40) { // <arrowDown>
// if (self._cmdIndex > -1) {
// self._cmdIndex--
// }
// self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp
// self.putCursor2End(self._view.input)
// self.scroll2bottom()
// } else {
// self._cmdTemp = self._view.input.innerText
// }
//}
}
renderComponent () {
ReactDOM.render(
<RemixUiTerminal />,
<RemixUiTerminal
event = {this.event}
autoCompletePopupEvent = {this._components.autoCompletePopup.event}
blockchain = {this.blockchain}
api = {this._api}
options = {this.opts}
data = {this.data}
cmdInterpreter = {this._components.cmdInterpreter}
autoCompletePopup = {this._components.autoCompletePopup}/>,
this.element
)
}
// putCursor2End (editable) {
// var range = document.createRange()
// range.selectNode(editable)
// var child = editable
// var chars
// while (child) {
// if (child.lastChild) child = child.lastChild
// else break
// if (child.nodeType === Node.TEXT_NODE) {
// chars = child.textContent.length
// } else {
// chars = child.innerHTML.length
// }
// }
// range.setEnd(child, chars)
// var toStart = true
// var toEnd = !toStart
// range.collapse(toEnd)
// var sel = window.getSelection()
// sel.removeAllRanges()
// sel.addRange(range)
// editable.focus()
// }
//updateJournal (filterEvent) {
// var self = this
// var commands = self.data.activeFilters.commands
// var value = filterEvent.value
// if (filterEvent.type === 'select') {
// commands[value] = true
// if (!self._INDEX.commandsMain[value]) return
// self._INDEX.commandsMain[value].forEach(item => {
// item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item })
// self._JOURNAL[item.gidx] = item
// })
// }
// else if (filterEvent.type === 'deselect') {
// commands[value] = false
// if (!self._INDEX.commandsMain[value]) return
// self._INDEX.commandsMain[value].forEach(item => {
// item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true })
// self._JOURNAL[item.gidx].hide = true
// })
// } else if (filterEvent.type === 'search') {
// if (value !== self.data.activeFilters.input) {
// var query = self.data.activeFilters.input = value
// var items = self._JOURNAL
// for (var gidx = 0, len = items.length; gidx < len; gidx++) {
// var item = items[gidx]
// if (item && self.data.filterFns[item.cmd]) {
// var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true
// item.hide = !show
// }
// }
// }
// }
// var df = document.createDocumentFragment()
// self._JOURNAL.forEach(item => {
// if (item && item.el && !item.hide) df.appendChild(item.el)
// })
// self._view.journal.innerHTML = ''
// requestAnimationFrame(function updateDOM () {
// self._view.journal.appendChild(df)
// })
//}
_appendItem (item) {
var self = this
var { el, gidx } = item
@ -785,7 +240,7 @@ class Terminal extends Plugin {
if (script.indexOf('remix.') === 0) {
// we keep the old feature. This will basically only be called when the command is querying the "remix" object.
// for all the other case, we use the Code Executor plugin
var context = domTerminalFeatures(self, scopedCommands, self.blockchain)
var context = domTerminalFeatures(scopedCommands, self.blockchain)
try {
var cmds = vm.createContext(context)
var result = vm.runInContext(script, cmds)
@ -809,11 +264,11 @@ class Terminal extends Plugin {
}
}
// function domTerminalFeatures (self, scopedCommands, blockchain) {
// return {
// remix: self._components.cmdInterpreter
// }
// }
function domTerminalFeatures (scopedCommands, blockchain) {
return {
remix: this._components.cmdInterpreter
}
}
function blockify (el) { return yo`<div class="px-4 ${css.block}" data-id="block_${el.getAttribute ? el.getAttribute('id') : ''}">${el}</div>` }

0
libs/remix-ui/terminal/src/lib/actions/terminalAction.ts
Unescape View File

0
libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts
Unescape View File

44
libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
Unescape View File

@ -1,30 +1,53 @@
import React, { useState } from 'react' // eslint-disable-line
import React, { useState, useEffect } from 'react' // eslint-disable-line
import './remix-ui-terminal.css'
/* eslint-disable-next-line */
export interface RemixUiTerminalProps {
propterties: any
event: any
autoCompletePopupEvent: any
autoCompletePopup: any
blockchain: any
api: any
options: any
data: any
cmdInterpreter: any
}
export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
// events
useEffect(() => {
// window.addEventListener('resize', function () {
// props.event.trigger('resize', [])
// props.event.trigger('resize', [])
// })
// return () => {
// window.removeEventListener('resize', function () {
// props.event.trigger('resize', [])
// props.event.trigger('resize', [])
// })
// }
}, [])
const handleMinimizeTerminal = (event) => {
console.log('clikced')
console.log('clikced', props.event)
if (toggleDownUp === 'fa-angle-double-down') {
console.log('clikced down')
setToggleDownUp('fa-angle-double-up')
props.event.trigger.resize('resize', [])
} else {
console.log('clikced up')
// event.trigger('resize', [])
setToggleDownUp('fa-angle-double-down')
}
console.log(props.event, 'event.trigger')
}
return (
<div>
{console.log({ toggleDownUp })}
<div className="bar">
{/* ${self._view.dragbar} */}
<div className="dragbarHorizontal"></div>
@ -68,7 +91,20 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
</div>
</div>
</div>
Welcome to remix-ui-terminal {console.log(props.propterties, ' properties david')}
<div className="terminal_container" data-id="terminalContainer" >
{/* onScroll=${throttle(reattach, 10)} onkeydown=${focusinput} */}
{/* {props.autoCompletePopup.render()} */}
{console.log({ props })}
<div data-id="terminalContainerDisplay" style = {{
position: 'absolute',
height: '100',
width: '100',
opacity: '0.1',
zIndex: -1
}}></div>
<div className="terminal">
</div>
</div>
</div>
)
}

Write Preview
Loading…
Cancel
Save