New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support of fragments #139
Comments
Unfortunately it is not in the scope at the moment, based on current implementation of the library it is not easily doable or would require fundamental changes in the logic. Based on my personal experience and other developers requests so far I never felt it was a highly needed feature as you say. If you want to separate layout appearance and core custom logic, why not simply wrapping your own components inside
|
yet, that possible, although I want to conditionally render the splitter as well and that leads to following
which may look fine if you have jsut 2 components, but if you have rich UI you may end up in lots of such checks in single components. That's why I would move this to inner components. Especially when it relates to |
To me it looks more like a point of view, showing the splitter and other elements of the layout definitely sounds like layout logic so I would rather have that logic at the layout level even if it can get complicated at first rather than having it hidden at some deeper level over multiple sub-components. Support for fragments might be doableand will allow to better organize the layout into multiple functions that can return a fragment with splitter and element so I will take a look at it, however custom components is not easily achievable I'm afraid. |
So, the problem here stems from the fact that the library internally uses I know exactly what you're trying to achieve. You want to generate (probably a If you pass the props to I feel disheartened. The library clearly took care of so many small details and its backlog of fixes shows commitment to get it to work but the fact that I can't generate my I'm sure you know how to get it to work but, of course, it requires work. Hopefully we see it happen as this left me pretty gloomy. |
I would need to look at the fragment support but I'm rather busy at the moment, also I'm actively using the lib in several projects and the topic has never been a problem so I didn't really focus on providing a better approach. There might be a better way than using In the meantime I might have a solution that could help, what I did in one component to handle variable/undetermined number of elements/spitters is the following (pseudo-ish code):
I could use in the state an array of
I agree it's not as straightforward as pure react code but it did the job. I could also use a custom component wrapping
|
That works. Here's an implementation of it: https://codesandbox.io/s/stoic-newton-l1nlw?file=/src/App.js The limitation is that now you need to have the |
Up! Any updates on this? const items = ["one", "two", "three", "four"]
const children = React.useMemo<ReactNodeArray>(() => {
const firstItem = items[0];
const els: ReactNodeArray = [
<ReflexElement key={firstItem} className="left-pane">
<div className="pane-content">
{firstItem}
</div>
</ReflexElement>,
];
if (items.length === 1) return els;
for (let index = 1; index < items.length; index++) {
const itemName = items[index];
const { length } = items;
const isLast = index === length - 1;
els.push(<ReflexSplitter propagate />);
els.push(
<ReflexElement
key={itemName}
className={isLast ? "right-pane" : "middle-pane"}
>
<div className="pane-content">
{itemName}
</div>
</ReflexElement>,
);
}
return els;
}, [items]);
return (
<ReflexContainer orientation="vertical">{children}</ReflexContainer>
); |
@AlaaZorkane I think Phillipe will come back to you with more, but, yea, your implementation is practically what we found as a hotfix. Also, don't expect a fix to this from any library, because the fix is to re-write the entire thing. As I detailed here: #139 (comment) the reason for why this "bug" happens is I found out that this type of approach also has deep and awful performance implications in some cases. Assume your initial flexes were stored somewhere and you need to retrieve them, but also constantly update them. What ends up happening is that you need to create a selector for all of the flexes, in one place. Because you initialize the As a side note: the reason for why this doesn't work as we want it to is because, really, it's not the "cover 80% of use-cases" approach, however, I digress and, as bad as it sounds, it's just the reality of our world: you implement for the majority, paired with the teachings of an old world. |
Currently it is not possible to wrap splitter/element into fragment or custom component. This feature I would say highly needed to make composable layout, otherwise we get complex components handling both layout and logic around.
Do you have any plans bringing this feature?
Example
The text was updated successfully, but these errors were encountered: