Collapse 在IE8 下使用嵌套的时候，会出现内部已经折叠了，外部的不会折叠回去 antd 的 issue

Hi.

I want to display a collapse with open panels. The user can close them later.

If I don't set activeKey, collapse will mount with closed panels. If I set activeKey with an array, panels will be open, but I can't close them later.

Maybe an initialActiveKey prop in the Collapse, or maybe a boolean prop for each panel?

EDIT: ok, I saw it now, it's the defaultActiveKey prop that does this.

Hi,

We have a w3c validation check as part of our pipelines and it has flagged this issue.

An element with “role=tab” must be contained in, or owned by, an element with “role=tablist”.

I believe the parent div should have the role tablist.

// MyPanel.jsx
return (
  <Collapse.Panel>
    ...
  </Collapse.Panel>
)

// List.jsx
return (
  <Collapse>
    {xs.map((x) => <MyPanel {...x} />)}
  </Collapse>
)

Since List.jsx and MyPanel.jsx contains complex business, spilt Collapse and Panel into two files.But it doesn't work.

So how to render wrapped Panel under Collapse?

This project is not technically React 0.14 compatible since one of its dependencies is not: rc-animate.

When using rc-collapse w/ React 0.14, you'll get the following warning/error in the console:

Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

I have create this PR to update the dependencies:

rc-animate: react-component/animate#4

The documentation for this project says the component accepts prop activeKey here and activekey in the example. Should be activekey, according to the code in the component.

After the 1.5.0 upgrade that includes the switch to using CSS animations, the open/close animation is very slow and lags in all browsers.

When including rc-collapse in a React 15.5.* project, two warnings always appear. When React 16 is released, this package will be broken.

• Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
• Warning: AnimateChild: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

The fix for the proptype warning is pretty simple, just adding a dependency to the replacement package prop-types and adding import PropTypes from 'prop-types'; to any source file with a PropType reference.

Hi!

Is there any way to have all panels as active?
I've seen defaultActiveKey and activeKey may be arrays, but not getting it to work...

Thanks!

Package page on npm shows incorrect github url

github.com/react-component/rc-collapse

By default the accordion expand direction is top-down.

Is it currently possible to change the expand direction from top-down to bottom-up?

Even there are some aria attributes, it still missing tabIndex="0" attributes and some keyPress event handling. So you can not navigate, collapse or expand the tabs using keyboard only.

Please have a look at
https://springload.github.io/react-accessible-accordion/

vs

http://react-component.github.io/collapse/examples/simple.html

I think can PR if you accept this feature

Looking at the less file and associated styles it should change the className from rc-collapse-item to rc-collapse-item-active when the particular block is in active state. However, it does nothing and the the className remains rc-collapse-item in the current release

I am not able to programatically set the state of the Panel. I've tried setting <Panel isActive={true} /> but it doesn't seem to work. I've tried setting <Collapse activeKey='0'>.... and while this works, it only lets me specify one panel to be opened. The docs mention passing an array to activeKey, but I couldn't get it to work, and couldn't find any examples of it.

In my case, I need all the panels to be expanded at startup by default. Any idea how I can do this?

Package.json homepage refers to incorrect URL.

  "homepage": "http://github.com/react-component/rc-collapse",

If accordion is true, only one panel can be open. Opening another panel will cause the previously opened panel to close. activeKey should be an string, if passing an array (the first item in the array will be used).

Here's my snippet:

  render(){
    const stateStyle = this.state.active ? styles.active : styles.inactive;

    const Materias = this.props.items.map((item, key)=>(
        <Panel header={item.title} key={key}>
          <HeaderComponent title={item.title} id={item.id} subtitle={item.subtitle} category={item.categoria}/>
          <Content content={item.content[0]}/>
          <Footer />
        </Panel>
    )); 
    return (
      <div className={style.container}>
        <Collapse accordion={true}>
          {Materias}
        </Collapse>
      </div>
    );
  }

Actually im rendering 3 panels, and even with the accordion prop = true_ I can open the 3 at the same time.

Hi,

I'm conditionally putting <Panel />s like this:

{ content.location &&
<Panel header="Location" key="4">
   <p>
       {content.location.value}
   </p>
</Panel>
}

However, when the evaluation of content.location returns false, and no <Panel /> is inserted, rc-collapse breaks because it expects a child with a .key property:

TypeError: null is not an object (evaluating 'child.key')

If rc-collapse would check if child exists before reading key, it would allow us to dynamically insert <Panel />s based on conditions, like in the example above.

panel里面我包含的ant-design的tree控件。tree控件的树节点只能展示一部分。

My looks like this:

