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
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
59
60
61
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
92
93
94
95
96
97
98
99
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import AddIcon from '@material-ui/icons/Add';
import css from 'ba-styles/Table.scss';
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Toolbar,
Typography,
Tooltip,
Button,
} from '@material-ui/core';
import RowReadOnly from './RowReadOnly';
import styles from './tableStyle-jss';
class MainTableForm extends React.Component {
render() {
const {
title,
classes,
items,
removeRow,
editRow,
addNew,
anchor,
branch,
removeRowAPI
} = this.props;
const getItems = dataArray => dataArray.map(item => (
<RowReadOnly
item={item}
removeRow={() => removeRow(item, branch)}
key={item.get('id')}
editRow={() => editRow(item, branch)}
anchor={anchor}
branch={branch}
removeRowAPI = {removeRowAPI}
/>
));
const getHead = dataArray => dataArray.map((item, index) => {
if (!item.hidden) {
return (
<TableCell padding="none" key={index.toString()} width={item.width}>{item.label}</TableCell>
);
}
return false;
});
return (
<div>
<Toolbar className={classes.toolbar}>
<div className={classes.title}>
<Typography variant="h6">{title}</Typography>
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
<Tooltip title="Add Item">
<Button variant="contained" onClick={() => addNew(anchor, branch)} color="secondary" className={classes.button}>
<AddIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
Añadir
</Button>
</Tooltip>
</div>
</Toolbar>
<div className={classes.rootTable}>
<Table className={classNames(css.tableCrud, classes.table, css.stripped)}>
<TableHead>
<TableRow>
{ getHead(anchor) }
</TableRow>
</TableHead>
<TableBody>
{getItems(items)}
</TableBody>
</Table>
</div>
</div>
);
}
}
MainTableForm.propTypes = {
title: PropTypes.string.isRequired,
classes: PropTypes.object.isRequired,
items: PropTypes.object.isRequired,
anchor: PropTypes.array.isRequired,
addNew: PropTypes.func.isRequired,
removeRow: PropTypes.func.isRequired,
editRow: PropTypes.func.isRequired,
branch: PropTypes.string.isRequired,
};
export default withStyles(styles)(MainTableForm);
|
