@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
41 lines • 2.17 kB
JavaScript
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { useEffect } from "react";
import Button from "../Button/Button.js";
/** A generic list component with support of various performance/scalability improvements. */
export function List(_a) {
var _b;
var items = _a.items, itemRenderer = _a.itemRenderer, itemId = _a.itemId, limitOptions = _a.limitOptions, _c = _a.moreLabel, moreLabel = _c === void 0 ? "Show more..." : _c;
// The number of items to show in the list, undefined means unlimited
var _d = __read(React.useState((_b = limitOptions === null || limitOptions === void 0 ? void 0 : limitOptions.initialMax) !== null && _b !== void 0 ? _b : undefined), 2), nrOfItemsToShow = _d[0], setNrOfItemsToShow = _d[1];
useEffect(function () {
var _a;
setNrOfItemsToShow((_a = limitOptions === null || limitOptions === void 0 ? void 0 : limitOptions.initialMax) !== null && _a !== void 0 ? _a : undefined);
}, [items.length, limitOptions === null || limitOptions === void 0 ? void 0 : limitOptions.initialMax]);
var onShowMore = function () {
if (limitOptions) {
setNrOfItemsToShow(function (current) { return (current !== null && current !== void 0 ? current : 0) + limitOptions.stepSize; });
}
};
return (React.createElement("ol", null,
(nrOfItemsToShow ? items.slice(0, nrOfItemsToShow) : items).map(function (item) {
return React.createElement("li", { key: itemId(item) }, itemRenderer(item));
}),
nrOfItemsToShow != null && nrOfItemsToShow < items.length && (React.createElement(Button, { onClick: onShowMore, fill: true }, moreLabel))));
}
export default List;
//# sourceMappingURL=List.js.map