ModuleGroupWrapper.jsx 3.13 KB
Newer Older
Florent Chehab's avatar
Florent Chehab committed
1
import React from "react";
2
3
4
5
import PropTypes from "prop-types";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import Tooltip from "@material-ui/core/Tooltip";
Florent Chehab's avatar
Florent Chehab committed
6
import Fab from "@material-ui/core/Fab";
7
8
9
10
import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";
import AddIcon from "@material-ui/icons/Add";
import green from "@material-ui/core/colors/green";
Florent Chehab's avatar
Florent Chehab committed
11
12
13
import makeStyles from "@material-ui/core/styles/makeStyles";
import useEditor from "../../../../hooks/useEditor";
import FormInfo from "../../../../utils/editionRelated/FormInfo";
14
import { getLatestApiReadData } from "../../../../hooks/useGlobalState";
Florent Chehab's avatar
Florent Chehab committed
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

const useStyles = makeStyles(theme => ({
  root: {
    paddingTop: theme.spacing(2),
    paddingBottom: theme.spacing(2),
    paddingRight: theme.spacing(2),
    paddingLeft: theme.spacing(2),
    // marginBottom: theme.spacing(2),
    flexGrow: 1
  },
  button: {
    width: theme.spacing(5),
    height: theme.spacing(5),
    boxShadow: "none",
    marginBottom: theme.spacing(1)
  }
}));
Florent Chehab's avatar
Florent Chehab committed
32

Florent Chehab's avatar
Florent Chehab committed
33
/**
Florent Chehab's avatar
Florent Chehab committed
34
 * Component for wrapping modules that consist of multiple similar stuff.
Florent Chehab's avatar
Florent Chehab committed
35
36
 *
 * It basically enables add feature.
Florent Chehab's avatar
Florent Chehab committed
37
 */
Florent Chehab's avatar
Florent Chehab committed
38
39
40
41
function ModuleGroupWrapper({
  formInfo,
  groupTitle,
  children,
Florent Chehab's avatar
Florent Chehab committed
42
  onSave,
Florent Chehab's avatar
Florent Chehab committed
43
44
45
  defaultModelData
}) {
  const classes = useStyles();
Florent Chehab's avatar
Florent Chehab committed
46

Florent Chehab's avatar
Florent Chehab committed
47
  const openEditor = useEditor(formInfo, somethingWasSaved => {
Florent Chehab's avatar
Florent Chehab committed
48
    if (somethingWasSaved) onSave();
Florent Chehab's avatar
Florent Chehab committed
49
  });
Florent Chehab's avatar
Florent Chehab committed
50

Florent Chehab's avatar
Florent Chehab committed
51
  const userCanPostTo = getLatestApiReadData("userData-one").owner_can_post_to;
Florent Chehab's avatar
Florent Chehab committed
52
  const disabled = userCanPostTo.indexOf(formInfo.route) < 0;
Florent Chehab's avatar
Florent Chehab committed
53

Florent Chehab's avatar
Florent Chehab committed
54
55
56
57
58
59
60
  return (
    <Paper className={classes.root}>
      <Grid container spacing={1} alignItems="center">
        <Grid item xs>
          <Typography variant="h6" align="center" color="textSecondary">
            <em>{groupTitle}</em>
          </Typography>
Florent Chehab's avatar
Florent Chehab committed
61
        </Grid>
Florent Chehab's avatar
Florent Chehab committed
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
        <Grid item xs={2} style={{ textAlign: "right" }}>
          <Tooltip
            title={
              disabled
                ? "Vous ne pouvez pas ajouter d'élément"
                : "Ajouter un élément"
            }
            placement="top"
          >
            <div style={{ display: "inline-block" }}>
              &nbsp;
              {/* Needed to fire events for the tooltip when below is disabled! */}
              <Fab
                size="small"
                aria-label="Ajouter un élément"
                disabled={disabled}
                style={disabled ? {} : { backgroundColor: green.A700 }}
                className={classes.button}
                onClick={() => openEditor(defaultModelData)}
              >
                <AddIcon />
              </Fab>
            </div>
          </Tooltip>
        </Grid>
      </Grid>
      <Divider />
      {children}
    </Paper>
  );
Florent Chehab's avatar
Florent Chehab committed
92
93
}

94
ModuleGroupWrapper.propTypes = {
Florent Chehab's avatar
Florent Chehab committed
95
  groupTitle: PropTypes.string.isRequired,
Florent Chehab's avatar
Florent Chehab committed
96
  children: PropTypes.node.isRequired,
Florent Chehab's avatar
Florent Chehab committed
97
  formInfo: PropTypes.instanceOf(FormInfo).isRequired,
Florent Chehab's avatar
Florent Chehab committed
98
99
100
101
102
103
  defaultModelData: PropTypes.object.isRequired, // to populate the fields of the _form with default values
  onSave: PropTypes.func
};

ModuleGroupWrapper.defaultProps = {
  onSave: () => {}
Florent Chehab's avatar
Florent Chehab committed
104
105
};

Florent Chehab's avatar
Florent Chehab committed
106
export default ModuleGroupWrapper;