Prettier support
This commit is contained in:
@@ -1,180 +1,227 @@
|
||||
import React from 'react';
|
||||
import './PinnedManager.css';
|
||||
import {connect} from 'react-redux';
|
||||
import { connect } from 'react-redux';
|
||||
import IPCContainer from '../IPCContainer/IPCContainer';
|
||||
import {notifyApplicationBusy} from '../../redux/actions/common_actions';
|
||||
import {notifyError, notifyInfo} from '../../redux/actions/error_actions';
|
||||
import { notifyApplicationBusy } from '../../redux/actions/common_actions';
|
||||
import { notifyError, notifyInfo } from '../../redux/actions/error_actions';
|
||||
import Box from '../../components/UI/Box/Box';
|
||||
import {displayPinnedManager} from '../../redux/actions/pinned_manager_actions';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faFolder} from '@fortawesome/free-solid-svg-icons';
|
||||
import { displayPinnedManager } from '../../redux/actions/pinned_manager_actions';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faFolder } from '@fortawesome/free-solid-svg-icons';
|
||||
import Button from '../../components/UI/Button/Button';
|
||||
import CheckBox from '../../components/UI/CheckBox/CheckBox';
|
||||
|
||||
const Constants = require('../../constants');
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
DisplayConfiguration: state.mounts.DisplayConfiguration,
|
||||
DisplayRemoteConfiguration: state.mounts.DisplayRemoteConfiguration,
|
||||
DisplayS3Configuration: state.mounts.DisplayS3Configuration,
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
displayPinnedManager: display => dispatch(displayPinnedManager(display)),
|
||||
notifyApplicationBusy: busy => dispatch(notifyApplicationBusy(busy, true)),
|
||||
displayPinnedManager: (display) => dispatch(displayPinnedManager(display)),
|
||||
notifyApplicationBusy: (busy) =>
|
||||
dispatch(notifyApplicationBusy(busy, true)),
|
||||
notifyError: (msg, cb) => dispatch(notifyError(msg, false, cb)),
|
||||
notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCContainer {
|
||||
state = {
|
||||
active_directory: '/',
|
||||
items: [],
|
||||
previous: [],
|
||||
}
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(
|
||||
class extends IPCContainer {
|
||||
state = {
|
||||
active_directory: '/',
|
||||
items: [],
|
||||
previous: [],
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.setRequestHandler(Constants.IPC_Get_Directory_Items_Reply, this.onGetDirectoryItemsReply);
|
||||
this.grabDirectoryItems();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
super.componentWillUnmount();
|
||||
}
|
||||
|
||||
grabDirectoryItems = () => {
|
||||
this.sendRequest(Constants.IPC_Get_Directory_Items, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: this.state.active_directory,
|
||||
});
|
||||
}
|
||||
|
||||
onGetDirectoryItemsReply = (_, {data}) => {
|
||||
if (data.Success) {
|
||||
const items = data.Items
|
||||
.filter(i => i.path !== '.' && (this.state.active_directory !== '/' || (i.path.substr(0, 1) !== '.')))
|
||||
.map(i => {
|
||||
return {
|
||||
...i,
|
||||
name: i.path === '..' ? i.path : i.path.substr(i.path.lastIndexOf('/') + 1),
|
||||
meta: {
|
||||
...i.meta,
|
||||
pinned: i.meta.pinned === '1',
|
||||
}
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
items,
|
||||
});
|
||||
} else {
|
||||
this.props.notifyError(data.Error, () => {
|
||||
this.props.displayPinnedManager(false);
|
||||
});
|
||||
componentDidMount() {
|
||||
this.setRequestHandler(
|
||||
Constants.IPC_Get_Directory_Items_Reply,
|
||||
this.onGetDirectoryItemsReply
|
||||
);
|
||||
this.grabDirectoryItems();
|
||||
}
|
||||
}
|
||||
|
||||
createDirectory = (name, path, idx, total, item_idx) => {
|
||||
const style = {}
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '4px';
|
||||
componentWillUnmount() {
|
||||
super.componentWillUnmount();
|
||||
}
|
||||
return (
|
||||
<div key={'dir_' + idx} style={{...style}}>
|
||||
<Button buttonStyles={{textAlign: 'left'}}
|
||||
clicked={() => {
|
||||
const previous = [...this.state.previous];
|
||||
if (path === '..') {
|
||||
path = previous.pop();
|
||||
} else {
|
||||
previous.push(this.state.active_directory);
|
||||
}
|
||||
this.setState({
|
||||
items: [],
|
||||
active_directory: path,
|
||||
previous,
|
||||
}, () => {
|
||||
this.grabDirectoryItems();
|
||||
});
|
||||
}}>
|
||||
<FontAwesomeIcon icon={faFolder}
|
||||
fixedWidth
|
||||
color={'var(--heading_text_color)'}
|
||||
style={{padding: 0, margin: 0}}/>
|
||||
{name}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
createFile = (name, path, pinned, idx, total, item_idx) => {
|
||||
const style = {textAlign: 'left'}
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '2px';
|
||||
}
|
||||
return (
|
||||
<div key={'file_' + idx} style={{...style}}>
|
||||
<CheckBox checked={pinned}
|
||||
changed={() => {
|
||||
const items = JSON.parse(JSON.stringify(this.state.items));
|
||||
const pinned = items[item_idx].meta.pinned = !items[item_idx].meta.pinned;
|
||||
this.setState({
|
||||
items
|
||||
}, () => {
|
||||
this.sendSyncRequest(Constants.IPC_Set_Pinned, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: path,
|
||||
Pinned: pinned,
|
||||
});
|
||||
});
|
||||
}}
|
||||
label={name}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
grabDirectoryItems = () => {
|
||||
this.sendRequest(Constants.IPC_Get_Directory_Items, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: this.state.active_directory,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
let idx = 0;
|
||||
return (
|
||||
<Box dxDark dxStyle={{
|
||||
height: 'calc(100vh - (var(--default_spacing) * 4)',
|
||||
padding: 'var(--default_spacing)',
|
||||
width: 'calc(100vw - (var(--default_spacing) * 4)'
|
||||
}}>
|
||||
<div className={'PinnedManager'}>
|
||||
<div className={'PinnedManagerHeading'}>
|
||||
<div className={'PinnedManagerClose'}>
|
||||
<a href={'#'}
|
||||
onClick={() => this.props.displayPinnedManager(false)}
|
||||
style={{cursor: 'pointer', flex: '0'}}>X</a>
|
||||
</div>
|
||||
<h1 style={{width: '100%', textAlign: 'center'}}>{'Pinned File Manager'}</h1>
|
||||
<div className={'PinnedManagerActiveDirectory'}>
|
||||
<b> {this.state.active_directory}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'PinnedManagerItemsOwner'}>
|
||||
<div className={'PinnedManagerItems'}>
|
||||
{
|
||||
this.state.items.map((i, k) => {
|
||||
return i.directory ?
|
||||
this.createDirectory(i.name, i.path, idx++, this.state.items.length, k) :
|
||||
this.createFile(i.name, i.path, i.meta.pinned, idx++, this.state.items.length, k);
|
||||
})
|
||||
onGetDirectoryItemsReply = (_, { data }) => {
|
||||
if (data.Success) {
|
||||
const items = data.Items.filter(
|
||||
(i) =>
|
||||
i.path !== '.' &&
|
||||
(this.state.active_directory !== '/' || i.path.substr(0, 1) !== '.')
|
||||
).map((i) => {
|
||||
return {
|
||||
...i,
|
||||
name:
|
||||
i.path === '..'
|
||||
? i.path
|
||||
: i.path.substr(i.path.lastIndexOf('/') + 1),
|
||||
meta: {
|
||||
...i.meta,
|
||||
pinned: i.meta.pinned === '1',
|
||||
},
|
||||
};
|
||||
});
|
||||
this.setState({
|
||||
items,
|
||||
});
|
||||
} else {
|
||||
this.props.notifyError(data.Error, () => {
|
||||
this.props.displayPinnedManager(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
createDirectory = (name, path, idx, total, item_idx) => {
|
||||
const style = {};
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '4px';
|
||||
}
|
||||
return (
|
||||
<div key={'dir_' + idx} style={{ ...style }}>
|
||||
<Button
|
||||
buttonStyles={{ textAlign: 'left' }}
|
||||
clicked={() => {
|
||||
const previous = [...this.state.previous];
|
||||
if (path === '..') {
|
||||
path = previous.pop();
|
||||
} else {
|
||||
previous.push(this.state.active_directory);
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
items: [],
|
||||
active_directory: path,
|
||||
previous,
|
||||
},
|
||||
() => {
|
||||
this.grabDirectoryItems();
|
||||
}
|
||||
);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faFolder}
|
||||
fixedWidth
|
||||
color={'var(--heading_text_color)'}
|
||||
style={{ padding: 0, margin: 0 }}
|
||||
/>
|
||||
{name}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
createFile = (name, path, pinned, idx, total, item_idx) => {
|
||||
const style = { textAlign: 'left' };
|
||||
if (item_idx + 1 !== total) {
|
||||
style.marginBottom = '2px';
|
||||
}
|
||||
return (
|
||||
<div key={'file_' + idx} style={{ ...style }}>
|
||||
<CheckBox
|
||||
checked={pinned}
|
||||
changed={() => {
|
||||
const items = JSON.parse(JSON.stringify(this.state.items));
|
||||
const pinned = (items[item_idx].meta.pinned = !items[item_idx]
|
||||
.meta.pinned);
|
||||
this.setState(
|
||||
{
|
||||
items,
|
||||
},
|
||||
() => {
|
||||
this.sendSyncRequest(Constants.IPC_Set_Pinned, {
|
||||
Provider: this.props.DisplayConfiguration,
|
||||
Remote: this.props.DisplayRemoteConfiguration,
|
||||
S3: this.props.DisplayS3Configuration,
|
||||
Version: this.props.version,
|
||||
Path: path,
|
||||
Pinned: pinned,
|
||||
});
|
||||
}
|
||||
);
|
||||
}}
|
||||
label={name}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
let idx = 0;
|
||||
return (
|
||||
<Box
|
||||
dxDark
|
||||
dxStyle={{
|
||||
height: 'calc(100vh - (var(--default_spacing) * 4)',
|
||||
padding: 'var(--default_spacing)',
|
||||
width: 'calc(100vw - (var(--default_spacing) * 4)',
|
||||
}}
|
||||
>
|
||||
<div className={'PinnedManager'}>
|
||||
<div className={'PinnedManagerHeading'}>
|
||||
<div className={'PinnedManagerClose'}>
|
||||
<a
|
||||
href={'#'}
|
||||
onClick={() => this.props.displayPinnedManager(false)}
|
||||
style={{ cursor: 'pointer', flex: '0' }}
|
||||
>
|
||||
X
|
||||
</a>
|
||||
</div>
|
||||
<h1 style={{ width: '100%', textAlign: 'center' }}>
|
||||
{'Pinned File Manager'}
|
||||
</h1>
|
||||
<div className={'PinnedManagerActiveDirectory'}>
|
||||
<b> {this.state.active_directory}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'PinnedManagerItemsOwner'}>
|
||||
<div className={'PinnedManagerItems'}>
|
||||
{this.state.items.map((i, k) => {
|
||||
return i.directory
|
||||
? this.createDirectory(
|
||||
i.name,
|
||||
i.path,
|
||||
idx++,
|
||||
this.state.items.length,
|
||||
k
|
||||
)
|
||||
: this.createFile(
|
||||
i.name,
|
||||
i.path,
|
||||
i.meta.pinned,
|
||||
idx++,
|
||||
this.state.items.length,
|
||||
k
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
)
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user