@centreon/react-components
Version:
react components used by centreon web frontend
671 lines (593 loc) • 26.2 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _getPrototypeOf3 = _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 = _interopRequireWildcard(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 _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
var _StyledTableRow = _interopRequireDefault(require("./StyledTableRow"));
var _IconPowerSettings = _interopRequireDefault(require("../../MaterialComponents/Icons/IconPowerSettings"));
var _IconPowerSettingsDisable = _interopRequireDefault(require("../../MaterialComponents/Icons/IconPowerSettingsDisable"));
var _StyledCheckbox = _interopRequireDefault(require("./StyledCheckbox"));
var _IconDelete = _interopRequireDefault(require("../../MaterialComponents/Icons/IconDelete"));
var _IconLibraryAdd = _interopRequireDefault(require("../../MaterialComponents/Icons/IconLibraryAdd"));
var _EnhancedTableHead = _interopRequireDefault(require("./EnhancedTableHead"));
var _ColumnTypes = _interopRequireDefault(require("../ColumnTypes"));
var _TablePaginationActions = _interopRequireDefault(require("./TablePaginationActions"));
var _StyledPagination = _interopRequireDefault(require("./StyledPagination"));
var _Tooltip2 = _interopRequireDefault(require("../../MaterialComponents/Tooltip"));
var _InputFieldSelectTableCell = _interopRequireDefault(require("../../InputField/InputFieldSelectTableCell"));
var _InputFieldTableCell = _interopRequireDefault(require("../../InputField/InputFieldTableCell"));
var _IndicatorsEditorRow = _interopRequireDefault(require("./IndicatorsEditorRow"));
/* eslint-disable no-plusplus */
/* eslint-disable no-nested-ternary */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable react/jsx-filename-extension */
var loadingIndicatorHeight = 3;
var BodyTableCell = (0, _styles.withStyles)({
root: {
fontSize: 13,
lineHeight: 1.4,
padding: '3px 4px'
}
})(_TableCell["default"]);
var styles = function styles() {
return {
paper: {
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
boxShadow: 'none',
background: 'none'
},
table: {
boxShadow: '0px 1px 3px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)'
},
rowDisabled: {
backgroundColor: 'rgba(0, 0, 0, 0.07) !important'
},
loadingIndicator: {
width: '100%',
height: loadingIndicatorHeight
}
};
};
function cumulativeOffset(element) {
if (!element.offsetParent) {
return 0;
}
return cumulativeOffset(element.offsetParent) + element.offsetTop;
}
var TableCustom =
/*#__PURE__*/
function (_Component) {
(0, _inherits2["default"])(TableCustom, _Component);
function TableCustom() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2["default"])(this, TableCustom);
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, _getPrototypeOf3["default"])(TableCustom)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
order: '',
orderBy: '',
tableTopOffset: 0
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "tableBodyRef", _react["default"].createRef());
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRequestSort", function (event, property) {
var onSort = _this.props.onSort;
var _this$state = _this.state,
orderBy = _this$state.orderBy,
order = _this$state.order;
var isDesc = orderBy === property && order === 'desc';
_this.setState({
order: isDesc ? 'asc' : 'desc',
orderBy: property
}, function () {
onSort({
order: isDesc ? 'asc' : 'desc',
orderBy: property
});
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelectAllClick", function (event) {
var _this$props = _this.props,
onEntitiesSelected = _this$props.onEntitiesSelected,
onTableSelectionChanged = _this$props.onTableSelectionChanged,
tableData = _this$props.tableData,
nameIdPaired = _this$props.nameIdPaired,
indicatorsEditor = _this$props.indicatorsEditor;
if (event.target.checked) {
var newSelecteds = indicatorsEditor ? tableData : nameIdPaired ? tableData.map(function (n) {
return "".concat(n.id, ":").concat(n.name);
}) : tableData.map(function (n) {
return n.id;
});
onTableSelectionChanged(newSelecteds);
onEntitiesSelected(tableData);
return;
}
onTableSelectionChanged([]);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (event, row, editing) {
event.preventDefault();
event.stopPropagation();
var _this$props2 = _this.props,
onEntitiesSelected = _this$props2.onEntitiesSelected,
onTableSelectionChanged = _this$props2.onTableSelectionChanged,
selected = _this$props2.selected,
nameIdPaired = _this$props2.nameIdPaired,
indicatorsEditor = _this$props2.indicatorsEditor,
tableData = _this$props2.tableData;
var value = indicatorsEditor ? row : nameIdPaired ? "".concat(row.id, ":").concat(row.name) : row.id;
var selectedIndex = indicatorsEditor ? selected.map(function (_ref) {
var object = _ref.object,
type = _ref.type;
return "".concat(object.id + type, "Typed");
}).indexOf("".concat(value.object.id + value.type, "Typed")) : selected.indexOf(value);
var newSelected = [];
if (editing) {
newSelected = selected;
newSelected[selectedIndex] = indicatorsEditor ? row : value;
} else if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, indicatorsEditor ? row : value);
} 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));
}
onEntitiesSelected(tableData.filter(function (_ref2) {
var id = _ref2.id;
return newSelected.includes(id);
}));
onTableSelectionChanged(newSelected);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rowHovered", function (id, value) {
_this.setState({
hovered: value ? id : null
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addConditionalRowBackground", function (row, column, backgroundClass, attribute, classes) {
return column ? (0, _defineProperty2["default"])({}, attribute, !row[column] ? classes[backgroundClass] : '') : {};
});
return _this;
}
(0, _createClass2["default"])(TableCustom, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var ro = new _resizeObserverPolyfill["default"](function () {
_this2.setState({
tableTopOffset: cumulativeOffset(_this2.tableBodyRef.current)
});
});
ro.observe(this.tableBodyRef.current);
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props3 = this.props,
columnConfiguration = _this$props3.columnConfiguration,
tableData = _this$props3.tableData,
onDelete = _this$props3.onDelete,
onPaginate = _this$props3.onPaginate,
onDuplicate = _this$props3.onDuplicate,
onPaginationLimitChanged = _this$props3.onPaginationLimitChanged,
labelDisplayedRows = _this$props3.labelDisplayedRows,
labelRowsPerPage = _this$props3.labelRowsPerPage,
limit = _this$props3.limit,
checkable = _this$props3.checkable,
currentPage = _this$props3.currentPage,
classes = _this$props3.classes,
totalRows = _this$props3.totalRows,
onEnable = _this$props3.onEnable,
onDisable = _this$props3.onDisable,
_this$props3$onRowCli = _this$props3.onRowClick,
onRowClick = _this$props3$onRowCli === void 0 ? function () {} : _this$props3$onRowCli,
selected = _this$props3.selected,
enabledColumn = _this$props3.enabledColumn,
nameIdPaired = _this$props3.nameIdPaired,
indicatorsEditor = _this$props3.indicatorsEditor,
emptyDataMessage = _this$props3.emptyDataMessage,
loadingDataMessage = _this$props3.loadingDataMessage,
ariaLabel = _this$props3.ariaLabel,
impacts = _this$props3.impacts,
_this$props3$paginate = _this$props3.paginated,
paginated = _this$props3$paginate === void 0 ? true : _this$props3$paginate,
loading = _this$props3.loading;
var _this$state2 = this.state,
order = _this$state2.order,
orderBy = _this$state2.orderBy,
hovered = _this$state2.hovered;
var isSelected = function isSelected(value) {
for (var i = 0; i < selected.length; i++) {
if (indicatorsEditor) {
if (selected[i].object.id === value.object.id && selected[i].type === value.type) {
return {
bool: true,
obj: selected[i]
};
}
} else if (selected[i] === value) {
return {
bool: true,
obj: selected[i]
};
}
}
return {
bool: false,
obj: null
};
};
var emptyRows = limit - Math.min(limit, totalRows - currentPage * limit);
var tableMaxHeight = function tableMaxHeight() {
var tableTopOffset = _this3.state.tableTopOffset;
return "calc(100vh - ".concat(tableTopOffset, "px - 25px)");
};
return _react["default"].createElement(_react["default"].Fragment, null, loading && _react["default"].createElement(_LinearProgress["default"], {
className: classes.loadingIndicator
}), !loading && _react["default"].createElement("div", {
className: classes.loadingIndicator
}), _react["default"].createElement(_Paper["default"], {
className: classes.paper
}, paginated ? _react["default"].createElement(_StyledPagination["default"], {
rowsPerPageOptions: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
labelDisplayedRows: labelDisplayedRows,
labelRowsPerPage: labelRowsPerPage,
colSpan: 3,
count: totalRows,
rowsPerPage: limit,
page: currentPage,
style: {
display: 'flex',
flexDirection: 'row-reverse',
padding: 0,
background: '#fff'
},
SelectProps: {
"native": true
},
onChangePage: onPaginate,
onChangeRowsPerPage: onPaginationLimitChanged,
ActionsComponent: _TablePaginationActions["default"]
}) : null, _react["default"].createElement("div", {
style: {
overflow: 'auto',
maxHeight: tableMaxHeight()
}
}, _react["default"].createElement(_Table["default"], {
className: classes.table,
"aria-label": ariaLabel,
size: "small",
stickyHeader: true,
style: indicatorsEditor ? {
overflow: 'initial'
} : {}
}, _react["default"].createElement(_EnhancedTableHead["default"], {
numSelected: selected ? selected.length : 0,
order: order,
checkable: checkable,
orderBy: orderBy,
onSelectAllClick: this.handleSelectAllClick,
onRequestSort: this.handleRequestSort,
rowCount: limit - emptyRows,
headRows: columnConfiguration,
indicatorsEditor: indicatorsEditor
}), _react["default"].createElement(_TableBody["default"], {
ref: this.tableBodyRef,
onMouseLeave: this.rowHovered.bind(this, '', false),
style: {
position: 'relative'
}
}, tableData.map(function (row, index) {
var isItemSelected = isSelected(indicatorsEditor ? row : nameIdPaired ? "".concat(row.id, ":").concat(row.name) : row.id);
return _react["default"].createElement(_StyledTableRow["default"], (0, _extends2["default"])({
hover: true,
tabIndex: -1,
key: row.id,
onMouseEnter: _this3.rowHovered.bind(_this3, row.id, true)
}, _this3.addConditionalRowBackground(row, enabledColumn, 'rowDisabled', 'className', classes), {
onClick: function onClick() {
onRowClick(row.id);
}
}), checkable ? _react["default"].createElement(BodyTableCell, {
align: "left",
onClick: function onClick(event) {
return _this3.handleClick(event, row);
},
padding: "checkbox"
}, _react["default"].createElement(_StyledCheckbox["default"], {
checked: isItemSelected.bool,
color: "primary"
})) : null, columnConfiguration.map(function (column) {
switch (column.type) {
case _ColumnTypes["default"].number:
return _react["default"].createElement(BodyTableCell, {
align: "left"
}, row[column.id] || '');
case _ColumnTypes["default"].string:
return _react["default"].createElement(BodyTableCell, {
key: column.id,
align: "left"
}, column.image && _react["default"].createElement("img", {
alt: "",
src: row.iconPath,
style: {
maxWidth: 21,
display: 'inline-block',
verticalAlign: 'middle',
marginRight: 5
}
}), column.subkey ? row[column.subkey][column.id] || '' : row[column.id] || '');
case _ColumnTypes["default"]["boolean"]:
return _react["default"].createElement(BodyTableCell, {
align: "left"
}, row[column.id] ? _react["default"].createElement(_IconButton["default"], {
style: {
position: 'absolute',
top: -1,
width: 31,
height: 31,
padding: 5
},
disabled: true
}, _react["default"].createElement(_IconPowerSettings["default"], {
active: true,
customStyle: {
fontSize: 18,
boxSizing: 'border-box',
position: 'relative',
top: -2
}
})) : _react["default"].createElement(_IconButton["default"], {
style: {
position: 'absolute',
top: -1,
width: 31,
height: 31,
padding: 5
},
disabled: true
}, _react["default"].createElement(_IconPowerSettingsDisable["default"], {
active: true,
customStyle: {
fontSize: 18,
boxSizing: 'border-box',
position: 'relative',
top: -2
}
})));
case _ColumnTypes["default"].toggler:
return _react["default"].createElement(BodyTableCell, {
align: "left"
}, row[column.id] ? _react["default"].createElement(_Tooltip2["default"], {
label: "Enable/Disable",
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
onDisable([row.id]);
}
}, _react["default"].createElement(_IconPowerSettings["default"], {
label: "Disable",
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
onDisable([row.id]);
},
active: true,
customStyle: {
fontSize: 18,
boxSizing: 'border-box',
position: 'relative',
top: -2
}
})) : _react["default"].createElement(_Tooltip2["default"], {
label: "Enable/Disable",
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
onEnable([row.id]);
}
}, _react["default"].createElement(_IconPowerSettingsDisable["default"], {
active: true,
label: "Disable",
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
onEnable([row.id]);
},
customStyle: {
fontSize: 18,
boxSizing: 'border-box',
position: 'relative',
top: -2
}
})));
case _ColumnTypes["default"].input:
return _react["default"].createElement(BodyTableCell, {
align: "left"
}, _react["default"].createElement(_InputFieldTableCell["default"], null));
case _ColumnTypes["default"].select:
return _react["default"].createElement(BodyTableCell, {
align: "left"
}, _react["default"].createElement(_InputFieldSelectTableCell["default"], {
options: column.options,
value: column.subkey ? row[column.subkey][column.id] : row[column.key],
active: "active"
}));
case _ColumnTypes["default"].widthVariation:
return _react["default"].createElement(BodyTableCell, {
key: column.id,
align: "left",
colSpan: isItemSelected.bool ? 1 : 5,
style: {
maxWidth: '145px',
textOverflow: 'ellipsis',
overflow: 'hidden'
}
}, _react["default"].createElement(_Tooltip["default"], {
title: "".concat(row[column.id], " (").concat(row[column.subValue], ")"),
placement: "top"
}, _react["default"].createElement("span", null, "".concat(row[column.id], " (").concat(row[column.subValue], ")"))));
case _ColumnTypes["default"].multicolumn:
return _react["default"].createElement(BodyTableCell, {
key: column.id,
align: "left"
}, column.columns.map(function (subColumn) {
return _react["default"].createElement(_react["default"].Fragment, null, "".concat(subColumn.label, " ").concat(row[subColumn.id]), subColumn.type === 'percentage' ? '%' : null, ' ');
}));
case _ColumnTypes["default"].hoverActions:
return _react["default"].createElement(BodyTableCell, {
align: "right",
key: column.id,
style: {
width: 90,
position: 'relative'
}
}, hovered === row.id ? _react["default"].createElement(_Box["default"], {
flexDirection: "row",
display: "flex",
style: {
marginRight: -4,
position: 'absolute',
top: 3,
right: 0
}
}, _react["default"].createElement(_Box["default"], null, _react["default"].createElement(_Tooltip2["default"], {
label: "Delete",
onClick: function onClick() {
onDelete([row.id]);
}
}, _react["default"].createElement(_IconDelete["default"], {
customStyle: {
color: '#707070',
fontSize: 21
},
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
onDelete([row.id]);
}
}))), _react["default"].createElement(_Box["default"], null, _react["default"].createElement(_Tooltip2["default"], {
label: "Duplicate",
onClick: function onClick() {
onDuplicate([row.id]);
}
}, _react["default"].createElement(_IconLibraryAdd["default"], {
customStyle: {
color: '#707070',
fontSize: 20
},
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
onDuplicate([row.id]);
}
})))) : ' ');
default:
return null;
}
}), indicatorsEditor ? _react["default"].createElement(_IndicatorsEditorRow["default"], {
row: row,
index: index,
impacts: impacts,
selected: isItemSelected,
onImpactEdit: _this3.handleClick
}) : null);
}), tableData.length < 1 && _react["default"].createElement(_StyledTableRow["default"], {
tabIndex: -1
}, _react["default"].createElement(BodyTableCell, {
colSpan: 6,
align: "center"
}, loading ? loadingDataMessage : emptyDataMessage)))))));
}
}]);
return TableCustom;
}(_react.Component);
TableCustom.defaultProps = {
enabledColumn: '',
ariaLabel: '',
dense: false,
onRowClick: function onRowClick() {},
labelDisplayedRows: function labelDisplayedRows(_ref4) {
var from = _ref4.from,
to = _ref4.to,
count = _ref4.count;
return "".concat(from, "-").concat(to, " of ").concat(count);
},
labelRowsPerPage: 'Rows per page',
onEntitiesSelected: function onEntitiesSelected() {},
onTableSelectionChanged: function onTableSelectionChanged() {},
nameIdPaired: false,
indicatorsEditor: false,
emptyDataMessage: 'No results found',
loadingDataMessage: 'Loading data',
loading: false,
paginated: true,
impacts: []
};
var anyObject = _propTypes["default"].objectOf(_propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string, _propTypes["default"].number]));
var anyArray = _propTypes["default"].arrayOf(anyObject);
TableCustom.propTypes = {
ariaLabel: _propTypes["default"].string,
classes: anyObject.isRequired,
dense: _propTypes["default"].bool,
onSort: _propTypes["default"].func.isRequired,
onEntitiesSelected: _propTypes["default"].func,
onTableSelectionChanged: _propTypes["default"].func,
columnConfiguration: anyArray.isRequired,
tableData: anyArray.isRequired,
onDelete: _propTypes["default"].func.isRequired,
onPaginate: _propTypes["default"].func.isRequired,
onDuplicate: _propTypes["default"].func.isRequired,
onPaginationLimitChanged: _propTypes["default"].func.isRequired,
labelDisplayedRows: _propTypes["default"].func,
labelRowsPerPage: _propTypes["default"].string,
limit: _propTypes["default"].number.isRequired,
checkable: _propTypes["default"].bool.isRequired,
currentPage: _propTypes["default"].number.isRequired,
totalRows: _propTypes["default"].number.isRequired,
onEnable: _propTypes["default"].func.isRequired,
onDisable: _propTypes["default"].func.isRequired,
onRowClick: _propTypes["default"].func,
selected: anyArray.isRequired,
enabledColumn: _propTypes["default"].string,
nameIdPaired: _propTypes["default"].bool,
indicatorsEditor: _propTypes["default"].bool,
emptyDataMessage: _propTypes["default"].string,
loadingDataMessage: _propTypes["default"].string,
loading: _propTypes["default"].bool,
paginated: _propTypes["default"].bool,
impacts: anyArray
};
var _default = (0, _styles.withStyles)(styles, {
withTheme: true
})(TableCustom);
exports["default"] = _default;