@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
43 lines • 2.17 kB
JavaScript
import { Children, cloneElement, isValidElement, useMemo } from 'react';
import { Splitter } from '../Splitter/index.js';
import { jsx as _jsx } from "react/jsx-runtime";
export const useConcatSplitterElements = concatSplitterElements => {
return useMemo(() => {
if ( /*#__PURE__*/isValidElement(concatSplitterElements?.children)) {
return concatSplitterElements?.children;
}
const childrenArray = Children.toArray(concatSplitterElements?.children).filter(isValidElement);
let splitterCount = 0;
const indicesWithSplitter = [];
childrenArray.forEach((child, index) => {
const splitterElementChild = childrenArray[index + splitterCount];
const splitterElementChildMinSize = splitterElementChild.props.hasOwnProperty('minSize') ? splitterElementChild.props.minSize : 0;
if (childrenArray.length - splitterCount - 1 > index && (splitterElementChild.props.resizable || splitterElementChild.props.resizable === undefined) && splitterElementChildMinSize !== undefined) {
childrenArray.splice(index + splitterCount + 1, 0, /*#__PURE__*/_jsx(Splitter, {
height: concatSplitterElements?.height,
width: concatSplitterElements?.width,
vertical: concatSplitterElements?.vertical
}, `splitter${index}`));
// -1 => prev element
indicesWithSplitter.push(index + 1 + splitterCount - 1);
++splitterCount;
} else if (index > 0 && splitterElementChild?.props.resizable === false) {
const indexOfSplitter = childrenArray.findIndex(element => element === splitterElementChild) - 1;
if (childrenArray[indexOfSplitter].props.minSize === undefined) {
childrenArray.splice(indexOfSplitter, 1);
}
indicesWithSplitter.pop();
--splitterCount;
}
});
indicesWithSplitter.forEach(index => {
const size = childrenArray[index]?.props?.size;
if (size && size !== 'auto') {
childrenArray[index] = /*#__PURE__*/cloneElement(childrenArray[index], {
size: `calc(${size} - var(--_ui5wcr-SplitterSize))`
});
}
});
return childrenArray;
}, [concatSplitterElements]);
};