flex-wrap-layout
Version:
Experiments with flexbox layout
28 lines (27 loc) • 1.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDetectWrappedElements = exports.hasChildWrappedClassName = exports.nextIsWrappedClassName = exports.wrapChildrenClassName = void 0;
const react_1 = require("react");
const detectWrappedElements_1 = require("./detectWrappedElements");
exports.wrapChildrenClassName = 'wrap-children';
exports.nextIsWrappedClassName = 'next-is-wrapped';
exports.hasChildWrappedClassName = 'has-child-wrapped';
function useDetectWrappedElements(ref) {
(0, react_1.useEffect)(() => {
const rootElement = ref.current;
function run() {
(0, detectWrappedElements_1.detectWrappedElements)(rootElement, exports.wrapChildrenClassName, exports.nextIsWrappedClassName, exports.hasChildWrappedClassName);
}
window.addEventListener('resize', run);
run();
return () => {
window.removeEventListener('resize', run);
const children = rootElement.getElementsByClassName(exports.nextIsWrappedClassName);
while (children.length > 0) {
children[0].classList.remove(exports.nextIsWrappedClassName);
}
rootElement.classList.remove(exports.hasChildWrappedClassName);
};
}, [ref]);
}
exports.useDetectWrappedElements = useDetectWrappedElements;