@react-md/utils
Version:
General utils for react-md.
45 lines • 1.65 kB
JavaScript
/**
* Attempts to find a sizing container based on the provided HTMLElement. By
* default, the sizing element will just be the provided element unless:
* - the item has a known role within react-md that can target known classes
* - the item has a `data-sizing-selector` attribute that is a valid query
* selector for the nested item.
*
* NOTE: The `data-sizing-selector` will be run from the current element instead
* of the `document`.
*
* @param el - The element to find a sizing container for.
* @returns the sizing container relative to the provided element, or `null` if
* none could be found.
* @throws This error will be thrown if using the `data-query-selector` and the
* query selector does not return an element on the page.
*/
export function findSizingContainer(el) {
if (!el) {
return null;
}
if (/(tree|list)item/.test(el.getAttribute("role") || "")) {
var content = el.querySelector(".rmd-tree-item__content, .rmd-item-text");
if (content) {
return content;
}
}
else if (el.getAttribute("type") === "file") {
var label = document.querySelector("[for=\"".concat(el.id, "\"]"));
if (label) {
return label;
}
}
var data = el.getAttribute("data-sizing-selector");
if (data) {
var content = el.querySelector(data);
if (content) {
return content;
}
if (process.env.NODE_ENV !== "production") {
throw new Error("Unable to find a child element using the `data-sizing-selector`");
}
}
return el;
}
//# sourceMappingURL=findSizingContainer.js.map