@up-group-ui/react-controls
Version:
Up shared react controls
707 lines • 34 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mapDataToRow = exports.isActionEnabled = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var jquery_1 = (0, tslib_1.__importDefault)(require("jquery"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var typestyle_1 = require("typestyle");
var axios_1 = (0, tslib_1.__importDefault)(require("axios"));
var UpPagination_1 = (0, tslib_1.__importDefault)(require("./UpPagination"));
var UpDataGridRowHeader_1 = (0, tslib_1.__importDefault)(require("./UpDataGridRowHeader"));
var UpDataGridRow_1 = (0, tslib_1.__importDefault)(require("./UpDataGridRow"));
var LoadingIndicator_1 = (0, tslib_1.__importDefault)(require("../../Display/LoadingIndicator"));
var UpButton_1 = (0, tslib_1.__importDefault)(require("../../Inputs/Button/UpButton"));
var theming_1 = (0, tslib_1.__importStar)(require("../../../Common/theming"));
var UpDataGridFooter_1 = (0, tslib_1.__importDefault)(require("./UpDataGridFooter"));
var UpDataGridHeader_1 = (0, tslib_1.__importDefault)(require("./UpDataGridHeader"));
var UpDataGridContext_1 = require("./UpDataGridContext");
var types_1 = require("../../../Common/utils/types");
var device_1 = require("../../../Common/utils/device");
var utils_1 = require("../../../Common/utils");
var WrapperDataGridStyle = (0, typestyle_1.style)({
position: 'relative',
}, (0, typestyle_1.media)(device_1.DeviceSmartphones, {
$nest: {
'& .up-loading-indicator': {
overflowX: 'auto',
},
},
}));
var CellInnerElementStyle = {
marginTop: '0.3em',
};
function isActionEnabled(props) {
return !props.displayRowActionsWithinCell && props.actions != null;
}
exports.isActionEnabled = isActionEnabled;
var DataGridStyle = function (props) {
return (0, typestyle_1.style)({
width: '100%',
borderRadius: props.theme.borderRadius,
borderSpacing: 0,
borderStyle: 'solid',
borderWidth: '1px',
borderColor: props.theme.colorMap.defaultBorder,
color: props.theme.colorMap.darkGray5,
fontSize: '14px',
$nest: {
'& .up-data-grid-header': {
backgroundColor: 'white',
backgroundRepeat: 'repeat-x',
fontWeight: 700,
fontSize: '12px',
},
'& .up-data-grid-header .up-checkbox': {
marginTop: '8px',
marginBottom: '8px',
marginLeft: '7px',
},
'& .up-data-grid-body': {
background: 'white',
},
'& .up-selection': {
width: '0.2em',
},
'& .up-display-label, & .up-display-value': CellInnerElementStyle,
'& .up-data-grid-header-cell': {
textAlign: 'left',
padding: '8px',
paddingLeft: '14px',
borderCollapse: 'collapse',
borderColor: 'transparent',
borderRadius: props.theme.borderRadius,
},
'& .up-data-grid-header-cell-label': {
fontSize: '14px',
color: props.theme.colorMap.grey1,
},
'& .up-data-grid-header-cell.up-data-grid-header-cell-selection': {
width: '32px',
paddingLeft: '8px',
},
'& .up-data-grid-header-cell.up-data-grid-header-cell-selection .up-checkbox': {
marginLeft: '1px',
},
'& .up-data-grid-cell': {
padding: '16px',
position: 'relative',
verticalAlign: props.alignCells,
textAlign: props.textAlignCells,
$nest: {
'& .up-buttons-wrapper': {
justifyContent: props.textAlignCells === 'center'
? 'center'
: props.textAlignCells === 'left'
? 'flex-start'
: props.textAlignCells === 'right'
? 'flex-end'
: 'normal',
},
'& .up-badge': {
padding: '4px 6px',
},
},
},
'& .up-data-grid-cell .up-checkbox .up-control-indicator::before': {
left: '0px',
},
'& .up-data-grid-cell .up-checkbox': {
marginTop: '0 !important',
display: 'inline-block',
},
'& .up-data-grid-cell .row-actions': {
position: 'absolute',
display: 'none',
width: '300px',
bottom: '3px',
justifyContent: 'space-between',
zIndex: 1,
},
'& .up-data-grid-cell .row-action': {
color: props.theme.colorMap.primary,
cursor: 'pointer',
},
'& .up-data-grid-cell .row-action:hover, & .up-data-grid-cell .row-action-delete:hover': {
textDecoration: 'underline',
},
'& .up-data-grid-cell .row-action-delete': {
color: props.theme.colorMap.errorActive,
cursor: 'pointer',
},
'& .up-data-grid-row': {
verticalAlign: 'top',
},
'& .up-data-grid-row:hover .row-actions': {
display: 'flex',
},
'& .up-data-grid-row-bordered': {
$nest: {
'.up-data-grid-cell': {
borderTop: "1px solid " + props.theme.colorMap.defaultBorder,
borderCollapse: 'collapse',
},
},
},
'& .up-data-grid-row-bordered:last-child': {
$nest: {
'.up-data-grid-cell': {
border: '0',
borderRadius: props.theme.borderRadius,
},
},
},
'& .up-data-grid-row-borderless': {
$nest: {
'.up-data-grid-cell': {
border: '0',
},
},
},
'& .up-data-grid-row-selected': {
$nest: {
'& .up-data-grid-cell': {
borderTop: "0.1em solid " + props.theme.colorMap.primaryDark,
borderBottom: "0.1em solid " + props.theme.colorMap.primaryDark,
backgroundColor: props.theme.colorMap.primary,
color: props.theme.colorMap.primaryFg,
},
},
},
'& .up-data-grid-sortable': {
cursor: 'pointer',
},
},
}, (0, typestyle_1.media)(device_1.DeviceSmartphones, {
$nest: {
'& .up-data-grid-header-cell-label': {
whiteSpace: 'nowrap',
},
},
}));
};
var mapDataToRow = function (data, allRowsSelected, rowsSelected) {
var rows = [];
data.map(function (value, index) {
rows.push({
isSelected: allRowsSelected !== null ? allRowsSelected : isSelectedRowData(value.id, rowsSelected),
value: value,
});
});
return rows;
};
exports.mapDataToRow = mapDataToRow;
var isSelectedRowData = function (id, rowsSelected) {
return rowsSelected === null || rowsSelected === void 0 ? void 0 : rowsSelected.some(function (data) { return data.value.id === id; });
};
var getRowsFromData = function (data, isAllRowsSelected) {
return data.map(function (row, index) {
return {
isSelected: isAllRowsSelected,
value: row.value,
};
});
};
var getNewSelectedRows = function (rows, currentSelection) {
return rows.filter(function (r) { return r.isSelected; }).filter(function (r) { return !currentSelection.map(function (d) { return d.value.id; }).includes(r.value.id); });
};
var removeRowsFromData = function (rows, currentData) {
return rows.filter(function (s) { return !currentData.some(function (d) { return d.value.id === s.value.id; }); });
};
var UpDataGrid = (function (_super) {
(0, tslib_1.__extends)(UpDataGrid, _super);
function UpDataGrid(props, context) {
var _a, _b;
var _this = _super.call(this, props, context) || this;
_this.handleData = function (data) {
var _a, _b;
var sortedColumn = null;
_this.state.columns.map(function (value) {
if (value.isSorted) {
sortedColumn = value;
}
});
var dataKey = _this.props.dataKey;
var rows = [];
var total = 0;
if (data.Count != null) {
total = data.Count;
if (dataKey != null) {
data = data[dataKey];
}
}
else {
total = data.length;
}
if (data != null) {
rows = (0, exports.mapDataToRow)(data, (_a = _this.state) === null || _a === void 0 ? void 0 : _a.allRowsSelected, (_b = _this.state) === null || _b === void 0 ? void 0 : _b.rowsSelected);
if (rows.length == total && _this.state.take < total) {
if (sortedColumn) {
rows.sort(function (x, y) {
if (sortedColumn.sortDir == 'ASC')
return x.value[sortedColumn.field] === y.value[sortedColumn.field]
? 0
: x.value[sortedColumn.field] > y.value[sortedColumn.field]
? 1
: -1;
else
return x.value[sortedColumn.field] === y.value[sortedColumn.field]
? 0
: x.value[sortedColumn.field] > y.value[sortedColumn.field]
? -1
: 1;
});
}
rows = rows.slice(_this.state.skip, _this.state.skip + _this.state.take);
}
}
var addedRows = rows
.filter(function (r) { return r.isSelected; })
.filter(function (r) { return !_this.currentRowsSelected.some(function (d) { return d.value.id === r.value.id; }); });
var dataSelected = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], _this.currentRowsSelected, true), addedRows, true);
_this.setState({
rows: rows,
rowsSelected: dataSelected,
total: total,
isDataFetching: false,
lastFetchedDataTime: new Date(),
});
};
_this.fetchData = function () {
_this.setState({ isDataFetching: true });
var sortedColumn = null;
_this.state.columns.map(function (value, index) {
if (value.isSorted) {
sortedColumn = value;
}
});
var orderParamName = _this.props.dataSource.orderParamName || 'Order';
var dirParamName = _this.props.dataSource.dirParamName || 'Dir';
var skipParamName = _this.props.dataSource.skipParamName || 'Skip';
var takeParamName = _this.props.dataSource.takeParamName || 'Take';
var self = _this;
if (_this.props.dataSource.method === 'POST') {
var params = {
takeParamName: _this.state.take,
skipParamName: _this.state.skip,
};
if (sortedColumn != null) {
params[orderParamName] = sortedColumn.field;
params[dirParamName] = sortedColumn.sortDir;
}
axios_1.default
.post("" + _this.props.dataSource.query)
.then(function (response) {
var data = response.data;
self.handleData(data);
})
.catch(function (reason) {
_this.setState({ isDataFetching: false });
});
}
else {
var query = _this.props.dataSource.query + "?" + takeParamName + "=" + _this.state.take + "&" + skipParamName + "=" + _this.state.skip;
if (sortedColumn != null) {
query = query + "&" + orderParamName + "=" + sortedColumn.field + "&" + dirParamName + "=" + sortedColumn.sortDir;
}
axios_1.default
.get(query)
.then(function (response) {
var data = response.data;
self.handleData(data);
})
.catch(function (reason) {
_this.setState({ isDataFetching: false });
});
}
};
_this.onPageChange = function (page, take, skip) {
if (_this.props.paginationProps.onPageChange)
_this.props.paginationProps.onPageChange(page, take, skip);
_this.setState({ page: page, take: take, skip: skip }, function () {
if (_this.props.dataSource !== undefined) {
_this.fetchData();
}
});
};
_this.getSelectedRowsWithAlsoTheCurrentOne = function (currentRow) {
var idRow = currentRow.value.id;
var isRowSelected = currentRow.isSelected;
if (_this.props.onlyOneRowCanBeSelected) {
return isRowSelected ? [currentRow] : [];
}
return isRowSelected
? (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], _this.currentRowsSelected, true), [currentRow], false) : _this.currentRowsSelected.filter(function (data) { return data.value.id !== idRow; });
};
_this.isAllRowsSelectedWithAlsoTheCurrentOne = function (currentRow) {
if (_this.props.onlyOneRowCanBeSelected)
return;
var dataLength = _this.state.rows.length;
var selectedRowsLength = _this.getSelectedRowsWithAlsoTheCurrentOne(currentRow).length;
var notCheckedRowsLength = _this.state.rows.filter(function (data) { return !data.isSelected; }).length;
return notCheckedRowsLength == 0 && selectedRowsLength % dataLength == 0;
};
_this.onRowSelectionChange = function (rowKey, currentRow) {
var allRowsSelected = _this.getSelectedRowsWithAlsoTheCurrentOne(currentRow);
var isAllRowsSelected = _this.isAllRowsSelectedWithAlsoTheCurrentOne(currentRow);
if (!_this.isSelectionControlled) {
var rows = _this.state.rows;
if (_this.props.onlyOneRowCanBeSelected) {
rows.forEach(function (item) { return (item.isSelected = false); });
}
rows[rowKey] = currentRow;
_this.setState({
rows: rows,
rowsSelected: allRowsSelected,
allRowsSelected: isAllRowsSelected,
});
}
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(currentRow, _this.dataSelectedFromCurrentRows, allRowsSelected, null);
}
};
_this.onSelectionAllChange = function (isSelected) {
if (!_this.isSelectionControlled) {
var rows = getRowsFromData(_this.state.rows, isSelected);
var addedRows = getNewSelectedRows(rows, _this.currentRowsSelected);
var isCurrentlyAllRowSelected = _this.state.allRowsSelected;
var newAllDataSelected = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], _this.currentRowsSelected, true), addedRows, true);
if (isCurrentlyAllRowSelected) {
newAllDataSelected = removeRowsFromData(newAllDataSelected, _this.state.rows);
}
_this.setState({
rowsSelected: newAllDataSelected,
rows: rows,
allRowsSelected: isSelected,
});
}
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(null, _this.dataSelectedFromCurrentRows, _this.currentRowsSelected, isSelected);
}
};
_this.onSortChange = function (c, dir) {
if (_this.props.onSortChange) {
_this.props.onSortChange(c, dir);
}
var columns = [];
_this.state.columns.map(function (value) {
if (c.field == value.field) {
columns.push(c);
}
else {
value.isSorted = false;
value.sortDir = null;
columns.push(value);
}
});
_this.setState({ columns: columns }, function () {
if (_this.props.dataSource != undefined) {
_this.fetchData();
}
});
};
_this.refTable = null;
_this.onExport = function (a) {
_this.exportTableToCSV(_this.refTable, _this.props.exportCsv.fileName, true);
};
_this.fetchData = _this.fetchData.bind(_this);
_this.handleData = _this.handleData.bind(_this);
var data = _this.props.data;
var columns = _this.props.columns;
var _state = {
rows: [],
rowsSelected: [],
isDataFetching: false,
columns: columns,
skip: _this.props.paginationProps.skip || 0,
take: _this.props.paginationProps.take || 50,
page: _this.props.paginationProps.page || 1,
total: _this.props.paginationProps.total,
allRowsSelected: false,
};
if (_this.props.data != null) {
var rows = (0, exports.mapDataToRow)(data, (_a = _this.state) === null || _a === void 0 ? void 0 : _a.allRowsSelected, (_b = _this.state) === null || _b === void 0 ? void 0 : _b.rowsSelected);
_state.rows = rows;
_state.rowsSelected = rows.filter(function (s) { return s.isSelected; });
}
_this.state = _state;
return _this;
}
UpDataGrid.prototype.componentDidMount = function () {
if (this.props.dataSource != undefined) {
this.fetchData();
}
};
Object.defineProperty(UpDataGrid.prototype, "isSelectionControlled", {
get: function () {
return this.props.rowsSelected !== undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDataGrid.prototype, "currentRowsSelected", {
get: function () {
return this.isSelectionControlled ? this.props.rowsSelected : this.state.rowsSelected;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDataGrid.prototype, "dataSelectedFromCurrentRows", {
get: function () {
if (this.state.rows == null) {
return [];
}
return this.state.rows
.filter(function (row) {
if (row.isSelected === true) {
return true;
}
return false;
})
.map(function (row) {
return row.value;
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDataGrid.prototype, "isAllRowSelected", {
get: function () {
return !(0, utils_1.isEmpty)(this.state.data) && this.state.data.every(function (d) { return d.isSelected; });
},
enumerable: false,
configurable: true
});
UpDataGrid.getDerivedStateFromProps = function (props, state) {
var rows = state.rows;
var dataSelected = props.rowsSelected === undefined ? state === null || state === void 0 ? void 0 : state.rowsSelected : props.rowsSelected;
rows = props.data != null ? (0, exports.mapDataToRow)(props.data, null, dataSelected) : state.rows;
var allDataSelected = dataSelected;
if (rows != null && props.rowsSelected === undefined) {
var addedRows = rows.filter(function (r) { return r.isSelected; }).filter(function (r) { return !dataSelected.some(function (d) { return d.value.id === r.value.id; }); });
allDataSelected = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], dataSelected, true), addedRows, true);
}
var allRowsSelected = rows != null && rows.length > 0 && !rows.some(function (row) { return !row.isSelected; });
var newState = {
rows: rows,
rowsSelected: allDataSelected,
allRowsSelected: allRowsSelected,
columns: props.columns,
total: props.paginationProps.total,
isDataFetching: props.isDataFetching,
lastFetchedDataTime: props.lastFetchedDataTime,
};
if (props.paginationProps.skip != null) {
newState.skip = props.paginationProps.skip > props.paginationProps.total ? 0 : props.paginationProps.skip;
newState.take = props.paginationProps.take;
newState.page =
(props.paginationProps.page - 1) * props.paginationProps.take > props.paginationProps.total
? 1
: props.paginationProps.page;
}
return newState;
};
UpDataGrid.prototype.render = function () {
var _this = this;
var otherProps = (0, tslib_1.__rest)(this.props.paginationProps, []);
var pagination = ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('pagination-container') }, { children: (0, jsx_runtime_1.jsx)(UpPagination_1.default, (0, tslib_1.__assign)({ skip: this.state.skip, take: this.state.take, total: this.state.total, onPageChange: this.onPageChange.bind(this) }, otherProps), void 0) }), void 0));
var RowTemplate = this.props.rowTemplate;
var oddEvenStyle = null;
if (this.props.isOddEvenEnabled) {
oddEvenStyle = (0, typestyle_1.style)({
$nest: {
'& .up-data-grid-row:nth-child(even)': {
background: '#FFF',
},
'& .up-data-grid-row:nth-child(odd)': {
background: '#f5f5f5',
},
},
});
}
var columns = this.state.columns;
if (this.props.isSortEnabled == false) {
var newUnsortableColumns_1 = [];
columns.map(function (value) {
value.isSortable = false;
newUnsortableColumns_1.push(value);
});
columns = newUnsortableColumns_1;
}
var rows = [];
for (var index = 0; index < this.state.rows.length; index++) {
var value = this.state.rows[index];
if (RowTemplate) {
rows.push((0, jsx_runtime_1.jsx)(RowTemplate, { isSelectionEnabled: this.props.isSelectionEnabled, actions: this.props.rowActions, columns: columns, item: value }, "row-" + index));
}
else {
rows.push((0, jsx_runtime_1.jsx)(UpDataGridRow_1.default, { rowIndex: index, isSelectionEnabled: this.props.isSelectionEnabled, actions: this.props.rowActions, columns: columns, value: value.value, isSelected: value.isSelected, onSelectionChange: this.onRowSelectionChange, onClick: this.props.onRowClick, getRowCustomClassName: this.props.getRowCustomClassName, isRowClickable: this.props.isRowClickable, isOneRowSelected: this.props.onlyOneRowCanBeSelected && this.currentRowsSelected.length === 1 ? true : false }, "row-" + index));
}
if (this.props.injectRow != null) {
var previous = value;
var next = this.state.rows[index + 1];
var rowToInject = this.props.injectRow(previous, next, columns);
if (rowToInject != null) {
rows.push((0, jsx_runtime_1.jsx)("tr", (0, tslib_1.__assign)({ className: "up-data-grid-row up-data-grid-row-bordered" }, { children: (0, jsx_runtime_1.jsx)("td", (0, tslib_1.__assign)({ className: "up-data-grid-cell", colSpan: columns.length }, { children: rowToInject }), void 0) }), "row-custom-" + index));
}
}
}
var providerValues = {
displayRowActionsWithinCell: this.props.displayRowActionsWithinCell,
rowActions: this.props.rowActions,
labelToDisplayRowActionsInCell: this.props.labelToDisplayRowActionsInCell,
};
var newFooterProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props.footerProps), (this.props.footerProps &&
this.props.footerProps.actionsDataGrid && {
actionsDataGrid: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props.footerProps.actionsDataGrid), { actions: this.props.footerProps.actionsDataGrid.actions.map(function (action) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, action), { onClick: function (rows) {
var promised = action.onClick(rows);
if (promised)
return promised.then(function (data) {
_this.setState({
rowsSelected: [],
rows: _this.state.rows.map(function (row) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, row), { isSelected: false })); }),
});
});
return new Promise(function (resolve) {
resolve(null);
});
} })); }) }),
}));
return ((0, jsx_runtime_1.jsx)(UpDataGridContext_1.UpDataGridProvider, (0, tslib_1.__assign)({ value: providerValues }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-data-grid-container', WrapperDataGridStyle, this.props.className) }, (0, types_1.getTestableComponentProps)(this.props), { children: [(0, jsx_runtime_1.jsx)(UpDataGridHeader_1.default, (0, tslib_1.__assign)({}, this.props.headerProps, { buttonExport: this.btnExportCsv }), void 0), this.props.isPaginationEnabled &&
this.props.paginationPosition != 'bottom' &&
!this.state.isDataFetching &&
pagination, (0, jsx_runtime_1.jsx)(LoadingIndicator_1.default, (0, tslib_1.__assign)({ displayMode: 'zone', message: this.props.loadingMessage, isLoading: this.state.isDataFetching, width: 320, height: 240 }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("table", (0, tslib_1.__assign)({ ref: function (r) {
_this.refTable = r;
}, className: (0, classnames_1.default)('up-data-grid-main', DataGridStyle(this.props)) }, { children: [(0, jsx_runtime_1.jsx)(UpDataGridRowHeader_1.default, { isSelectionEnabled: this.props.isSelectionEnabled, onSelectionChange: this.onSelectionAllChange.bind(this), onSortChange: this.onSortChange.bind(this), actions: this.props.rowActions, columns: columns, displayRowActionsWithinCell: this.props.displayRowActionsWithinCell, textAlignCells: this.props.textAlignCells, isAllDataChecked: this.state.allRowsSelected, isSelectionAllEnabled: !this.props.onlyOneRowCanBeSelected }, void 0), (0, jsx_runtime_1.jsx)("tbody", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-data-grid-body', oddEvenStyle) }, { children: rows }), void 0)] }), void 0) }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(UpDataGridFooter_1.default, (0, tslib_1.__assign)({}, newFooterProps, { isPaginationEnabled: this.props.isPaginationEnabled && this.props.paginationPosition != 'top', pagination: pagination, data: this.currentRowsSelected, theme: this.props.theme }), void 0)] }), void 0) }), void 0));
};
Object.defineProperty(UpDataGrid.prototype, "isExportCsvEnable", {
get: function () {
if (this.props.data == null || this.props.data.length === 0) {
return false;
}
return this.props.exportCsv != null;
},
enumerable: false,
configurable: true
});
Object.defineProperty(UpDataGrid.prototype, "btnExportCsv", {
get: function () {
if (this.isExportCsvEnable === false) {
return null;
}
if (this.props.exportCsv.textButton == null) {
return (0, jsx_runtime_1.jsx)(UpButton_1.default, { onClick: this.onExport, actionType: 'download' }, void 0);
}
return (0, jsx_runtime_1.jsxs)(UpButton_1.default, (0, tslib_1.__assign)({ onClick: this.onExport }, { children: [" ", this.props.exportCsv.textButton] }), void 0);
},
enumerable: false,
configurable: true
});
UpDataGrid.prototype.exportTableToCSV = function (table, filename, header) {
var csv = this.getCsvFromTable(table, header);
var ieVersion = (function () {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp('MSIE ([0-9]{1,}[.0-9]{0,})');
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
else if (navigator.appName == 'Netscape') {
var ua = navigator.userAgent;
var re = new RegExp('Trident/.*rv:([0-9]{1,}[.0-9]{0,})');
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
})();
if (ieVersion != -1) {
if (ieVersion > 9) {
var bytes = new Array(csv.length);
for (var i = 0; i < csv.length; i++) {
bytes[i] = csv.charCodeAt(i);
}
var blob = new Blob([new Uint8Array(bytes)], {
type: 'text/csv',
});
if (typeof window.navigator['msSaveBlob'] !== 'undefined') {
window.navigator.msSaveBlob(blob, filename);
}
else if (typeof window.navigator['msSaveOrOpenBlob'] !== 'undefined') {
window.navigator.msSaveOrOpenBlob(blob, filename);
}
}
}
else {
var a = document.createElement('A');
a.href = 'data:text/csv;base64,' + window.btoa(csv);
a.download = filename;
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
UpDataGrid.prototype.getCsvFromTable = function (table, header) {
var csv = '';
var tmpColDelim = String.fromCharCode(11), tmpRowDelim = String.fromCharCode(0), colDelim = '";"', rowDelim = '"\r\n"';
var getRows = function (typeOfRow) {
var $rows = (0, jquery_1.default)(table).find('tr:has(' + typeOfRow + ')');
return (csv =
'"' +
$rows
.map(function (i, row) {
var $row = (0, jquery_1.default)(row), $cols = $row.find(typeOfRow);
return $cols
.map(function (j, col) {
var $col = (0, jquery_1.default)(col), text = $col.text().trim();
return text.replace('"', '""') + Array($col[0].colSpan).join(tmpColDelim);
})
.get()
.join(tmpColDelim);
})
.get()
.join(tmpRowDelim)
.split(tmpRowDelim)
.join(rowDelim)
.split(tmpColDelim)
.join(colDelim) +
'"');
};
if (header) {
csv += getRows('th') + '\r\n';
}
csv += getRows('td');
return csv;
};
UpDataGrid.defaultProps = {
columns: [],
rowActions: null,
dataKey: 'Entity',
idKey: 'id',
labelToDisplayRowActionsInCell: '',
paginationPosition: 'top',
isSelectionEnabled: false,
isPaginationEnabled: false,
isOddEvenEnabled: true,
isSortEnabled: true,
theme: theming_1.default,
alignCells: 'initial',
textAlignCells: 'initial',
loadingMessage: 'Chargement en cours...',
paginationProps: {
takes: [
{ id: 10, text: '10' },
{ id: 20, text: '20' },
{ id: 50, text: '50' },
{ id: 100, text: '100' },
{ id: 200, text: '200' },
{ id: 500, text: '500' },
],
},
};
return UpDataGrid;
}(React.Component));
exports.default = (0, theming_1.withTheme)(UpDataGrid);
//# sourceMappingURL=UpDataGrid.js.map