@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
717 lines • 32.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var $ = require("jquery");
var React = require("react");
var classnames = require("classnames");
var typestyle_1 = require("typestyle");
var axios_1 = require("axios");
var UpPagination_1 = require("./UpPagination");
var UpDataGridRowHeader_1 = require("./UpDataGridRowHeader");
var UpDataGridRow_1 = require("./UpDataGridRow");
var LoadingIndicator_1 = require("../../Display/LoadingIndicator");
var UpButton_1 = require("../../Inputs/Button/UpButton");
var theming_1 = require("../../../Common/theming");
var UpDataGridFooter_1 = require("./UpDataGridFooter");
var UpDataGridHeader_1 = require("./UpDataGridHeader");
var _ = require("lodash");
var UpDataGridContext_1 = require("./UpDataGridContext");
var types_1 = require("../../../Common/utils/types");
var device_1 = require("../../../Common/utils/device");
var WrapperDataGridStyle = typestyle_1.style({
position: 'relative',
}, 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 typestyle_1.style({
width: '100%',
borderSpacing: 0,
borderStyle: 'solid',
borderWidth: '1px',
borderColor: props.theme.colorMap.defaultBorder,
color: props.theme.colorMap.primary,
fontSize: '14px',
borderRadius: props.theme.borderRadius,
overflow: 'hidden',
$nest: {
'& .up-data-grid-header': {
backgroundColor: props.theme.colorMap.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: props.theme.colorMap.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',
},
'& .up-data-grid-header-cell-label': {
fontSize: '14px',
color: props.theme.colorMap.primary,
},
'& .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-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',
},
},
}, typestyle_1.media(device_1.DeviceSmartphones, {
$nest: {
'& .up-data-grid-header-cell-label': {
whiteSpace: 'nowrap',
},
},
}));
};
var UpDataGrid = (function (_super) {
tslib_1.__extends(UpDataGrid, _super);
function UpDataGrid(props, context) {
var _this = _super.call(this, props, context) || this;
_this.isSelectedRowData = function (id) {
var selectedData = _this.state.selectedData;
return selectedData.some(function (data) { return data.value.id === id; });
};
_this.mapDataToRow = function (data) {
var rows = [];
data.map(function (value, index) {
rows.push({
isSelected: _this.state &&
(_this.state.allRowSelected ||
_this.isSelectedRowData(value.id)),
value: value,
});
});
return rows;
};
_this.handleData = function (data) {
var sortedColumn = null;
_this.state.columns.map(function (value, index) {
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 = _this.mapDataToRow(data);
if (rows.length == 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;
});
}
if (_this.state.take < total) {
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.state.selectedData.some(function (d) { return d.value.id === r.value.id; });
});
var selectedData = tslib_1.__spreadArrays(_this.state.selectedData, addedRows);
_this.setState({
data: rows,
selectedData: selectedData,
total: total,
isDataFetching: false,
});
};
_this.fetchData = function () {
_this.setState({ isDataFetching: true });
var sortedColumn = null;
_this.state.columns.map(function (value, index) {
if (value.isSorted) {
sortedColumn = value;
}
});
var dataKey = _this.props.dataKey;
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.getSelectedRows = function () {
if (_this.props.isSelectionEnabled) {
return null;
}
return _this.state.data.filter(function (r) { return r.isSelected === true; });
};
_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.selectedRowsDataWithAlsoTheCurrentOne = function (currentRow) {
var idRow = currentRow.value.id;
var isRowSelected = currentRow.isSelected;
if (_this.props.onlyOneRowCanBeSelected) {
return isRowSelected ? [currentRow] : [];
}
return isRowSelected
? tslib_1.__spreadArrays(_this.state.selectedData, [currentRow]) : _this.state.selectedData.filter(function (data) { return data.value.id !== idRow; });
};
_this.isAllRowsSelectedWithAlsoTheCurrentOne = function (currentRow) {
if (_this.props.onlyOneRowCanBeSelected)
return;
var dataLength = _this.state.data.length;
var selectedRowsLength = _this.selectedRowsDataWithAlsoTheCurrentOne(currentRow).length;
var notCheckedRowsLength = _this.state.data.filter(function (data) { return !data.isSelected; }).length;
return (notCheckedRowsLength == 0 &&
selectedRowsLength % dataLength == 0);
};
_this.onRowSelectionChange = function (rowKey, currentRow) {
var rows = _this.state.data;
if (_this.props.onlyOneRowCanBeSelected) {
rows.forEach(function (item) { return (item.isSelected = false); });
}
rows[rowKey] = currentRow;
_this.setState({
data: rows,
selectedData: _this.selectedRowsDataWithAlsoTheCurrentOne(currentRow),
allRowSelected: _this.isAllRowsSelectedWithAlsoTheCurrentOne(currentRow),
}, function () {
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(currentRow, _this.seletectedRow, _this.state.selectedData);
}
});
};
_this.onSelectionAllChange = function (isSelected) {
var rows = _this.state.data.map(function (row, index) {
return {
isSelected: !_this.state.allRowSelected,
value: row.value,
};
});
var addedRows = rows
.filter(function (r) { return r.isSelected; })
.filter(function (r) {
return !_this.state.selectedData
.map(function (d) { return d.value.id; })
.includes(r.value.id);
});
var selectedData = tslib_1.__spreadArrays(_this.state.selectedData, addedRows);
if (_this.state.allRowSelected) {
selectedData = selectedData.filter(function (s) { return !_this.state.data.some(function (d) { return d.value.id === s.value.id; }); });
}
_this.setState({
selectedData: selectedData,
data: rows,
allRowSelected: !_this.state.allRowSelected,
}, function () {
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(null, _this.seletectedRow, _this.state.selectedData);
}
});
};
_this.onSortChange = function (c, dir) {
if (_this.props.onSortChange) {
_this.props.onSortChange(c, dir);
}
var columns = [];
_this.state.columns.map(function (value, index) {
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();
}
else {
_this.handleData(_this.props.data);
}
});
};
_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 = {
data: [],
selectedData: [],
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,
allRowSelected: false,
};
if (_this.props.data != null) {
var rows = _this.mapDataToRow(data);
_state.data = rows;
_state.selectedData = 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, "seletectedRow", {
get: function () {
if (this.state.data == null) {
return [];
}
return this.state.data
.filter(function (value) {
if (value.isSelected === true) {
return true;
}
return false;
})
.map(function (value) {
return value.value;
});
},
enumerable: true,
configurable: true
});
UpDataGrid.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var data = this.state.data;
var curentState = data.map(function (v) {
return v.value;
});
var hasSameData = _.isEqual(curentState, nextProps.data);
if (this.props.dataSource == null && hasSameData === false) {
data =
nextProps.data != null
? this.mapDataToRow(nextProps.data)
: nextProps.data;
}
var addedRows = data
.filter(function (r) { return r.isSelected; })
.filter(function (r) {
return !_this.state.selectedData.some(function (d) { return d.value.id === r.value.id; });
});
var selectedData = tslib_1.__spreadArrays(this.state.selectedData, addedRows);
var newState = {
data: data,
columns: nextProps.columns,
total: nextProps.paginationProps.total,
isDataFetching: nextProps.isDataFetching,
selectedData: selectedData,
};
if (nextProps.paginationProps.skip != null) {
newState.skip =
nextProps.paginationProps.skip >
nextProps.paginationProps.total
? 0
: nextProps.paginationProps.skip;
newState.take = nextProps.paginationProps.take;
newState.page =
(nextProps.paginationProps.page - 1) *
nextProps.paginationProps.take >
nextProps.paginationProps.total
? 1
: nextProps.paginationProps.page;
}
this.setState(newState, function () {
if (hasSameData === false) {
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(null, [], _this.state.selectedData);
}
else {
_this.handleData(_this.props.data);
}
}
});
};
UpDataGrid.prototype.render = function () {
var _this = this;
var _a = this.props.paginationProps, skip = _a.skip, take = _a.take, total = _a.total, onPageChange = _a.onPageChange, otherProps = tslib_1.__rest(_a, ["skip", "take", "total", "onPageChange"]);
var theme = this.props.theme;
var pagination = (React.createElement("div", { className: classnames('pagination-container') },
React.createElement(UpPagination_1.default, tslib_1.__assign({ skip: this.state.skip, take: this.state.take, total: this.state.total, onPageChange: this.onPageChange.bind(this) }, otherProps))));
var RowTemplate = this.props.rowTemplate;
var oddEvenStyle = null;
if (this.props.isOddEvenEnabled) {
oddEvenStyle = typestyle_1.style({
$nest: {
'& .up-data-grid-row:nth-child(even)': {
background: theme.colorMap.white,
},
'& .up-data-grid-row:nth-child(odd)': {
background: theme.colorMap.white2,
},
},
});
}
var columns = this.state.columns;
if (this.props.isSortEnabled == false) {
var newUnsortableColumns_1 = [];
columns.map(function (value, index) {
value.isSortable = false;
newUnsortableColumns_1.push(value);
});
columns = newUnsortableColumns_1;
}
var rows = [];
for (var index = 0; index < this.state.data.length; index++) {
var value = this.state.data[index];
if (RowTemplate) {
rows.push(React.createElement(RowTemplate, { key: "row-" + index, isSelectionEnabled: this.props.isSelectionEnabled, actions: this.props.rowActions, columns: columns, item: value }));
}
else {
rows.push(React.createElement(UpDataGridRow_1.default, { key: "row-" + index, 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.state.selectedData.length === 1
? true
: false }));
}
if (this.props.injectRow != null) {
var previous = value;
var next = this.state.data[index + 1];
var rowToInject = this.props.injectRow(previous, next, columns);
if (rowToInject != null) {
rows.push(React.createElement("tr", { className: "up-data-grid-row up-data-grid-row-bordered", key: "row-custom-" + index },
React.createElement("td", { className: "up-data-grid-cell", colSpan: columns.length }, rowToInject)));
}
}
}
var providerValues = {
displayRowActionsWithinCell: this.props
.displayRowActionsWithinCell,
rowActions: this.props.rowActions,
labelToDisplayRowActionsInCell: this.props
.labelToDisplayRowActionsInCell,
};
var newFooterProps = tslib_1.__assign(tslib_1.__assign({}, this.props.footerProps), (this.props.footerProps &&
this.props.footerProps.actionsDataGrid && {
actionsDataGrid: tslib_1.__assign(tslib_1.__assign({}, this.props.footerProps.actionsDataGrid), { actions: this.props.footerProps.actionsDataGrid.actions.map(function (action) { return (tslib_1.__assign(tslib_1.__assign({}, action), { onClick: function (rows) {
return action.onClick(rows).then(function (data) {
_this.setState({
selectedData: [],
data: _this.state.data.map(function (row) { return (tslib_1.__assign(tslib_1.__assign({}, row), { isSelected: false })); }),
});
});
} })); }) }),
}));
return (React.createElement(UpDataGridContext_1.UpDataGridProvider, { value: providerValues },
React.createElement("div", tslib_1.__assign({ className: classnames('up-data-grid-container', WrapperDataGridStyle, this.props.className) }, types_1.getTestableComponentProps(this.props)),
React.createElement(UpDataGridHeader_1.default, tslib_1.__assign({}, this.props.headerProps, { buttonExport: this.btnExportCsv })),
this.props.isPaginationEnabled &&
this.props.paginationPosition != 'bottom' &&
!this.state.isDataFetching &&
pagination,
React.createElement(LoadingIndicator_1.default, { displayMode: 'zone', message: this.props.loadingMessage, isLoading: this.state.isDataFetching, width: 320, height: 240 },
React.createElement(React.Fragment, null,
React.createElement("table", { ref: function (r) {
_this.refTable = r;
}, className: classnames('up-data-grid-main', DataGridStyle(this.props)) },
React.createElement(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.allRowSelected, isSelectionAllEnabled: !this.props.onlyOneRowCanBeSelected }),
React.createElement("tbody", { className: classnames('up-data-grid-body', oddEvenStyle) }, rows)))),
React.createElement(UpDataGridFooter_1.default, tslib_1.__assign({}, newFooterProps, { isPaginationEnabled: this.props.isPaginationEnabled &&
this.props.paginationPosition != 'top', pagination: pagination, data: this.state.selectedData, theme: this.props.theme })))));
};
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: true,
configurable: true
});
Object.defineProperty(UpDataGrid.prototype, "btnExportCsv", {
get: function () {
if (this.isExportCsvEnable === false) {
return null;
}
if (this.props.exportCsv.textButton == null) {
return (React.createElement(UpButton_1.default, { onClick: this.onExport, actionType: 'download' }));
}
return (React.createElement(UpButton_1.default, { onClick: this.onExport },
' ',
this.props.exportCsv.textButton));
},
enumerable: true,
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',
});
window.navigator.msSaveBlob(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 tmpColDelim = String.fromCharCode(11), tmpRowDelim = String.fromCharCode(0), colDelim = '";"', rowDelim = '"\r\n"', csv = '', getRows = function (typeOfRow) {
var $rows = $(table).find('tr:has(' + typeOfRow + ')');
return (csv =
'"' +
$rows
.map(function (i, row) {
var $row = $(row), $cols = $row.find(typeOfRow);
return $cols
.map(function (j, col) {
var $col = $(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',
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.UpDataGrid = UpDataGrid;
exports.default = theming_1.withTheme(UpDataGrid);
//# sourceMappingURL=UpDataGrid.js.map