52 lines
1.9 KiB
JavaScript
52 lines
1.9 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';
|
|
|
|
export default CSSModules((props) => {
|
|
let inputControl = null;
|
|
let mountWidth = '70%';
|
|
if (props.platform === 'win32') {
|
|
inputControl = <DropDown disabled={!props.allowMount || props.mounted}
|
|
items={props.items}
|
|
selected={props.items.indexOf(props.location)}
|
|
changed={props.changed}/>;
|
|
mountWidth = '18%';
|
|
} else {
|
|
inputControl = <input disabled={!props.allowMount || props.mounted}
|
|
type={'text'}
|
|
value={props.location}
|
|
onChange={props.changed}/>;
|
|
}
|
|
|
|
let actionDisplay = null;
|
|
if (props.allowMount) {
|
|
actionDisplay = <Button buttonStyles={{width: '100%'}}
|
|
clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}>{props.mounted ? 'Unmount' : 'Mount'}</Button>;
|
|
} else {
|
|
actionDisplay = <Loader color={'var(--heading_text_color)'}
|
|
height='24px'
|
|
width='24px'
|
|
type='Circles'/>;
|
|
}
|
|
return (
|
|
<div styleName='MountItem'>
|
|
<h2>{props.title}</h2>
|
|
<table width='100%' cellPadding='2'>
|
|
<tbody>
|
|
<tr>
|
|
<td width={mountWidth} height='30px'>{inputControl}</td>
|
|
<td width='25%' align='center' valign='middle'>
|
|
{actionDisplay}
|
|
</td>
|
|
<td>
|
|
<input type='checkbox' checked={props.autoMount} onChange={props.autoMountChanged}/>Auto-mount
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}, styles, {allowMultiple: true}); |