UpdateFolderDialog.tsx 2.55 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
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 {updateFolder} 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 IUpdateFolderDialogProps extends React.ClassAttributes<any> {
  updateFolder: (folder: RepositoryFolder) =>  Promise<FolderDetails>;
  folder: FolderDetails;
  classes: any;
32
  variant?: 'text' | 'flat' | 'outlined' | 'contained' | 'contained' | 'fab' | 'extendedFab';
Maxym Borodenko's avatar
Maxym Borodenko committed
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
  t: any;
}

class UpdateFolderDialog extends React.Component<IUpdateFolderDialogProps, any> {

  public state = {
    open: false,
  };

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

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

  private handleSubmit = (folder: RepositoryFolder) => {
    const { updateFolder } = this.props;
    updateFolder(folder).then(() => {
      this.setState({open: false});
    });
  }

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

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

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

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