ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
147 lines • 7.74 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTableBase = void 0;
var React = __importStar(require("react"));
var react_1 = require("react");
var union_1 = __importDefault(require("lodash/union"));
var difference_1 = __importDefault(require("lodash/difference"));
var core_1 = require("../core");
var util_1 = require("../util");
var useListContextWithProps_1 = require("../controller/list/useListContextWithProps");
var DataTableConfigContext_1 = require("./DataTableConfigContext");
var DataTableCallbacksContext_1 = require("./DataTableCallbacksContext");
var DataTableDataContext_1 = require("./DataTableDataContext");
var DataTableSelectedIdsContext_1 = require("./DataTableSelectedIdsContext");
var DataTableSortContext_1 = require("./DataTableSortContext");
var DataTableStoreContext_1 = require("./DataTableStoreContext");
var DataTableBase = function DataTable(props) {
var resourceFromContext = (0, core_1.useResourceContext)(props);
var children = props.children, empty = props.empty, expand = props.expand, _a = props.hiddenColumns, hiddenColumns = _a === void 0 ? emptyArray : _a, hasBulkActions = props.hasBulkActions, hover = props.hover, loading = props.loading, isRowSelectable = props.isRowSelectable, isRowExpandable = props.isRowExpandable, resource = props.resource, rowClick = props.rowClick, _b = props.expandSingle, expandSingle = _b === void 0 ? false : _b;
var _c = (0, useListContextWithProps_1.useListContextWithProps)(props), sort = _c.sort, data = _c.data, isPending = _c.isPending, onSelect = _c.onSelect, onToggleItem = _c.onToggleItem, selectedIds = _c.selectedIds, setSort = _c.setSort, total = _c.total;
var storeKey = props.storeKey || "".concat(resourceFromContext, ".datatable");
var handleSort = (0, util_1.useEvent)(function (event) {
event.stopPropagation();
if (!setSort)
return;
var newField = event.currentTarget.dataset.field || 'id';
var newOrder = (sort === null || sort === void 0 ? void 0 : sort.field) === newField
? (sort === null || sort === void 0 ? void 0 : sort.order) === 'ASC'
? 'DESC'
: 'ASC'
: event.currentTarget.dataset.order || 'ASC';
setSort({ field: newField, order: newOrder });
});
var lastSelected = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
if (!selectedIds || selectedIds.length === 0) {
lastSelected.current = null;
}
}, [JSON.stringify(selectedIds)]); // eslint-disable-line react-hooks/exhaustive-deps
// we manage row selection here instead of in the rows level to allow shift+click to select an array of rows
var handleToggleItem = (0, util_1.useEvent)(function (id, event) {
if (!data)
return;
var ids = data.map(function (record) { return record.id; });
var lastSelectedIndex = ids.indexOf(lastSelected.current);
// @ts-ignore FIXME useEvent prevents using event.currentTarget
lastSelected.current = event.target.checked ? id : null;
if (event.shiftKey && lastSelectedIndex !== -1) {
var index = ids.indexOf(id);
var idsBetweenSelections = ids.slice(Math.min(lastSelectedIndex, index), Math.max(lastSelectedIndex, index) + 1);
// @ts-ignore FIXME useEvent prevents using event.currentTarget
var newSelectedIds = event.target.checked
? (0, union_1.default)(selectedIds, idsBetweenSelections)
: (0, difference_1.default)(selectedIds, idsBetweenSelections);
onSelect === null || onSelect === void 0 ? void 0 : onSelect(isRowSelectable
? newSelectedIds.filter(function (id) {
return isRowSelectable(data.find(function (record) { return record.id === id; }));
})
: newSelectedIds);
}
else {
onToggleItem === null || onToggleItem === void 0 ? void 0 : onToggleItem(id);
}
});
var storeContextValue = (0, react_1.useMemo)(function () { return ({
storeKey: storeKey,
defaultHiddenColumns: hiddenColumns,
}); }, [storeKey, hiddenColumns]);
var configContextValue = (0, react_1.useMemo)(function () { return ({
expand: expand,
expandSingle: expandSingle,
hasBulkActions: hasBulkActions,
hover: hover,
}); }, [expand, expandSingle, hasBulkActions, hover]);
var callbacksContextValue = (0, react_1.useMemo)(function () { return ({
handleSort: setSort ? handleSort : undefined,
handleToggleItem: onToggleItem ? handleToggleItem : undefined,
isRowExpandable: isRowExpandable,
isRowSelectable: isRowSelectable,
onSelect: onSelect,
rowClick: rowClick,
}); }, [
setSort,
handleSort,
handleToggleItem,
isRowExpandable,
isRowSelectable,
onSelect,
onToggleItem,
rowClick,
]);
if (isPending === true) {
return loading;
}
/**
* Once loaded, the data for the list may be empty. Instead of
* displaying the table header with zero data rows,
* the DataTable displays the empty component.
*/
if (data == null || data.length === 0 || total === 0) {
if (empty) {
return empty;
}
return null;
}
/**
* After the initial load, if the data for the list isn't empty,
* and even if the data is refreshing (e.g. after a filter change),
* the DataTable displays the current data.
*/
return (React.createElement(DataTableStoreContext_1.DataTableStoreContext.Provider, { value: storeContextValue },
React.createElement(DataTableSortContext_1.DataTableSortContext.Provider, { value: sort },
React.createElement(DataTableSelectedIdsContext_1.DataTableSelectedIdsContext.Provider, { value: selectedIds },
React.createElement(DataTableCallbacksContext_1.DataTableCallbacksContext.Provider, { value: callbacksContextValue },
React.createElement(DataTableConfigContext_1.DataTableConfigContext.Provider, { value: configContextValue },
React.createElement(core_1.OptionalResourceContextProvider, { value: resource },
React.createElement(DataTableDataContext_1.DataTableDataContext.Provider, { value: data }, children))))))));
};
exports.DataTableBase = DataTableBase;
var emptyArray = [];
//# sourceMappingURL=DataTableBase.js.map