David Disu
3 years ago
committed by
GitHub
commit
73effb57cd
@ -1,31 +0,0 @@ |
|||||||
import { AbstractPanel } from './panel' |
|
||||||
import * as packageJson from '../../../../../package.json' |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
const yo = require('yo-yo') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.pluginsContainer { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
const profile = { |
|
||||||
name: 'hiddenPanel', |
|
||||||
displayName: 'Hidden Panel', |
|
||||||
description: '', |
|
||||||
version: packageJson.version, |
|
||||||
methods: ['addView', 'removeView'] |
|
||||||
} |
|
||||||
|
|
||||||
export class HiddenPanel extends AbstractPanel { |
|
||||||
constructor () { |
|
||||||
super(profile) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return yo` |
|
||||||
<div class=${css.pluginsContainer}> |
|
||||||
${this.view} |
|
||||||
</div>` |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,37 @@ |
|||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
import React from 'react' |
||||||
|
import ReactDOM from 'react-dom' // eslint-disable-line
|
||||||
|
import { AbstractPanel } from './panel' |
||||||
|
import * as packageJson from '../../../../../package.json' |
||||||
|
import { RemixPluginPanel } from '@remix-ui/panel' |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'hiddenPanel', |
||||||
|
displayName: 'Hidden Panel', |
||||||
|
description: '', |
||||||
|
version: packageJson.version, |
||||||
|
methods: ['addView', 'removeView'] |
||||||
|
} |
||||||
|
|
||||||
|
export class HiddenPanel extends AbstractPanel { |
||||||
|
el: HTMLElement |
||||||
|
constructor () { |
||||||
|
super(profile) |
||||||
|
this.el = document.createElement('div') |
||||||
|
this.el.setAttribute('class', 'pluginsContainer') |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile: any, view: any): void { |
||||||
|
super.removeView(profile) |
||||||
|
super.addView(profile, view) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.el |
||||||
|
} |
||||||
|
|
||||||
|
renderComponent () { |
||||||
|
ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.el) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,38 +0,0 @@ |
|||||||
import { AbstractPanel } from './panel' |
|
||||||
import * as packageJson from '../../../../../package.json' |
|
||||||
const yo = require('yo-yo') |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.pluginsContainer { |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
overflow-y: hidden; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
const profile = { |
|
||||||
name: 'mainPanel', |
|
||||||
displayName: 'Main Panel', |
|
||||||
description: '', |
|
||||||
version: packageJson.version, |
|
||||||
methods: ['addView', 'removeView'] |
|
||||||
} |
|
||||||
|
|
||||||
export class MainPanel extends AbstractPanel { |
|
||||||
constructor () { |
|
||||||
super(profile) |
|
||||||
} |
|
||||||
|
|
||||||
focus (name) { |
|
||||||
this.emit('focusChanged', name) |
|
||||||
super.focus(name) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return yo` |
|
||||||
<div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'> |
|
||||||
${this.view} |
|
||||||
</div>` |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import React from 'react' // eslint-disable-line
|
||||||
|
import { AbstractPanel } from './panel' |
||||||
|
import ReactDOM from 'react-dom' // eslint-disable-line
|
||||||
|
import { RemixPluginPanel } from '@remix-ui/panel' |
||||||
|
import packageJson from '../../../../../package.json' |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'mainPanel', |
||||||
|
displayName: 'Main Panel', |
||||||
|
description: '', |
||||||
|
version: packageJson.version, |
||||||
|
methods: ['addView', 'removeView', 'showContent'] |
||||||
|
} |
||||||
|
|
||||||
|
export class MainPanel extends AbstractPanel { |
||||||
|
element: HTMLDivElement |
||||||
|
constructor (config) { |
||||||
|
super(profile) |
||||||
|
this.element = document.createElement('div') |
||||||
|
this.element.setAttribute('data-id', 'mainPanelPluginsContainer') |
||||||
|
this.element.setAttribute('style', 'height: 100%; width: 100%;') |
||||||
|
// this.config = config
|
||||||
|
} |
||||||
|
|
||||||
|
onActivation () { |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
focus (name) { |
||||||
|
this.emit('focusChanged', name) |
||||||
|
super.focus(name) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile, view) { |
||||||
|
super.addView(profile, view) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
removeView (profile) { |
||||||
|
super.removeView(profile) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
async showContent (name) { |
||||||
|
super.showContent(name) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.element |
||||||
|
} |
||||||
|
|
||||||
|
renderComponent () { |
||||||
|
ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.element) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,111 +0,0 @@ |
|||||||
import { EventEmitter } from 'events' |
|
||||||
import { HostPlugin } from '@remixproject/engine-web' |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
const yo = require('yo-yo') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.plugins { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
.plugItIn { |
|
||||||
display : none; |
|
||||||
height : 100%; |
|
||||||
} |
|
||||||
.plugItIn > div { |
|
||||||
overflow-y : auto; |
|
||||||
overflow-x : hidden; |
|
||||||
height : 100%; |
|
||||||
width : 100%; |
|
||||||
} |
|
||||||
.plugItIn.active { |
|
||||||
display : block; |
|
||||||
} |
|
||||||
.pluginsContainer { |
|
||||||
height : 100%; |
|
||||||
overflow-y : hidden; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
/** Abstract class used for hosting the view of a plugin */ |
|
||||||
export class AbstractPanel extends HostPlugin { |
|
||||||
constructor (profile) { |
|
||||||
super(profile) |
|
||||||
this.events = new EventEmitter() |
|
||||||
this.contents = {} |
|
||||||
this.active = undefined |
|
||||||
|
|
||||||
// View where the plugin HTMLElement leaves
|
|
||||||
this.view = yo`<div id="plugins" class="${css.plugins}"></div>` |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the plugin to the panel |
|
||||||
* @param {String} name the name of the plugin |
|
||||||
* @param {HTMLElement} content the HTMLContent of the plugin |
|
||||||
*/ |
|
||||||
add (view, name) { |
|
||||||
if (this.contents[name]) throw new Error(`Plugin ${name} already rendered`) |
|
||||||
view.style.height = '100%' |
|
||||||
view.style.width = '100%' |
|
||||||
view.style.border = '0' |
|
||||||
|
|
||||||
const isIframe = view.tagName === 'IFRAME' |
|
||||||
view.style.display = isIframe ? 'none' : 'block' |
|
||||||
const loading = isIframe ? yo` |
|
||||||
<div class="d-flex justify-content-center align-items-center"> |
|
||||||
<div class="spinner-border" role="status"> |
|
||||||
<span class="sr-only">Loading...</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` : ''
|
|
||||||
this.contents[name] = yo`<div class="${css.plugItIn}" >${view}${loading}</div>` |
|
||||||
|
|
||||||
if (view.tagName === 'IFRAME') { |
|
||||||
view.addEventListener('load', () => { |
|
||||||
if (this.contents[name].contains(loading)) { |
|
||||||
this.contents[name].removeChild(loading) |
|
||||||
} |
|
||||||
view.style.display = 'block' |
|
||||||
}) |
|
||||||
} |
|
||||||
this.contents[name].style.display = 'none' |
|
||||||
this.view.appendChild(this.contents[name]) |
|
||||||
} |
|
||||||
|
|
||||||
addView (profile, view) { |
|
||||||
this.add(view, profile.name) |
|
||||||
} |
|
||||||
|
|
||||||
removeView (profile) { |
|
||||||
this.remove(profile.name) |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove a plugin from the panel |
|
||||||
* @param {String} name The name of the plugin to remove |
|
||||||
*/ |
|
||||||
remove (name) { |
|
||||||
const el = this.contents[name] |
|
||||||
delete this.contents[name] |
|
||||||
if (el) el.parentElement.removeChild(el) |
|
||||||
if (name === this.active) this.active = undefined |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Display the content of this specific plugin |
|
||||||
* @param {String} name The name of the plugin to display the content |
|
||||||
*/ |
|
||||||
showContent (name) { |
|
||||||
if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`) |
|
||||||
// hiding the current view and display the `moduleName`
|
|
||||||
if (this.active) { |
|
||||||
this.contents[this.active].style.display = 'none' |
|
||||||
} |
|
||||||
this.contents[name].style.display = 'flex' |
|
||||||
this.active = name |
|
||||||
} |
|
||||||
|
|
||||||
focus (name) { |
|
||||||
this.showContent(name) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,63 @@ |
|||||||
|
import React from 'react' // eslint-disable-line
|
||||||
|
import { EventEmitter } from 'events' |
||||||
|
import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
|
||||||
|
import { PluginRecord } from 'libs/remix-ui/panel/src/lib/types' |
||||||
|
const EventManager = require('../../lib/events') |
||||||
|
|
||||||
|
export class AbstractPanel extends HostPlugin { |
||||||
|
events: EventEmitter |
||||||
|
event: any |
||||||
|
public plugins: Record<string, PluginRecord> = {} |
||||||
|
constructor (profile) { |
||||||
|
super(profile) |
||||||
|
this.events = new EventEmitter() |
||||||
|
this.event = new EventManager() |
||||||
|
} |
||||||
|
|
||||||
|
currentFocus (): string { |
||||||
|
return Object.values(this.plugins).find(plugin => { |
||||||
|
return plugin.active |
||||||
|
}).profile.name |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile, view) { |
||||||
|
if (this.plugins[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`) |
||||||
|
this.plugins[profile.name] = { |
||||||
|
profile: profile, |
||||||
|
view: view, |
||||||
|
active: false, |
||||||
|
class: 'plugItIn active' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
removeView (profile) { |
||||||
|
this.emit('pluginDisabled', profile.name) |
||||||
|
this.call('menuicons', 'unlinkContent', profile) |
||||||
|
this.remove(profile.name) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove a plugin from the panel |
||||||
|
* @param {String} name The name of the plugin to remove |
||||||
|
*/ |
||||||
|
remove (name) { |
||||||
|
delete this.plugins[name] |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Display the content of this specific plugin |
||||||
|
* @param {String} name The name of the plugin to display the content |
||||||
|
*/ |
||||||
|
showContent (name) { |
||||||
|
if (!this.plugins[name]) throw new Error(`Plugin ${name} is not yet activated`) |
||||||
|
|
||||||
|
Object.values(this.plugins).forEach(plugin => { |
||||||
|
plugin.active = false |
||||||
|
}) |
||||||
|
this.plugins[name].active = true |
||||||
|
} |
||||||
|
|
||||||
|
focus (name) { |
||||||
|
this.showContent(name) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,156 +0,0 @@ |
|||||||
import { AbstractPanel } from './panel' |
|
||||||
import * as packageJson from '../../../../../package.json' |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
const yo = require('yo-yo') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.panel { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
flex: auto; |
|
||||||
} |
|
||||||
.swapitTitle { |
|
||||||
margin: 0; |
|
||||||
text-transform: uppercase; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
} |
|
||||||
.swapitTitle i{ |
|
||||||
padding-left: 6px; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.swapitHeader { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
padding: 16px 24px 15px; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
.icons i { |
|
||||||
height: 80%; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.pluginsContainer { |
|
||||||
height: 100%; |
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
.titleInfo { |
|
||||||
padding-left: 10px; |
|
||||||
} |
|
||||||
.versionBadge { |
|
||||||
background-color: var(--light); |
|
||||||
padding: 0 7px; |
|
||||||
font-weight: bolder; |
|
||||||
margin-left: 5px; |
|
||||||
text-transform: lowercase; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
const sidePanel = { |
|
||||||
name: 'sidePanel', |
|
||||||
displayName: 'Side Panel', |
|
||||||
description: '', |
|
||||||
version: packageJson.version, |
|
||||||
methods: ['addView', 'removeView'] |
|
||||||
} |
|
||||||
|
|
||||||
// TODO merge with vertical-icons.js
|
|
||||||
export class SidePanel extends AbstractPanel { |
|
||||||
constructor (appManager, verticalIcons) { |
|
||||||
super(sidePanel) |
|
||||||
this.appManager = appManager |
|
||||||
this.header = yo`<header></header>` |
|
||||||
this.renderHeader() |
|
||||||
this.verticalIcons = verticalIcons |
|
||||||
|
|
||||||
// Toggle content
|
|
||||||
verticalIcons.events.on('toggleContent', (name) => { |
|
||||||
if (!this.contents[name]) return |
|
||||||
if (this.active === name) { |
|
||||||
// TODO: Only keep `this.emit` (issue#2210)
|
|
||||||
this.emit('toggle', name) |
|
||||||
this.events.emit('toggle', name) |
|
||||||
return |
|
||||||
} |
|
||||||
this.showContent(name) |
|
||||||
// TODO: Only keep `this.emit` (issue#2210)
|
|
||||||
this.emit('showing', name) |
|
||||||
this.events.emit('showing', name) |
|
||||||
}) |
|
||||||
// Force opening
|
|
||||||
verticalIcons.events.on('showContent', (name) => { |
|
||||||
if (!this.contents[name]) return |
|
||||||
this.showContent(name) |
|
||||||
// TODO: Only keep `this.emit` (issue#2210)
|
|
||||||
this.emit('showing', name) |
|
||||||
this.events.emit('showing', name) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
focus (name) { |
|
||||||
this.emit('focusChanged', name) |
|
||||||
super.focus(name) |
|
||||||
} |
|
||||||
|
|
||||||
removeView (profile) { |
|
||||||
super.removeView(profile) |
|
||||||
this.emit('pluginDisabled', profile.name) |
|
||||||
this.verticalIcons.unlinkContent(profile) |
|
||||||
} |
|
||||||
|
|
||||||
addView (profile, view) { |
|
||||||
super.addView(profile, view) |
|
||||||
this.verticalIcons.linkContent(profile) |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Display content and update the header |
|
||||||
* @param {String} name The name of the plugin to display |
|
||||||
*/ |
|
||||||
async showContent (name) { |
|
||||||
super.showContent(name) |
|
||||||
this.renderHeader() |
|
||||||
this.emit('focusChanged', name) |
|
||||||
} |
|
||||||
|
|
||||||
/** The header of the side panel */ |
|
||||||
async renderHeader () { |
|
||||||
let name = ' - ' |
|
||||||
let docLink = '' |
|
||||||
let versionWarning |
|
||||||
if (this.active) { |
|
||||||
const profile = await this.appManager.getProfile(this.active) |
|
||||||
name = profile.displayName ? profile.displayName : profile.name |
|
||||||
docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : '' |
|
||||||
if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) { |
|
||||||
versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>` |
|
||||||
} |
|
||||||
// Beta
|
|
||||||
if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { |
|
||||||
versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const header = yo` |
|
||||||
<header class="${css.swapitHeader}"> |
|
||||||
<h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6> |
|
||||||
${docLink} |
|
||||||
${versionWarning} |
|
||||||
</header> |
|
||||||
` |
|
||||||
yo.update(this.header, header) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return yo` |
|
||||||
<section class="${css.panel} plugin-manager"> |
|
||||||
${this.header} |
|
||||||
<div class="${css.pluginsContainer}"> |
|
||||||
${this.view} |
|
||||||
</div> |
|
||||||
</section>` |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,95 @@ |
|||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
import React from 'react' |
||||||
|
import ReactDOM from 'react-dom' |
||||||
|
import { AbstractPanel } from './panel' |
||||||
|
import { RemixPluginPanel } from '@remix-ui/panel' |
||||||
|
import packageJson from '../../../../../package.json' |
||||||
|
import { RemixAppManager } from '../../remixAppManager' |
||||||
|
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||||
|
import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header' |
||||||
|
// const csjs = require('csjs-inject')
|
||||||
|
|
||||||
|
const sidePanel = { |
||||||
|
name: 'sidePanel', |
||||||
|
displayName: 'Side Panel', |
||||||
|
description: '', |
||||||
|
version: packageJson.version, |
||||||
|
methods: ['addView', 'removeView'] |
||||||
|
} |
||||||
|
|
||||||
|
// TODO merge with vertical-icons.js
|
||||||
|
export class SidePanel extends AbstractPanel { |
||||||
|
appManager: RemixAppManager |
||||||
|
sideelement: any |
||||||
|
verticalIcons: VerticalIcons; |
||||||
|
constructor (appManager: RemixAppManager, verticalIcons: VerticalIcons) { |
||||||
|
super(sidePanel) |
||||||
|
this.appManager = appManager |
||||||
|
this.sideelement = document.createElement('section') |
||||||
|
this.sideelement.setAttribute('class', 'panel plugin-manager') |
||||||
|
this.verticalIcons = verticalIcons |
||||||
|
|
||||||
|
// Toggle content
|
||||||
|
verticalIcons.events.on('toggleContent', (name) => { |
||||||
|
if (!this.plugins[name]) return |
||||||
|
if (this.plugins[name].active) { |
||||||
|
// TODO: Only keep `this.emit` (issue#2210)
|
||||||
|
this.emit('toggle', name) |
||||||
|
this.events.emit('toggle', name) |
||||||
|
return |
||||||
|
} |
||||||
|
this.showContent(name) |
||||||
|
// TODO: Only keep `this.emit` (issue#2210)
|
||||||
|
this.emit('showing', name) |
||||||
|
this.events.emit('showing', name) |
||||||
|
}) |
||||||
|
// Force opening
|
||||||
|
verticalIcons.events.on('showContent', (name) => { |
||||||
|
if (!this.plugins[name]) return |
||||||
|
this.showContent(name) |
||||||
|
// TODO: Only keep `this.emit` (issue#2210)
|
||||||
|
this.emit('showing', name) |
||||||
|
this.events.emit('showing', name) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
onActivation () { |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
focus (name) { |
||||||
|
this.emit('focusChanged', name) |
||||||
|
super.focus(name) |
||||||
|
} |
||||||
|
|
||||||
|
removeView (profile) { |
||||||
|
super.removeView(profile) |
||||||
|
this.emit('pluginDisabled', profile.name) |
||||||
|
this.call('menuicons', 'unlinkContent', profile) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile, view) { |
||||||
|
super.addView(profile, view) |
||||||
|
this.verticalIcons.linkContent(profile) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Display content and update the header |
||||||
|
* @param {String} name The name of the plugin to display |
||||||
|
*/ |
||||||
|
async showContent (name) { |
||||||
|
super.showContent(name) |
||||||
|
this.emit('focusChanged', name) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.sideelement |
||||||
|
} |
||||||
|
|
||||||
|
renderComponent () { |
||||||
|
ReactDOM.render(<RemixPluginPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins}/>, this.sideelement) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
import { Plugin } from '@remixproject/engine' |
||||||
|
import { Profile } from '@remixproject/plugin-utils' |
||||||
|
import { EventEmitter } from 'events' |
||||||
|
import QueryParams from '../../lib/query-params' |
||||||
|
|
||||||
|
const profile: Profile = { |
||||||
|
name: 'layout', |
||||||
|
description: 'layout', |
||||||
|
methods: ['minimize'] |
||||||
|
} |
||||||
|
|
||||||
|
interface panelState { |
||||||
|
active: boolean |
||||||
|
plugin: Plugin |
||||||
|
minimized: boolean |
||||||
|
} |
||||||
|
interface panels { |
||||||
|
tabs: panelState |
||||||
|
editor: panelState |
||||||
|
main: panelState |
||||||
|
terminal: panelState |
||||||
|
} |
||||||
|
|
||||||
|
export class Layout extends Plugin { |
||||||
|
event: any |
||||||
|
panels: panels |
||||||
|
constructor () { |
||||||
|
super(profile) |
||||||
|
this.event = new EventEmitter() |
||||||
|
} |
||||||
|
|
||||||
|
async onActivation (): Promise<void> { |
||||||
|
this.on('fileManager', 'currentFileChanged', () => { |
||||||
|
this.panels.editor.active = true |
||||||
|
this.panels.main.active = false |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'openFile', () => { |
||||||
|
this.panels.editor.active = true |
||||||
|
this.panels.main.active = false |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'switchApp', (name: string) => { |
||||||
|
this.call('mainPanel', 'showContent', name) |
||||||
|
this.panels.editor.active = false |
||||||
|
this.panels.main.active = true |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'closeApp', (name: string) => { |
||||||
|
this.panels.editor.active = true |
||||||
|
this.panels.main.active = false |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'tabCountChanged', async count => { |
||||||
|
if (!count) await this.call('manager', 'activatePlugin', 'home') |
||||||
|
}) |
||||||
|
this.on('manager', 'activate', (profile: Profile) => { |
||||||
|
switch (profile.name) { |
||||||
|
case 'filePanel': |
||||||
|
this.call('menuicons', 'select', 'filePanel') |
||||||
|
break |
||||||
|
} |
||||||
|
}) |
||||||
|
document.addEventListener('keypress', e => { |
||||||
|
if (e.shiftKey && e.ctrlKey) { |
||||||
|
if (e.code === 'KeyF') { |
||||||
|
// Ctrl+Shift+F
|
||||||
|
this.call('menuicons', 'select', 'filePanel') |
||||||
|
} else if (e.code === 'KeyA') { |
||||||
|
// Ctrl+Shift+A
|
||||||
|
this.call('menuicons', 'select', 'pluginManager') |
||||||
|
} else if (e.code === 'KeyS') { |
||||||
|
// Ctrl+Shift+S
|
||||||
|
this.call('menuicons', 'select', 'settings') |
||||||
|
} |
||||||
|
e.preventDefault() |
||||||
|
} |
||||||
|
}) |
||||||
|
const queryParams = new QueryParams() |
||||||
|
const params = queryParams.get() |
||||||
|
if (params.minimizeterminal || params.embed) { |
||||||
|
this.panels.terminal.minimized = true |
||||||
|
this.event.emit('change', null) |
||||||
|
} |
||||||
|
if (params.minimizesidepanel || params.embed) { |
||||||
|
this.event.emit('minimizesidepanel') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
minimize (name: string, minimized:boolean): void { |
||||||
|
this.panels[name].minimized = minimized |
||||||
|
this.event.emit('change', null) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,204 +0,0 @@ |
|||||||
import Registry from '../state/registry' |
|
||||||
|
|
||||||
var yo = require('yo-yo') |
|
||||||
var EventManager = require('../../lib/events') |
|
||||||
|
|
||||||
var { TabProxy } = require('./tab-proxy.js') |
|
||||||
|
|
||||||
var csjs = require('csjs-inject') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.mainview { |
|
||||||
display : flex; |
|
||||||
flex-direction : column; |
|
||||||
height : 100%; |
|
||||||
width : 100%; |
|
||||||
}
|
|
||||||
` |
|
||||||
|
|
||||||
// @todo(#650) Extract this into two classes: MainPanel (TabsProxy + Iframe/Editor) & BottomPanel (Terminal)
|
|
||||||
export class MainView { |
|
||||||
constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) { |
|
||||||
var self = this |
|
||||||
self.event = new EventManager() |
|
||||||
self._view = {} |
|
||||||
self._components = {} |
|
||||||
self._components.registry = Registry.getInstance() |
|
||||||
self.contextualListener = contextualListener |
|
||||||
self.editor = editor |
|
||||||
self.fileManager = fileManager |
|
||||||
self.mainPanel = mainPanel |
|
||||||
self.txListener = Registry.getInstance().get('txlistener').api |
|
||||||
self._components.terminal = terminal |
|
||||||
this.appManager = appManager |
|
||||||
this.init() |
|
||||||
} |
|
||||||
|
|
||||||
showApp (name) { |
|
||||||
this.fileManager.unselectCurrentFile() |
|
||||||
this.mainPanel.showContent(name) |
|
||||||
this._view.editor.style.display = 'none' |
|
||||||
this._view.mainPanel.style.display = 'block' |
|
||||||
} |
|
||||||
|
|
||||||
getAppPanel () { |
|
||||||
return this.mainPanel |
|
||||||
} |
|
||||||
|
|
||||||
init () { |
|
||||||
var self = this |
|
||||||
self._deps = { |
|
||||||
config: self._components.registry.get('config').api, |
|
||||||
fileManager: self._components.registry.get('filemanager').api |
|
||||||
} |
|
||||||
|
|
||||||
self.tabProxy = new TabProxy(self.fileManager, self.editor) |
|
||||||
/* |
|
||||||
We listen here on event from the tab component to display / hide the editor and mainpanel |
|
||||||
depending on the content that should be displayed |
|
||||||
*/ |
|
||||||
self.fileManager.events.on('currentFileChanged', (file) => { |
|
||||||
// we check upstream for "fileChanged"
|
|
||||||
self._view.editor.style.display = 'block' |
|
||||||
self._view.mainPanel.style.display = 'none' |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('openFile', (file) => { |
|
||||||
self._view.editor.style.display = 'block' |
|
||||||
self._view.mainPanel.style.display = 'none' |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('closeFile', (file) => { |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('switchApp', self.showApp.bind(self)) |
|
||||||
self.tabProxy.event.on('closeApp', (name) => { |
|
||||||
self._view.editor.style.display = 'block' |
|
||||||
self._view.mainPanel.style.display = 'none' |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('tabCountChanged', (count) => { |
|
||||||
if (!count) this.editor.displayEmptyReadOnlySession() |
|
||||||
}) |
|
||||||
self.data = { |
|
||||||
_layout: { |
|
||||||
top: { |
|
||||||
offset: self._terminalTopOffset(), |
|
||||||
show: true |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta)) |
|
||||||
if (self.txListener) { |
|
||||||
self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => { |
|
||||||
self.txListener.setListenOnNetwork(listenOnNetWork) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
_terminalTopOffset () { |
|
||||||
return this._deps.config.get('terminal-top-offset') || 150 |
|
||||||
} |
|
||||||
|
|
||||||
_adjustLayout (direction, delta) { |
|
||||||
var limitUp = 0 |
|
||||||
var limitDown = 32 |
|
||||||
var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
|
|
||||||
var self = this |
|
||||||
var layout = self.data._layout[direction] |
|
||||||
if (layout) { |
|
||||||
if (delta === undefined) { |
|
||||||
layout.show = !layout.show |
|
||||||
if (layout.show) delta = layout.offset |
|
||||||
else delta = 0 |
|
||||||
} else { |
|
||||||
layout.show = true |
|
||||||
self._deps.config.set(`terminal-${direction}-offset`, delta) |
|
||||||
layout.offset = delta |
|
||||||
} |
|
||||||
} |
|
||||||
var tmp = delta - limitDown |
|
||||||
delta = tmp > 0 ? tmp : 0 |
|
||||||
if (direction === 'top') { |
|
||||||
var mainPanelHeight = containerHeight - delta |
|
||||||
mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight |
|
||||||
self._view.editor.style.height = `${mainPanelHeight}px` |
|
||||||
self._view.mainPanel.style.height = `${mainPanelHeight}px` |
|
||||||
self._view.terminal.style.height = `${delta}px` // - menu bar height
|
|
||||||
self.editor.resize((document.querySelector('#editorWrap') || {}).checked) |
|
||||||
self._components.terminal.scroll2bottom() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
minimizeTerminal () { |
|
||||||
this._adjustLayout('top') |
|
||||||
} |
|
||||||
|
|
||||||
showTerminal (offset) { |
|
||||||
this._adjustLayout('top', offset || this._terminalTopOffset()) |
|
||||||
} |
|
||||||
|
|
||||||
getTerminal () { |
|
||||||
return this._components.terminal |
|
||||||
} |
|
||||||
|
|
||||||
getEditor () { |
|
||||||
var self = this |
|
||||||
return self.editor |
|
||||||
} |
|
||||||
|
|
||||||
refresh () { |
|
||||||
var self = this |
|
||||||
self._view.tabs.onmouseenter() |
|
||||||
} |
|
||||||
|
|
||||||
log (data = {}) { |
|
||||||
var self = this |
|
||||||
var command = self._components.terminal.commands[data.type] |
|
||||||
if (typeof command === 'function') command(data.value) |
|
||||||
} |
|
||||||
|
|
||||||
logMessage (msg) { |
|
||||||
var self = this |
|
||||||
self.log({ type: 'log', value: msg }) |
|
||||||
} |
|
||||||
|
|
||||||
logHtmlMessage (msg) { |
|
||||||
var self = this |
|
||||||
self.log({ type: 'html', value: msg }) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
var self = this |
|
||||||
if (self._view.mainview) return self._view.mainview |
|
||||||
self._view.editor = self.editor.render() |
|
||||||
self._view.editor.style.display = 'none' |
|
||||||
self._view.mainPanel = self.mainPanel.render() |
|
||||||
self._view.terminal = self._components.terminal.render() |
|
||||||
|
|
||||||
self._view.mainview = yo` |
|
||||||
<div class=${css.mainview}> |
|
||||||
${self.tabProxy.renderTabsbar()} |
|
||||||
${self._view.editor} |
|
||||||
${self._view.mainPanel} |
|
||||||
<div class="${css.contextview} contextview"></div> |
|
||||||
${self._view.terminal} |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
// INIT
|
|
||||||
self._adjustLayout('top', self.data._layout.top.offset) |
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => { |
|
||||||
if (e.altKey && e.keyCode === 84) self.tabProxy.switchNextTab() // alt + t
|
|
||||||
}) |
|
||||||
|
|
||||||
return self._view.mainview |
|
||||||
} |
|
||||||
|
|
||||||
registerCommand (name, command, opts) { |
|
||||||
var self = this |
|
||||||
return self._components.terminal.registerCommand(name, command, opts) |
|
||||||
} |
|
||||||
|
|
||||||
updateTerminalFilter (filter) { |
|
||||||
this._components.terminal.updateJournal(filter) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,44 @@ |
|||||||
|
import { Plugin } from '@remixproject/engine' |
||||||
|
import { LibraryProfile, MethodApi, StatusEvents } from '@remixproject/plugin-utils' |
||||||
|
import { AppModal } from '@remix-ui/app' |
||||||
|
import { AlertModal } from 'libs/remix-ui/app/src/lib/remix-app/interface' |
||||||
|
import { dispatchModalInterface } from 'libs/remix-ui/app/src/lib/remix-app/context/context' |
||||||
|
|
||||||
|
interface IModalApi { |
||||||
|
events: StatusEvents, |
||||||
|
methods: { |
||||||
|
modal: (args: AppModal) => void |
||||||
|
alert: (args: AlertModal) => void |
||||||
|
toast: (message: string) => void |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const profile:LibraryProfile<IModalApi> = { |
||||||
|
name: 'modal', |
||||||
|
displayName: 'Modal', |
||||||
|
description: 'Modal', |
||||||
|
methods: ['modal', 'alert', 'toast'] |
||||||
|
} |
||||||
|
|
||||||
|
export class ModalPlugin extends Plugin implements MethodApi<IModalApi> { |
||||||
|
dispatcher: dispatchModalInterface |
||||||
|
constructor () { |
||||||
|
super(profile) |
||||||
|
} |
||||||
|
|
||||||
|
setDispatcher (dispatcher: dispatchModalInterface) { |
||||||
|
this.dispatcher = dispatcher |
||||||
|
} |
||||||
|
|
||||||
|
async modal (args: AppModal) { |
||||||
|
this.dispatcher.modal(args) |
||||||
|
} |
||||||
|
|
||||||
|
async alert (args: AlertModal) { |
||||||
|
this.dispatcher.alert(args) |
||||||
|
} |
||||||
|
|
||||||
|
async toast (message: string) { |
||||||
|
this.dispatcher.toast(message) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,34 +0,0 @@ |
|||||||
export class FramingService { |
|
||||||
constructor (sidePanel, verticalIcons, mainView, resizeFeature) { |
|
||||||
this.sidePanel = sidePanel |
|
||||||
this.verticalIcons = verticalIcons |
|
||||||
this.mainPanel = mainView.getAppPanel() |
|
||||||
this.mainView = mainView |
|
||||||
this.resizeFeature = resizeFeature |
|
||||||
} |
|
||||||
|
|
||||||
start (params) { |
|
||||||
this.verticalIcons.select('filePanel') |
|
||||||
|
|
||||||
document.addEventListener('keypress', (e) => { |
|
||||||
if (e.shiftKey && e.ctrlKey) { |
|
||||||
if (e.code === 'KeyF') { // Ctrl+Shift+F
|
|
||||||
this.verticalIcons.select('filePanel') |
|
||||||
} else if (e.code === 'KeyA') { // Ctrl+Shift+A
|
|
||||||
this.verticalIcons.select('pluginManager') |
|
||||||
} else if (e.code === 'KeyS') { // Ctrl+Shift+S
|
|
||||||
this.verticalIcons.select('settings') |
|
||||||
} |
|
||||||
e.preventDefault() |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
if (params.minimizeterminal) this.mainView.minimizeTerminal() |
|
||||||
if (params.minimizesidepanel) this.resizeFeature.hidePanel() |
|
||||||
} |
|
||||||
|
|
||||||
embed () { |
|
||||||
this.mainView.minimizeTerminal() |
|
||||||
this.resizeFeature.hidePanel() |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var modalDialogCustom = require('../app/ui/modal-dialog-custom') |
|
||||||
var request = require('request') |
|
||||||
|
|
||||||
// Allowing window to be overriden for testing
|
|
||||||
function GistHandler (_window) { |
|
||||||
if (_window !== undefined) { |
|
||||||
modalDialogCustom = _window |
|
||||||
} |
|
||||||
|
|
||||||
this.handleLoad = function (params, cb) { |
|
||||||
if (!cb) cb = () => {} |
|
||||||
var loadingFromGist = false |
|
||||||
var gistId |
|
||||||
if (params.gist === '') { |
|
||||||
loadingFromGist = true |
|
||||||
modalDialogCustom.prompt('Load a Gist', 'Enter the ID of the Gist or URL you would like to load.', null, (target) => { |
|
||||||
if (target !== '') { |
|
||||||
gistId = getGistId(target) |
|
||||||
if (gistId) { |
|
||||||
cb(gistId) |
|
||||||
} else { |
|
||||||
modalDialogCustom.alert('Gist load error', 'Error while loading gist. Please provide a valid Gist ID or URL.') |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
return loadingFromGist |
|
||||||
} else { |
|
||||||
gistId = params.gist |
|
||||||
loadingFromGist = !!gistId |
|
||||||
} |
|
||||||
if (loadingFromGist) { |
|
||||||
cb(gistId) |
|
||||||
} |
|
||||||
return loadingFromGist |
|
||||||
} |
|
||||||
|
|
||||||
function getGistId (str) { |
|
||||||
var idr = /[0-9A-Fa-f]{8,}/ |
|
||||||
var match = idr.exec(str) |
|
||||||
return match ? match[0] : null |
|
||||||
} |
|
||||||
|
|
||||||
this.loadFromGist = (params, fileManager) => { |
|
||||||
const self = this |
|
||||||
return self.handleLoad(params, function (gistId) { |
|
||||||
request.get({ |
|
||||||
url: `https://api.github.com/gists/${gistId}`, |
|
||||||
json: true |
|
||||||
}, async (error, response, data = {}) => { |
|
||||||
if (error || !data.files) { |
|
||||||
modalDialogCustom.alert('Gist load error', error || data.message) |
|
||||||
return |
|
||||||
} |
|
||||||
const obj = {} |
|
||||||
Object.keys(data.files).forEach((element) => { |
|
||||||
const path = element.replace(/\.\.\./g, '/') |
|
||||||
|
|
||||||
obj['/' + 'gist-' + gistId + '/' + path] = data.files[element] |
|
||||||
}) |
|
||||||
fileManager.setBatchFiles(obj, 'workspace', true, (errorLoadingFile) => { |
|
||||||
if (!errorLoadingFile) { |
|
||||||
const provider = fileManager.getProvider('workspace') |
|
||||||
provider.lastLoadedGistId = gistId |
|
||||||
} else { |
|
||||||
modalDialogCustom.alert('Gist load error', errorLoadingFile.message || errorLoadingFile) |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = GistHandler |
|
||||||
@ -1,88 +0,0 @@ |
|||||||
const yo = require('yo-yo') |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.dragbar { |
|
||||||
width : 2px; |
|
||||||
height : 100%; |
|
||||||
cursor : col-resize; |
|
||||||
z-index : 999; |
|
||||||
} |
|
||||||
.ghostbar { |
|
||||||
width : 3px; |
|
||||||
background-color : var(--primary); |
|
||||||
opacity : 0.5; |
|
||||||
position : absolute; |
|
||||||
cursor : col-resize; |
|
||||||
z-index : 9999; |
|
||||||
top : 0; |
|
||||||
bottom : 0; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export default class PanelsResize { |
|
||||||
constructor (panel) { |
|
||||||
this.panel = panel |
|
||||||
const string = panel.style.minWidth |
|
||||||
this.minWidth = string.length > 2 ? parseInt(string.substring(0, string.length - 2)) : 0 |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
this.ghostbar = yo`<div class=${css.ghostbar}></div>` |
|
||||||
|
|
||||||
const mousedown = (event) => { |
|
||||||
event.preventDefault() |
|
||||||
if (event.which === 1) { |
|
||||||
moveGhostbar(event) |
|
||||||
document.body.appendChild(this.ghostbar) |
|
||||||
document.addEventListener('mousemove', moveGhostbar) |
|
||||||
document.addEventListener('mouseup', removeGhostbar) |
|
||||||
document.addEventListener('keydown', cancelGhostbar) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const cancelGhostbar = (event) => { |
|
||||||
if (event.keyCode === 27) { |
|
||||||
document.body.removeChild(this.ghostbar) |
|
||||||
document.removeEventListener('mousemove', moveGhostbar) |
|
||||||
document.removeEventListener('mouseup', removeGhostbar) |
|
||||||
document.removeEventListener('keydown', cancelGhostbar) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const moveGhostbar = (event) => { |
|
||||||
this.ghostbar.style.left = event.x + 'px' |
|
||||||
} |
|
||||||
|
|
||||||
const removeGhostbar = (event) => { |
|
||||||
document.body.removeChild(this.ghostbar) |
|
||||||
document.removeEventListener('mousemove', moveGhostbar) |
|
||||||
document.removeEventListener('mouseup', removeGhostbar) |
|
||||||
document.removeEventListener('keydown', cancelGhostbar) |
|
||||||
this.setPosition(event) |
|
||||||
} |
|
||||||
|
|
||||||
return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>` |
|
||||||
} |
|
||||||
|
|
||||||
calculatePanelWidth (event) { |
|
||||||
return event.x - this.panel.offsetLeft |
|
||||||
} |
|
||||||
|
|
||||||
setPosition (event) { |
|
||||||
const panelWidth = this.calculatePanelWidth(event) |
|
||||||
// close the panel if the width is less than a minWidth
|
|
||||||
if (panelWidth > this.minWidth - 10 || this.panel.style.display === 'none') { |
|
||||||
this.panel.style.width = panelWidth + 'px' |
|
||||||
this.showPanel() |
|
||||||
} else this.hidePanel() |
|
||||||
} |
|
||||||
|
|
||||||
hidePanel () { |
|
||||||
this.panel.style.display = 'none' |
|
||||||
} |
|
||||||
|
|
||||||
showPanel () { |
|
||||||
this.panel.style.display = 'flex' |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
var test = require('tape') |
|
||||||
|
|
||||||
var Compiler = require('@remix-project/remix-solidity').Compiler |
|
||||||
|
|
||||||
test('compiler.compile smoke', function (t) { |
|
||||||
t.plan(1) |
|
||||||
|
|
||||||
var noop = function () {} |
|
||||||
var fakeImport = function (url, cb) { cb('Not implemented') } |
|
||||||
var compiler = new Compiler(fakeImport) |
|
||||||
compiler.compileJSON = noop |
|
||||||
compiler.compile({ 'test': '' }, 'test') |
|
||||||
t.ok(compiler) |
|
||||||
}) |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var modalDialogCustom |
|
||||||
if (typeof window !== 'undefined') { |
|
||||||
modalDialogCustom = require('../app/ui/modal-dialog-custom') |
|
||||||
} |
|
||||||
// ^ this class can be load in a non browser context when running node unit testing.
|
|
||||||
// should not load UI in that case
|
|
||||||
|
|
||||||
// Allowing window to be overriden for testing
|
|
||||||
function GistHandler (_window) { |
|
||||||
if (_window !== undefined) { |
|
||||||
modalDialogCustom = _window |
|
||||||
} |
|
||||||
|
|
||||||
this.handleLoad = function (params, cb) { |
|
||||||
if (!cb) cb = () => {} |
|
||||||
var loadingFromGist = false |
|
||||||
var gistId |
|
||||||
if (params['gist'] === '') { |
|
||||||
loadingFromGist = true |
|
||||||
modalDialogCustom.prompt( |
|
||||||
'Load a Gist', |
|
||||||
'Enter the URL or ID of the Gist you would like to load.', |
|
||||||
null, |
|
||||||
target => { |
|
||||||
if (target !== '') { |
|
||||||
gistId = getGistId(target) |
|
||||||
if (gistId) { |
|
||||||
cb(gistId) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
return loadingFromGist |
|
||||||
} else { |
|
||||||
gistId = params['gist'] |
|
||||||
loadingFromGist = !!gistId |
|
||||||
} |
|
||||||
if (loadingFromGist) { |
|
||||||
cb(gistId) |
|
||||||
} |
|
||||||
return loadingFromGist |
|
||||||
} |
|
||||||
|
|
||||||
function getGistId (str) { |
|
||||||
var idr = /[0-9A-Fa-f]{8,}/ |
|
||||||
var match = idr.exec(str) |
|
||||||
return match ? match[0] : null |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = GistHandler |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
require('./compiler-test') |
|
||||||
require('./gist-handler-test') |
|
||||||
require('./query-params-test') |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
var test = require('tape') |
|
||||||
|
|
||||||
var QueryParams = require('../src/lib/query-params') |
|
||||||
|
|
||||||
test('queryParams.get', function (t) { |
|
||||||
t.plan(2) |
|
||||||
|
|
||||||
var fakeWindow = {location: {hash: '#wat=sup&foo=bar', search: ''}} |
|
||||||
var params = new QueryParams(fakeWindow).get() |
|
||||||
t.equal(params.wat, 'sup') |
|
||||||
t.equal(params.foo, 'bar') |
|
||||||
}) |
|
||||||
|
|
||||||
test('queryParams.update', function (t) { |
|
||||||
t.plan(1) |
|
||||||
|
|
||||||
var fakeWindow = {location: {hash: '#wat=sup', search: ''}} |
|
||||||
var qp = new QueryParams(fakeWindow) |
|
||||||
qp.update({foo: 'bar'}) |
|
||||||
t.equal(fakeWindow.location.hash, '#wat=sup&foo=bar') |
|
||||||
}) |
|
||||||
@ -0,0 +1,138 @@ |
|||||||
|
/* global fetch */ |
||||||
|
'use strict' |
||||||
|
import { Plugin } from '@remixproject/engine' |
||||||
|
|
||||||
|
interface StringByString { |
||||||
|
[key: string]: string; |
||||||
|
} |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'gistHandler', |
||||||
|
methods: ['load'], |
||||||
|
events: [], |
||||||
|
version: '0.0.1' |
||||||
|
} |
||||||
|
|
||||||
|
export class GistHandler extends Plugin { |
||||||
|
constructor () { |
||||||
|
super(profile) |
||||||
|
} |
||||||
|
|
||||||
|
async handleLoad (gistId: String | null, cb: Function) { |
||||||
|
if (!cb) cb = () => {} |
||||||
|
|
||||||
|
var loadingFromGist = false |
||||||
|
if (!gistId) { |
||||||
|
loadingFromGist = true |
||||||
|
let value |
||||||
|
try { |
||||||
|
value = await (() => { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Load a Gist', |
||||||
|
message: 'Enter the ID of the Gist or URL you would like to load.', |
||||||
|
modalType: 'prompt', |
||||||
|
okLabel: 'OK', |
||||||
|
cancelLabel: 'Cancel', |
||||||
|
okFn: (value) => { |
||||||
|
setTimeout(() => resolve(value), 0) |
||||||
|
}, |
||||||
|
cancelFn: () => { |
||||||
|
setTimeout(() => reject(new Error('Canceled')), 0) |
||||||
|
}, |
||||||
|
hideFn: () => { |
||||||
|
setTimeout(() => reject(new Error('Hide')), 0) |
||||||
|
} |
||||||
|
} |
||||||
|
this.call('modal', 'modal', modalContent) |
||||||
|
}) |
||||||
|
})() |
||||||
|
} catch (e) { |
||||||
|
// the modal has been canceled
|
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (value !== '') { |
||||||
|
gistId = getGistId(value) |
||||||
|
if (gistId) { |
||||||
|
cb(gistId) |
||||||
|
} else { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: 'Error while loading gist. Please provide a valid Gist ID or URL.' |
||||||
|
} |
||||||
|
this.call('modal', 'alert', modalContent) |
||||||
|
} |
||||||
|
} else { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandlerEmpty', |
||||||
|
title: 'Gist load error', |
||||||
|
message: 'Error while loading gist. Id cannot be empty.' |
||||||
|
} |
||||||
|
this.call('modal', 'alert', modalContent) |
||||||
|
} |
||||||
|
return loadingFromGist |
||||||
|
} else { |
||||||
|
loadingFromGist = !!gistId |
||||||
|
} |
||||||
|
if (loadingFromGist) { |
||||||
|
cb(gistId) |
||||||
|
} |
||||||
|
return loadingFromGist |
||||||
|
} |
||||||
|
|
||||||
|
load (gistId: String | null) { |
||||||
|
const self = this |
||||||
|
return self.handleLoad(gistId, async (gistId: String | null) => { |
||||||
|
let data: any |
||||||
|
try { |
||||||
|
data = await (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any |
||||||
|
if (!data.files) { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: data.message, |
||||||
|
modalType: 'alert', |
||||||
|
okLabel: 'OK' |
||||||
|
} |
||||||
|
await this.call('modal', 'modal', modalContent) |
||||||
|
return |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: e.message |
||||||
|
|
||||||
|
} |
||||||
|
await this.call('modal', 'alert', modalContent) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const obj: StringByString = {} |
||||||
|
Object.keys(data.files).forEach((element) => { |
||||||
|
const path = element.replace(/\.\.\./g, '/') |
||||||
|
obj['/' + 'gist-' + gistId + '/' + path] = data.files[element] |
||||||
|
}) |
||||||
|
this.call('fileManager', 'setBatchFiles', obj, 'workspace', true, async (errorSavingFiles: any) => { |
||||||
|
if (errorSavingFiles) { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: errorSavingFiles.message || errorSavingFiles |
||||||
|
|
||||||
|
} |
||||||
|
this.call('modal', 'alert', modalContent) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getGistId = (str) => { |
||||||
|
var idr = /[0-9A-Fa-f]{8,}/ |
||||||
|
var match = idr.exec(str) |
||||||
|
return match ? match[0] : null |
||||||
|
} |
||||||
@ -1 +1,6 @@ |
|||||||
export { default as RemixApp } from './lib/remix-app/remix-app' |
export { default as RemixApp } from './lib/remix-app/remix-app' |
||||||
|
export { dispatchModalContext } from './lib/remix-app/context/context' |
||||||
|
export { ModalProvider } from './lib/remix-app/context/provider' |
||||||
|
export { AppModal } from './lib/remix-app/interface/index' |
||||||
|
export { AlertModal } from './lib/remix-app/interface/index' |
||||||
|
export * from './lib/remix-app/types/index' |
||||||
|
|||||||
@ -0,0 +1,30 @@ |
|||||||
|
import { AppModal } from '../interface' |
||||||
|
|
||||||
|
type ActionMap<M extends { [index: string]: any }> = { |
||||||
|
[Key in keyof M]: M[Key] extends undefined |
||||||
|
? { |
||||||
|
type: Key; |
||||||
|
} |
||||||
|
: { |
||||||
|
type: Key; |
||||||
|
payload: M[Key]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export const enum modalActionTypes { |
||||||
|
setModal = 'SET_MODAL', |
||||||
|
setToast = 'SET_TOAST', |
||||||
|
handleHideModal = 'HANDLE_HIDE_MODAL', |
||||||
|
handleToaster = 'HANDLE_HIDE_TOAST' |
||||||
|
} |
||||||
|
|
||||||
|
type ModalPayload = { |
||||||
|
[modalActionTypes.setModal]: AppModal |
||||||
|
[modalActionTypes.handleHideModal]: any |
||||||
|
[modalActionTypes.setToast]: string |
||||||
|
[modalActionTypes.handleToaster]: any |
||||||
|
} |
||||||
|
|
||||||
|
export type ModalAction = ActionMap<ModalPayload>[keyof ActionMap< |
||||||
|
ModalPayload |
||||||
|
>] |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
/* dragbar UI */ |
||||||
|
|
||||||
|
.dragbar { |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
width: 0.3em; |
||||||
|
z-index: 9999; |
||||||
|
} |
||||||
|
|
||||||
|
.overlay { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
display: block; |
||||||
|
z-index: 9998; |
||||||
|
} |
||||||
|
|
||||||
|
.dragbar:hover, |
||||||
|
.dragbar.ondrag { |
||||||
|
background-color: var(--secondary); |
||||||
|
cursor: col-resize; |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import React, { useContext, useEffect } from 'react' |
||||||
|
import { AppContext } from '../../context/context' |
||||||
|
import { useDialogDispatchers } from '../../context/provider' |
||||||
|
|
||||||
|
const DialogViewPlugin = () => { |
||||||
|
const { modal, alert, toast } = useDialogDispatchers() |
||||||
|
const app = useContext(AppContext) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
app.modal.setDispatcher({ modal, alert, toast }) |
||||||
|
}, []) |
||||||
|
return <></> |
||||||
|
} |
||||||
|
|
||||||
|
export default DialogViewPlugin |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { useDialogDispatchers, useDialogs } from '../../context/provider' |
||||||
|
import { Toaster } from '@remix-ui/toaster' |
||||||
|
import ModalWrapper from './modal-wrapper' |
||||||
|
|
||||||
|
const AppDialogs = () => { |
||||||
|
const { handleHideModal, handleToaster } = useDialogDispatchers() |
||||||
|
const { focusModal, focusToaster } = useDialogs() |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<ModalWrapper {...focusModal} handleHide={handleHideModal}></ModalWrapper> |
||||||
|
<Toaster message={focusToaster} handleHide={handleToaster} /> |
||||||
|
</>) |
||||||
|
} |
||||||
|
export default AppDialogs |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import React, { useContext, useEffect, useState } from 'react' |
||||||
|
import { AppContext } from '../../context/context' |
||||||
|
import { useDialogDispatchers } from '../../context/provider' |
||||||
|
const _paq = window._paq = window._paq || [] |
||||||
|
|
||||||
|
const MatomoDialog = (props) => { |
||||||
|
const { settings, showMatamo, appManager } = useContext(AppContext) |
||||||
|
const { modal } = useDialogDispatchers() |
||||||
|
const [visible, setVisible] = useState<boolean>(props.hide) |
||||||
|
|
||||||
|
const message = () => { |
||||||
|
return (<><p>An Opt-in version of <a href="https://matomo.org" target="_blank" rel="noreferrer">Matomo</a>, an open source data analytics platform is being used to improve Remix IDE.</p> |
||||||
|
<p>We realize that our users have sensitive information in their code and that their privacy - your privacy - must be protected.</p> |
||||||
|
<p>All data collected through Matomo is stored on our own server - no data is ever given to third parties. Our analytics reports are public: <a href="https://matomo.ethereum.org/index.php?module=MultiSites&action=index&idSite=23&period=day&date=yesterday" target="_blank" rel="noreferrer">take a look</a>.</p> |
||||||
|
<p>We do not collect nor store any personally identifiable information (PII).</p> |
||||||
|
<p>For more info, see: <a href="https://medium.com/p/66ef69e14931/" target="_blank" rel="noreferrer">Matomo Analyitcs on Remix iDE</a>.</p> |
||||||
|
<p>You can change your choice in the Settings panel anytime.</p></>) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (visible && showMatamo) { |
||||||
|
modal({ id: 'matomoModal', title: 'Help us to improve Remix IDE', message: message(), okLabel: 'Accept', okFn: handleModalOkClick, cancelLabel: 'Decline', cancelFn: declineModal }) |
||||||
|
} |
||||||
|
}, [visible]) |
||||||
|
|
||||||
|
const declineModal = async () => { |
||||||
|
settings.updateMatomoAnalyticsChoice(false) |
||||||
|
_paq.push(['optUserOut']) |
||||||
|
appManager.call('walkthrough', 'start') |
||||||
|
setVisible(false) |
||||||
|
} |
||||||
|
|
||||||
|
const handleModalOkClick = async () => { |
||||||
|
_paq.push(['forgetUserOptOut']) |
||||||
|
// @TODO remove next line when https://github.com/matomo-org/matomo/commit/9e10a150585522ca30ecdd275007a882a70c6df5 is used
|
||||||
|
document.cookie = 'mtm_consent_removed=; expires=Thu, 01 Jan 1970 00:00:01 GMT;' |
||||||
|
settings.updateMatomoAnalyticsChoice(true) |
||||||
|
appManager.call('walkthrough', 'start') |
||||||
|
setVisible(false) |
||||||
|
} |
||||||
|
|
||||||
|
return (<></>) |
||||||
|
} |
||||||
|
|
||||||
|
export default MatomoDialog |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import React, { useEffect, useRef, useState } from 'react' |
||||||
|
import { ModalDialog } from '@remix-ui/modal-dialog' |
||||||
|
import { ModalDialogProps } from 'libs/remix-ui/modal-dialog/src/lib/types' |
||||||
|
import { ModalTypes } from '../../types' |
||||||
|
|
||||||
|
interface ModalWrapperProps extends ModalDialogProps { |
||||||
|
modalType?: ModalTypes |
||||||
|
defaultValue?: string |
||||||
|
} |
||||||
|
|
||||||
|
const ModalWrapper = (props: ModalWrapperProps) => { |
||||||
|
const [state, setState] = useState<ModalDialogProps>() |
||||||
|
const ref = useRef() |
||||||
|
|
||||||
|
const onFinishPrompt = async () => { |
||||||
|
if (ref.current === undefined) { |
||||||
|
props.okFn() |
||||||
|
} else { |
||||||
|
// @ts-ignore: Object is possibly 'null'.
|
||||||
|
props.okFn(ref.current.value) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const createModalMessage = (defaultValue: string) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{props.message} |
||||||
|
<input type={props.modalType === ModalTypes.password ? 'password' : 'text'} defaultValue={defaultValue} data-id="modalDialogCustomPromp" ref={ref} className="form-control" /></> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.modalType) { |
||||||
|
switch (props.modalType) { |
||||||
|
case ModalTypes.prompt: |
||||||
|
case ModalTypes.password: |
||||||
|
setState({ |
||||||
|
...props, |
||||||
|
okFn: onFinishPrompt, |
||||||
|
message: createModalMessage(props.defaultValue) |
||||||
|
}) |
||||||
|
break |
||||||
|
default: |
||||||
|
setState({ ...props }) |
||||||
|
break |
||||||
|
} |
||||||
|
} else { |
||||||
|
setState({ ...props }) |
||||||
|
} |
||||||
|
}, [props]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<ModalDialog id={props.id} {...state} handleHide={props.handleHide} /> |
||||||
|
) |
||||||
|
} |
||||||
|
export default ModalWrapper |
||||||
@ -1,5 +1,24 @@ |
|||||||
import React from 'react' |
import React from 'react' |
||||||
|
import { AlertModal, AppModal } from '../interface' |
||||||
|
import { ModalInitialState } from '../state/modals' |
||||||
|
import { ModalTypes } from '../types' |
||||||
|
|
||||||
const AppContext = React.createContext(null) |
export const AppContext = React.createContext<any>(null) |
||||||
|
|
||||||
export default AppContext |
export interface dispatchModalInterface { |
||||||
|
modal: (data: AppModal) => void |
||||||
|
toast: (message: string) => void |
||||||
|
alert: (data: AlertModal) => void |
||||||
|
handleHideModal: () => void, |
||||||
|
handleToaster: () => void |
||||||
|
} |
||||||
|
|
||||||
|
export const dispatchModalContext = React.createContext<dispatchModalInterface>({ |
||||||
|
modal: (data: AppModal) => { }, |
||||||
|
toast: (message: string) => {}, |
||||||
|
alert: (data: AlertModal) => {}, |
||||||
|
handleHideModal: () => {}, |
||||||
|
handleToaster: () => {} |
||||||
|
}) |
||||||
|
|
||||||
|
export const modalContext = React.createContext(ModalInitialState) |
||||||
|
|||||||
@ -0,0 +1,64 @@ |
|||||||
|
import React, { useReducer } from 'react' |
||||||
|
import { modalActionTypes } from '../actions/modals' |
||||||
|
import { AlertModal, AppModal } from '../interface' |
||||||
|
import { modalReducer } from '../reducer/modals' |
||||||
|
import { ModalInitialState } from '../state/modals' |
||||||
|
import { ModalTypes } from '../types' |
||||||
|
import { AppContext, dispatchModalContext, modalContext } from './context' |
||||||
|
|
||||||
|
export const ModalProvider = ({ children = [], reducer = modalReducer, initialState = ModalInitialState } = {}) => { |
||||||
|
const [{ modals, toasters, focusModal, focusToaster }, dispatch] = useReducer(reducer, initialState) |
||||||
|
|
||||||
|
const modal = (data: AppModal) => { |
||||||
|
const { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType, defaultValue, hideFn } = data |
||||||
|
dispatch({ |
||||||
|
type: modalActionTypes.setModal, |
||||||
|
payload: { id, title, message, okLabel, okFn, cancelLabel, cancelFn, modalType: modalType || ModalTypes.default, defaultValue: defaultValue, hideFn } |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const alert = (data: AlertModal) => { |
||||||
|
modal({ id: data.id, title: data.title || 'Alert', message: data.message || data.title, okLabel: 'OK', okFn: (value?:any) => {}, cancelLabel: '', cancelFn: () => {} }) |
||||||
|
} |
||||||
|
|
||||||
|
const handleHideModal = () => { |
||||||
|
dispatch({ |
||||||
|
type: modalActionTypes.handleHideModal, |
||||||
|
payload: null |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const toast = (message: string) => { |
||||||
|
dispatch({ |
||||||
|
type: modalActionTypes.setToast, |
||||||
|
payload: message |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const handleToaster = () => { |
||||||
|
dispatch({ |
||||||
|
type: modalActionTypes.handleToaster, |
||||||
|
payload: null |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return (<dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster }}> |
||||||
|
<modalContext.Provider value={{ modals, toasters, focusModal, focusToaster }}> |
||||||
|
{children} |
||||||
|
</modalContext.Provider> |
||||||
|
</dispatchModalContext.Provider>) |
||||||
|
} |
||||||
|
|
||||||
|
export const AppProvider = ({ children = [], value = {} } = {}) => { |
||||||
|
return <AppContext.Provider value={value}> |
||||||
|
<ModalProvider>{children}</ModalProvider> |
||||||
|
</AppContext.Provider> |
||||||
|
} |
||||||
|
|
||||||
|
export const useDialogs = () => { |
||||||
|
return React.useContext(modalContext) |
||||||
|
} |
||||||
|
|
||||||
|
export const useDialogDispatchers = () => { |
||||||
|
return React.useContext(dispatchModalContext) |
||||||
|
} |
||||||
@ -1,26 +0,0 @@ |
|||||||
/* dragbar UI */ |
|
||||||
|
|
||||||
.dragbar { |
|
||||||
display : block; |
|
||||||
height : 100%; |
|
||||||
position : absolute; |
|
||||||
left: 0px; |
|
||||||
top: 0px; |
|
||||||
width: 0.3em; |
|
||||||
z-index: 9999; |
|
||||||
} |
|
||||||
|
|
||||||
.overlay { |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
width: 100vw; |
|
||||||
height: 100vh; |
|
||||||
display: block; |
|
||||||
z-index: 9998; |
|
||||||
} |
|
||||||
|
|
||||||
.dragbar:hover, .dragbar.ondrag{ |
|
||||||
background-color: var(--secondary); |
|
||||||
cursor:col-resize; |
|
||||||
} |
|
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import { ModalTypes } from '../types' |
||||||
|
|
||||||
|
export interface AppModal { |
||||||
|
id: string |
||||||
|
hide?: boolean |
||||||
|
title: string |
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
message: string | JSX.Element |
||||||
|
okLabel: string |
||||||
|
okFn: (value?:any) => void |
||||||
|
cancelLabel: string |
||||||
|
cancelFn: () => void, |
||||||
|
modalType?: ModalTypes, |
||||||
|
defaultValue?: string |
||||||
|
hideFn?: () => void |
||||||
|
} |
||||||
|
|
||||||
|
export interface AlertModal { |
||||||
|
id: string |
||||||
|
title?: string, |
||||||
|
message: string | JSX.Element, |
||||||
|
} |
||||||
|
|
||||||
|
export interface ModalState { |
||||||
|
modals: AppModal[], |
||||||
|
toasters: string[], |
||||||
|
focusModal: AppModal, |
||||||
|
focusToaster: string |
||||||
|
} |
||||||
@ -1,51 +0,0 @@ |
|||||||
import React, { useContext, useEffect, useState } from 'react' |
|
||||||
import { ModalDialog } from '@remix-ui/modal-dialog' |
|
||||||
import AppContext from '../context/context' |
|
||||||
const _paq = window._paq = window._paq || [] |
|
||||||
|
|
||||||
const MatomoDialog = (props) => { |
|
||||||
const { settings, showMatamo, appManager } = useContext(AppContext) |
|
||||||
const [visible, setVisible] = useState<boolean>(props.hide) |
|
||||||
useEffect(() => { |
|
||||||
if (showMatamo) { |
|
||||||
setVisible(true) |
|
||||||
} else { |
|
||||||
setVisible(false) |
|
||||||
} |
|
||||||
}, []) |
|
||||||
const declineModal = async () => { |
|
||||||
settings.updateMatomoAnalyticsChoice(false) |
|
||||||
_paq.push(['optUserOut']) |
|
||||||
appManager.call('walkthrough', 'start') |
|
||||||
setVisible(false) |
|
||||||
} |
|
||||||
const hideModal = async () => { |
|
||||||
setVisible(false) |
|
||||||
} |
|
||||||
const handleModalOkClick = async () => { |
|
||||||
_paq.push(['forgetUserOptOut']) |
|
||||||
// @TODO remove next line when https://github.com/matomo-org/matomo/commit/9e10a150585522ca30ecdd275007a882a70c6df5 is used
|
|
||||||
document.cookie = 'mtm_consent_removed=; expires=Thu, 01 Jan 1970 00:00:01 GMT;' |
|
||||||
settings.updateMatomoAnalyticsChoice(true) |
|
||||||
appManager.call('walkthrough', 'start') |
|
||||||
setVisible(false) |
|
||||||
} |
|
||||||
return (<ModalDialog |
|
||||||
handleHide={hideModal} |
|
||||||
id="matomoDialog" |
|
||||||
hide={!visible} |
|
||||||
title="Help us to improve Remix IDE" |
|
||||||
okLabel="Accept" |
|
||||||
okFn={ handleModalOkClick } |
|
||||||
cancelLabel="Decline" |
|
||||||
cancelFn={declineModal}> |
|
||||||
<p>An Opt-in version of <a href="https://matomo.org" target="_blank" rel="noreferrer">Matomo</a>, an open source data analytics platform is being used to improve Remix IDE.</p> |
|
||||||
<p>We realize that our users have sensitive information in their code and that their privacy - your privacy - must be protected.</p> |
|
||||||
<p>All data collected through Matomo is stored on our own server - no data is ever given to third parties. Our analytics reports are public: <a href="https://matomo.ethereum.org/index.php?module=MultiSites&action=index&idSite=23&period=day&date=yesterday" target="_blank" rel="noreferrer">take a look</a>.</p> |
|
||||||
<p>We do not collect nor store any personally identifiable information (PII).</p> |
|
||||||
<p>For more info, see: <a href="https://medium.com/p/66ef69e14931/" target="_blank" rel="noreferrer">Matomo Analyitcs on Remix iDE</a>.</p> |
|
||||||
<p>You can change your choice in the Settings panel anytime.</p> |
|
||||||
</ModalDialog>) |
|
||||||
} |
|
||||||
|
|
||||||
export default MatomoDialog |
|
||||||
@ -0,0 +1,50 @@ |
|||||||
|
import { modalActionTypes, ModalAction } from '../actions/modals' |
||||||
|
import { ModalInitialState } from '../state/modals' |
||||||
|
import { AppModal, ModalState } from '../interface' |
||||||
|
|
||||||
|
export const modalReducer = (state: ModalState = ModalInitialState, action: ModalAction) => { |
||||||
|
switch (action.type) { |
||||||
|
case modalActionTypes.setModal: { |
||||||
|
let modalList:AppModal[] = state.modals |
||||||
|
modalList.push(action.payload) |
||||||
|
if (state.modals.length === 1 && state.focusModal.hide === true) { // if it's the first one show it
|
||||||
|
const focusModal: AppModal = { |
||||||
|
id: modalList[0].id, |
||||||
|
hide: false, |
||||||
|
title: modalList[0].title, |
||||||
|
message: modalList[0].message, |
||||||
|
okLabel: modalList[0].okLabel, |
||||||
|
okFn: modalList[0].okFn, |
||||||
|
cancelLabel: modalList[0].cancelLabel, |
||||||
|
cancelFn: modalList[0].cancelFn, |
||||||
|
modalType: modalList[0].modalType, |
||||||
|
defaultValue: modalList[0].defaultValue, |
||||||
|
hideFn: modalList[0].hideFn |
||||||
|
} |
||||||
|
|
||||||
|
modalList = modalList.slice() |
||||||
|
modalList.shift() |
||||||
|
return { ...state, modals: modalList, focusModal: focusModal } |
||||||
|
} |
||||||
|
return { ...state, modals: modalList } |
||||||
|
} |
||||||
|
case modalActionTypes.handleHideModal: |
||||||
|
if (state.focusModal.hideFn) { |
||||||
|
state.focusModal.hideFn() |
||||||
|
} |
||||||
|
state.focusModal = { ...state.focusModal, hide: true, message: null } |
||||||
|
return { ...state } |
||||||
|
|
||||||
|
case modalActionTypes.setToast: |
||||||
|
state.toasters.push(action.payload) |
||||||
|
if (state.toasters.length > 0) { |
||||||
|
const focus = state.toasters[0] |
||||||
|
state.toasters.shift() |
||||||
|
return { ...state, focusToaster: focus } |
||||||
|
} |
||||||
|
return { ...state } |
||||||
|
|
||||||
|
case modalActionTypes.handleToaster: |
||||||
|
return { ...state, focusToaster: '' } |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import { ModalState } from '../interface' |
||||||
|
|
||||||
|
export const ModalInitialState: ModalState = { |
||||||
|
modals: [], |
||||||
|
toasters: [], |
||||||
|
focusModal: { |
||||||
|
id: '', |
||||||
|
hide: true, |
||||||
|
title: '', |
||||||
|
message: '', |
||||||
|
okLabel: '', |
||||||
|
okFn: () => { }, |
||||||
|
cancelLabel: '', |
||||||
|
cancelFn: () => { } |
||||||
|
}, |
||||||
|
focusToaster: '' |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export const enum ModalTypes { |
||||||
|
alert = 'alert', |
||||||
|
confirm = 'confirm', |
||||||
|
prompt = 'prompt', |
||||||
|
password = 'password', |
||||||
|
default = 'default', |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"presets": ["@nrwl/react/babel"], |
||||||
|
"plugins": [] |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
{ |
||||||
|
"extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc"], |
||||||
|
"ignorePatterns": ["!**/*"], |
||||||
|
"overrides": [ |
||||||
|
{ |
||||||
|
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"], |
||||||
|
"rules": {} |
||||||
|
}, |
||||||
|
{ |
||||||
|
"files": ["*.ts", "*.tsx"], |
||||||
|
"rules": {} |
||||||
|
}, |
||||||
|
{ |
||||||
|
"files": ["*.js", "*.jsx"], |
||||||
|
"rules": {} |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
# remix-ui-side-panel |
||||||
|
|
||||||
|
This library was generated with [Nx](https://nx.dev). |
||||||
|
|
||||||
|
## Running unit tests |
||||||
|
|
||||||
|
Run `nx test remix-ui-side-panel` to execute the unit tests via [Jest](https://jestjs.io). |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export { default as RemixPluginPanel } from './lib/plugins/remix-ui-panel' |
||||||
|
export { default as RemixUIMainPanel } from './lib/main/main-panel' |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
/* dragbar UI */ |
||||||
|
|
||||||
|
.dragbar_terminal { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
height: 0.3em; |
||||||
|
z-index: 9999; |
||||||
|
} |
||||||
|
|
||||||
|
.overlay { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
display: block; |
||||||
|
z-index: 900; |
||||||
|
} |
||||||
|
|
||||||
|
.dragbar_terminal:hover, |
||||||
|
.dragbar_terminal.ondrag { |
||||||
|
background-color: var(--secondary); |
||||||
|
cursor: row-resize; |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
import Draggable from 'react-draggable' |
||||||
|
import './dragbar.css' |
||||||
|
|
||||||
|
interface IRemixDragBarUi { |
||||||
|
refObject: React.MutableRefObject<any>; |
||||||
|
setHideStatus: (hide: boolean) => void; |
||||||
|
hidden: boolean |
||||||
|
minHeight?: number |
||||||
|
} |
||||||
|
|
||||||
|
const DragBar = (props: IRemixDragBarUi) => { |
||||||
|
const [dragState, setDragState] = useState<boolean>(false) |
||||||
|
const [dragBarPosY, setDragBarPosY] = useState<number>(0) |
||||||
|
const nodeRef = React.useRef(null) // fix for strictmode
|
||||||
|
|
||||||
|
function stopDrag (e: MouseEvent, data: any) { |
||||||
|
const h = window.innerHeight - data.y |
||||||
|
props.refObject.current.setAttribute('style', `height: ${h}px;`) |
||||||
|
setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight) |
||||||
|
setDragState(false) |
||||||
|
} |
||||||
|
const handleResize = () => { |
||||||
|
setDragBarPosY(window.innerHeight - props.refObject.current.offsetHeight) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
handleResize() |
||||||
|
}, [props.hidden]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
window.addEventListener('resize', handleResize) |
||||||
|
// TODO: not a good way to wait on the ref doms element to be rendered of course
|
||||||
|
setTimeout(() => |
||||||
|
handleResize(), 2000) |
||||||
|
return () => window.removeEventListener('resize', handleResize) |
||||||
|
}, []) |
||||||
|
|
||||||
|
function startDrag () { |
||||||
|
setDragState(true) |
||||||
|
} |
||||||
|
return <> |
||||||
|
<div className={`overlay ${dragState ? '' : 'd-none'}`} ></div> |
||||||
|
<Draggable nodeRef={nodeRef} position={{ x: 0, y: dragBarPosY }} onStart={startDrag} onStop={stopDrag} axis="y"> |
||||||
|
<div ref={nodeRef} className={`dragbar_terminal ${dragState ? 'ondrag' : ''}`}></div> |
||||||
|
</Draggable> |
||||||
|
</> |
||||||
|
} |
||||||
|
|
||||||
|
export default DragBar |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
.mainview { |
||||||
|
display : flex; |
||||||
|
flex-direction : column; |
||||||
|
height : 100%; |
||||||
|
width : 100%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,60 @@ |
|||||||
|
/* eslint-disable no-unused-expressions */ |
||||||
|
import { AppContext } from 'libs/remix-ui/app/src/lib/remix-app/context/context' |
||||||
|
import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||||
|
import DragBar from '../dragbar/dragbar' |
||||||
|
import RemixUIPanelPlugin from '../plugins/panel-plugin' |
||||||
|
import { PluginRecord } from '../types' |
||||||
|
import './main-panel.css' |
||||||
|
|
||||||
|
const RemixUIMainPanel = () => { |
||||||
|
const appContext = useContext(AppContext) |
||||||
|
const [plugins, setPlugins] = useState<PluginRecord[]>([]) |
||||||
|
const editorRef = useRef<HTMLDivElement>(null) |
||||||
|
const mainPanelRef = useRef<HTMLDivElement>(null) |
||||||
|
const tabsRef = useRef<HTMLDivElement>(null) |
||||||
|
const terminalRef = useRef<HTMLDivElement>(null) |
||||||
|
|
||||||
|
const refs = [tabsRef, editorRef, mainPanelRef, terminalRef] |
||||||
|
|
||||||
|
const renderPanels = () => { |
||||||
|
if (appContext) { |
||||||
|
const pluginPanels: PluginRecord[] = [] |
||||||
|
Object.values(appContext.layout.panels).map((panel: any) => { |
||||||
|
pluginPanels.push({ |
||||||
|
profile: panel.plugin.profile, |
||||||
|
active: panel.active, |
||||||
|
view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(), |
||||||
|
class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized' : ''), |
||||||
|
minimized: panel.minimized |
||||||
|
}) |
||||||
|
}) |
||||||
|
setPlugins(pluginPanels) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
renderPanels() |
||||||
|
appContext.layout.event.on('change', () => { |
||||||
|
renderPanels() |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="mainview"> |
||||||
|
{Object.values(plugins).map((pluginRecord, i) => { |
||||||
|
return ( |
||||||
|
<React.Fragment key={`mainView${i}`}> |
||||||
|
{(pluginRecord.profile.name === 'terminal') ? <DragBar key='dragbar-terminal' hidden={pluginRecord.minimized || false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : null} |
||||||
|
<RemixUIPanelPlugin |
||||||
|
ref={refs[i]} |
||||||
|
key={pluginRecord.profile.name} |
||||||
|
pluginRecord={pluginRecord} |
||||||
|
/> |
||||||
|
</React.Fragment> |
||||||
|
) |
||||||
|
})} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default RemixUIMainPanel |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
/* eslint-disable jsx-a11y/anchor-has-content */ |
||||||
|
import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||||
|
import { PluginRecord } from '../types' |
||||||
|
import './panel.css' |
||||||
|
|
||||||
|
export interface RemixPanelProps { |
||||||
|
plugins: Record<string, PluginRecord>; |
||||||
|
} |
||||||
|
const RemixUIPanelHeader = (props: RemixPanelProps) => { |
||||||
|
const [plugin, setPlugin] = useState<PluginRecord>() |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.plugins) { |
||||||
|
const p = Object.values(props.plugins).find((pluginRecord) => { |
||||||
|
return pluginRecord.active === true |
||||||
|
}) |
||||||
|
setPlugin(p) |
||||||
|
} |
||||||
|
}, [props]) |
||||||
|
|
||||||
|
return ( |
||||||
|
<header className='swapitHeader'><h6 data-id='sidePanelSwapitTitle'>{plugin?.profile.displayName || plugin?.profile.name}</h6> |
||||||
|
{plugin?.profile.documentation ? (<a href={plugin.profile.documentation} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''} |
||||||
|
</header>) |
||||||
|
} |
||||||
|
|
||||||
|
export default RemixUIPanelHeader |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
/* eslint-disable no-undef */ |
||||||
|
import React, { forwardRef, useEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||||
|
import { PluginRecord } from '../types' |
||||||
|
import './panel.css' |
||||||
|
interface panelPLuginProps { |
||||||
|
pluginRecord: PluginRecord |
||||||
|
} |
||||||
|
|
||||||
|
const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => { |
||||||
|
const localRef = useRef<HTMLDivElement>(null) |
||||||
|
const [view, setView] = useState<JSX.Element | HTMLDivElement>() |
||||||
|
useEffect(() => { |
||||||
|
const ref:any = panelRef || localRef |
||||||
|
if (ref.current) { |
||||||
|
if (props.pluginRecord.view) { |
||||||
|
if (React.isValidElement(props.pluginRecord.view)) { |
||||||
|
setView(props.pluginRecord.view) |
||||||
|
} else { |
||||||
|
ref.current.appendChild(props.pluginRecord.view) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={ |
||||||
|
props.pluginRecord.active ? `${props.pluginRecord.class}` : 'd-none' |
||||||
|
} |
||||||
|
ref={panelRef || localRef} |
||||||
|
> |
||||||
|
{view} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default forwardRef(RemixUIPanelPlugin) |
||||||
@ -0,0 +1,110 @@ |
|||||||
|
.panel { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
flex: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.swapitTitle { |
||||||
|
margin: 0; |
||||||
|
text-transform: uppercase; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
.swapitTitle i { |
||||||
|
padding-left: 6px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.swapitHeader { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 16px 24px 15px; |
||||||
|
justify-content: space-between; |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
|
||||||
|
.icons i { |
||||||
|
height: 80%; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.pluginsContainer { |
||||||
|
height: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.titleInfo { |
||||||
|
padding-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.versionBadge { |
||||||
|
background-color: var(--light); |
||||||
|
padding: 0 7px; |
||||||
|
font-weight: bolder; |
||||||
|
margin-left: 5px; |
||||||
|
text-transform: lowercase; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
iframe { |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.plugins { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.plugItIn { |
||||||
|
display: none; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.plugItIn>div { |
||||||
|
overflow-y: auto; |
||||||
|
overflow-x: hidden; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.plugItIn.active { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.pluginsContainer { |
||||||
|
height: 100%; |
||||||
|
overflow-y: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
#editorView { |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
border: 0; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
#mainPanel { |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
border: 0; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.mainPanel-wrap, .editor-wrap { |
||||||
|
flex: 1; |
||||||
|
min-height: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.terminal-wrap { |
||||||
|
min-height: 35px; |
||||||
|
height: 20%; |
||||||
|
} |
||||||
|
|
||||||
|
.terminal-wrap.minimized { |
||||||
|
height: 2rem !important; |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
/* eslint-disable no-undef */ |
||||||
|
import React, { useEffect, useState } from 'react' // eslint-disable-line
|
||||||
|
import './panel.css' |
||||||
|
import RemixUIPanelPlugin from './panel-plugin' |
||||||
|
import { PluginRecord } from '../types' |
||||||
|
|
||||||
|
/* eslint-disable-next-line */ |
||||||
|
export interface RemixPanelProps { |
||||||
|
plugins: Record<string, PluginRecord> |
||||||
|
header: JSX.Element |
||||||
|
} |
||||||
|
|
||||||
|
export function RemixPluginPanel (props: RemixPanelProps) { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{props.header} |
||||||
|
<div className="pluginsContainer"> |
||||||
|
<div className='plugins' id='plugins'> |
||||||
|
{Object.values(props.plugins).map((pluginRecord) => { |
||||||
|
return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} /> |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
|
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default RemixPluginPanel |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import { Profile } from '@remixproject/plugin-utils' |
||||||
|
|
||||||
|
export type PluginRecord = { |
||||||
|
profile: Profile |
||||||
|
view: any |
||||||
|
active: boolean |
||||||
|
class?: string |
||||||
|
minimized?: boolean |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
{ |
||||||
|
"extends": "../../../tsconfig.base.json", |
||||||
|
"compilerOptions": { |
||||||
|
"jsx": "react-jsx", |
||||||
|
"allowJs": true, |
||||||
|
"esModuleInterop": true, |
||||||
|
"allowSyntheticDefaultImports": true, |
||||||
|
"forceConsistentCasingInFileNames": true, |
||||||
|
"strict": true, |
||||||
|
"noImplicitReturns": true, |
||||||
|
"noFallthroughCasesInSwitch": true |
||||||
|
}, |
||||||
|
"files": [], |
||||||
|
"include": [], |
||||||
|
"references": [ |
||||||
|
{ |
||||||
|
"path": "./tsconfig.lib.json" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
{ |
||||||
|
"extends": "./tsconfig.json", |
||||||
|
"compilerOptions": { |
||||||
|
"outDir": "../../../dist/out-tsc", |
||||||
|
"types": ["node"] |
||||||
|
}, |
||||||
|
"files": [ |
||||||
|
"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||||
|
"../../../node_modules/@nrwl/react/typings/image.d.ts" |
||||||
|
], |
||||||
|
"exclude": ["**/*.spec.ts", "**/*.spec.tsx"], |
||||||
|
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||||
|
} |
||||||
@ -1,4 +1,4 @@ |
|||||||
{ |
{ |
||||||
"presets": ["@nrwl/react/babel"], |
"presets": ["@nrwl/react/babel"], |
||||||
"plugins": [] |
"plugins": [] |
||||||
} |
} |
||||||
@ -1,77 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react' |
|
||||||
|
|
||||||
export const useDragTerminal = (minHeight: number, defaultPosition: number) => { |
|
||||||
const [isOpen, setIsOpen] = useState(defaultPosition > minHeight) |
|
||||||
const [lastYPosition, setLastYPosition] = useState(0) |
|
||||||
const [terminalPosition, setTerminalPosition] = useState(defaultPosition) |
|
||||||
// Used to save position of the terminal when it is closed
|
|
||||||
const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition) |
|
||||||
const [isDragging, setIsDragging] = useState(false) |
|
||||||
|
|
||||||
const handleDraggingStart = (event: React.MouseEvent) => { |
|
||||||
setLastYPosition(event.clientY) |
|
||||||
setIsDragging(true) |
|
||||||
} |
|
||||||
|
|
||||||
const handleDragging = (event: MouseEvent) => { |
|
||||||
event.preventDefault() |
|
||||||
|
|
||||||
if (isDragging) { |
|
||||||
const mouseYPosition = event.clientY |
|
||||||
const difference = lastYPosition - mouseYPosition |
|
||||||
const newTerminalPosition = terminalPosition + difference |
|
||||||
setTerminalPosition(newTerminalPosition) |
|
||||||
setLastYPosition(mouseYPosition) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleDraggingEnd = () => { |
|
||||||
if (!isDragging) return |
|
||||||
|
|
||||||
setIsDragging(false) |
|
||||||
|
|
||||||
// Check terminal position to determine if it should be open or closed
|
|
||||||
setIsOpen(terminalPosition > minHeight) |
|
||||||
} |
|
||||||
|
|
||||||
const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => { |
|
||||||
event.preventDefault() |
|
||||||
event.stopPropagation() |
|
||||||
|
|
||||||
if (isOpen) { |
|
||||||
setLastTerminalPosition(terminalPosition) |
|
||||||
setLastYPosition(0) |
|
||||||
setTerminalPosition(minHeight) |
|
||||||
} else { |
|
||||||
setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition) |
|
||||||
} |
|
||||||
|
|
||||||
setIsOpen(!isOpen) |
|
||||||
} |
|
||||||
|
|
||||||
// Add event listeners for dragging
|
|
||||||
useEffect(() => { |
|
||||||
document.addEventListener('mousemove', handleDragging) |
|
||||||
document.addEventListener('mouseup', handleDraggingEnd) |
|
||||||
|
|
||||||
return () => { |
|
||||||
document.removeEventListener('mousemove', handleDragging) |
|
||||||
document.removeEventListener('mouseup', handleDraggingEnd) |
|
||||||
} |
|
||||||
}, [handleDragging, handleDraggingEnd]) |
|
||||||
|
|
||||||
// Reset terminal position
|
|
||||||
useEffect(() => { |
|
||||||
if (!terminalPosition) { |
|
||||||
setTerminalPosition(defaultPosition) |
|
||||||
} |
|
||||||
}, [terminalPosition, setTerminalPosition]) |
|
||||||
|
|
||||||
return { |
|
||||||
isOpen, |
|
||||||
terminalPosition, |
|
||||||
isDragging, |
|
||||||
handleDraggingStart, |
|
||||||
handleToggleTerminal |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue