react-component / collapse Goto Github PK
View Code? Open in Web Editor NEWReact Collapse / Accordion
Home Page: http://react-component.github.io/collapse/
License: MIT License
React Collapse / Accordion
Home Page: http://react-component.github.io/collapse/
License: MIT License
现在 safari 下收回的时候没动画。
其他浏览器点快了都没动画。
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 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.
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.
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
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.
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
Not providing the key
prop to Panel components causes the index to be off by one and numeric. Fix: #27
By default the accordion expand direction is top-down.
Is it currently possible to change the expand direction from top-down to bottom-up?
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.
Velocity use window obj, if this component is rendered in server, it wont work...
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
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.
In case header is wider than collapse box the rest of header will simply overflow. Perhaps an option to wrap lines or hide overflow?
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?
Sticky: https://mobile.ant.design/kitchen-sink/components/tabs?lang=en-US#tabs-demo-1
Hope to support this feature. thx!
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!
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!
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!
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.
// 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?
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?
I cannot find your assets directory to import CSS. FYI - I've installed this package using npm
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
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.
is there any way to place Html code inside Panel header?
There's an immensely useful prop on Container
called prefixCls
. It's not in any documentation. Is it safe to use this?
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
在props里面设置activeKey可以实现多个collapse-item的切换:
<Collapse accordion activeKey="1">
...
</Collapse>
但是如何通过js手动设置activeKey,比如
this.refs.collapse.setState({
activeKey: 4
})
类似的?
Package page on npm shows incorrect github url
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.
.//rc-accordion/src/index.js/rc-accordion/src/index.js 2:17-39
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]
@ ./
列出 API,允许自定义动画,或禁止动画
Line 101 in 30a7dac
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.
Package.json homepage refers to incorrect URL.
"homepage": "http://github.com/react-component/rc-collapse",
问题反馈在了这里;
希望修复,项目用了很多Input在header中,因以前antd2无问题,升级到3后,有问题,目前只能在项目中替换源码;望修复;3Q;
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?
Is there any way to set id attribute to the panel?
There is a need do determine, if current PanelContent
visible or active in it's children.
There are three methods to perform this:
PanelContent
children isActive
property.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.
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
The error goes away when I only use Panels as children in the Collapse component. But my project design requires that the accordion operate as one accordion even though there are some elements that are in between the accordion panels. Not a high priority as it renders and operates as expected, just thought the warning message should be reported.
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.
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!
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?
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
Collapse 在IE8 下使用嵌套的时候,会出现内部已经折叠了,外部的不会折叠回去 antd 的 issue
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.