sws-frontend
Version:
sws frontend project
159 lines • 7.45 kB
JavaScript
;
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 __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var helpers_1 = require("../commons/helpers");
var merge = helpers_1.default.merge;
var checkbox_1 = require("./checkbox");
require("./selectabletable.scss");
var filteredtable_1 = require("./filteredtable");
var SelectableTable = (function (_super) {
__extends(SelectableTable, _super);
function SelectableTable(p) {
var _this = _super.call(this, p) || this;
_this.state = {
allCheckbox: _this.props.selected || false,
selection: p.data.map(function (d) { return _this.props.selected || false; })
};
_this.onToggleSelectAll = _this.onToggleSelectAll.bind(_this);
_this.onChangeSelection = _this.onChangeSelection.bind(_this);
_this.buildChildProps = _this.buildChildProps.bind(_this);
_this.getSelected = _this.getSelected.bind(_this);
return _this;
}
SelectableTable.prototype.componentWillMount = function () {
var onChangeSelection = this.props.onChangeSelection;
if (onChangeSelection) {
onChangeSelection(this.getSelected());
}
};
SelectableTable.prototype.componentWillReceiveProps = function (n) {
//reset selection when datas change in add and remove processes
var p = this.props;
if (p.data.length != n.data.length) {
this.setState({
allCheckbox: n.selected || false,
selection: n.data.map(function (d) { return n.selected || false; })
});
}
};
SelectableTable.prototype.buildChildProps = function (selected) {
return { 'selected': selected };
};
SelectableTable.prototype.onToggleSelectAll = function (e) {
var _this = this;
var onChangeSelection = this.props.onChangeSelection;
var newSelection = this.state.selection.map(function (s) { return e; });
this.setState({ allCheckbox: e, selection: newSelection }, onChangeSelection ? function () { return onChangeSelection(_this.getSelected()); } : undefined);
};
SelectableTable.prototype.onChangeSelection = function (value, data, cellProps) {
var _this = this;
var selection = this.state.selection;
var onChangeSelection = this.props.onChangeSelection;
selection[data.index] = !data.select.value;
this.setState({
allCheckbox: selection.filter(function (s) { return s; }).length == this.props.data.length ? true : false,
selection: selection
}, onChangeSelection ? function () { return onChangeSelection(_this.getSelected()); } : undefined);
};
SelectableTable.prototype.getSelected = function () {
var p = this.props;
var s = this.state;
return p.data && ((p.find && p.find('', p.data)) || p.data).filter(function (d, idx) { return s.selection && s.selection[idx] ? true : false; });
};
SelectableTable.prototype.render = function () {
var _this = this;
var _a = this.props, columns = _a.columns, data = _a.data, p = __rest(_a, ["columns", "data"]);
var _b = p, children = _b.children, fTProps = __rest(_b, ["children"]);
var s = this.state;
var selection = s.selection, allCheckbox = s.allCheckbox;
var selectableColumns = helpers_1.default.deepCopy(columns);
var selected = this.getSelected();
var selLength = (selected || []).length;
selectableColumns.unshift({
name: "select",
title: [React.createElement(checkbox_1.default, { checked: allCheckbox, onChange: function (e) { return _this.onToggleSelectAll(e.target.checked); } }), React.createElement("span", { className: "badge" }, selLength)],
width: 60,
className: "selection-col",
render: function (value, data, cellProps) {
return React.createElement(checkbox_1.default, { onChange: function (e) { return _this.onChangeSelection(value, data, cellProps); }, checked: selection[data.index] });
},
columnDataSource: selection
});
//every column can have a datasource
//here it is used for adding selection on a table:
//*filter columns with external datasource
//* for each of this columns
//** for each row of the table
//*** add a reference of the element of the column into the row
var columnsDataSource = selectableColumns.filter(function (c) { return c.columnDataSource !== undefined; }).reduce(function (acc, cur, i) {
acc[cur.name] = cur.columnDataSource || undefined;
return acc;
}, {});
var datas = [];
if (Object.keys(columnsDataSource).length > 0) {
var _loop_1 = function () {
var c = columnsDataSource[cindex];
data.map(function (s, sindex) {
var obj = {};
obj[cindex] = {
index: sindex,
value: c && c[sindex]
};
obj["index"] = sindex;
datas.push(helpers_1.default.merge(s, obj));
});
};
for (var cindex in columnsDataSource) {
_loop_1();
}
}
else {
datas = data.map(function (s, i) {
s["index"] = i;
return s;
});
}
return React.createElement("div", { className: "selectable-table" },
React.createElement(Table, __assign({}, fTProps, { data: datas, columns: selectableColumns }),
React.createElement("div", { className: "selectable-table-buttons" }, React.Children.map(children, function (c) {
return React.cloneElement(c, _this.buildChildProps(_this.getSelected()));
}))));
};
return SelectableTable;
}(React.Component));
var Table = (function (_super) {
__extends(Table, _super);
function Table() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Table;
}(filteredtable_1.default));
exports.default = SelectableTable;
//# sourceMappingURL=selectabletable.js.map