@centreon/react-components
Version:
react components used by centreon web frontend
445 lines (387 loc) • 14.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@material-ui/core/styles");
var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));
var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"));
var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));
var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
/* eslint-disable no-shadow */
/* eslint-disable react/jsx-filename-extension */
function createData(name, activate, calculation, description) {
return {
name: name,
activate: activate,
calculation: calculation,
description: description
};
}
var rows = [createData('Cupcake', 332, 3.7, 67, 4.3), createData('Donut', 332, 25.0, 51, 4.9), createData('Eclair', 332, 16.0, 24, 6.0), createData('Frozen yoghurt', 332, 6.0, 24, 4.0), createData('Gingerbread', 332, 16.0, 49, 3.9), createData('Honeycomb', 332, 3.2, 87, 6.5), createData('Ice cream sandwich', 332, 9.0, 37, 4.3), createData('Jelly Bean', 332, 0.0, 94, 0.0), createData('KitKat', 332, 26.0, 65, 7.0), createData('Lollipop', 332, 0.2, 98, 0.0), createData('Marshmallow', 332, 0, 81, 2.0), createData('Nougat', 332, 19.0, 9, 37.0), createData('Oreo', 332, 18.0, 63, 4.0)];
function desc(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function stableSort(array, cmp) {
var stabilizedThis = array.map(function (el, index) {
return [el, index];
});
stabilizedThis.sort(function (a, b) {
var order = cmp(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
return stabilizedThis.map(function (el) {
return el[0];
});
}
function getSorting(order, orderBy) {
return order === 'desc' ? function (a, b) {
return desc(a, b, orderBy);
} : function (a, b) {
return -desc(a, b, orderBy);
};
}
var headRows = [{
id: 'name',
numeric: false,
disablePadding: true,
label: 'Name'
}, {
id: 'activate',
numeric: true,
disablePadding: false,
label: 'Activate'
}, {
id: 'calculation',
numeric: true,
disablePadding: false,
label: 'Calculation method'
}, {
id: 'description',
numeric: true,
disablePadding: false,
label: 'Description'
}];
function EnhancedTableHead(props) {
var onSelectAllClick = props.onSelectAllClick,
order = props.order,
orderBy = props.orderBy,
numSelected = props.numSelected,
rowCount = props.rowCount,
onRequestSort = props.onRequestSort;
var createSortHandler = function createSortHandler(property) {
return function (event) {
onRequestSort(event, property);
};
};
var StyledTableCell = (0, _styles.withStyles)({
head: {
backgroundColor: '#009fdf',
color: '#fff',
height: '24px',
padding: '6px 24px 6px 16px',
'&:hover': {
color: '#fff'
}
},
body: {
fontSize: 12,
textAlign: 'left'
}
})(_TableCell["default"]);
var StyledTableSortLabel = (0, _styles.withStyles)({
root: {
color: '#fff !important'
},
icon: {
color: '#fff !important'
},
active: {
color: '#fff !important'
}
})(_TableSortLabel["default"]);
return _react["default"].createElement(_TableHead["default"], null, _react["default"].createElement(_TableRow["default"], null, _react["default"].createElement(StyledTableCell, {
align: "left",
padding: "checkbox"
}, _react["default"].createElement(StyledCheckbox, {
indeterminate: numSelected > 0 && numSelected < rowCount,
checked: numSelected === rowCount,
onChange: onSelectAllClick
})), headRows.map(function (row) {
return _react["default"].createElement(StyledTableCell, {
key: row.id,
align: row.numeric ? 'left' : '',
padding: row.disablePadding ? 'none' : 'default',
sortDirection: orderBy === row.id ? order : false
}, _react["default"].createElement(StyledTableSortLabel, {
active: orderBy === row.id,
direction: order,
onClick: createSortHandler(row.id),
icon: {
color: 'red'
}
}, row.label));
})));
}
EnhancedTableHead.propTypes = {
numSelected: _propTypes["default"].number.isRequired,
onRequestSort: _propTypes["default"].func.isRequired,
onSelectAllClick: _propTypes["default"].func.isRequired,
order: _propTypes["default"].string.isRequired,
orderBy: _propTypes["default"].string.isRequired,
rowCount: _propTypes["default"].number.isRequired
};
var useStyles = (0, _styles.makeStyles)(function (theme) {
return {
root: {
width: '100%'
},
paper: {
width: '100%',
marginBottom: theme.spacing(2)
},
tableWrapper: {
overflowX: 'auto'
}
};
});
var StyledTableRow = (0, _styles.withStyles)({
root: {
'&:nth-of-type(odd)': {
backgroundColor: '#e3f2fd'
},
'&:hover': {
backgroundColor: '#cae6f1 !important'
},
cursor: 'pointer'
}
})(_TableRow["default"]);
var StyledTableCell2 = (0, _styles.withStyles)({
root: {
padding: '3px 24px 3px 16px',
fontSize: '13px'
}
})(_TableCell["default"]);
var StyledCheckbox = (0, _styles.withStyles)({
root: {
'&$checked': {
color: '#232f39'
}
},
checked: {}
})(_Checkbox["default"]);
var StyledPagination = (0, _styles.withStyles)({
toolbar: {
height: '32px',
minHeight: 'auto'
}
})(_TablePagination["default"]);
function EnhancedTable() {
var classes = useStyles();
var _React$useState = _react["default"].useState('asc'),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
order = _React$useState2[0],
setOrder = _React$useState2[1];
var _React$useState3 = _react["default"].useState('activate'),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
orderBy = _React$useState4[0],
setOrderBy = _React$useState4[1];
var _React$useState5 = _react["default"].useState([]),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
selected = _React$useState6[0],
setSelected = _React$useState6[1];
var _React$useState7 = _react["default"].useState(0),
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
page = _React$useState8[0],
setPage = _React$useState8[1];
var _React$useState9 = _react["default"].useState(5),
_React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
rowsPerPage = _React$useState10[0],
setRowsPerPage = _React$useState10[1];
function handleRequestSort(event, property) {
var isDesc = orderBy === property && order === 'desc';
setOrder(isDesc ? 'asc' : 'desc');
setOrderBy(property);
}
function handleSelectAllClick(event) {
if (event.target.checked) {
var newSelecteds = rows.map(function (n) {
return n.name;
});
setSelected(newSelecteds);
return;
}
setSelected([]);
}
function handleClick(event, name) {
var selectedIndex = selected.indexOf(name);
var newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
}
setSelected(newSelected);
}
function handleChangePage(event, newPage) {
setPage(newPage);
}
function handleChangeRowsPerPage(event) {
setRowsPerPage(+event.target.value);
}
var useStyles1 = (0, _styles.makeStyles)(function (theme) {
return {
root: {
flexShrink: 0,
color: theme.palette.text.secondary,
marginLeft: theme.spacing(2.5)
}
};
});
function TablePaginationActions(props) {
var classes = useStyles1();
var theme = (0, _styles.useTheme)();
var count = props.count,
page = props.page,
rowsPerPage = props.rowsPerPage,
onChangePage = props.onChangePage;
function handleFirstPageButtonClick(event) {
onChangePage(event, 0);
}
function handleBackButtonClick(event) {
onChangePage(event, page - 1);
}
function handleNextButtonClick(event) {
onChangePage(event, page + 1);
}
function handleLastPageButtonClick(event) {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
}
return _react["default"].createElement("div", {
className: classes.root
}, _react["default"].createElement(_IconButton["default"], {
onClick: handleFirstPageButtonClick,
disabled: page === 0,
"aria-label": "First Page"
}, theme.direction === 'rtl' ? _react["default"].createElement(_LastPage["default"], null) : _react["default"].createElement(_FirstPage["default"], null)), _react["default"].createElement(_IconButton["default"], {
onClick: handleBackButtonClick,
disabled: page === 0,
"aria-label": "Previous Page"
}, theme.direction === 'rtl' ? _react["default"].createElement(_KeyboardArrowRight["default"], null) : _react["default"].createElement(_KeyboardArrowLeft["default"], null)), _react["default"].createElement(_IconButton["default"], {
onClick: handleNextButtonClick,
disabled: page >= Math.ceil(count / rowsPerPage) - 1,
"aria-label": "Next Page"
}, theme.direction === 'rtl' ? _react["default"].createElement(_KeyboardArrowLeft["default"], null) : _react["default"].createElement(_KeyboardArrowRight["default"], null)), _react["default"].createElement(_IconButton["default"], {
onClick: handleLastPageButtonClick,
disabled: page >= Math.ceil(count / rowsPerPage) - 1,
"aria-label": "Last Page"
}, theme.direction === 'rtl' ? _react["default"].createElement(_FirstPage["default"], null) : _react["default"].createElement(_LastPage["default"], null)));
}
TablePaginationActions.propTypes = {
count: _propTypes["default"].number.isRequired,
onChangePage: _propTypes["default"].func.isRequired,
page: _propTypes["default"].number.isRequired,
rowsPerPage: _propTypes["default"].number.isRequired
};
var isSelected = function isSelected(name) {
return selected.indexOf(name) !== -1;
};
var emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
return _react["default"].createElement("div", {
className: classes.root
}, _react["default"].createElement(_Paper["default"], {
className: classes.paper
}, _react["default"].createElement("div", {
className: classes.tableWrapper
}, _react["default"].createElement(_Table["default"], {
className: classes.table,
"aria-labelledby": "tableTitle",
size: "small"
}, _react["default"].createElement(EnhancedTableHead, {
numSelected: selected.length,
order: order,
orderBy: orderBy,
onSelectAllClick: handleSelectAllClick,
onRequestSort: handleRequestSort,
rowCount: rows.length,
className: classes.tableWrapper
}), _react["default"].createElement(_TableBody["default"], null, stableSort(rows, getSorting(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(function (row) {
var isItemSelected = isSelected(row.name);
return _react["default"].createElement(StyledTableRow, {
hover: true,
onClick: function onClick(event) {
return handleClick(event, row.name);
},
role: "checkbox",
"aria-checked": isItemSelected,
tabIndex: -1,
key: row.name,
selected: isItemSelected
}, _react["default"].createElement(StyledTableCell2, {
align: "left",
className: classes.tableCell,
padding: "checkbox"
}, _react["default"].createElement(StyledCheckbox, {
checked: isItemSelected,
color: "primary"
})), _react["default"].createElement(StyledTableCell2, {
align: "left"
}, row.name), _react["default"].createElement(StyledTableCell2, {
align: "left"
}, row.activate), _react["default"].createElement(StyledTableCell2, {
align: "left"
}, row.calculation), _react["default"].createElement(StyledTableCell2, {
align: "left"
}, row.description));
}), emptyRows > 0 && _react["default"].createElement(StyledTableRow, {
style: {
height: 49 * emptyRows
}
}, _react["default"].createElement(StyledTableCell2, {
align: "left",
colSpan: 6
}))))), _react["default"].createElement(StyledPagination, {
rowsPerPageOptions: [5, 10, 25, 50, 100],
colSpan: 3,
count: rows.length,
rowsPerPage: rowsPerPage,
page: page,
style: {
display: 'flex',
flexDirection: 'row-reverse'
},
SelectProps: {
"native": true
},
onChangePage: handleChangePage,
onChangeRowsPerPage: handleChangeRowsPerPage,
ActionsComponent: TablePaginationActions
})));
}
var _default = EnhancedTable;
exports["default"] = _default;