ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
76 lines • 3.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useExpandAll = exports.useExpanded = void 0;
const react_1 = require("react");
const store_1 = require("../../store/index.cjs");
/**
* State-like hook for controlling the expanded state of a list item
*
* @param {string} resource The resource name, e.g. 'posts'
* @param {string|integer} id The record identifier, e.g. 123
* @param {boolean} single Forces only one id to be expanded at a time
* @returns {Object} Destructure as [expanded, toggleExpanded].
*
* @example
*
* const [expanded, toggleExpanded] = useExpanded('posts', 123);
* const expandIcon = expanded ? ExpandLess : ExpandMore;
* const onExpandClick = () => toggleExpanded();
*/
const useExpanded = (resource, id, single = false) => {
const [expandedIds, setExpandedIds] = (0, store_1.useStore)(`${resource}.datagrid.expanded`, emptyArray);
const expanded = Array.isArray(expandedIds)
? // eslint-disable-next-line eqeqeq
expandedIds.map(el => el == id).indexOf(true) !== -1
: false;
const toggleExpanded = (0, react_1.useCallback)(() => {
setExpandedIds(ids => {
if (!Array.isArray(ids)) {
return [id];
}
const index = ids.findIndex(el => el == id); // eslint-disable-line eqeqeq
return index > -1
? single
? []
: [...ids.slice(0, index), ...ids.slice(index + 1)]
: single
? [id]
: [...ids, id];
});
}, [setExpandedIds, id, single]);
return [expanded, toggleExpanded];
};
exports.useExpanded = useExpanded;
const emptyArray = [];
/**
* State-like hook for controlling the expanded state of many list items
* expanded state is true when at least one item from ids is expanded.
*
* @param {string} resource The resource name, e.g. 'posts'
* @param {Identifier[]} ids A list of record identifiers
* @returns {Object} Destructure as [expanded, toggleExpanded].
*
* @example
*
* const [expanded, toggleExpanded] = useExpandAll('posts', [123, 124, 125]);
* const expandIcon = expanded ? ExpandLess : ExpandMore;
* const onExpandClick = () => toggleExpanded();
*/
const useExpandAll = (resource, ids) => {
const [expandedIds, setExpandedIds] = (0, store_1.useStore)(`${resource}.datagrid.expanded`, []);
const isExpanded = Array.isArray(expandedIds)
? // eslint-disable-next-line eqeqeq
expandedIds.some(id => ids.some(id2 => id2 == id))
: false;
const toggleExpandedAll = (0, react_1.useCallback)(() => {
const unaffectedExpandedIds = expandedIds.filter(
// eslint-disable-next-line eqeqeq
expanded_id => !ids.some(id => id == expanded_id));
setExpandedIds(isExpanded
? unaffectedExpandedIds
: unaffectedExpandedIds.concat(ids));
}, [expandedIds, setExpandedIds, isExpanded, ids]);
return [isExpanded, toggleExpandedAll];
};
exports.useExpandAll = useExpandAll;
//# sourceMappingURL=useExpanded.js.map