@ -10,24 +10,18 @@ export interface RemixUiSidePanelProps {
export function RemixUiSidePanel ( props : RemixUiSidePanelProps ) {
const [ view , setView ] = useState ( '' )
const [ dockLink , setDockLink ] = useState ( false )
const [ versionWarning , setVersionWarning ] = 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 ( { props : props.plugin } )
Object . keys ( props . plugin . contents ) . map ( ( key : string , index : number ) = > {
console . log ( { key } )
const active = props . plugin . active === key
if ( active ) {
const plugin = props . plugin . contents [ key ]
setView ( plugin . innerHTML )
}
} )
} , [ props . plugin . contents ] )
console . log ( )
} , [ name ] )
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 )
@ -35,10 +29,14 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
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 ) ) {
setVersionWarning ( true )
setVersionWarningBeta ( true )
} else {
setVersionWarningBeta ( false )
}
}
}
@ -46,22 +44,23 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
const renderHeader = ( ) = > {
getProfile ( )
return (
< header className = "swapitHeader" style = { {
display : 'flex' ,
alignItems : "center" ,
padding : '16px 24px 15px' ,
justifyContent : "space-between"
< header style = { {
display : 'flex' ,
alignItems : 'center' ,
padding : '16px 24px 15px' ,
justifyContent : 'space-between'
} } >
< h6 className = "swapitTitle" data - id = "sidePanelSwapitTitle" > { name } < / h6 >
{ dockLink ? ( < a href = { profileDocsLink } className = "${css.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>) : (<small title="Version Beta" className="badge-light versionBadge">beta</small>)} */ }
{ 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 style = { { height : "100%" } } >
< section style = { { position : 'sticky' } } >
{ renderHeader ( ) }
< / section >
) ;