@centreon/react-components
Version:
react components used by centreon web frontend
270 lines (222 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf4 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _TableFooter = _interopRequireDefault(require("@material-ui/core/TableFooter"));
var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
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"));
/* eslint-disable react/no-multi-comp */
/* eslint-disable react/forbid-prop-types */
/* eslint-disable react/jsx-filename-extension */
/* eslint-disable react/destructuring-assignment */
var actionsStyles = function actionsStyles(theme) {
return {
root: {
flexShrink: 0,
color: theme.palette.text.secondary,
marginLeft: theme.spacing.unit * 2.5
}
};
};
var TablePaginationActions =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2["default"])(TablePaginationActions, _React$Component);
function TablePaginationActions() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2["default"])(this, TablePaginationActions);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf4["default"])(TablePaginationActions)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFirstPageButtonClick", function (event) {
_this.props.onChangePage(event, 0);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBackButtonClick", function (event) {
_this.props.onChangePage(event, _this.props.page - 1);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleNextButtonClick", function (event) {
_this.props.onChangePage(event, _this.props.page + 1);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleLastPageButtonClick", function (event) {
_this.props.onChangePage(event, Math.max(0, Math.ceil(_this.props.count / _this.props.rowsPerPage) - 1));
});
return _this;
}
(0, _createClass2["default"])(TablePaginationActions, [{
key: "render",
value: function render() {
var _this$props = this.props,
classes = _this$props.classes,
count = _this$props.count,
page = _this$props.page,
rowsPerPage = _this$props.rowsPerPage,
theme = _this$props.theme;
return _react["default"].createElement("div", {
className: classes.root
}, _react["default"].createElement(_IconButton["default"], {
onClick: this.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: this.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: this.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: this.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)));
}
}]);
return TablePaginationActions;
}(_react["default"].Component);
TablePaginationActions.propTypes = {
classes: _propTypes["default"].object.isRequired,
count: _propTypes["default"].number.isRequired,
onChangePage: _propTypes["default"].func.isRequired,
page: _propTypes["default"].number.isRequired,
rowsPerPage: _propTypes["default"].number.isRequired,
theme: _propTypes["default"].object.isRequired
};
var TablePaginationActionsWrapped = (0, _styles.withStyles)(actionsStyles, {
withTheme: true
})(TablePaginationActions);
var counter = 0;
function createData(name, calories, fat) {
counter += 1;
return {
id: counter,
name: name,
calories: calories,
fat: fat
};
}
var styles = function styles(theme) {
return {
root: {
width: '100%',
marginTop: theme.spacing.unit * 3
},
table: {
minWidth: 500
},
tableWrapper: {
overflowX: 'auto'
}
};
};
var CustomPaginationActionsTable =
/*#__PURE__*/
function (_React$Component2) {
(0, _inherits2["default"])(CustomPaginationActionsTable, _React$Component2);
function CustomPaginationActionsTable() {
var _getPrototypeOf3;
var _this2;
(0, _classCallCheck2["default"])(this, CustomPaginationActionsTable);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this2 = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf3 = (0, _getPrototypeOf4["default"])(CustomPaginationActionsTable)).call.apply(_getPrototypeOf3, [this].concat(args)));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "state", {
rows: [createData('Cupcake', 305, 3.7), createData('Donut', 452, 25.0), createData('Eclair', 262, 16.0), createData('Frozen yoghurt', 159, 6.0), createData('Gingerbread', 356, 16.0), createData('Honeycomb', 408, 3.2), createData('Ice cream sandwich', 237, 9.0), createData('Jelly Bean', 375, 0.0), createData('KitKat', 518, 26.0), createData('Lollipop', 392, 0.2), createData('Marshmallow', 318, 0), createData('Nougat', 360, 19.0), createData('Oreo', 437, 18.0)].sort(function (a, b) {
return a.calories < b.calories ? -1 : 1;
}),
page: 0,
rowsPerPage: 5
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleChangePage", function (event, page) {
_this2.setState({
page: page
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleChangeRowsPerPage", function (event) {
_this2.setState({
page: 0,
rowsPerPage: event.target.value
});
});
return _this2;
}
(0, _createClass2["default"])(CustomPaginationActionsTable, [{
key: "render",
value: function render() {
var classes = this.props.classes;
var _this$state = this.state,
rows = _this$state.rows,
rowsPerPage = _this$state.rowsPerPage,
page = _this$state.page;
var emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
return _react["default"].createElement(_Paper["default"], {
className: classes.root
}, _react["default"].createElement("div", {
className: classes.tableWrapper
}, _react["default"].createElement(_Table["default"], {
className: classes.table
}, _react["default"].createElement(_TableBody["default"], null, rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(function (row) {
return _react["default"].createElement(_TableRow["default"], {
key: row.id
}, _react["default"].createElement(_TableCell["default"], {
align: "right",
component: "th",
scope: "row"
}, row.name), _react["default"].createElement(_TableCell["default"], {
align: "right"
}, row.calories), _react["default"].createElement(_TableCell["default"], {
align: "right"
}, row.fat));
}), emptyRows > 0 && _react["default"].createElement(_TableRow["default"], {
style: {
height: 48 * emptyRows
}
}, _react["default"].createElement(_TableCell["default"], {
align: "right",
colSpan: 6
}))), _react["default"].createElement(_TableFooter["default"], null, _react["default"].createElement(_TableRow["default"], null, _react["default"].createElement(_TablePagination["default"], {
rowsPerPageOptions: [5, 10, 25],
colSpan: 3,
count: rows.length,
rowsPerPage: rowsPerPage,
page: page,
SelectProps: {
"native": true
},
onChangePage: this.handleChangePage,
onChangeRowsPerPage: this.handleChangeRowsPerPage,
ActionsComponent: TablePaginationActionsWrapped
}))))));
}
}]);
return CustomPaginationActionsTable;
}(_react["default"].Component);
CustomPaginationActionsTable.propTypes = {
classes: _propTypes["default"].object.isRequired
};
var _default = (0, _styles.withStyles)(styles)(CustomPaginationActionsTable);
exports["default"] = _default;