ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
293 lines • 14.6 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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { useCallback, useEffect, useRef, useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import get from 'lodash/get';
import isEqual from 'lodash/isEqual';
import lodashDebounce from 'lodash/debounce';
import { removeEmpty, useEvent } from '../../util';
import { useDataProvider, useGetManyReference } from '../../dataProvider';
import { useNotify } from '../../notification';
import usePaginationState from '../usePaginationState';
import { useRecordSelection } from '../list/useRecordSelection';
import useSortState from '../useSortState';
import { useResourceContext } from '../../core';
/**
* Fetch reference records, and return them when available
*
* Uses dataProvider.getManyReference() internally.
*
* @example // fetch the comments related to the current post
* const { isPending, data } = useReferenceManyFieldController({
* reference: 'comments',
* target: 'post_id',
* record: { id: 123, title: 'hello, world' },
* resource: 'posts',
* });
*
* @param {Object} props
* @param {string} props.reference The linked resource name. Required.
* @param {string} props.target The target resource key. Required.
* @param {Object} props.filter The filter applied on the recorded records list
* @param {number} props.page the page number
* @param {number} props.perPage the number of item per page
* @param {Object} props.record The current resource record
* @param {string} props.resource The current resource name
* @param {Object} props.sort the sort to apply to the referenced records
* @param {string} props.source The key of the linked resource identifier
* @param {UseQuery Options} props.queryOptions `react-query` options`
*
* @returns {ListControllerResult} The reference many props
*/
export var useReferenceManyFieldController = function (props) {
var _a;
var _b = props.debounce, debounce = _b === void 0 ? 500 : _b, reference = props.reference, record = props.record, target = props.target, _c = props.filter, filter = _c === void 0 ? defaultFilter : _c, _d = props.source, source = _d === void 0 ? 'id' : _d, initialPage = props.page, initialPerPage = props.perPage, _e = props.sort, initialSort = _e === void 0 ? { field: 'id', order: 'DESC' } : _e, _f = props.queryOptions, queryOptions = _f === void 0 ? {} : _f;
var notify = useNotify();
var resource = useResourceContext(props);
var dataProvider = useDataProvider();
var queryClient = useQueryClient();
var storeKey = (_a = props.storeKey) !== null && _a !== void 0 ? _a : "".concat(resource, ".").concat(record === null || record === void 0 ? void 0 : record.id, ".").concat(reference);
var meta = queryOptions.meta, otherQueryOptions = __rest(queryOptions, ["meta"]);
// pagination logic
var _g = usePaginationState({
page: initialPage,
perPage: initialPerPage,
}), page = _g.page, setPage = _g.setPage, perPage = _g.perPage, setPerPage = _g.setPerPage;
// sort logic
var _h = useSortState(initialSort), sort = _h.sort, setSortState = _h.setSort;
var setSort = useCallback(function (sort) {
setSortState(sort);
setPage(1);
}, [setPage, setSortState]);
// selection logic
var _j = useRecordSelection({
resource: storeKey,
}), selectedIds = _j[0], selectionModifiers = _j[1];
// filter logic
var filterRef = useRef(filter);
var _k = useState({}), displayedFilters = _k[0], setDisplayedFilters = _k[1];
var _l = useState(filter), filterValues = _l[0], setFilterValues = _l[1];
var hideFilter = useCallback(function (filterName) {
setDisplayedFilters(function (previousState) {
var _a = previousState, _b = filterName, _ = _a[_b], newState = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
return newState;
});
setFilterValues(function (previousState) {
var _a = previousState, _b = filterName, _ = _a[_b], newState = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
return newState;
});
}, [setDisplayedFilters, setFilterValues]);
var showFilter = useCallback(function (filterName, defaultValue) {
setDisplayedFilters(function (previousState) {
var _a;
return (__assign(__assign({}, previousState), (_a = {}, _a[filterName] = true, _a)));
});
setFilterValues(function (previousState) {
var _a;
return (__assign(__assign({}, previousState), (_a = {}, _a[filterName] = defaultValue, _a)));
});
}, [setDisplayedFilters, setFilterValues]);
// eslint-disable-next-line react-hooks/exhaustive-deps
var debouncedSetFilters = useCallback(lodashDebounce(function (filters, displayedFilters) {
setFilterValues(removeEmpty(filters));
setDisplayedFilters(displayedFilters);
setPage(1);
}, debounce), [setDisplayedFilters, setFilterValues, setPage]);
var setFilters = useCallback(function (filters, displayedFilters, debounce) {
if (debounce === void 0) { debounce = false; }
if (debounce) {
debouncedSetFilters(filters, displayedFilters);
}
else {
setFilterValues(removeEmpty(filters));
setDisplayedFilters(displayedFilters);
setPage(1);
}
}, [setDisplayedFilters, setFilterValues, setPage, debouncedSetFilters]);
// handle filter prop change
useEffect(function () {
if (!isEqual(filter, filterRef.current)) {
filterRef.current = filter;
setFilterValues(filter);
}
}, [filter]);
var _m = useGetManyReference(reference, {
target: target,
id: get(record, source),
pagination: { page: page, perPage: perPage },
sort: sort,
filter: filterValues,
meta: meta,
}, __assign({ enabled: get(record, source) != null, placeholderData: function (previousData) { return previousData; }, onError: function (error) {
return notify(typeof error === 'string'
? error
: (error === null || error === void 0 ? void 0 : error.message) ||
'ra.notification.http_error', {
type: 'error',
messageArgs: {
_: typeof error === 'string'
? error
: (error === null || error === void 0 ? void 0 : error.message)
? error.message
: undefined,
},
});
} }, otherQueryOptions)), data = _m.data, total = _m.total, responseMeta = _m.meta, pageInfo = _m.pageInfo, error = _m.error, isFetching = _m.isFetching, isLoading = _m.isLoading, isPending = _m.isPending, refetch = _m.refetch;
var onSelectAll = useEvent(function (_a) {
var _b = _a === void 0 ? {} : _a, _c = _b.limit, limit = _c === void 0 ? 250 : _c, _d = _b.queryOptions, queryOptions = _d === void 0 ? {} : _d;
return __awaiter(void 0, void 0, void 0, function () {
var meta, onSuccess, onError, results, allIds, error_1;
var _e;
return __generator(this, function (_f) {
switch (_f.label) {
case 0:
meta = queryOptions.meta, onSuccess = queryOptions.onSuccess, onError = queryOptions.onError;
_f.label = 1;
case 1:
_f.trys.push([1, 3, , 4]);
return [4 /*yield*/, queryClient.fetchQuery({
queryKey: [
resource,
'getManyReference',
{
target: target,
id: get(record, source),
pagination: { page: 1, perPage: limit },
sort: sort,
filter: filter,
meta: meta,
},
],
queryFn: function () {
return dataProvider.getManyReference(reference, {
target: target,
id: get(record, source),
pagination: { page: 1, perPage: limit },
sort: sort,
filter: filter,
meta: meta,
});
},
})];
case 2:
results = _f.sent();
allIds = ((_e = results.data) === null || _e === void 0 ? void 0 : _e.map(function (_a) {
var id = _a.id;
return id;
})) || [];
selectionModifiers.select(allIds);
if (allIds.length === limit) {
notify('ra.message.select_all_limit_reached', {
messageArgs: { max: limit },
type: 'warning',
});
}
if (onSuccess) {
onSuccess(results);
}
return [2 /*return*/, results.data];
case 3:
error_1 = _f.sent();
if (onError) {
onError(error_1);
}
notify('ra.notification.http_error', { type: 'warning' });
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
});
});
return {
sort: sort,
data: data,
meta: responseMeta,
defaultTitle: undefined,
displayedFilters: displayedFilters,
error: error,
filterValues: filterValues,
hideFilter: hideFilter,
isFetching: isFetching,
isLoading: isLoading,
isPending: isPending,
onSelect: selectionModifiers.select,
onSelectAll: onSelectAll,
onToggleItem: selectionModifiers.toggle,
onUnselectItems: selectionModifiers.clearSelection,
page: page,
perPage: perPage,
refetch: refetch,
resource: reference,
selectedIds: selectedIds,
setFilters: setFilters,
setPage: setPage,
setPerPage: setPerPage,
hasNextPage: pageInfo
? pageInfo.hasNextPage
: total != null
? page * perPage < total
: undefined,
hasPreviousPage: pageInfo ? pageInfo.hasPreviousPage : page > 1,
setSort: setSort,
showFilter: showFilter,
total: total,
};
};
var defaultFilter = {};
//# sourceMappingURL=useReferenceManyFieldController.js.map