@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
20 lines (19 loc) • 1.2 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useCallback } from 'react';
import Form from 'react-bootstrap/Form';
import { useControlledContext } from './ControlledContext';
var PageSizeSelector = function (_a) {
var _b = _a.name, name = _b === void 0 ? 'size' : _b, etc = __rest(_a, ["name"]);
var _c = useControlledContext(), fetchArgs = _c.fetchArgs, onFetchArgsChange = _c.onFetchArgsChange, size = _c.size;
var handleChange = useCallback(function (_a) {
var currentTarget = _a.currentTarget;
return onFetchArgsChange(__assign(__assign({}, fetchArgs), { size: Number(currentTarget.value) }));
}, [fetchArgs, onFetchArgsChange]);
return React.createElement(Form.Control, __assign({}, etc, { as: "select", name: name, onChange: handleChange, size: size, value: fetchArgs.size }),
React.createElement("option", { value: 5 }, "5"),
React.createElement("option", { value: 10 }, "10"),
React.createElement("option", { value: 25 }, "25"),
React.createElement("option", { value: 50 }, "50"),
React.createElement("option", { value: 100 }, "100"));
};
export default React.memo(PageSizeSelector);