110 lines
3.4 KiB
JavaScript
110 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import CSSModules from 'react-css-modules';
|
|
import styles from './MountItem.css';
|
|
import DropDown from '../UI/DropDown/DropDown';
|
|
import Button from '../UI/Button/Button';
|
|
import Loader from 'react-loader-spinner';
|
|
import Text from '../UI/Text/Text';
|
|
import Grid from '../UI/Grid/Grid';
|
|
import configureImage from '../../assets/images/configure.png';
|
|
import RootElem from '../../hoc/RootElem/RootElem';
|
|
|
|
export default CSSModules((props) => {
|
|
let configButton = null;
|
|
let secondRow = 6;
|
|
if (props.allowConfig) {
|
|
configButton = (
|
|
<RootElem colSpan={4}
|
|
rowSpan={6}>
|
|
<img alt=''
|
|
height={'16px'}
|
|
onClick={props.disabled ? (e)=>{e.preventDefault();} : props.configClicked}
|
|
src={configureImage}
|
|
style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
|
|
width={'16px'}/>
|
|
</RootElem>
|
|
);
|
|
}
|
|
|
|
let inputColumnSpan;
|
|
let inputControl = null;
|
|
if (props.platform === 'win32') {
|
|
inputColumnSpan = 20;
|
|
inputControl = <DropDown changed={props.changed}
|
|
colSpan={inputColumnSpan}
|
|
disabled={!props.allowMount || props.mounted || props.disabled}
|
|
items={props.items}
|
|
row={secondRow}
|
|
rowSpan={7}
|
|
selected={props.items.indexOf(props.location)}/>;
|
|
|
|
} else {
|
|
inputColumnSpan = 50;
|
|
inputControl = (
|
|
<RootElem colSpan={inputColumnSpan}
|
|
row={secondRow}
|
|
rowSpan={7}>
|
|
<input disabled={!props.allowMount || props.mounted || props.disabled}
|
|
onChange={props.changed}
|
|
styleName={'Input'}
|
|
type={'text'}
|
|
value={props.location}/>
|
|
</RootElem>);
|
|
}
|
|
|
|
const buttonDisplay = props.allowMount || props.disabled ?
|
|
(props.mounted ? 'Unmount' : 'Mount') :
|
|
<Loader color={'var(--heading_text_color)'}
|
|
height='19px'
|
|
type='Circles'
|
|
width='19px'/>;
|
|
|
|
const actionsDisplay = (
|
|
<Button clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}
|
|
col={inputColumnSpan + 2}
|
|
colSpan={21}
|
|
disabled={!props.allowMount || props.disabled}
|
|
row={secondRow}
|
|
rowSpan={7}>
|
|
{buttonDisplay}
|
|
</Button>);
|
|
|
|
const autoMountControl = (
|
|
<RootElem col={inputColumnSpan + 24}
|
|
colSpan={28}
|
|
row={secondRow}
|
|
rowSpan={7}>
|
|
<input checked={props.autoMount}
|
|
disabled={props.disabled}
|
|
onChange={props.autoMountChanged}
|
|
type='checkbox'/>Auto-mount
|
|
</RootElem>
|
|
);
|
|
|
|
const autoRestartControl = (
|
|
<RootElem col={inputColumnSpan + 24 + 28}
|
|
colSpan={24}
|
|
row={secondRow}
|
|
rowSpan={7}>
|
|
<input checked={props.autoRestart}
|
|
disabled={props.disabled}
|
|
onChange={props.autoRestartChanged}
|
|
type='checkbox'/>Restart
|
|
</RootElem>
|
|
);
|
|
|
|
return (
|
|
<Grid>
|
|
{configButton}
|
|
<Text
|
|
col={configButton ? 6 : 0}
|
|
rowSpan={5}
|
|
text={props.title}
|
|
type={'Heading1'}/>
|
|
{inputControl}
|
|
{actionsDisplay}
|
|
{autoMountControl}
|
|
{autoRestartControl}
|
|
</Grid>
|
|
);
|
|
}, styles, {allowMultiple: true}); |