Question: Wrapper around Reflex components

Hi, first of all, thanks for the Re-Flex. It’s really great.

I want to make the panes hide-able and for this reason I tried with a wrapper around Reflex component.

Idea is to have a wrapper around “ReflexElement”, “ReflexSplitter” like:

Main component

<div className="demo-basic-splitter">
   <ReflexContainer orientation="vertical">
      <Search/>
      <Splitter/>
      <Details/>
   </ReflexContainer>
</div>

Search component

<ReflexElement className="left-pane">
    <div className="pane-content">
        Search component
    </div>
</ReflexElement>

Spliiter component

return (
    <ReflexSplitter/>
)

and then to have a onClick event which will show or hide a specific component (e.g. Search, Splitter, Details). Because you are using flex, layout should work. Maybe, also ReflexSplitter can be inside the wrapper component (not in a separate wrapper component).

Problem is, when I use the wrappers Splitter doesn’t work.

Is there a way to achieve this? From your point of view, can this be done? Thanks!

[leefsmp]

I pull out that codepen to prove what I’m saying above, clicking the button will generate a random color and update the theme of the InnerSplitter element:

const Reflex = window['react-reflex']
const Styled = window['styled']

const {
  ReflexContainer,
  ReflexElement,
  ReflexSplitter
  } = Reflex

const InnerSplitter = Styled.default.div`
    background-color: ${(props) => props.theme.backgroundColor} !important;
    height: 100%;`

class Demo extends React.Component {
  
  constructor (props) {
    super (props)
    this.changeTheme = this.changeTheme.bind(this)
    this.state = {
      theme: {
        backgroundColor: "#FF0000"
      }
    }
  }
  
  changeTheme () {
    const backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16)
    
    this.setState({
      theme: {
        backgroundColor
      }
    })
  }
  
  render() {
    return (
      <div className="demo">
        <button onClick={this.changeTheme}>
          Update Splitter Theme ...
        </button>
        <ReflexContainer orientation="vertical">
          
          <ReflexElement className="left-pane">
            <div className="pane-content">
              <label>
                Left Pane
              </label>
            </div>
          </ReflexElement>
          
          <ReflexSplitter>
            <InnerSplitter theme={this.state.theme}/>
          </ReflexSplitter>
          
          <ReflexElement className="right-pane">
            <div className="pane-content">
              <label>
                Right Pane
              </label>
            </div>
          </ReflexElement>
        </ReflexContainer>
      </div>
    )
  }
}

const root = document.getElementById('root')

ReactDOM.render(<Demo/>, root)

[leefsmp]

ReflexContainer will clone its children elements in order to inject custom properties which are needed to control the resizing logic.

ReflexSplitter cannot be wrapped because the ReflexContainer needs to know if a child type is a splitter or not in order to handle it properly (you may have 2 contiguous children which are not separated by a splitter). When you wrap a component I didn’t find a way to determine the type of that underlying wrapped component. In addition I don’t see the use case of wrapping a ReflexSplitter: it can be styled purely by custom css and the rest can be handled by events.

However I don’t see wrappingReflexElement as a problem. This allows you to encapsulate some rendering and behaviour logic like illustrated in my example above. In that scenario you need to propagate the injected properties to the ReflexElement. You could pass them one by one by looking at their name in the code, but an easier way is to use {...this.props} which will blindly pass them to the ReflexElement.