ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
110 lines • 4.69 kB
JavaScript
import React from 'react';
import { ResourceContextProvider } from "../../core/index.js";
import { ListContextProvider } from "../list/ListContextProvider.js";
import { useReferenceManyFieldController, } from "./useReferenceManyFieldController.js";
/**
* 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>
*/
export const ReferenceManyFieldBase = (props) => {
const { children, render, debounce, empty, error, loading, filter = defaultFilter, exporter, offline, page = 1, perPage = 25, record, reference, resource, sort = defaultSort, source = 'id', storeKey, target, queryOptions, } = props;
const controllerProps = useReferenceManyFieldController({
debounce,
filter,
exporter,
page,
perPage,
record,
reference,
resource,
sort,
source,
storeKey,
target,
queryOptions,
});
if (!render && !children) {
throw new Error("<ReferenceManyFieldBase> requires either a 'render' prop or 'children' prop");
}
const { data, error: controllerError, filterValues, hasNextPage, hasPreviousPage, isPaused, isPending, isPlaceholderData, total, } = controllerProps;
const shouldRenderLoading = isPending && !isPaused && loading !== false && loading !== undefined;
const shouldRenderOffline = isPaused &&
(isPending || isPlaceholderData) &&
offline !== false &&
offline !== undefined;
const shouldRenderError = controllerError && error !== false && error !== undefined;
const 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.createElement(ResourceContextProvider, { value: reference },
React.createElement(ListContextProvider, { value: controllerProps }, shouldRenderLoading
? loading
: shouldRenderOffline
? offline
: shouldRenderError
? error
: shouldRenderEmpty
? empty
: render
? render(controllerProps)
: children)));
};
const defaultFilter = {};
const defaultSort = { field: 'id', order: 'DESC' };
//# sourceMappingURL=ReferenceManyFieldBase.js.map