Independent Collapsing Panel?

[kastork]

I'm having trouble figuring out how to have panels that collapse and open, but are not exclusive of each other in a group... i.e., not an accordion behavior, but individually capable of collapsing or expanding.

I can roll my own application of the relevant bootstrap classes, but it seems like this ought to be an option on the Panel component.

Should how to do this be obvious? What's the formula?

[eytan]

@kastork, this is pretty to implement, but I could see how a wrapper would be useful.

IndependentPanel = React.createClass({
  getInitialState: function() {
    return {expanded: false};
  },
  render: function() {
    return (
      <Panel
        header={this.props.header}
        key={this.props.key}
        collapsable={true}
        expanded={this.state.expanded}
        onSelect={this._toggleExpand}>
      this.children
      </Panel>
    );
  },
  _toggleExpand: function() {
    this.setState({expanded: !this.state.expanded});
  }
});

var panelGroupInstance = (
  <PanelGroup defaultActiveKey={2} accordion>
    <IndependentPanel header="Panel 1" key={1}>Panel 1 content</AutomousPanel>
    <IndependentPanel header="Panel 2" key={2}>Panel 2 content</AutomousPanel>
  </PanelGroup>
);

React.renderComponent(panelGroupInstance, mountNode);

I think enough people might have this use case that it should be more easily covered by Panel, or some kind of derived component. I would be happy to contribute this, but it seems like Panel has a number of other things wrong with it, including collapsing whenever you use input fields inside of them, which makes me hesitant to add it myself.

[pieterv]

Agree with @eytan it seems like this should work. I wonder if a nice API for this would be:

<PanelGroup>
    <Panel header="Panel 1" key={1} collapsible>Panel 1 content</Panel>
    <Panel header="Panel 2" key={2} collapsible>Panel 2 content</Panel>
  </PanelGroup>

@eytan #197 should be fixed now, it would be awesome if you were interested in contributing this feature, let me know if you have problems with any other problems with these components.

[mathieumg]

+1 for independent collapsible panels. For now, I work around it by having an Accordion group per Panel, which feels hacky.

[stevoland]

Yes...

<PanelGroup>
    <Panel header="Panel 1" key={1} collapsible>Panel 1 content</Panel>
    <Panel header="Panel 2" key={2} collapsible>Panel 2 content</Panel>
  </PanelGroup>

...makes sense. It could also be aliased as:

<PanelGroup collapsible>
    <Panel header="Panel 1" key={1}>Panel 1 content</Panel>
    <Panel header="Panel 2" key={2}>Panel 2 content</Panel>
  </PanelGroup>

We could change the API for the original behaviour to <PanelGroup accordion>.

I'll get on this

[kastork]

Alternatively, since we're not really talking about groups of panels, the mechanism could be part of Panel itself -- i.e., just let me place a Panel that knows how to collapse without having a PanelGroup in the picture at all. I guess this is the first case you're describing @stevoland.

I guess the downside of this idea would be possible confusion when the goal is to have accordion behavior -- there's the potential of people trying to apply collapse semantics to Panels that are in PanelGroups that already have collapse semantics at work.

[kastork]

@eytan. As for the collapsing when input fields are updated... I wonder if this can be controlled by arranging the bindings of the input field differently. What I mean is, make sure the changes in the input field don't cause React to want to re-render the entire panel, just the field or form inside the panel.

[mtscout6]

You can do this today, add the collapsable prop. If you want to control the state of whether or not it's expanded externally, use the collapsable and expanded={true|false} props. We need to document this better.