<Collapse
  accordion
  activeKey={this.state.activeKey}
  onChange={(activeKey) => this.setState({ activeKey })}>
  <Panel header='test'>
    ...
  </Panel>
  <div>
    Content that I don't want to be included in the accordion
  </div>
  <Panel header='also a test'>
    ...
  </Panel>
</Collapse>

It renders and operates as expected, but I get a React warning:

Warning: Unknown props 'header', 'isActive', 'prefixCls', 'openAnimation', 'onItemClick' on

Hello

My use case is that I want to hide a Panel depending on a variable.

It would be great to be able to do one of following :

<Panel hide={ true }>
 ...
</Panel>

or

<Panel style={ {display: "none"} }>
 ...
</Panel>

Best regards

I had forked this repository to 27AE60/collapse.
Then I ran, npm install --save 27ae60/collapse

But, when I build my project npm run install it says Unexpected token: name (Collapse)...
Am I missing some steps here in order to use the forked repository?

列出 API，允许自定义动画，或禁止动画

I've got a scenario where I need to be able to hide and show panels dynamically. It looks like the way your code works, even if I pass a "null" component into the collapse component as a child, it will still attempt to render a panel from that. Is there a way where I can pass all child vars into the Collapse component, but have it not render null components? Or is there a way on the panels where I can tell a panel not to render?

Thanks!

This is a note someone who may have this problem in the future

If you import like this:
import Collapse, { Panel } from 'rc-collapse'
import 'rc-collapse/assets/index.css' // use the css in npm module

this won't work:

        <Panel
          showArrow={ false }
          header={ ... }
        >

But Collapse.Panel does work

        <Collapse.Panel
          showArrow={ false }
          header={ ... }
        >

EDIT: actually not sure what's going on...

EDIT: OK, never mind, trying to be helpful but it was my own class that changed the header

is there any way to place Html code inside Panel header?

In case header is wider than collapse box the rest of header will simply overflow. Perhaps an option to wrap lines or hide overflow?

Clicking on the panel header opens it, but clicking on it again it flashes closed for a moment and then re-opens. I would expect it to toggle

        <Collapse>
          <Panel header='Output'>
            <DataGrid idProperty="index" dataSource={tableData} columns={columns} />
          </Panel>
        </Collapse>

There is only one panel in this example, but it happens even if I add another panel. This is under Bootstrap 4.

Velocity use window obj, if this component is rendered in server, it wont work...

Hi!

I use rc-collapse in my project but I prefer define my own className for my components.
Any reason to not have yet this prop?

Thanks!

In the default configuration, or with showArrow=true, I'm not seeing an arrow.

        <Collapse>
          <Panel header='Output'>
            <DataGrid idProperty="index" dataSource={tableData} columns={columns} />
          </Panel>
        </Collapse>

This is using Bootstrap 4, if that makes a difference.

I cannot find your assets directory to import CSS. FYI - I've installed this package using npm

There is a need do determine, if current PanelContent visible or active in it's children.
There are three methods to perform this:

1. Give PanelContent children isActive property.
2. Put active panel in modern react context.
3. Simply remove rendering of component and make user rely on componentWillMount, componentDidUnmount functions to track panels state.

Here is code snippet: render function of PanelContent:

 render() {
    this._isActived = this._isActived || this.props.isActive;
    if (!this._isActived) {
      return null;
    }
    const { prefixCls, isActive, children } = this.props;
    const contentCls = classnames({
      [`${prefixCls}-content`]: true,
      [`${prefixCls}-content-active`]: isActive,
      [`${prefixCls}-content-inactive`]: !isActive,
    });

    return (
      <div
        className={contentCls}
        role="tabpanel"
      >
        {isActive?<div className={`${prefixCls}-content-box`}>{children}</div>: null}

      </div>
    );
  },

In my humble opinion this change is trivial, does not breaks functionality or rc-collapse, and does not breaks user expectations about componentWillMount, componentDidUnmount behaviour.

Hey, rc-collapse seems to have issues with server side rendering, because of rc-animate:

client.js:4 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) .$rc_animate_1460040782855"><div class="
 (server) .$rc_animate_1460040116046"><div class="

Any way to fix it?

@afc163

现在 safari 下收回的时候没动画。
其他浏览器点快了都没动画。

.//rc-accordion/src/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./Accordion in /Volumes/ZBMOBI/React/ReactWebPackDemo/node_modules/rc-accordion/src
resolve file
/Volumes/ZBMOBI/React/ReactWebPackDemo/node_modules/rc-accordion/src/Accordion doesn't exist
/Volumes/ZBMOBI/React/ReactWebPackDemo/node_modules/rc-accordion/src/Accordion.js doesn't exist
resolve directory
/Volumes/ZBMOBI/React/ReactWebPackDemo/node_modules/rc-accordion/src/Accordion/package.json doesn't exist (directory description file)
/Volumes/ZBMOBI/React/ReactWebPackDemo/node_modules/rc-accordion/src/Accordion doesn't exist (directory default file)
[/Volumes/ZBMOBI/React/ReactWebPackDemo/node_modules/rc-accordion/src/Accordion]
[/Volumes/ZBMOBI/React/ReactWebPackDemo/node_modules/rc-accordion/src/Accordion.js]
@ .//rc-accordion/src/index.js 2:17-39

