filip mertens
1 year ago
parent
0aa13de1a8
commit
be1785b832
@ -0,0 +1,113 @@ |
|||||||
|
import React, { useEffect, useState, useRef, useReducer, useContext } from 'react' // eslint-disable-line
|
||||||
|
import { Dropdown } from 'react-bootstrap'; |
||||||
|
import { CompilerMenu, CompilerMenuToggle } from './compiler-menu'; |
||||||
|
|
||||||
|
export type compilerVersion = { |
||||||
|
path: string, |
||||||
|
longVersion: string, |
||||||
|
isDownloaded: boolean |
||||||
|
} |
||||||
|
|
||||||
|
interface compilerDropdownProps { |
||||||
|
customVersions: string[], |
||||||
|
selectedVersion: string, |
||||||
|
defaultVersion: string, |
||||||
|
allversions: compilerVersion[], |
||||||
|
handleLoadVersion: (url: string) => void, |
||||||
|
_shouldBeAdded: (version: string) => {}, |
||||||
|
onlyDownloaded: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export const CompilerDropdown = (props: compilerDropdownProps) => { |
||||||
|
const { customVersions, selectedVersion, defaultVersion, allversions, handleLoadVersion, _shouldBeAdded, onlyDownloaded } = props |
||||||
|
return ( |
||||||
|
<Dropdown id="versionSelector" data-id="versionSelector"> |
||||||
|
<Dropdown.Toggle as={CompilerMenuToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}> |
||||||
|
<div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}> |
||||||
|
<div className="text-truncate"> |
||||||
|
{customVersions.map((url, i) => { |
||||||
|
if (selectedVersion === url) return (<span key={i}>custom</span>) |
||||||
|
})} |
||||||
|
{allversions.map((build, i) => { |
||||||
|
|
||||||
|
if ((selectedVersion || defaultVersion) === build.path) { |
||||||
|
return (<span key={i}>{build.longVersion}</span>) |
||||||
|
} |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Dropdown.Toggle> |
||||||
|
|
||||||
|
<Dropdown.Menu as={CompilerMenu} className="w-100 custom-dropdown-items overflow-hidden" data-id="custom-dropdown-items"> |
||||||
|
{allversions.length <= 0 && ( |
||||||
|
<Dropdown.Item |
||||||
|
key={`default`} |
||||||
|
data-id='builtin' |
||||||
|
onClick={() => {}} |
||||||
|
> |
||||||
|
<div className='d-flex w-100 justify-content-between'> |
||||||
|
{selectedVersion === defaultVersion ? <span className='fas fa-check text-success mr-2'></span> : null} |
||||||
|
<div style={{ flexGrow: 1, overflow: 'hidden' }}> |
||||||
|
<div className="text-truncate"> |
||||||
|
{defaultVersion} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Dropdown.Item> |
||||||
|
)} |
||||||
|
{allversions.length <= 0 && ( |
||||||
|
<Dropdown.Item |
||||||
|
key={`builtin`} |
||||||
|
data-id='builtin' |
||||||
|
onClick={() => {}} |
||||||
|
> |
||||||
|
<div className='d-flex w-100 justify-content-between'> |
||||||
|
{selectedVersion === "builtin" ? <span className='fas fa-check text-success mr-2'></span> : null} |
||||||
|
<div style={{ flexGrow: 1, overflow: 'hidden' }}> |
||||||
|
<div className="text-truncate"> |
||||||
|
builtin |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Dropdown.Item> |
||||||
|
)} |
||||||
|
{customVersions.map((url, i) => ( |
||||||
|
<Dropdown.Item |
||||||
|
key={`custom-${i}`} |
||||||
|
data-id={`dropdown-item-${url}`} |
||||||
|
onClick={() => handleLoadVersion(url)} |
||||||
|
> |
||||||
|
<div className='d-flex w-100 justify-content-between'> |
||||||
|
{selectedVersion === url ? <span className='fas fa-check text-success mr-2'></span> : null} |
||||||
|
<div style={{ flexGrow: 1, overflow: 'hidden' }}> |
||||||
|
<div className="text-truncate"> |
||||||
|
custom: {url} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Dropdown.Item> |
||||||
|
))} |
||||||
|
{allversions.map((build, i) => { |
||||||
|
if (onlyDownloaded && !build.isDownloaded) return null |
||||||
|
return _shouldBeAdded(build.longVersion) ? ( |
||||||
|
<Dropdown.Item |
||||||
|
key={`soljson-${i}`} |
||||||
|
data-id={`dropdown-item-${build.path}`} |
||||||
|
onClick={() => handleLoadVersion(build.path)} |
||||||
|
> |
||||||
|
<div className='d-flex w-100 justify-content-between'> |
||||||
|
{selectedVersion === build.path ? <span className='fas fa-check text-success mr-2'></span> : null} |
||||||
|
<div style={{ flexGrow: 1, overflow: 'hidden' }}> |
||||||
|
<div className="text-truncate"> |
||||||
|
{build.longVersion} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{build.isDownloaded ? <div className='fas fa-arrow-circle-down text-success ml-auto'></div> : <div className='far fa-arrow-circle-down'></div>} |
||||||
|
</div> |
||||||
|
</Dropdown.Item> |
||||||
|
) : null |
||||||
|
})} |
||||||
|
</Dropdown.Menu> |
||||||
|
</Dropdown> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
import React, { useEffect, useState, useRef, useReducer, useContext, Ref } from 'react' |
||||||
|
export const CompilerMenu = React.forwardRef( |
||||||
|
( |
||||||
|
{ |
||||||
|
children, |
||||||
|
style, |
||||||
|
'data-id': dataId, |
||||||
|
className, |
||||||
|
'aria-labelledby': labeledBy |
||||||
|
}: { |
||||||
|
'children': React.ReactNode |
||||||
|
'style'?: React.CSSProperties |
||||||
|
'data-id'?: string |
||||||
|
'className': string |
||||||
|
'aria-labelledby'?: string |
||||||
|
}, |
||||||
|
ref: Ref<HTMLDivElement> |
||||||
|
) => { |
||||||
|
const height = window.innerHeight * 0.6 |
||||||
|
return ( |
||||||
|
<div ref={ref} style={style} className={className} aria-labelledby={labeledBy} data-id={dataId}> |
||||||
|
<ul className="list-unstyled mb-0" style={{maxHeight: height + 'px',overflowY:'auto'}}> |
||||||
|
{children} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
export const CompilerMenuToggle = React.forwardRef( |
||||||
|
( |
||||||
|
{ |
||||||
|
children, |
||||||
|
onClick, |
||||||
|
icon, |
||||||
|
className = '' |
||||||
|
}: { |
||||||
|
children: React.ReactNode |
||||||
|
onClick: (e) => void |
||||||
|
icon: string |
||||||
|
className: string |
||||||
|
}, |
||||||
|
ref: Ref<HTMLButtonElement> |
||||||
|
) => ( |
||||||
|
<button |
||||||
|
ref={ref} |
||||||
|
onClick={(e) => { |
||||||
|
e.preventDefault() |
||||||
|
onClick(e) |
||||||
|
}} |
||||||
|
className={className.replace('dropdown-toggle', '')} |
||||||
|
> |
||||||
|
<div className="d-flex"> |
||||||
|
{children} |
||||||
|
{icon && ( |
||||||
|
<div className="pr-1"> |
||||||
|
<i className={`${icon} pr-1`}></i> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div> |
||||||
|
<i className="fad fa-sort-circle"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</button> |
||||||
|
) |
||||||
|
) |
||||||
Loading…
Reference in new issue