filip mertens
3 years ago
parent
7796641e81
commit
31349c9410
@ -1,61 +0,0 @@ |
||||
/* global Node, requestAnimationFrame */ // eslint-disable-line
|
||||
import React from 'react' // eslint-disable-line
|
||||
import ReactDOM from 'react-dom' // eslint-disable-line
|
||||
import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
|
||||
import { AbstractPanel } from './panel' |
||||
import * as packageJson from '../../../../../package.json' |
||||
|
||||
const profile = { |
||||
name: 'mainPanel', |
||||
displayName: 'Main Panel', |
||||
description: '', |
||||
version: packageJson.version, |
||||
methods: ['addView', 'removeView'] |
||||
} |
||||
|
||||
export class MainPanel extends AbstractPanel { |
||||
constructor (config) { |
||||
super(profile) |
||||
this.mainelement = document.createElement('div') |
||||
this.mainelement.setAttribute('class', 'mainPanelPluginsContainer') |
||||
this.config = config |
||||
} |
||||
|
||||
onActivation () { |
||||
this.renderComponent() |
||||
} |
||||
|
||||
focus (name) { |
||||
this.emit('focusChanged', name) |
||||
super.focus(name) |
||||
this.renderComponent() |
||||
} |
||||
|
||||
addView (profile, view) { |
||||
super.addView(profile, view) |
||||
view.style.height = '100%' |
||||
this.renderComponent() |
||||
} |
||||
|
||||
removeView (profile) { |
||||
super.removeView(profile) |
||||
this.renderComponent() |
||||
} |
||||
|
||||
onActivation () { |
||||
this.renderComponent() |
||||
} |
||||
|
||||
render () { |
||||
return this.mainelement |
||||
} |
||||
|
||||
renderComponent () { |
||||
ReactDOM.render( |
||||
<RemixUiMainPanel |
||||
plugin={this} contents={this.contents} |
||||
/>, |
||||
this.mainelement |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
import React from 'react' // eslint-disable-line
|
||||
import { AbstractPanel } from './panel' |
||||
import ReactDOM from 'react-dom' // eslint-disable-line
|
||||
import { RemixUiSidePanel } from '@remix-ui/side-panel' |
||||
import packageJson from '../../../../../package.json' |
||||
|
||||
const profile = { |
||||
name: 'mainPanel', |
||||
displayName: 'Main Panel', |
||||
description: '', |
||||
version: packageJson.version, |
||||
methods: ['addView', 'removeView'] |
||||
} |
||||
|
||||
export class MainPanel extends AbstractPanel { |
||||
element: HTMLDivElement |
||||
constructor (config) { |
||||
super(profile) |
||||
this.element = document.createElement('div') |
||||
this.element.setAttribute('class', 'mainPanelPluginsContainer') |
||||
// 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(<RemixUiSidePanel plugins={this.plugins}/>, this.element) |
||||
} |
||||
} |
||||
@ -1 +1 @@ |
||||
export * from './lib/remix-ui-side-panel'; |
||||
export { default as RemixUiSidePanel } from './lib/side/remix-ui-panel'; |
||||
|
||||
@ -0,0 +1,26 @@ |
||||
import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||
import { PluginRecord } from './types' |
||||
import './side/panel.css'; |
||||
interface panelPLuginProps { |
||||
pluginRecord: PluginRecord |
||||
} |
||||
|
||||
const PanelPlugin = (props: panelPLuginProps) => { |
||||
const sidePanelRef = useRef(null) |
||||
const [view, setView] = useState<JSX.Element | HTMLDivElement>() |
||||
useEffect(() => { |
||||
if (sidePanelRef.current) { |
||||
if (props.pluginRecord.view) { |
||||
if (React.isValidElement(props.pluginRecord.view)) { |
||||
setView(props.pluginRecord.view) |
||||
}else{ |
||||
sidePanelRef.current.appendChild(props.pluginRecord.view) |
||||
} |
||||
} |
||||
} |
||||
}, []) |
||||
|
||||
return <div className={props.pluginRecord.active? 'plugItIn active':'d-none'} ref={sidePanelRef}>{view}</div> |
||||
} |
||||
|
||||
export default PanelPlugin |
||||
@ -1,74 +0,0 @@ |
||||
import React, { useEffect, useState } from 'react' // eslint-disable-line
|
||||
import './remix-ui-side-panel.module.css'; |
||||
import SidePanelElement from './sidepanel-element'; |
||||
|
||||
/* eslint-disable-next-line */ |
||||
export interface RemixUiSidePanelProps { |
||||
plugin: any |
||||
contents: any |
||||
} |
||||
|
||||
export function RemixUiSidePanel(props: RemixUiSidePanelProps) { |
||||
const [view, setView] = useState('') |
||||
const [dockLink, setDockLink] = useState(false) |
||||
const [versionWarning, setVersionWarning] = useState<boolean>(false) |
||||
const [versionWarningBeta, setVersionWarningBeta] = useState(false) |
||||
const [profile, setProfile] = useState('') |
||||
const [profileDocsLink, setProfileDocsLink] = useState('') |
||||
const [name, setName] = useState(' - ') |
||||
|
||||
useEffect(() => { |
||||
console.log('load') |
||||
}, []) |
||||
|
||||
const getProfile = async () => { |
||||
console.log({ active: props.plugin.active }) |
||||
if (props.plugin.active) { |
||||
const profile = await props.plugin.appManager.getProfile(props.plugin.active) |
||||
setProfileDocsLink(profile.documentation) |
||||
profile.displayName ? setName(profile.displayName) : setName(profile.name) |
||||
profile.documentation ? setDockLink(true) : setDockLink(false) |
||||
if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) { |
||||
setVersionWarning(true) |
||||
} else { |
||||
setVersionWarning(false) |
||||
} |
||||
// Beta
|
||||
if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { |
||||
setVersionWarningBeta(true) |
||||
} else { |
||||
setVersionWarningBeta(false) |
||||
} |
||||
} |
||||
} |
||||
|
||||
const renderHeader = () => { |
||||
getProfile() |
||||
return ( |
||||
<header className='swapitHeader'> |
||||
<h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6> |
||||
{dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''} |
||||
{versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null} |
||||
{versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null} |
||||
</header> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<section className='panel plugin-manager'> |
||||
{renderHeader()} |
||||
<div className="pluginsContainer"> |
||||
{Object.values(props.contents).map((x) => { |
||||
if (React.isValidElement(x)) { |
||||
return x |
||||
} else { |
||||
return <SidePanelElement render={x} /> |
||||
} |
||||
})} |
||||
</div> |
||||
</section> |
||||
|
||||
); |
||||
} |
||||
|
||||
export default RemixUiSidePanel; |
||||
@ -0,0 +1,29 @@ |
||||
/* 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 RemixUiSidePanelProps { |
||||
plugins: Record<string, PluginRecord>; |
||||
} |
||||
const SidePanelHeader = (props: RemixUiSidePanelProps) => { |
||||
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 data-id='sidePanelSwapitTitle' className='swapitHeader'><h6>{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 SidePanelHeader |
||||
@ -0,0 +1,27 @@ |
||||
import React, { useEffect, useState } from 'react' // eslint-disable-line
|
||||
import './panel.css'; |
||||
import SidePanelHeader from './panel-header'; |
||||
import PanelPlugin from '../panel-plugin'; |
||||
import { PluginRecord } from '../types'; |
||||
|
||||
/* eslint-disable-next-line */ |
||||
export interface RemixUiSidePanelProps { |
||||
plugins: Record<string, PluginRecord>; |
||||
} |
||||
|
||||
export function RemixUiSidePanel(props: RemixUiSidePanelProps) { |
||||
|
||||
return ( |
||||
<div className='panel plugin-manager'> |
||||
<SidePanelHeader plugins={props.plugins}></SidePanelHeader> |
||||
<div className="pluginsContainer"> |
||||
{Object.values(props.plugins).map((pluginRecord) => { |
||||
return <PanelPlugin pluginRecord={pluginRecord} /> |
||||
})} |
||||
</div> |
||||
</div> |
||||
|
||||
); |
||||
} |
||||
|
||||
export default RemixUiSidePanel; |
||||
@ -1,16 +0,0 @@ |
||||
import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||
|
||||
const SidePanelElement = (props: any) => { |
||||
const sidePanelRef = useRef(null) |
||||
useEffect(() => { |
||||
if (sidePanelRef.current) { |
||||
if (props.render) { |
||||
sidePanelRef.current.appendChild(props.render) |
||||
} |
||||
} |
||||
}, []) |
||||
|
||||
return <div ref={sidePanelRef}></div> |
||||
} |
||||
|
||||
export default SidePanelElement |
||||
@ -0,0 +1,7 @@ |
||||
import { Profile } from "@remixproject/plugin-utils"; |
||||
|
||||
export type PluginRecord = { |
||||
profile: Profile |
||||
view: any |
||||
active: boolean |
||||
} |
||||
Loading…
Reference in new issue