CreateFolderDialog.tsx 2.67 KB
Newer Older
Maxym Borodenko's avatar
Maxym Borodenko committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {translate} from 'react-i18next';

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';

import {ensureFolder} from 'repository/actions/admin';
import RepositoryFolder from 'model/repository/RepositoryFolder';
import FolderDetails from 'model/repository/FolderDetails';
import FolderForm from './c/FolderForm';
import {withStyles} from '@material-ui/core/styles';

/*tslint:disable*/
const styles = (theme) => ({
  createButton: {
    [theme.breakpoints.down('sm')]: {
      width: '100%',
      margin: '8px 0',
    },
  },
});
/*tslint:enable*/

interface ICreateFolderDialogProps extends React.ClassAttributes<any> {
  ensureFolder: (path: string) => Promise<RepositoryFolder>;
  folder: FolderDetails;
  root?: string;
  path?: string;
  classes: any;
34
  variant?: 'text' | 'flat' | 'outlined' | 'contained' | 'contained' | 'fab' | 'extendedFab';
Maxym Borodenko's avatar
Maxym Borodenko committed
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
  t: any;
}

class CreateFolderDialog extends React.Component<ICreateFolderDialogProps, any> {

  public state = {
    open: false,
  };

  private show = () => {
    this.setState(
      (state) => ({...state, open: true}));
  }

  private hide = () => {
    this.setState({open: false});
  }

  private handleSubmit = (newFolder: RepositoryFolder) => {
    const { folder, ensureFolder, path } = this.props;
    const absolutePath: string = folder.folder && folder.folder.path ? folder.folder.path : path;
    ensureFolder(`/${absolutePath}/${newFolder.name}`).then(() => {
      this.setState({open: false});
    });
  }

  public render() {
62
    const { classes, variant = 'contained', t} = this.props;
Maxym Borodenko's avatar
Maxym Borodenko committed
63
64
    return (
      <span>
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
65
        <Button className={ classes.createButton } onClick={ this.show } variant={ variant }>{ t(`repository.admin.dialog.createFolder.createBtn`) }</Button>
Maxym Borodenko's avatar
Maxym Borodenko committed
66
67
        { this.state.open &&
          <Dialog open={ this.state.open } onClose={ this.hide } maxWidth="xs" fullWidth>
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
68
            <DialogTitle>{ t(`repository.admin.dialog.createFolder.createDialogTitle`) }</DialogTitle>
Maxym Borodenko's avatar
Maxym Borodenko committed
69
            <DialogContent>
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
70
              <FolderForm onCancel={ this.hide } onSubmit={ this.handleSubmit }/>
Maxym Borodenko's avatar
Maxym Borodenko committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
            </DialogContent>
          </Dialog>
        }
      </span>
    );
  }
}

const mapStateToProps = (state) => ({
  folder: state.repository.admin.folder,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  ensureFolder,
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)<any>(translate()(CreateFolderDialog)));