Question: Need to wrap "ReflexSplitter" inside "SplitterControl" component to add custom logic

[karanmidha]

Hello,

Firstly, great library I must say and I will be using this library to create <SplitterContainer />, <SplitterElement /> and <SplitterControl /> components inside the custom UI library I am building which will then be used by developers in the organization.

I was able to successfully wrap the ReflexContainer and ReflexElement components but I see a challenge in wrapping the ReflexSplitter component. As I saw in some of the closed issues, there's an element.type check that checks if the component is ReflexSplitter. Therefore, ReflexSplitter must be a direct child.

In my case, I want to customize the splitter as shown below, and provide it as a component from my library.

Now I see it can be done like

<ReflexSplitter>
  <InnerSplitter />
</ReflexSplitter>

but this needs to be a re-usable component, namely <SplitterControl />.

Challenge I am facing currently

I have two <SplitterElement/ > and ideally, the flex property for these should be flex: 0.5 1 0% but what I am getting is flex: 0.3333 1 0%. That means the wrapper <SplitterControl /> component is being treated as a separate element.

How can I fix this?

Sandbox for the same https://codesandbox.io/p/sandbox/gallant-borg-49mxty

[leefsmp]

That's because the production code doesn't support splitter to be wrapped in a custom component. So only fix I can think of would be to have the function ReflexSplitter.isA() work with wrapped splitter. The proposed solution is issue #49 was to use code as below:

isSplitterElement (element) {
    return element.type === (<ReflexSplitter/>).type
} 

but I don't know if this might impact runtime performances as it will be invoked many times while interacting with a splitter and look like it has to instantiate a ReflexSplitter component somehow. Maybe I can try to store in a class member (<ReflexSplitter/>).type during an initialization ...

[leefsmp]

I can't find a way to scan the element at runtime if this is a component that wraps a ReflexSplitter, maybe there is a way but it's beyond my React skills.

However a rather straightforward workaround would be to export ReflexSplitter with a different name from your lib as in:

//your-lib-exports.js
import {
  ReflexSplitter
} from 'react-reflex'

const SplitterControl = ReflexSplitter

export {
  SplitterControl
}

then customize .ReflexSplitter with css. As far as I can tell, I've never seen a case where a splitter needs to implement any logic inside a wrapping component, so you should be able to get away with this.

[karanmidha]

Thanks for the replies @leefsmp. Yes, this was my last resort.

[karanmidha]

This issue has been fixed in v4.2.5. Thanks @leefsmp