}
251 | */
252 | export const getActionsByMultipleFiles = (files, acts = []) => {
253 | files.forEach(file => {
254 | const fileActs = getActionsByFile(file);
255 | // intersects previous actions with the following to leave only coincidences
256 | acts = acts.length ? acts.filter(value => -1 !== fileActs.indexOf(value)) : fileActs;
257 | });
258 |
259 | if (files.length > 1) {
260 | acts.splice(acts.indexOf('open'), acts.indexOf('open') >= 0);
261 | acts.splice(acts.indexOf('edit'), acts.indexOf('edit') >= 0);
262 | acts.splice(acts.indexOf('compress'), acts.indexOf('compress') >= 0);
263 | acts.splice(acts.indexOf('download'), acts.indexOf('download') >= 0);
264 | acts.splice(acts.indexOf('rename'), acts.indexOf('rename') >= 0);
265 | acts.push('compress');
266 | }
267 | return acts;
268 | }
269 |
270 | /**
271 | * Calculate file size by bytes in human readable format
272 | * @param {Number} bytes
273 | * @returns {String}
274 | */
275 | export const getHumanFileSize = (bytes) => {
276 | const e = (Math.log(bytes) / Math.log(1e3)) | 0;
277 | return +(bytes / Math.pow(1e3, e)).toFixed(2) + ' ' + ('kMGTPEZY'[e - 1] || '') + 'B';
278 | };
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import FileList from './Components/FileList/FileList.jsx';
3 | import Navbar from './Components/Navbar/Navbar.jsx';
4 | import ContextMenu from './Components/ContextMenu/ContextMenu.jsx';
5 | import Dialogs from './Components/Dialogs/Dialogs.jsx';
6 |
7 | import { MuiThemeProvider as MaterialUI, createMuiTheme } from '@material-ui/core/styles';
8 | import blue from '@material-ui/core/colors/blue';
9 | import { connect } from 'react-redux';
10 | import { setContextMenuVisible, refreshFileList } from './Actions/Actions.js';
11 | import DynamicSnackbar from './Components/Notification/DynamicSnackbar.jsx';
12 |
13 | const theme = createMuiTheme({
14 | palette: {
15 | primary: blue,
16 | },
17 | typography: {
18 | useNextVariants: true,
19 | }
20 | });
21 |
22 | class App extends Component {
23 |
24 | componentDidMount() {
25 | this.props.init();
26 | };
27 |
28 | render() {
29 | return (
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | );
40 | }
41 | }
42 |
43 | const mapStateToProps = (state) => {
44 | return {
45 | };
46 | };
47 |
48 | const mapDispatchToProps = (dispatch) => {
49 | return {
50 | init: () => {
51 | dispatch(refreshFileList());
52 | },
53 |
54 | handleHideContextMenu: (event) => {
55 | if (! (event.target.tagName === 'INPUT' || /label/i.test(event.target.className))) {
56 | event.preventDefault();
57 | }
58 | dispatch(setContextMenuVisible(false));
59 | }
60 | };
61 | };
62 |
63 | export default connect(mapStateToProps, mapDispatchToProps)(App);
64 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/src/Components/Breadcrumb/Breadcrumb.css:
--------------------------------------------------------------------------------
1 | .Breadcrumb {
2 | background: gray;
3 | font-size: 13px;
4 | color: #fff;
5 | padding: 10px 25px;
6 | }
7 |
8 | .Breadcrumb > span {
9 | font-weight: bold;
10 | min-width: 20px;
11 | display: inline-block;
12 | text-align: center;
13 | cursor: pointer;
14 | }
15 |
16 | .Breadcrumb > span:hover {
17 | color: #eee;
18 | }
--------------------------------------------------------------------------------
/src/Components/Breadcrumb/Breadcrumb.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import './Breadcrumb.css';
4 | import BreadcrumbText from './BreadcrumbText.jsx';
5 |
6 | class Breadcrumb extends Component {
7 | render() {
8 | return
9 |
10 |
11 | }
12 | }
13 |
14 | const mapDispatchToProps = (dispatch) => {
15 | return {
16 | };
17 | };
18 |
19 | const mapStateToProps = (state) => {
20 | return {
21 | };
22 | };
23 | export default connect(mapStateToProps, mapDispatchToProps)(Breadcrumb);
24 |
--------------------------------------------------------------------------------
/src/Components/Breadcrumb/BreadcrumbText.css:
--------------------------------------------------------------------------------
1 | .BreadcrumbText {
2 | }
3 |
4 | .BreadcrumbText span {
5 | cursor: pointer;
6 | text-overflow: ellipsis;
7 | }
8 |
9 | .BreadcrumbText span:hover {
10 | color: #efefef;
11 | }
--------------------------------------------------------------------------------
/src/Components/Breadcrumb/BreadcrumbText.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
5 | import Button from '@material-ui/core/Button';
6 | import './BreadcrumbText.css';
7 |
8 | const styles = theme => ({
9 | lastPath: {
10 | display: 'block',
11 | [theme.breakpoints.up('sm')]: {
12 | display: 'none'
13 | }
14 | },
15 | paths: {
16 | display: 'none',
17 | [theme.breakpoints.up('sm')]: {
18 | display: 'block',
19 | }
20 | }
21 | });
22 |
23 | class BreadcrumbText extends Component {
24 |
25 | render() {
26 | const { classes, handleClickPath, path, rootTitle, handleGoBack, canGoBack } = this.props;
27 |
28 | const separator = >;
29 | const rootPath = handleClickPath(e, -1, path)} data-index={0}>
30 | { rootTitle } { path.length ? separator : '' }
31 | ;
32 | const lastPath = [...path].pop() || rootTitle;
33 |
34 | const directories = path.map((dir, index) => {
35 | return handleClickPath(e, index, path)}>
36 | {dir} { path.length -1 !== index ? separator : '' }
37 |
38 | });
39 |
40 | return (
41 |
42 |
43 |
46 | {lastPath}
47 |
48 |
{rootPath} {directories}
49 |
46 |
58 |
59 | );
60 | }
61 | }
62 |
63 | const mapStateToProps = (state) => {
64 | return {
65 | x: state.contextMenuPosition[0] || 0,
66 | y: state.contextMenuPosition[1] || 0,
67 | visible: !!state.contextMenuVisible,
68 | acts: getActionsByMultipleFiles(state.selectedFiles),
69 | };
70 | };
71 |
72 | const mapDispatchToProps = (dispatch) => {
73 | return {
74 | };
75 | };
76 |
77 | export default connect(mapStateToProps, mapDispatchToProps)(ContextMenu);
78 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/CopyAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import ListItemIcon from '@material-ui/core/ListItemIcon';
5 | import Typography from '@material-ui/core/Typography';
6 | import FileCopyIcon from '@material-ui/icons/FileCopy';
7 | import { initSubList, setVisibleDialogCopy } from '../../../Actions/Actions.js';
8 |
9 | function CopyAction(props) {
10 | const {handleClick, selectedFiles} = props;
11 |
12 | return (
13 |
21 | );
22 | }
23 |
24 | const mapStateToProps = (state) => {
25 | return {
26 | selectedFiles: state.selectedFiles
27 | };
28 | };
29 |
30 | const mapDispatchToProps = (dispatch, ownProps) => {
31 | return {
32 | handleClick: (event, selectedFiles) => {
33 | dispatch(initSubList());
34 | dispatch(setVisibleDialogCopy(true));
35 | }
36 | };
37 | };
38 |
39 | export default connect(mapStateToProps, mapDispatchToProps)(CopyAction);
40 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/CreateFolderAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import ListItemIcon from '@material-ui/core/ListItemIcon';
5 | import Typography from '@material-ui/core/Typography';
6 | import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
7 | import { setVisibleDialogCreateFolder } from '../../../Actions/Actions.js';
8 |
9 | function CreateFolderAction(props) {
10 | const {handleClick, handleClose} = props;
11 |
12 | const handleCloseAfter = (callback) => (event) => {
13 | callback();
14 | handleClose();
15 | };
16 |
17 | return (
18 |
26 | );
27 | }
28 |
29 | const mapStateToProps = (state) => {
30 | return {
31 | };
32 | };
33 |
34 | const mapDispatchToProps = (dispatch, ownProps) => {
35 | return {
36 | handleClick: (event) => {
37 | dispatch(setVisibleDialogCreateFolder(true));
38 | }
39 | };
40 | };
41 |
42 | export default connect(mapStateToProps, mapDispatchToProps)(CreateFolderAction);
43 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/DownloadAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import { downloadFile } from '../../../Actions/Actions.js';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import Typography from '@material-ui/core/Typography';
7 | import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
8 |
9 | function DownloadAction(props) {
10 | const {handleClick, selectedFiles} = props;
11 | return (
12 |
20 | );
21 | }
22 |
23 | const mapStateToProps = (state) => {
24 | return {
25 | selectedFiles: state.selectedFiles
26 | };
27 | };
28 |
29 | const mapDispatchToProps = (dispatch, ownProps) => {
30 | return {
31 | handleClick: (event, selectedFiles) => {
32 | dispatch(downloadFile(selectedFiles[0].name));
33 | }
34 | };
35 | };
36 |
37 | export default connect(mapStateToProps, mapDispatchToProps)(DownloadAction);
38 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/EditAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import { getFileContentForEdit } from '../../../Actions/Actions.js';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import Typography from '@material-ui/core/Typography';
7 | import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
8 |
9 | function OpenAction(props) {
10 | const {handleClick, selectedFiles} = props;
11 | return (
12 |
20 | );
21 | }
22 |
23 | const mapStateToProps = (state) => {
24 | return {
25 | selectedFiles: state.selectedFiles
26 | };
27 | };
28 |
29 | const mapDispatchToProps = (dispatch, ownProps) => {
30 | return {
31 | handleClick: (event, selectedFiles) => {
32 | dispatch(getFileContentForEdit(selectedFiles[0].name));
33 | }
34 | };
35 | };
36 |
37 | export default connect(mapStateToProps, mapDispatchToProps)(OpenAction);
38 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/MoveAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import ListItemIcon from '@material-ui/core/ListItemIcon';
5 | import Typography from '@material-ui/core/Typography';
6 | import HowToVoteIcon from '@material-ui/icons/HowToVote';
7 | import { initSubList, setVisibleDialogMove } from '../../../Actions/Actions.js';
8 |
9 | function MoveAction(props) {
10 | const {handleClick, selectedFiles} = props;
11 |
12 | return (
13 |
21 | );
22 | }
23 |
24 | const mapStateToProps = (state) => {
25 | return {
26 | selectedFiles: state.selectedFiles
27 | };
28 | };
29 |
30 | const mapDispatchToProps = (dispatch, ownProps) => {
31 | return {
32 | handleClick: (event, selectedFiles) => {
33 | dispatch(initSubList());
34 | dispatch(setVisibleDialogMove(true));
35 | }
36 | };
37 | };
38 |
39 | export default connect(mapStateToProps, mapDispatchToProps)(MoveAction);
40 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/OpenAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import { getFileContent, enterToDirectory } from '../../../Actions/Actions.js';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import Typography from '@material-ui/core/Typography';
7 | import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
8 |
9 | function OpenAction(props) {
10 | const {handleClick, selectedFiles} = props;
11 | return (
12 |
20 | );
21 | }
22 |
23 | const mapStateToProps = (state) => {
24 | return {
25 | selectedFiles: state.selectedFiles
26 | };
27 | };
28 |
29 | const mapDispatchToProps = (dispatch, ownProps) => {
30 | return {
31 | handleClick: (event, selectedFiles) => {
32 | if (selectedFiles[0].type === 'dir') {
33 | dispatch(enterToDirectory(selectedFiles[0].name));
34 | return;
35 | }
36 | dispatch(getFileContent(selectedFiles[0].name));
37 | }
38 | };
39 | };
40 |
41 | export default connect(mapStateToProps, mapDispatchToProps)(OpenAction);
42 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/RemoveAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import { removeItems } from '../../../Actions/Actions.js';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import Typography from '@material-ui/core/Typography';
7 | import DeleteIcon from '@material-ui/icons/Delete';
8 |
9 | function RemoveAction(props) {
10 | const {handleClick, selectedFiles} = props;
11 | return (
12 |
20 | );
21 | }
22 |
23 | const mapStateToProps = (state) => {
24 | return {
25 | selectedFiles: state.selectedFiles
26 | };
27 | };
28 |
29 | const mapDispatchToProps = (dispatch, ownProps) => {
30 | return {
31 | handleClick: (event, selectedFiles) => {
32 | dispatch(removeItems(selectedFiles));
33 | }
34 | };
35 | };
36 |
37 | export default connect(mapStateToProps, mapDispatchToProps)(RemoveAction);
38 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/RenameAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import ListItemIcon from '@material-ui/core/ListItemIcon';
5 | import Typography from '@material-ui/core/Typography';
6 | import WrapTextIcon from '@material-ui/icons/WrapText';
7 | import { setVisibleDialogRename } from '../../../Actions/Actions.js';
8 |
9 | function MoveAction(props) {
10 | const {handleClick, selectedFiles} = props;
11 |
12 | return (
13 |
21 | );
22 | }
23 |
24 | const mapStateToProps = (state) => {
25 | return {
26 | selectedFiles: state.selectedFiles
27 | };
28 | };
29 |
30 | const mapDispatchToProps = (dispatch, ownProps) => {
31 | return {
32 | handleClick: (event, selectedFiles) => {
33 | dispatch(setVisibleDialogRename(true));
34 | }
35 | };
36 | };
37 |
38 | export default connect(mapStateToProps, mapDispatchToProps)(MoveAction);
39 |
--------------------------------------------------------------------------------
/src/Components/ContextMenu/ContextMenuActions/UploadFileAction.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MenuItem from '@material-ui/core/MenuItem';
3 | import { connect } from 'react-redux';
4 | import ListItemIcon from '@material-ui/core/ListItemIcon';
5 | import Typography from '@material-ui/core/Typography';
6 | import CloudUploadIcon from '@material-ui/icons/CloudUpload';
7 | import { setVisibleDialogUploadFile } from '../../../Actions/Actions.js';
8 |
9 | function UploadFileAction(props) {
10 | const {handleClick, handleClose} = props;
11 |
12 | const handleCloseAfter = (callback) => (event) => {
13 | callback();
14 | handleClose();
15 | };
16 |
17 | return (
18 |
26 | );
27 | }
28 |
29 | const mapStateToProps = (state) => {
30 | return {
31 | };
32 | };
33 |
34 | const mapDispatchToProps = (dispatch, ownProps) => {
35 | return {
36 | handleClick: (event) => {
37 | dispatch(setVisibleDialogUploadFile(true));
38 | }
39 | };
40 | };
41 |
42 | export default connect(mapStateToProps, mapDispatchToProps)(UploadFileAction);
43 |
--------------------------------------------------------------------------------
/src/Components/Dialogs/Content/Content.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import Dialog from '@material-ui/core/Dialog';
4 | import DialogActions from '@material-ui/core/DialogActions';
5 | import DialogContent from '@material-ui/core/DialogContent';
6 | import DialogTitle from '@material-ui/core/DialogTitle';
7 | import { connect } from 'react-redux';
8 | import { setVisibleDialogContent } from '../../../Actions/Actions.js';
9 |
10 | class FormDialog extends Component {
11 |
12 | state = {
13 | lastBlobUrl: null,
14 | content: '...',
15 | loading: false
16 | };
17 |
18 | componentDidUpdate() {
19 | if (this.props.blobUrl !== this.state.lastBlobUrl) {
20 | this.setState({
21 | lastBlobUrl: this.props.blobUrl
22 | });
23 | this.setState({
24 | loading: true
25 | });
26 | }
27 | }
28 |
29 | render() {
30 | const { handleClose, open } = this.props;
31 | return (
32 |
33 |
44 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 |
24 | export default Dialogs;
25 |
--------------------------------------------------------------------------------
/src/Components/Dialogs/Edit/Edit.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import Dialog from '@material-ui/core/Dialog';
4 | import DialogActions from '@material-ui/core/DialogActions';
5 | import DialogContent from '@material-ui/core/DialogContent';
6 | import DialogContentText from '@material-ui/core/DialogContentText';
7 | import DialogTitle from '@material-ui/core/DialogTitle';
8 | import { connect } from 'react-redux';
9 | import { setVisibleDialogEdit } from '../../../Actions/Actions.js';
10 |
11 | class FormDialog extends Component {
12 |
13 | state = {
14 | lastBlobUrl: null,
15 | content: null,
16 | loading: false
17 | };
18 |
19 | componentDidUpdate() {
20 | if (this.props.blobUrl !== this.state.lastBlobUrl) {
21 | this.setState({
22 | lastBlobUrl: this.props.blobUrl
23 | });
24 | this.setState({
25 | loading: true
26 | });
27 |
28 | this.props.blobUrl && fetch(this.props.blobUrl).then(r => {
29 | return r.text();
30 | }).then(t => {
31 | this.setState({
32 | content: t
33 | });
34 | this.setState({
35 | loading: false
36 | });
37 | });
38 | }
39 | }
40 |
41 | render() {
42 | const { handleClose, handleSave, open } = this.props;
43 | const textAreaStyle = {
44 | width: '100%',
45 | minHeight: '300px'
46 | };
47 | const textArea = ;
48 |
49 | return (
50 |
51 |
67 |
68 | );
69 | }
70 | }
71 |
72 | const mapStateToProps = (state) => {
73 | return {
74 | open: state.visibleDialogEdit,
75 | blobUrl: state.fileContentBlobUrl
76 | };
77 | };
78 |
79 | const mapDispatchToProps = (dispatch, ownProps) => {
80 | return {
81 | handleClose: (event) => {
82 | dispatch(setVisibleDialogEdit(false));
83 | },
84 | handleOpen: (event) => {
85 | dispatch(setVisibleDialogEdit(true));
86 | },
87 | handleSave: (event) => {
88 | }
89 | };
90 | };
91 |
92 | export default connect(mapStateToProps, mapDispatchToProps)(FormDialog);
93 |
--------------------------------------------------------------------------------
/src/Components/Dialogs/Move/Move.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import Dialog from '@material-ui/core/Dialog';
4 | import DialogActions from '@material-ui/core/DialogActions';
5 | import DialogContent from '@material-ui/core/DialogContent';
6 | import DialogTitle from '@material-ui/core/DialogTitle';
7 | import { connect } from 'react-redux';
8 | import { setVisibleDialogMove, setSelectedFolderSublist, enterToPreviousDirectorySublist, moveItems } from '../../../Actions/Actions.js';
9 | import FileListSublist from '../../FileList/FileListSublist/FileListSublist.jsx';
10 | import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
11 |
12 | class FormDialog extends Component {
13 |
14 | render() {
15 | const {
16 | selectedPath, handleClose, handleSave, open,
17 | selectedFiles, canGoBack, canMove, handleGoBack
18 | } = this.props;
19 |
20 | return (
21 |
43 | );
44 | }
45 | }
46 |
47 | const mapStateToProps = (state) => {
48 | // prevent moving to same folder
49 | const canMove = state.path.join('') !== state.pathSublist.join('') + (state.selectedFolderSublist ? state.selectedFolderSublist.name : '');
50 |
51 | return {
52 | open: state.visibleDialogMove,
53 | selectedFolderSublist: state.selectedFolderSublist,
54 | selectedPath: state.selectedFolderSublist ? [...state.pathSublist, state.selectedFolderSublist.name] : [],
55 | selectedFiles: state.selectedFiles,
56 | pathSublist: state.pathSublist,
57 | canGoBack: state.pathSublist.length,
58 | canMove: state.selectedFolderSublist && canMove
59 | };
60 | };
61 |
62 | const mapDispatchToProps = (dispatch, ownProps) => {
63 | return {
64 | handleClose: (event) => {
65 | dispatch(setSelectedFolderSublist(null));
66 | dispatch(setVisibleDialogMove(false));
67 | },
68 | handleSave: (event, selectedFiles) => {
69 | dispatch(moveItems(selectedFiles));
70 | },
71 | handleGoBack: (event) => {
72 | dispatch(setSelectedFolderSublist(null));
73 | dispatch(enterToPreviousDirectorySublist());
74 | }
75 | };
76 | };
77 |
78 | export default connect(mapStateToProps, mapDispatchToProps)(FormDialog);
79 |
--------------------------------------------------------------------------------
/src/Components/Dialogs/Rename/Rename.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import TextField from '@material-ui/core/TextField';
4 | import Dialog from '@material-ui/core/Dialog';
5 | import DialogActions from '@material-ui/core/DialogActions';
6 | import DialogContent from '@material-ui/core/DialogContent';
7 | import DialogTitle from '@material-ui/core/DialogTitle';
8 | import { connect } from 'react-redux';
9 | import { renameItem, setVisibleDialogRename } from '../../../Actions/Actions.js';
10 |
11 | class FormDialog extends Component {
12 |
13 | state = {
14 | value: ''
15 | };
16 |
17 | componentWillReceiveProps (props) {
18 | this.setState({value: props.realName});
19 | }
20 |
21 | handleChange (event) {
22 | this.setState({value: event.currentTarget.form.querySelector('input').value});
23 | }
24 |
25 | handleSave (event) {
26 | this.props.handleSave(event)(this.props.realName, this.state.value);
27 | }
28 |
29 | render() {
30 | const { value } = this.state;
31 | const { handleClose, open } = this.props;
32 |
33 | return (
34 |
50 | );
51 | }
52 | }
53 |
54 | const mapStateToProps = (state) => {
55 | return {
56 | open: state.visibleDialogRename,
57 | realName: state.selectedFiles.length ? state.selectedFiles[0].name : ''
58 | };
59 | };
60 |
61 | const mapDispatchToProps = (dispatch, ownProps) => {
62 | return {
63 | handleClose: event => {
64 | dispatch(setVisibleDialogRename(false));
65 | },
66 | handleSave: event => (realName, newName) => {
67 | event.preventDefault();
68 | dispatch(renameItem(realName, newName));
69 | }
70 | };
71 | };
72 |
73 | export default connect(mapStateToProps, mapDispatchToProps)(FormDialog);
74 |
--------------------------------------------------------------------------------
/src/Components/Dialogs/UploadFile/UploadFile.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Button from '@material-ui/core/Button';
3 | import Dialog from '@material-ui/core/Dialog';
4 | import DialogActions from '@material-ui/core/DialogActions';
5 | import DialogContent from '@material-ui/core/DialogContent';
6 | import DialogTitle from '@material-ui/core/DialogTitle';
7 | import LinearProgress from '@material-ui/core/LinearProgress';
8 | import { connect } from 'react-redux';
9 | import { resetFileUploader, uploadFiles, setFileUploadList } from '../../../Actions/Actions.js';
10 | import FileUploader from '../../FileUploader/FileUploader.jsx';
11 |
12 | class FormDialog extends Component {
13 |
14 | render() {
15 | const { handleClose, handleReset, handleUpload, open, canUpload, fileUploadProgress, fileUploadList, handleSelectedFiles } = this.props;
16 |
17 | return (
18 |
37 | );
38 | }
39 | }
40 |
41 | const mapStateToProps = (state) => {
42 | return {
43 | open: state.visibleDialogUploadFile,
44 | canUpload: state.fileUploadList.length,
45 | fileUploadList: state.fileUploadList,
46 | fileUploadProgress: state.fileUploadProgress
47 | };
48 | };
49 |
50 | const mapDispatchToProps = (dispatch, ownProps) => {
51 | return {
52 | handleClose: (event) => {
53 | dispatch(resetFileUploader());
54 | },
55 | handleUpload: (event) => {
56 | event.preventDefault();
57 | const files = event.currentTarget.form.querySelector('input[type=file]').files;
58 | dispatch(uploadFiles(files));
59 | },
60 | handleSelectedFiles: (event) => {
61 | dispatch(setFileUploadList(
62 | [...event.target.files].map(f => ({name: f.name, size: f.size}))
63 | ));
64 | },
65 | handleReset: (event) => {
66 | dispatch(setFileUploadList([]));
67 | }
68 | };
69 | };
70 |
71 | export default connect(mapStateToProps, mapDispatchToProps)(FormDialog);
72 |
--------------------------------------------------------------------------------
/src/Components/File/File.css:
--------------------------------------------------------------------------------
1 | .File {
2 | cursor: pointer;
3 | float: left;
4 | display: block;
5 | width: 100%;
6 | user-select: none;
7 | }
8 |
9 | .File:hover {
10 | cursor: pointer;
11 | background: #fafafa;
12 | }
13 |
14 | .File[data-selected=true] {
15 | background-color: #e8f0fe;
16 |
17 | }
18 |
19 | .File[data-selected=true],
20 | .File[data-selected=true] > li > div > span {
21 | color: #1967d2;
22 | }
--------------------------------------------------------------------------------
/src/Components/File/File.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import {
5 | enterToDirectory, setContextMenuVisible, toggleSelectedFile, setContextMenuPosition,
6 | setSelectedFileFromLastTo, getFileContent, getFileContentForEdit,
7 | rightClickOnFile, setSelectedFiles
8 | } from '../../Actions/Actions.js';
9 | import './File.css';
10 |
11 | import ListItem from '@material-ui/core/ListItem';
12 | import ListItemAvatar from '@material-ui/core/ListItemAvatar';
13 | import ListItemText from '@material-ui/core/ListItemText';
14 | import Avatar from '@material-ui/core/Avatar';
15 | import FolderIcon from '@material-ui/icons/Folder';
16 | import FileIcon from '@material-ui/icons/InsertDriveFile';
17 | import blue from '@material-ui/core/colors/blue';
18 | import config from '../../config.js';
19 | import { getHumanFileSize } from '../../Api/ApiHandler';
20 |
21 | class File extends Component {
22 | render() {
23 | const { isSelected, type, name, size, handleClick, handleDoubleClick, handleContextMenu } = this.props;
24 | const avatarStyle = {
25 | backgroundColor: isSelected ? blue['A200'] : null
26 | };
27 | const realSize = typeof size !== 'undefined' && type !== 'dir' ? getHumanFileSize(size) : null;
28 | return (
29 |
30 |
31 |
32 |
33 | { type === 'dir' ? : }
34 |
35 |
36 |
37 |
38 |
29 |
30 |
31 |
32 | { type === 'dir' ? : }
33 |
34 |
35 |
36 |
37 |
17 | { loading ?
18 | :
19 | fileListComponent.length ? fileListComponent :
20 | }
21 |
22 | }
23 | }
24 |
25 |
26 | const mapStateToProps = (state) => {
27 | const filteredList = state.fileList.filter(
28 | file => state.fileListFilter ? file.name.toLocaleLowerCase().match(state.fileListFilter.toLocaleLowerCase()) : true
29 | );
30 | return {
31 | fileList: filteredList,
32 | loading: state.loading
33 | };
34 | };
35 |
36 |
37 | const mapDispatchToProps = (dispatch) => {
38 | return {
39 | handleClick: (event) => {
40 | }
41 | };
42 | };
43 |
44 | export default connect(mapStateToProps, mapDispatchToProps)(FileList);
45 |
46 |
47 |
--------------------------------------------------------------------------------
/src/Components/FileList/FileListEmptyMessage.css:
--------------------------------------------------------------------------------
1 | .FileListEmptyMessage {
2 | margin: 5px 10px;
3 | padding: 20px;
4 | display: block;
5 | border-radius: 5px;
6 | background: #efefef;
7 | color: #333;
8 | font-size: 15px;
9 | }
--------------------------------------------------------------------------------
/src/Components/FileList/FileListEmptyMessage.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import './FileListEmptyMessage.css';
4 |
5 | class FileListEmptyMessage extends Component {
6 | render() {
7 | return (
8 |
9 | No files in this folder
10 |
11 | );
12 | }
13 | }
14 |
15 | const mapStateToProps = (state) => {
16 | return {
17 | };
18 | };
19 |
20 |
21 | const mapDispatchToProps = (dispatch) => {
22 | return {
23 | };
24 | };
25 |
26 | export default connect(mapStateToProps, mapDispatchToProps)(FileListEmptyMessage);
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/Components/FileList/FileListSublist/FileListSublist.css:
--------------------------------------------------------------------------------
1 | .FileListSublist {
2 | overflow: auto;
3 | max-height: 20em;
4 | }
--------------------------------------------------------------------------------
/src/Components/FileList/FileListSublist/FileListSublist.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import FileSublist from '../../File//FileSublist/FileSublist.jsx';
4 | import Loader from '../../Loader/Loader.jsx';
5 | import FileListEmptyMessage from '../FileListEmptyMessage';
6 | import './FileListSublist.css';
7 |
8 | class FileListSublist extends Component {
9 | render() {
10 | const { fileList, loadingSublist } = this.props;
11 |
12 | const fileListComponent = fileList.map((file, key) => {
13 | return
14 | });
15 |
16 | return
17 | { loadingSublist ?
18 | :
19 | fileListComponent.length ? fileListComponent :
20 | }
21 |
22 | }
23 | }
24 |
25 | const mapStateToProps = (state) => {
26 | const filteredList = state.fileListSublist
27 | .filter(file => file.type === 'dir')
28 | .filter(file => state.path.join('').trim() === state.pathSublist.join('').trim() ?
29 | !state.selectedFiles.find(f => f.name === file.name) : true
30 | );
31 | return {
32 | fileList: filteredList,
33 | loadingSublist: state.loadingSublist,
34 | };
35 | };
36 |
37 | const mapDispatchToProps = (dispatch) => {
38 | return {
39 | };
40 | };
41 |
42 | export default connect(mapStateToProps, mapDispatchToProps)(FileListSublist);
--------------------------------------------------------------------------------
/src/Components/FileUploader/FileUploader.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Button from '@material-ui/core/Button';
4 | import UploadFileList from './UploadFileList';
5 |
6 | class FileUploader extends Component {
7 |
8 | handleReset(event) {
9 | this.refs.inputfile.value = '';
10 | this.props.handleReset(event);
11 | }
12 |
13 | render() {
14 | const { fileUploadList, handleSelectedFiles } = this.props;
15 | const styles = {
16 | inputfile: {
17 | display: 'none'
18 | }, inputreset: {
19 | display: fileUploadList.length ? 'inline-flex' : 'none'
20 | }
21 | }
22 |
23 | return (
24 |
25 |
31 |
32 |
35 |
36 |
37 |
38 | );
39 | }
40 | }
41 |
42 | FileUploader.propTypes = {
43 | fileUploadList: PropTypes.array.isRequired,
44 | handleReset: PropTypes.func.isRequired,
45 | handleSelectedFiles: PropTypes.func.isRequired,
46 | };
47 |
48 | export default FileUploader;
49 |
--------------------------------------------------------------------------------
/src/Components/FileUploader/UploadFileList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import List from '@material-ui/core/List';
4 | import ListItem from '@material-ui/core/ListItem';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import ListItemText from '@material-ui/core/ListItemText';
7 | import FileIcon from '@material-ui/icons/InsertDriveFile';
8 | import { getHumanFileSize } from '../../Api/ApiHandler';
9 |
10 | function UploadFileList(props) {
11 | const { files } = props;
12 | const list = files.map((f, i) =>
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 |
21 | return (
22 |
23 |
24 | {list}
25 |
26 |
27 | );
28 | }
29 |
30 | UploadFileList.propTypes = {
31 | files: PropTypes.array.isRequired
32 | };
33 |
34 | export default UploadFileList;
35 |
--------------------------------------------------------------------------------
/src/Components/Loader/Loader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import CircularProgress from '@material-ui/core/CircularProgress';
5 | import Grid from '@material-ui/core/Grid';
6 |
7 | const styles = theme => ({
8 | progress: {
9 | margin: theme.spacing.unit * 10,
10 | },
11 | });
12 |
13 | function Loader(props) {
14 | const { classes } = props;
15 | return (
16 |
17 |
18 |
19 | );
20 | }
21 |
22 | Loader.propTypes = {
23 | classes: PropTypes.object.isRequired,
24 | };
25 |
26 | export default withStyles(styles)(Loader);
27 |
--------------------------------------------------------------------------------
/src/Components/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import AppBar from '@material-ui/core/AppBar';
4 | import Toolbar from '@material-ui/core/Toolbar';
5 | import Typography from '@material-ui/core/Typography';
6 | import InputBase from '@material-ui/core/InputBase';
7 | import { fade } from '@material-ui/core/styles/colorManipulator';
8 | import { withStyles } from '@material-ui/core/styles';
9 | import SearchIcon from '@material-ui/icons/Search';
10 | import { connect } from 'react-redux';
11 | import { setFileListFilter, enterToPreviousDirectoryByIndex } from '../../Actions/Actions.js';
12 | import ThreeDotsMenu from './ThreeDotsMenu.jsx';
13 | import BreadcrumbText from '../Breadcrumb/BreadcrumbText.jsx';
14 | import { enterToPreviousDirectory } from '../../Actions/Actions.js';
15 |
16 | const styles = theme => ({
17 | root: {
18 | width: '100%',
19 | marginBottom: '4.3em'
20 | },
21 | grow: {
22 | flexGrow: 1,
23 | },
24 | menuButton: {
25 | marginLeft: -12,
26 | marginRight: 20,
27 | },
28 | title: {
29 | display: 'block', // was none
30 | [theme.breakpoints.up('sm')]: {
31 | display: 'block',
32 | },
33 | },
34 | search: {
35 | position: 'relative',
36 | borderRadius: theme.shape.borderRadius,
37 | backgroundColor: fade(theme.palette.common.white, 0.15),
38 | '&:hover': {
39 | backgroundColor: fade(theme.palette.common.white, 0.25),
40 | },
41 | marginLeft: 0,
42 | width: '100%',
43 | display: 'none',
44 | [theme.breakpoints.up('sm')]: {
45 | marginLeft: theme.spacing.unit,
46 | width: 'auto',
47 | display: 'block'
48 | },
49 | },
50 | searchIcon: {
51 | width: theme.spacing.unit * 9,
52 | height: '100%',
53 | position: 'absolute',
54 | pointerEvents: 'none',
55 | display: 'flex',
56 | alignItems: 'center',
57 | justifyContent: 'center',
58 | },
59 | inputRoot: {
60 | color: 'inherit',
61 | width: '100%',
62 | },
63 | inputInput: {
64 | paddingTop: theme.spacing.unit,
65 | paddingRight: theme.spacing.unit,
66 | paddingBottom: theme.spacing.unit,
67 | paddingLeft: theme.spacing.unit * 10,
68 | transition: theme.transitions.create('width'),
69 | width: '100%',
70 | [theme.breakpoints.up('sm')]: {
71 | width: 100,
72 | '&:focus': {
73 | width: 200,
74 | },
75 | },
76 | },
77 | });
78 |
79 | function SearchAppBar(props) {
80 | const { classes, path, handleClickPath, handleGoBack, canGoBack } = props;
81 | return (
82 |
83 |
84 |
85 |
86 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
109 |
113 |
26 |
31 |
32 |
33 |
34 |
38 |
39 | );
40 | }
41 | }
42 |
43 |
44 | const mapStateToProps = (state) => {
45 | return {
46 | };
47 | };
48 |
49 | const mapDispatchToProps = (dispatch, ownProps) => {
50 | return {
51 | };
52 | };
53 |
54 | export default connect(mapStateToProps, mapDispatchToProps)(ThreeDotsMenu);
55 |
--------------------------------------------------------------------------------
/src/Components/Notification/DynamicSnackbar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Snackbar from '@material-ui/core/Snackbar';
5 | import IconButton from '@material-ui/core/IconButton';
6 | import CloseIcon from '@material-ui/icons/Close';
7 | import { connect } from 'react-redux';
8 |
9 | const styles = theme => ({
10 | close: {
11 | padding: theme.spacing.unit / 2,
12 | },
13 | });
14 |
15 | class DynamicSnackbar extends React.Component {
16 | render() {
17 | const { classes, errorMsg, handleClose, open, notificationDuration } = this.props;
18 | return (
19 |
20 | {errorMsg}}
32 | action={[
33 |
34 |
35 | ,
36 | ]}
37 | />
38 |
39 | );
40 | }
41 | }
42 |
43 | DynamicSnackbar.propTypes = {
44 | classes: PropTypes.object.isRequired,
45 | };
46 |
47 |
48 | const mapStateToProps = (state, ownProps) => {
49 | return {
50 | open: !!state.errorMsg,
51 | errorMsg: state.errorMsg,
52 | notificationDuration: state.notificationDuration || 60000
53 | };
54 | };
55 |
56 | const mapDispatchToProps = (dispatch, ownProps) => {
57 | return {
58 | handleClose: (event) => {
59 | dispatch({
60 | type: 'SET_ERROR_MSG',
61 | value: null
62 | });
63 | }
64 | };
65 | };
66 |
67 | export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(DynamicSnackbar));
68 |
69 |
--------------------------------------------------------------------------------
/src/Components/Notification/NotificationBar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import CheckCircleIcon from '@material-ui/icons/CheckCircle';
5 | import ErrorIcon from '@material-ui/icons/Error';
6 | import InfoIcon from '@material-ui/icons/Info';
7 | import green from '@material-ui/core/colors/green';
8 | import amber from '@material-ui/core/colors/amber';
9 | import SnackbarContent from '@material-ui/core/SnackbarContent';
10 | import WarningIcon from '@material-ui/icons/Warning';
11 | import { withStyles } from '@material-ui/core/styles';
12 | import { connect } from 'react-redux';
13 |
14 | const variantIcon = {
15 | success: CheckCircleIcon,
16 | warning: WarningIcon,
17 | error: ErrorIcon,
18 | info: InfoIcon,
19 | };
20 |
21 | const styles1 = theme => ({
22 | success: {
23 | backgroundColor: green[600],
24 | },
25 | error: {
26 | backgroundColor: theme.palette.error.dark,
27 | },
28 | info: {
29 | backgroundColor: theme.palette.primary.dark,
30 | },
31 | warning: {
32 | backgroundColor: amber[700],
33 | },
34 | icon: {
35 | fontSize: 20,
36 | },
37 | iconVariant: {
38 | opacity: 0.9,
39 | marginRight: theme.spacing.unit,
40 | },
41 | message: {
42 | display: 'flex',
43 | alignItems: 'center',
44 | },
45 | });
46 |
47 | function MySnackbarContent(props) {
48 | const { open, classes, className, message, onClose, variant, ...other } = props;
49 | const Icon = variantIcon[variant];
50 |
51 | return open ? (
52 |
57 |
58 | {message}
59 |
60 | }
61 | {...other}
62 | />
63 | ) : '';
64 | }
65 |
66 | MySnackbarContent.propTypes = {
67 | classes: PropTypes.object.isRequired,
68 | className: PropTypes.string,
69 | message: PropTypes.node,
70 | onClose: PropTypes.func,
71 | variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
72 | };
73 |
74 | const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
75 |
76 | const styles2 = theme => ({
77 | margin: {
78 | margin: theme.spacing.unit,
79 | },
80 | });
81 |
82 | class CustomizedSnackbars extends React.Component {
83 |
84 | render() {
85 | const { classes, open, errorMsg } = this.props;
86 | return (
87 |
93 | );
94 | }
95 | }
96 |
97 | CustomizedSnackbars.propTypes = {
98 | classes: PropTypes.object.isRequired,
99 | };
100 |
101 | const mapStateToProps = (state) => {
102 | return {
103 | open: !!state.errorMsg,
104 | errorMsg: state.errorMsg,
105 | };
106 | };
107 |
108 |
109 | const mapDispatchToProps = (dispatch) => {
110 | return {
111 | };
112 | };
113 |
114 | export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles2)(CustomizedSnackbars));
115 |
116 |
117 |
--------------------------------------------------------------------------------
/src/Reducers/MainReducer.js:
--------------------------------------------------------------------------------
1 | export const defaultState = {
2 | path: [],
3 | pathSublist: [],
4 | fileList: [],
5 | fileListSublist: [],
6 | fileListFilter: null,
7 | contextMenuVisible: null,
8 | contextMenuPosition: [],
9 | contextMenuPositionElement: null,
10 | selectedFiles: [],
11 | selectedFolderSublist: null,
12 | loading: false,
13 | loadingSublist: false,
14 | errorMsg: null,
15 | visibleDialogCreateFolder: false,
16 | visibleDialogUploadFile: false,
17 | visibleDialogContent: false,
18 | visibleDialogEdit: false,
19 | visibleDialogMove: false,
20 | visibleDialogCopy: false,
21 | visibleDialogRename: false,
22 | fileContentBlobUrl: null,
23 | fileUploadProgress: 0,
24 | fileUploadList: []
25 | };
26 |
27 | /**
28 | * Main content reducer
29 | * @param {Object} state
30 | * @param {Object} action
31 | * @returns {Object}
32 | */
33 | const MainReducer = (state = defaultState, action) => {
34 | switch (action.type) {
35 | case 'SET_PATH':
36 | return Object.assign({}, state, {
37 | path: action.value
38 | });
39 | case 'SET_PATH_SUB_LIST':
40 | return Object.assign({}, state, {
41 | pathSublist: action.value
42 | });
43 | case 'ENTER_TO_DIRECTORY':
44 | return Object.assign({}, state, {
45 | path: [...state.path, action.value]
46 | });
47 | case 'ENTER_TO_DIRECTORY_SUB_LIST':
48 | return Object.assign({}, state, {
49 | pathSublist: [...state.pathSublist, action.value]
50 | });
51 | case 'SET_FILE_LIST':
52 | return Object.assign({}, state, {
53 | fileList: action.value.sort((a, b) => a.type < b.type ? -1 : a.name.toLowerCase() > b.name.toLowerCase())
54 | });
55 | case 'SET_FILE_LIST_SUB_LIST':
56 | return Object.assign({}, state, {
57 | fileListSublist: action.value.sort((a, b) => a.type < b.type ? -1 : a.name.toLowerCase() > b.name.toLowerCase())
58 | });
59 | case 'SET_FILE_LIST_FILTER':
60 | return Object.assign({}, state, {
61 | fileListFilter: action.value
62 | });
63 | case 'SET_CONTEXT_MENU_VISIBLE':
64 | return Object.assign({}, state, {
65 | contextMenuVisible: action.value
66 | });
67 | case 'SET_CONTEXT_MENU_POSITION':
68 | return Object.assign({}, state, {
69 | contextMenuPosition: action.value
70 | });
71 | case 'SET_CONTEXT_MENU_POSITION_ELEMENT':
72 | return Object.assign({}, state, {
73 | contextMenuPositionElement: action.value
74 | });
75 | case 'SET_SELECTED_FILES':
76 | return Object.assign({}, state, {
77 | selectedFiles: (action.value).filter((f, i, self) => self.map(ff => ff.name).indexOf(f.name) === i)
78 | });
79 | case 'SET_SELECTED_FOLDER_SUB_LIST':
80 | return Object.assign({}, state, {
81 | selectedFolderSublist: action.value
82 | });
83 |
84 | case 'TOGGLE_SELECTED_FILE':
85 | return Object.assign({}, state, {
86 | selectedFiles: state.selectedFiles.find(f => f.name === action.value.name) ?
87 | state.selectedFiles.filter(f => f.name !== action.value.name) :
88 | [...state.selectedFiles, action.value]
89 | });
90 | case 'SET_FILE_UPLOAD_PROGRESS':
91 | return Object.assign({}, state, {
92 | fileUploadProgress: parseInt(action.value || 0)
93 | });
94 | case 'SET_LOADING':
95 | return Object.assign({}, state, {
96 | loading: action.value
97 | });
98 | case 'SET_LOADING_SUB_LIST':
99 | return Object.assign({}, state, {
100 | loadingSublist: action.value
101 | });
102 | case 'SET_ERROR_MSG':
103 | return Object.assign({}, state, {
104 | errorMsg: action.value
105 | });
106 |
107 | case 'SET_VISIBLE_DIALOG_CREATE_FOLDER':
108 | return Object.assign({}, state, {
109 | visibleDialogCreateFolder: !!action.value
110 | });
111 |
112 | case 'SET_VISIBLE_DIALOG_UPLOAD_FILE':
113 | return Object.assign({}, state, {
114 | visibleDialogUploadFile: !!action.value
115 | });
116 |
117 | case 'SET_VISIBLE_DIALOG_CONTENT':
118 | return Object.assign({}, state, {
119 | visibleDialogContent: !!action.value
120 | });
121 |
122 | case 'SET_VISIBLE_DIALOG_EDIT':
123 | return Object.assign({}, state, {
124 | visibleDialogEdit: !!action.value
125 | });
126 |
127 | case 'SET_VISIBLE_DIALOG_MOVE':
128 | return Object.assign({}, state, {
129 | visibleDialogMove: !!action.value
130 | });
131 | case 'SET_VISIBLE_DIALOG_COPY':
132 | return Object.assign({}, state, {
133 | visibleDialogCopy: !!action.value
134 | });
135 | case 'SET_VISIBLE_DIALOG_RENAME':
136 | return Object.assign({}, state, {
137 | visibleDialogRename: !!action.value
138 | });
139 | case 'SET_FILE_UPLOAD_LIST':
140 | return Object.assign({}, state, {
141 | fileUploadList: action.value
142 | });
143 |
144 | case 'SET_FILE_CONTENT':
145 | /**
146 | * Removing old blob url
147 | */
148 | state.fileContentBlobUrl && URL.revokeObjectURL(state.fileContentBlobUrl);
149 | return Object.assign({}, state, {
150 | fileContentBlobUrl: action.value ? URL.createObjectURL(action.value) : null
151 | });
152 |
153 | default:
154 | return state;
155 | }
156 | };
157 |
158 | export default MainReducer;
159 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | const host = 'http://localhost:8000';
2 |
3 | export default {
4 | url_list: `${host}/filemanager/list`,
5 | url_create_folder: `${host}/filemanager/dir/create`,
6 | url_get_content: `${host}/filemanager/file/content`,
7 | url_download: `${host}/filemanager/file/content`,
8 | url_upload: `${host}/filemanager/items/upload`,
9 | url_remove: `${host}/filemanager/items/remove`,
10 | url_rename: `${host}/filemanager/item/move`,
11 | url_move: `${host}/filemanager/items/move`,
12 | url_copy: `${host}/filemanager/items/copy`,
13 | url_edit: `${host}/filemanager/file/edit`,
14 | url_compress: `${host}/filemanager/items/compress`,
15 | url_extract: `${host}/filemanager/file/extract`,
16 |
17 | isEditableFilePattern: /\.(txt|diff?|patch|svg|asc|cnf|cfg|conf|html?|cfm|cgi|aspx?|ini|pl|py|md|css|cs|jsx?|jsp|log|htaccess|htpasswd|gitignore|gitattributes|env|json|atom|eml|rss|markdown|sql|xml|xslt?|sh|rb|as|bat|cmd|cob|for|ftn|frm|frx|inc|lisp|scm|coffee|php[3-6]?|java|c|cbl|go|h|scala|vb|tmpl|lock|go|yml|yaml|tsv|lst)$/i,
18 | isImageFilePattern: /\.(jpe?g|gif|bmp|png|svg|tiff?)$/i,
19 | isExtractableFilePattern: /\.(gz|tar|rar|g?zip)$/i,
20 |
21 | actions: {
22 | create_folder: true,
23 | move: true,
24 | copy: true,
25 | copy_folder: true,
26 | compress: true,
27 | extract: true,
28 | edit: true,
29 | remove: true,
30 | upload: true,
31 | upload_by_chunks: true,
32 | preview_images: true,
33 | }
34 | };
35 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | code {
10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
11 | }
12 |
13 | *::-webkit-scrollbar-track {
14 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
15 | border-radius: 0;
16 | background-color: #F5F5F5;
17 | cursor: default;
18 | }
19 |
20 | *::-webkit-scrollbar {
21 | width: 8px;
22 | background-color: #F5F5F5;
23 | cursor: default;
24 | }
25 |
26 | *::-webkit-scrollbar-thumb {
27 | border-radius: 0px;
28 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
29 | background-color: #555;
30 | cursor: default;
31 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import thunk from 'redux-thunk';
4 | import { Provider } from 'react-redux';
5 | import { createStore, applyMiddleware } from 'redux'
6 | import MainReducer from './Reducers/MainReducer'
7 | import * as serviceWorker from './serviceWorker';
8 | import App from './App';
9 | import './index.css';
10 |
11 | const store = createStore(MainReducer, applyMiddleware(thunk));
12 | ReactDOM.render(
13 |
14 |
15 | ,
16 | document.getElementById('root')
17 | );
18 |
19 | // If you want your app to work offline and load faster, you can change
20 | // unregister() to register() below. Note this comes with some pitfalls.
21 | // Learn more about service workers: http://bit.ly/CRA-PWA
22 | serviceWorker.register();
23 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------