kea-react
Version:
Componentes comunes de react
198 lines (197 loc) • 8.64 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 __());
};
})();
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var table = require("./table");
var selector = require("./selector");
var async_1 = require("./async");
var HOC_1 = require("./HOC");
/**Un selector de pagina */
var PageSelector = /** @class */ (function (_super) {
__extends(PageSelector, _super);
function PageSelector() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleOnChange = function (value) {
if (!_this.props.onValueChanged)
return;
_this.props.onValueChanged(value);
};
return _this;
}
Object.defineProperty(PageSelector.prototype, "Items", {
get: function () {
var ret = [];
var paginas = selector.Rango(this.props.count).map(function (x) { return ({ value: x, label: x + 1, tooltip: "página " + (x + 1) }); });
return paginas;
},
enumerable: true,
configurable: true
});
PageSelector.prototype.render = function () {
return (React.createElement(selector.PaginatedButtonSelector, { items: this.Items, value: this.props.selected, onChange: this.handleOnChange }));
};
return PageSelector;
}(React.PureComponent));
exports.PageSelector = PageSelector;
var commonPageSizes = [10, 15, 30, 50, 100, 200, 500, 1000, 2000, 5000, 10000];
/**Una tabla paginada, el usuario puede cambiar la pagina actual.
* Establezca los elementos tr de la tabla como los hijos de este componente
*/
var SyncPaginatedTable = /** @class */ (function (_super) {
__extends(SyncPaginatedTable, _super);
function SyncPaginatedTable(props) {
var _this = _super.call(this, props) || this;
_this.handleSelectedPageChange = function (page) {
if (_this.props.onChange) {
_this.props.onChange(__assign({}, _this.props.value, { selectedPage: page }));
}
};
_this.handlePageSizeChange = function (size) {
if (_this.props.onChange) {
_this.props.onChange(__assign({}, _this.props.value, { selectedPageSize: size }));
}
};
return _this;
}
Object.defineProperty(SyncPaginatedTable.prototype, "ItemsCount", {
/**Cantidad total de elementos */
get: function () {
return this.Items.length;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "PageCount", {
/**Cantidad de páginas */
get: function () {
return Math.ceil(this.ItemsCount / this.PageSize);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "PageSize", {
/**Tamaño de la página */
get: function () {
return this.props.value.selectedPageSize;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "Items", {
/**Todos los elementos */
get: function () {
return (this.props.items || []);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "MaxPage", {
/**Maxima pagina que se puede seleccionar */
get: function () {
return Math.max(this.PageCount - 1, 0);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "EffectiveSelected", {
/**Pagina que se debe de mostrar como la seleccionada */
get: function () {
return Math.min(this.selectedPage, this.MaxPage);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "selectedPage", {
get: function () {
return this.props.value.selectedPage;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "PageItems", {
get: function () {
var selectedPage = this.EffectiveSelected;
return (this.Items
.slice(selectedPage * this.PageSize, (selectedPage + 1) * this.PageSize)
.map(function (x) { return (typeof x == "function") ? x() : x; }));
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "PageSizes", {
/**Tamaños de página disponibles para que el usuario seleccione */
get: function () {
var count = this.ItemsCount;
var ret = commonPageSizes.filter(function (x) { return x < count; });
ret.push(count);
return ret;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SyncPaginatedTable.prototype, "ShowPageControls", {
/**Determina si se deben de mostrar los controles del paginador */
get: function () {
var minPageSize = commonPageSizes[0];
return this.PageCount > 0 && this.Items.length > minPageSize;
},
enumerable: true,
configurable: true
});
SyncPaginatedTable.prototype.render = function () {
//TODO: Usar aqui el PageSelector
return (React.createElement("div", null,
React.createElement("span", null,
this.ShowPageControls &&
React.createElement(PageSelector, { onValueChanged: this.handleSelectedPageChange, selected: this.EffectiveSelected, count: this.PageCount }),
/**Selector del tamaño de la página*/
this.ShowPageControls &&
React.createElement("div", { className: "pull-right" },
React.createElement(selector.ButtonSelector, { items: this.PageSizes.map(function (x) { return ({ value: x, label: x, tooltip: x + " elementos por página" }); }), value: this.props.value.selectedPageSize, onChange: this.handlePageSizeChange }))),
React.createElement(table.Table, { header: this.props.header, items: this.PageItems })));
};
return SyncPaginatedTable;
}(React.PureComponent));
/**Tabla paginada con soporte para items y header asíncronos */
var ControlledPaginatedTable = /** @class */ (function (_super) {
__extends(ControlledPaginatedTable, _super);
function ControlledPaginatedTable(props) {
var _this = _super.call(this, props) || this;
_this.state = { SelectedPage: 0, SelectedPageSize: 15 };
if (props.children) {
console.warn("No mande los hijos de la tabla como hijos del elemento, utilice props.items");
}
return _this;
}
ControlledPaginatedTable.prototype.componentWillReceiveProps = function (props) {
if (props.children) {
console.warn("No mande los hijos de la tabla como hijos del elemento, utilice props.items");
}
};
ControlledPaginatedTable.prototype.render = function () {
var _this = this;
var prom = Promise.all([this.props.header, this.props.items || this.props.children || []]);
return (async_1.async(prom, function (value) {
return React.createElement(SyncPaginatedTable, { header: value[0], items: value[1], value: _this.props.value || { selectedPage: 0, selectedPageSize: 15 }, onChange: _this.props.onChange });
}));
};
return ControlledPaginatedTable;
}(React.PureComponent));
exports.PaginatedTable = HOC_1.MakeUncontrolledCookies("value", "onChange")(ControlledPaginatedTable);