ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
78 lines • 3.22 kB
TypeScript
import * as React from 'react';
import { type ReactElement, type ReactNode } from 'react';
import type { UseQueryOptions } from '@tanstack/react-query';
import { FilterPayload, RaRecord, SortPayload } from '../../types';
import { ListControllerResult } from '../list';
import { BaseFieldProps } from './types';
/**
* A container component that fetches records from another resource specified
* by an array of *ids* in current record.
*
* You must define the fields to be passed to the iterator component as children.
*
* @example Display all the products of the current order as datagrid
* // order = {
* // id: 123,
* // product_ids: [456, 457, 458],
* // }
* <ReferenceArrayFieldBase label="Products" reference="products" source="product_ids">
* <Datagrid>
* <TextField source="id" />
* <TextField source="description" />
* <NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
* <EditButton />
* </Datagrid>
* </ReferenceArrayFieldBase>
*
* @example Display all the categories of the current product as a list of chips
* // product = {
* // id: 456,
* // category_ids: [11, 22, 33],
* // }
* <ReferenceArrayFieldBase label="Categories" reference="categories" source="category_ids">
* <SingleFieldList>
* <ChipField source="name" />
* </SingleFieldList>
* </ReferenceArrayFieldBase>
*
* By default, restricts the displayed values to 1000. You can extend this limit
* by setting the `perPage` prop.
*
* @example
* <ReferenceArrayFieldBase perPage={10} reference="categories" source="category_ids">
* ...
* </ReferenceArrayFieldBase>
*
* By default, the field displays the results in the order in which they are referenced
* (i.e. in the order of the list of ids). You can change this order
* by setting the `sort` prop (an object with `field` and `order` properties).
*
* @example
* <ReferenceArrayFieldBase sort={{ field: 'name', order: 'ASC' }} reference="categories" source="category_ids">
* ...
* </ReferenceArrayFieldBase>
*
* Also, you can filter the results to display only a subset of values. Use the
* `filter` prop for that.
*
* @example
* <ReferenceArrayFieldBase filter={{ is_published: true }} reference="categories" source="category_ids">
* ...
* </ReferenceArrayFieldBase>
*/
export declare const ReferenceArrayFieldBase: <RecordType extends RaRecord = RaRecord, ReferenceRecordType extends RaRecord = RaRecord>(props: ReferenceArrayFieldBaseProps<RecordType, ReferenceRecordType>) => React.JSX.Element;
export interface ReferenceArrayFieldBaseProps<RecordType extends RaRecord = RaRecord, ReferenceRecordType extends RaRecord = RaRecord> extends BaseFieldProps<RecordType> {
children?: ReactNode;
render?: (props: ListControllerResult<ReferenceRecordType>) => ReactElement;
error?: ReactNode;
loading?: ReactNode;
empty?: ReactNode;
filter?: FilterPayload;
offline?: ReactNode;
page?: number;
perPage?: number;
reference: string;
sort?: SortPayload;
queryOptions?: Omit<UseQueryOptions<ReferenceRecordType[], Error>, 'queryFn' | 'queryKey'>;
}
//# sourceMappingURL=ReferenceArrayFieldBase.d.ts.map