Refactoring
This commit is contained in:
@@ -1,21 +0,0 @@
|
||||
.ConfigurationItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input.ConfigurationItemInput {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
border-radius: var(--border_radius);
|
||||
background: rgba(160, 160, 160, 0.1);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
color: var(--text_color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ConfigurationInfo {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
import React from 'react';
|
||||
import './ConfigurationItem.css';
|
||||
import CheckBox from '../UI/CheckBox/CheckBox';
|
||||
import {connect} from 'react-redux';
|
||||
import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {notifyInfo} from '../../redux/actions/error_actions';
|
||||
import settings from '../../assets/settings';
|
||||
import DropDown from '../UI/DropDown/DropDown';
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg))
|
||||
}
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(props => {
|
||||
const handleChanged = (e) => {
|
||||
const target = e.target;
|
||||
if (target.type === 'checkbox') {
|
||||
target.value = e.target.checked ? "true" : "false";
|
||||
}
|
||||
props.changed(target);
|
||||
};
|
||||
|
||||
let infoDisplay;
|
||||
if (settings[props.grouping] && settings[props.grouping][props.label]) {
|
||||
const displayInfo = () => {
|
||||
const description = settings[props.grouping][props.label];
|
||||
props.notifyInfo(props.label, description);
|
||||
};
|
||||
|
||||
infoDisplay = <a href={void(0)}
|
||||
className={'ConfigurationInfo'}
|
||||
onClick={()=>{displayInfo(); return false;}}><FontAwesomeIcon icon={faInfoCircle}/></a>;
|
||||
}
|
||||
|
||||
let data;
|
||||
switch (props.template.type) {
|
||||
case "bool":
|
||||
data = <CheckBox changed={handleChanged}
|
||||
checked={props.value}
|
||||
disabled={props.readOnly}/>;
|
||||
break;
|
||||
|
||||
case "double":
|
||||
data = <input min={0.0}
|
||||
disabled={props.readOnly}
|
||||
onChange={e=>handleChanged(e)}
|
||||
step={"0.01"}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'number'}
|
||||
value={parseFloat(props.value).toFixed(2)}/>;
|
||||
break;
|
||||
|
||||
case "list":
|
||||
data = <DropDown alt
|
||||
auto
|
||||
changed={handleChanged}
|
||||
disabled={props.readOnly}
|
||||
items={props.items}
|
||||
selected={props.value} />;
|
||||
break;
|
||||
|
||||
case "string":
|
||||
data = <input onChange={e=>handleChanged(e)}
|
||||
className={'ConfigurationItemInput'}
|
||||
disabled={props.readOnly}
|
||||
type={'text'}
|
||||
value={props.value}/>;
|
||||
break;
|
||||
|
||||
case "uint8":
|
||||
data = <input max={255}
|
||||
min={0}
|
||||
disabled={props.readOnly}
|
||||
onChange={e=>handleChanged(e)}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'number'}
|
||||
value={props.value}/>;
|
||||
break;
|
||||
|
||||
case "uint16":
|
||||
data = <input max={65535}
|
||||
min={0}
|
||||
disabled={props.readOnly}
|
||||
onChange={e=>handleChanged(e)}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'number'}
|
||||
value={props.value}/>;
|
||||
break;
|
||||
|
||||
case "uint32":
|
||||
data = <input max={4294967295}
|
||||
min={0}
|
||||
disabled={props.readOnly}
|
||||
onChange={e=>handleChanged(e)}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'number'}
|
||||
value={props.value}/>;
|
||||
break;
|
||||
|
||||
case "uint64":
|
||||
data = <input max={18446744073709551615}
|
||||
min={0}
|
||||
disabled={props.readOnly}
|
||||
onChange={e=>handleChanged(e)}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'number'}
|
||||
value={props.value}/>;
|
||||
break;
|
||||
|
||||
default:
|
||||
data = <div>{props.value}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'ConfigurationItem'}>
|
||||
<table cellPadding='2'
|
||||
width='100%'>
|
||||
<tbody>
|
||||
<tr>
|
||||
{infoDisplay ?
|
||||
<td width='100%'>{infoDisplay} {props.label}</td> :
|
||||
<td width='100%'>{props.label}</td>}
|
||||
<td>{data}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,19 +0,0 @@
|
||||
.MountItem {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 56px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
input.MountItemInput {
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
border-radius: var(--border_radius);
|
||||
background: var(--control_background);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
color: var(--text_color);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,184 +0,0 @@
|
||||
import React from 'react';
|
||||
import './MountItem.css';
|
||||
import {connect} from 'react-redux';
|
||||
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 '../UI/RootElem/RootElem';
|
||||
import {displayConfiguration, removeRemoteMount, setProviderState} from '../../redux/actions/mount_actions';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import { faTrashAlt} from '@fortawesome/free-solid-svg-icons';
|
||||
import CheckBox from '../UI/CheckBox/CheckBox';
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
MState: state.mounts.MountState[ownProps.provider],
|
||||
Platform: state.common.Platform,
|
||||
PState: state.mounts.ProviderState[ownProps.provider]
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
displayConfiguration: (provider, remote) => dispatch(displayConfiguration(provider, remote)),
|
||||
removeRemoteMount: provider => dispatch(removeRemoteMount(provider)),
|
||||
setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
|
||||
}
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(props => {
|
||||
const handleAutoMountChanged = e => {
|
||||
const state = {
|
||||
...props.PState,
|
||||
AutoMount: e.target.checked,
|
||||
};
|
||||
props.setProviderState(props.provider, state);
|
||||
};
|
||||
|
||||
const handleAutoRestartChanged = e => {
|
||||
const state = {
|
||||
...props.PState,
|
||||
AutoRestart: e.target.checked,
|
||||
};
|
||||
props.setProviderState(props.provider, state);
|
||||
};
|
||||
|
||||
let configButton = null;
|
||||
let secondRow = 6;
|
||||
if (props.allowConfig) {
|
||||
const pointer = {cursor: props.MState.AllowMount ? 'pointer' : 'no-drop'};
|
||||
configButton = (
|
||||
<RootElem colSpan={4}
|
||||
rowSpan={6}>
|
||||
<img alt=''
|
||||
height={'16px'}
|
||||
onClick={props.MState.AllowMount ? ()=>props.displayConfiguration(props.provider, props.remote) : e=>{e.preventDefault();}}
|
||||
src={configureImage}
|
||||
style={{padding: 0, border: 0, margin: 0, ...pointer}}
|
||||
width={'16px'}/>
|
||||
</RootElem>
|
||||
);
|
||||
}
|
||||
|
||||
let inputColumnSpan;
|
||||
let inputControls = null;
|
||||
if (props.Platform === 'win32') {
|
||||
inputColumnSpan = 20;
|
||||
const index = props.MState.DriveLetters.indexOf(props.PState.MountLocation);
|
||||
inputControls = <DropDown changed={props.changed}
|
||||
colSpan={inputColumnSpan}
|
||||
disabled={!props.MState.AllowMount || props.MState.Mounted}
|
||||
items={props.MState.DriveLetters}
|
||||
row={secondRow}
|
||||
rowSpan={7}
|
||||
selected={index >= 0 ? props.PState.MountLocation : ''}/>;
|
||||
|
||||
} else {
|
||||
inputColumnSpan = 64;
|
||||
inputControls = [];
|
||||
let key = 0;
|
||||
inputControls.push((
|
||||
<RootElem colSpan={inputColumnSpan - 8}
|
||||
key={'i' + key++}
|
||||
row={secondRow}
|
||||
rowSpan={7}>
|
||||
<input disabled={!props.MState.AllowMount || props.MState.Mounted}
|
||||
maxLength={4096}
|
||||
onChange={props.changed}
|
||||
size={4096}
|
||||
className={'MountItemInput'}
|
||||
type={'text'}
|
||||
value={props.PState.MountLocation}/>
|
||||
</RootElem>
|
||||
));
|
||||
inputControls.push((
|
||||
<Button clicked={()=>props.browseClicked(props.provider, props.PState.MountLocation)}
|
||||
col={inputColumnSpan - 7}
|
||||
colSpan={7}
|
||||
disabled={props.MState.Mounted || !props.MState.AllowMount}
|
||||
key={'b' + key++}
|
||||
row={secondRow}
|
||||
rowSpan={7}>...</Button>
|
||||
));
|
||||
}
|
||||
|
||||
const buttonDisplay = props.MState.AllowMount ?
|
||||
(props.MState.Mounted ? 'Unmount' : 'Mount') :
|
||||
<Loader color={'var(--heading_text_color)'}
|
||||
height={19}
|
||||
type='Circles'
|
||||
width={19}/>;
|
||||
|
||||
const actionsDisplay = (
|
||||
<Button clicked={()=>props.clicked(props.provider, props.remote, !props.MState.Mounted, props.PState.MountLocation)}
|
||||
col={inputColumnSpan + 2}
|
||||
colSpan={21}
|
||||
disabled={!props.MState.AllowMount}
|
||||
row={secondRow}
|
||||
rowSpan={7}>
|
||||
{buttonDisplay}
|
||||
</Button>);
|
||||
|
||||
const autoMountControl = (
|
||||
<RootElem col={inputColumnSpan + 24}
|
||||
colSpan={28}
|
||||
row={secondRow}
|
||||
rowSpan={7}>
|
||||
<CheckBox changed={handleAutoMountChanged}
|
||||
checked={props.PState.AutoMount} label={'Auto-mount'}/>
|
||||
</RootElem>
|
||||
);
|
||||
|
||||
const autoRestartControl = (
|
||||
<RootElem col={inputColumnSpan + 24 + 28}
|
||||
colSpan={24}
|
||||
row={secondRow}
|
||||
rowSpan={7}>
|
||||
<CheckBox changed={handleAutoRestartChanged}
|
||||
checked={props.PState.AutoRestart}
|
||||
label={'Restart'}/>
|
||||
</RootElem>
|
||||
);
|
||||
|
||||
let removeControl;
|
||||
if (props.remote) {
|
||||
const removeDisabled = !props.MState.AllowMount || props.MState.Mounted;
|
||||
const removeStyle = {
|
||||
cursor: removeDisabled ? 'no-drop' : 'pointer'
|
||||
};
|
||||
const handleRemoveMount = () => {
|
||||
if (!removeDisabled) {
|
||||
props.removeRemoteMount(props.provider);
|
||||
}
|
||||
};
|
||||
removeControl = (
|
||||
<a col={dimensions=>dimensions.columns - 6}
|
||||
href={void(0)}
|
||||
onClick={handleRemoveMount}
|
||||
row={secondRow + 3}
|
||||
style={removeStyle}>
|
||||
<FontAwesomeIcon icon={faTrashAlt}/>
|
||||
</a>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'MountItem'}>
|
||||
<Grid noScroll>
|
||||
{configButton}
|
||||
<Text
|
||||
col={configButton ? 6 : 0}
|
||||
rowSpan={5}
|
||||
text={props.remote ? props.provider.substr(6) : props.provider}
|
||||
type={'Heading1'}/>
|
||||
{inputControls}
|
||||
{actionsDisplay}
|
||||
{autoMountControl}
|
||||
{autoRestartControl}
|
||||
{removeControl}
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user