ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
116 lines • 5.76 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReferenceManyFieldBase = void 0;
var react_1 = __importDefault(require("react"));
var core_1 = require("../../core");
var ListContextProvider_1 = require("../list/ListContextProvider");
var useReferenceManyFieldController_1 = require("./useReferenceManyFieldController");
/**
* Render related records to the current one.
*
* You must define the fields to be passed to the iterator component as children.
*
* @example Display all the comments of the current post as a datagrid
* <ReferenceManyFieldBase reference="comments" target="post_id">
* <Datagrid>
* <TextField source="id" />
* <TextField source="body" />
* <DateField source="created_at" />
* <EditButton />
* </Datagrid>
* </ReferenceManyFieldBase>
*
* @example Display all the books by the current author, only the title
* <ReferenceManyFieldBase reference="books" target="author_id">
* <SingleFieldList>
* <ChipField source="title" />
* </SingleFieldList>
* </ReferenceManyFieldBase>
*
* By default, restricts the displayed values to 25. You can extend this limit
* by setting the `perPage` prop.
*
* @example
* <ReferenceManyFieldBase perPage={10} reference="comments" target="post_id">
* ...
* </ReferenceManyFieldBase>
*
* By default, orders the possible values by id desc. You can change this order
* by setting the `sort` prop (an object with `field` and `order` properties).
*
* @example
* <ReferenceManyFieldBase sort={{ field: 'created_at', order: 'DESC' }} reference="comments" target="post_id">
* ...
* </ReferenceManyFieldBase>
*
* Also, you can filter the query used to populate the possible values. Use the
* `filter` prop for that.
*
* @example
* <ReferenceManyFieldBase filter={{ is_published: true }} reference="comments" target="post_id">
* ...
* </ReferenceManyFieldBase>
*/
var ReferenceManyFieldBase = function (props) {
var children = props.children, render = props.render, debounce = props.debounce, empty = props.empty, error = props.error, loading = props.loading, _a = props.filter, filter = _a === void 0 ? defaultFilter : _a, offline = props.offline, _b = props.page, page = _b === void 0 ? 1 : _b, _c = props.perPage, perPage = _c === void 0 ? 25 : _c, record = props.record, reference = props.reference, resource = props.resource, _d = props.sort, sort = _d === void 0 ? defaultSort : _d, _e = props.source, source = _e === void 0 ? 'id' : _e, storeKey = props.storeKey, target = props.target, queryOptions = props.queryOptions;
var controllerProps = (0, useReferenceManyFieldController_1.useReferenceManyFieldController)({
debounce: debounce,
filter: filter,
page: page,
perPage: perPage,
record: record,
reference: reference,
resource: resource,
sort: sort,
source: source,
storeKey: storeKey,
target: target,
queryOptions: queryOptions,
});
if (!render && !children) {
throw new Error("<ReferenceManyFieldBase> requires either a 'render' prop or 'children' prop");
}
var data = controllerProps.data, controllerError = controllerProps.error, filterValues = controllerProps.filterValues, hasNextPage = controllerProps.hasNextPage, hasPreviousPage = controllerProps.hasPreviousPage, isPaused = controllerProps.isPaused, isPending = controllerProps.isPending, isPlaceholderData = controllerProps.isPlaceholderData, total = controllerProps.total;
var shouldRenderLoading = isPending && !isPaused && loading !== false && loading !== undefined;
var shouldRenderOffline = isPaused &&
(isPending || isPlaceholderData) &&
offline !== false &&
offline !== undefined;
var shouldRenderError = controllerError && error !== false && error !== undefined;
var shouldRenderEmpty = empty !== false &&
empty !== undefined &&
// there is no error
!error &&
// the list is not loading data for the first time
!isPending &&
// the API returned no data (using either normal or partial pagination)
(total === 0 ||
(total == null &&
// @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
hasPreviousPage === false &&
// @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
hasNextPage === false &&
// @ts-ignore FIXME total may be undefined when using partial pagination but the ListControllerResult type is wrong about it
data.length === 0)) &&
// the user didn't set any filters
!Object.keys(filterValues).length;
return (react_1.default.createElement(core_1.ResourceContextProvider, { value: reference },
react_1.default.createElement(ListContextProvider_1.ListContextProvider, { value: controllerProps }, shouldRenderLoading
? loading
: shouldRenderOffline
? offline
: shouldRenderError
? error
: shouldRenderEmpty
? empty
: render
? render(controllerProps)
: children)));
};
exports.ReferenceManyFieldBase = ReferenceManyFieldBase;
var defaultFilter = {};
var defaultSort = { field: 'id', order: 'DESC' };
//# sourceMappingURL=ReferenceManyFieldBase.js.map