@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
93 lines (92 loc) • 5.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FetchReason = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Page_1 = require("./Page");
var FetchReason;
(function (FetchReason) {
FetchReason[FetchReason["FIRST_TIME_FETCH"] = 0] = "FIRST_TIME_FETCH";
FetchReason[FetchReason["FETCH_ARGS_CHANGE"] = 1] = "FETCH_ARGS_CHANGE";
FetchReason[FetchReason["REFRESH_REQUIRED"] = 2] = "REFRESH_REQUIRED";
})(FetchReason = exports.FetchReason || (exports.FetchReason = {}));
var withPageInState = function (Child) {
return /** @class */ (function (_super) {
tslib_1.__extends(WithPageInState, _super);
function WithPageInState() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.prevFetchArgs = undefined;
_this.prevAbortController = undefined;
_this.state = {
error: null,
hasError: false,
loading: true,
page: Page_1.emptyPage(),
};
_this.handleRefreshRequired = function () {
_this.scheduleRefreshNow(FetchReason.REFRESH_REQUIRED);
};
_this.refresh = function (fetchReason) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a, fetch, fetchArgs, newAbortController, fetchOptions, page, error_1;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, fetch = _a.fetch, fetchArgs = _a.fetchArgs;
if (fetchArgs === this.prevFetchArgs && fetchReason !== FetchReason.REFRESH_REQUIRED) {
return [2 /*return*/];
}
_b.label = 1;
case 1:
_b.trys.push([1, 3, , 4]);
if (fetch === undefined)
throw new Error('fetch() implementation was not provided to PageTable. ' +
'Check PageTable properties or switch to Controllable variant of PageTable');
this.setState({ loading: true });
if (this.prevAbortController != undefined) {
this.prevAbortController.abort();
this.prevAbortController = undefined;
}
// do not use fetch result from outdated query
// remember query here...
this.prevFetchArgs = fetchArgs;
newAbortController = this.prevAbortController = window.AbortController ? new AbortController() : undefined;
fetchOptions = newAbortController != undefined ? { signal: newAbortController.signal } : {};
return [4 /*yield*/, fetch(fetchArgs, fetchOptions, fetchReason)];
case 2:
page = _b.sent();
// ...to compare query here
if (this.prevFetchArgs === fetchArgs) {
this.setState({ error: undefined, loading: false, hasError: false, page: page });
this.prevAbortController = undefined;
}
return [3 /*break*/, 4];
case 3:
error_1 = _b.sent();
this.setState({ error: error_1, loading: false, hasError: true });
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
_this.scheduleRefreshNow = function (reason) {
return setTimeout(function () { return void _this.refresh(reason); }, 0);
};
return _this;
}
WithPageInState.prototype.componentDidMount = function () {
void this.refresh(FetchReason.FIRST_TIME_FETCH);
};
WithPageInState.prototype.componentDidUpdate = function (prevProps) {
if (this.props.fetchArgs !== prevProps.fetchArgs) {
this.scheduleRefreshNow(FetchReason.FETCH_ARGS_CHANGE);
}
};
WithPageInState.prototype.render = function () {
/* eslint @typescript-eslint/no-unused-vars: ["error", { "varsIgnorePattern": "fetch|onFetchArgsChange" }] */
var _a = this.props, fetch = _a.fetch, etcProps = tslib_1.__rest(_a, ["fetch"]);
return react_1.default.createElement(Child, tslib_1.__assign({ onRefreshRequired: this.handleRefreshRequired }, etcProps, this.state));
};
return WithPageInState;
}(react_1.PureComponent));
};
exports.default = withPageInState;