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