@up-group/react-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
487 lines • 20.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
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 UpDataGridToolbar_1 = require("./UpDataGridToolbar");
var UpDataGridRowHeader_1 = require("./UpDataGridRowHeader");
var UpDataGridRow_1 = require("./UpDataGridRow");
var LoadingIndicator_1 = require("../../Display/LoadingIndicator");
var index_1 = require("../../Inputs/Button/index");
var shallowEqual_1 = require("../../../Common/utils/shallowEqual");
var WrapperDataGridStyle = typestyle_1.style({
position: "relative"
});
var CellInnerElementStyle = {
marginTop: "0.3em"
};
var DataGridStyle = typestyle_1.style({
width: "100%",
border: "1px solid #737373",
borderRadius: "4px",
borderCollapse: "collapse",
$nest: {
".up-data-grid-header": {
backgroundColor: "#fafafa",
backgroundImage: "linear-gradient(to bottom, #ffffff, #f2f2f2)",
backgroundRepeat: "repeat-x",
border: "1px solid #d4d4d4",
borderRadius: "4px",
boxShadow: "0 1px 4px rgba(0, 0, 0, 0.067)",
color: "#428bca",
fontWeight: 700,
},
".up-data-grid-body": {
background: "white",
},
".up-selection": {
width: "0.2em"
},
".up-display-label": CellInnerElementStyle,
".up-display-value": CellInnerElementStyle,
".up-data-grid-row": {},
".up-data-grid-header-cell": {
textAlign: "left",
verticalAlign: "top",
padding: "4px"
},
".up-data-grid-cell": {
verticalAlign: "top",
padding: "8px"
},
".up-data-grid-row-bordered": {
borderTop: "0.1em solid #428bca"
},
".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 #737373",
borderBottom: "0.1em solid #737373",
backgroundColor: "whitesmoke"
}
}
},
".up-data-grid-sortable": {
cursor: "pointer"
}
}
});
var UpDataGrid = (function (_super) {
__extends(UpDataGrid, _super);
function UpDataGrid(props, context) {
var _this = _super.call(this, props, context) || this;
_this.mapDataToRow = function (data) {
var rows = [];
data.map(function (value, index) {
rows.push({
isSelected: false,
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 && _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);
}
}
_this.setState({ data: rows, 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.onPageChange)
_this.props.onPageChange(page, take, skip);
_this.setState({ page: page, take: take, skip: skip }, function () {
if (_this.props.dataSource != undefined) {
_this.fetchData();
}
});
};
_this.onRowSelectionChange = function (rowKey, r) {
var rows = _this.state.data;
rows[rowKey] = r;
_this.setState({ data: rows }, function () {
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(r, _this.seletectedRow);
}
});
};
_this.onSelectionAllChange = function (isSelected) {
var rows = _this.state.data.map(function (row, index) {
return {
isSelected: isSelected,
value: row.value
};
});
_this.setState({ data: rows }, function () {
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(null, _this.seletectedRow);
}
});
};
_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();
}
});
};
_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 = props.data;
var columns = _this.props.columns;
var _state = {
data: [],
isDataFetching: false,
columns: columns,
page: 1,
skip: 0,
take: props.defaultTake,
total: props.total
};
if (props.data != null) {
_state.data = _this.mapDataToRow(data);
}
_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.arraysEqual = function (arr1, arr2) {
if (arr1.length !== arr2.length) {
return false;
}
for (var i = arr1.length; i--;) {
if (shallowEqual_1.default(arr1[i], arr2[i]) === false) {
return false;
}
}
return true;
};
UpDataGrid.prototype.componentWillReceiveProps = function (nextProps) {
var _this = this;
var data = this.state.data;
var curentState = data.map((function (v) { return v.value; }));
var arrayEqualResult = this.arraysEqual(curentState, nextProps.data);
if (this.props.dataSource == null && arrayEqualResult === false) {
data = (nextProps.data != null) ? this.mapDataToRow(nextProps.data) : nextProps.data;
}
var newState = {
data: data,
columns: nextProps.columns,
total: nextProps.total,
isDataFetching: nextProps.isDataFetching,
skip: nextProps.defaultSkip > nextProps.total ? 0 : nextProps.defaultSkip,
take: nextProps.defaultTake,
page: (nextProps.defaultPage - 1) * nextProps.defaultSkip > nextProps.total ? 1 : nextProps.defaultPage
};
this.setState(newState, function () {
if (arrayEqualResult === false) {
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(null, []);
}
}
});
};
UpDataGrid.prototype.render = function () {
var _this = this;
var takes = [{ id: 20, text: "20" },
{ id: 50, text: "50" },
{ id: 100, text: "100" },
{ id: 200, text: "200" }];
var pagination = React.createElement(UpPagination_1.default, { defaultSkip: this.state.skip, defaultTake: this.state.take, total: this.state.total, onPageChange: this.onPageChange.bind(this), takes: takes });
var toolbar = React.createElement(UpDataGridToolbar_1.default, null);
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: "#EFEFEF"
},
'.up-data-grid-row:nth-child(odd)': {
background: "#FFF"
}
}
});
}
var columns = this.state.columns;
if (this.props.isSortEnabled == false) {
var newUnsortableColumns = [];
columns.map(function (value, index) {
value.isSortable = false;
newUnsortableColumns.push(value);
});
columns = newUnsortableColumns;
}
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.actions, columns: columns, item: value }));
}
else {
rows.push(React.createElement(UpDataGridRow_1.default, { key: "row-" + index, rowIndex: index, isSelectionEnabled: this.props.isSelectionEnabled, actions: this.props.actions, columns: columns, value: value.value, isSelected: value.isSelected, onSelectionChange: this.onRowSelectionChange }));
}
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)));
}
}
}
return (React.createElement("div", { className: classnames("up-data-grid-container", WrapperDataGridStyle) },
this.props.isPaginationEnabled && this.props.paginationPosition != 'bottom' &&
pagination,
React.createElement(LoadingIndicator_1.default, { message: "Chargement en cours", isLoading: this.state.isDataFetching }),
this.btnExportCsv,
!this.state.isDataFetching &&
React.createElement("table", { ref: function (r) { _this.refTable = r; }, className: classnames("up-data-grid-main", DataGridStyle) },
React.createElement(UpDataGridRowHeader_1.default, { isSelectionEnabled: this.props.isSelectionEnabled, onSelectionChange: this.onSelectionAllChange.bind(this), onSortChange: this.onSortChange.bind(this), actions: this.props.actions, columns: columns }),
React.createElement("tbody", { className: classnames("up-data-grid-body", OddEvenStyle) }, rows)),
!this.state.isDataFetching && this.props.isPaginationEnabled && this.props.paginationPosition != 'top' &&
React.createElement("div", { style: { marginTop: "10px" } }, pagination)));
};
UpDataGrid.prototype.componentDidUpdate = function (prevProps, prevState) {
};
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(index_1.default, { onClick: this.onExport, actionType: "download" });
}
return React.createElement(index_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: [],
actions: [],
dataKey: 'Entity',
paginationPosition: 'top',
defaultSkip: 0,
defaultTake: 50,
defaultPage: 1,
isSelectionEnabled: false,
isPaginationEnabled: false,
isOddEvenEnabled: true,
isSortEnabled: true
};
return UpDataGrid;
}(React.Component));
exports.default = UpDataGrid;
//# sourceMappingURL=UpDataGrid.js.map