在props里面设置activeKey可以实现多个collapse-item的切换：

<Collapse accordion activeKey="1">
   ...
</Collapse>

但是如何通过js手动设置activeKey，比如

 this.refs.collapse.setState({
    activeKey: 4
 })

类似的？

When I put jsx in the header prop for the Panel component, the component renders [Object, Object] in the jsx's place:

<Panel header={`City ${<span>selected</span>}`} key='1'>
  <div className='fltr-group'>
    ...
  </div>
</Panel>

I would expect 'City selected' to be rendered with some styles applied to the word selected, but all I get back is 'City [Object, Object]'

Is there something I'm forgetting to do?

问题反馈在了这里;
希望修复,项目用了很多Input在header中,因以前antd2无问题,升级到3后,有问题,目前只能在项目中替换源码;望修复;3Q;

Due to recent changes to ESLint react rules, having a component with a prop named className results in a warning Prop 'className' is forbidden on Components react/forbid-component-props.

It's obvious that having className passed down to the actual DOM element is a valid workflow, thus it's only a warning, but results in it being confusing.

This is the rule description: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md

Hello, I am hoping to make modifications to Collapse and Panel to allow developers to pass in inline-styles via props. I see that CSS styles are currently being generated using LESS and I was wondering if inline-styles have been considered in the past. If there are no objections, I would be happy to start working on it. Thanks!

**edit: I realize this can be accomplished via the custom className, but it is often easier to be able to directly inject inline-styles.

Hi! I'm trying to build a collapsable menu but I need "Panel" component inside another component and it don't works...
Is it necessary for Panel to be the direct child of Collapse?

Thanks

Sticky: https://mobile.ant.design/kitchen-sink/components/tabs?lang=en-US#tabs-demo-1

Hope to support this feature. thx!

Is there any way to set id attribute to the panel?

There's an immensely useful prop on Container called prefixCls. It's not in any documentation. Is it safe to use this?

I have react js app with rc-collapse. I think I built it right. I am managing the state of the activeKey with the onChange handler and seems ok. But the panels wont close, they do open onclick but wont close.

renderAccordion(about, videos, gallery) {
    return (
        <Collapse 
            accordion={false}
            onChange={this.onAccordionChange.bind(this)}
            activeKey={this.state.activeKey}
        >
            <Panel header="about" key={'about'} >{about}</Panel>
            <Panel header="gallery" key={'photos'} >{this.renderPhotos(gallery)}</Panel>
            <Panel header="video" key={'video'} >{this.renderVideo(videos)}</Panel>
            <Panel header="contact" key={'contact'} >contact us</Panel>
            <Panel header="share" key={'share'} >
                <a href={`whatsapp://send?text=Take a look at my business card: http://react-js-api.herokuapp.com/${this.props.params.id}`} className="wa_btn wa_btn_s">Share</a>
            </Panel>
        </Collapse>
    );
}

managing the state on panel click:

onAccordionChange(activeKey) {
        this.setState({ activeKey });
    }

initialzing the state:

constructor(props) {
      super(props);

      this.state = { activeKey: [] };
    }

When I console.log the activeKey state I get the correct answer - each click on a panel changes the state from active to not active. But the panel isn't closing.

Hello,

Think you may have a typo in your package file.

"license": "MIT",
https://github.com/nkbt/react-collapse/blob/master/package.json

"licenses": "MIT",
https://github.com/react-component/collapse/blob/master/package.json

Tried to add your npm package as a webjar on http://www.webjars.org/npm.
(Add a new npm webjar button)

And got the following error.

Failed! All attempts to determine a license have been exhausted. 
The bower.json did not contain a spec-compliant license definition 
and the license could not be determined by trolling through the GitHub repo. 
This problem will likely need to be resolved by working with the library maintainers directly. 
If you feel you have reached this failure in error, please file an issue: https://github.com/webjars/webjars/issues  

Determined Artifact Name: rc-collapse Starting Deploy

Is it possible to render a component inside the Panel during run-time in accordion mode.
Use case, when a Panel is opened, need to fetch some data asynchronously and render a component inside the Panel and when any other Panel is opened, the previously rendered component should also unmounted.

Not providing the key prop to Panel components causes the index to be off by one and numeric. Fix: #27