ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
91 lines • 4.09 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReferenceInputBase = void 0;
var react_1 = __importDefault(require("react"));
var core_1 = require("../../core");
var ChoicesContextProvider_1 = require("../../form/choices/ChoicesContextProvider");
var useReferenceInputController_1 = require("./useReferenceInputController");
/**
* An Input component for choosing a reference record. Useful for foreign keys.
*
* This component fetches the possible values in the reference resource
* (using `dataProvider.getList()`), and renders the child you passed
* to which it passes the possible choices via a `ChoicesContext`.
*
* You must pass a child selection component to customize the way the reference
* selector is displayed (e.g. using `<SelectInput>` or `<RadioButtonGroupInput>`
* instead of `<AutocompleteInput>` ).
*
* Note that the child component should handle the error and loading cases as this base component does not.
*
* @example // using a SelectInput as selector
* export const CommentEdit = () => (
* <Edit>
* <SimpleForm>
* <ReferenceInputBase label="Post" source="post_id" reference="posts">
* <SelectInput optionText="title" />
* </ReferenceInputBase>
* </SimpleForm>
* </Edit>
* );
*
* By default, restricts the possible values to 25. You can extend this limit
* by setting the `perPage` prop.
*
* @example
* <ReferenceInputBase source="post_id" reference="posts" perPage={100}/>
*
* 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
* <ReferenceInputBase
* source="post_id"
* reference="posts"
* sort={{ field: 'title', order: 'ASC' }}
* >
* <SelectInput optionText="title" />
* </ReferenceInputBase>
*
* Also, you can filter the query used to populate the possible values. Use the
* `filter` prop for that.
*
* @example
* <ReferenceInputBase
* source="post_id"
* reference="posts"
* filter={{ is_published: true }}
* >
* <SelectInput optionText="title" />
* </ReferenceInputBase>
*
* The enclosed component may filter results. ReferenceInputBase create a ChoicesContext which provides
* a `setFilters` function. You can call this function to filter the results.
*/
var ReferenceInputBase = function (props) {
var children = props.children, _a = props.filter, filter = _a === void 0 ? {} : _a, offline = props.offline, reference = props.reference, _b = props.sort, sort = _b === void 0 ? { field: 'id', order: 'DESC' } : _b;
var controllerProps = (0, useReferenceInputController_1.useReferenceInputController)(__assign(__assign({}, props), { sort: sort, filter: filter }));
var isPaused = controllerProps.isPaused, isPending = controllerProps.isPending;
// isPending is true: there's no cached data and no query attempt was finished yet
// isPaused is true: the query was paused (e.g. due to a network issue)
// Both true: we're offline and have no data to show
var shouldRenderOffline = isPaused && isPending && offline !== undefined && offline !== false;
return (react_1.default.createElement(core_1.ResourceContextProvider, { value: reference },
react_1.default.createElement(ChoicesContextProvider_1.ChoicesContextProvider, { value: controllerProps }, shouldRenderOffline ? offline : children)));
};
exports.ReferenceInputBase = ReferenceInputBase;
//# sourceMappingURL=ReferenceInputBase.js.map