Skip to content
Permalink
Browse files

fix: Fix up accordions a bit (#3615)

  • Loading branch information
taion committed Apr 10, 2019
1 parent 3f1de16 commit 511e5660a4fef5f35872d41c40487bd03fb07ed0
@@ -13,15 +13,17 @@ const propTypes = {
children: PropTypes.element.isRequired,
};

const AccordionCollapse = ({ children, eventKey, ...props }) => {
const contextEventKey = useContext(AccordionContext);
const AccordionCollapse = React.forwardRef(
({ children, eventKey, ...props }, ref) => {
const contextEventKey = useContext(AccordionContext);

return (
<Collapse in={contextEventKey === eventKey} {...props}>
{React.Children.only(children)}
</Collapse>
);
};
return (
<Collapse ref={ref} in={contextEventKey === eventKey} {...props}>
<div>{React.Children.only(children)}</div>
</Collapse>
);
},
);

AccordionCollapse.propTypes = propTypes;

@@ -30,9 +30,9 @@ const AccordionToggle = React.forwardRef(
return (
<Component
ref={ref}
onClick={() => {
onSelect(eventKey);
if (onClick) onClick(eventKey);
onClick={e => {
onSelect(eventKey, e);
if (onClick) onClick(e);
}}
{...props}
>
@@ -88,6 +88,5 @@ describe('<Accordion>', () => {
.simulate('click');

expect(onClickSpy).to.be.calledOnce;
expect(onClickSpy).to.be.calledWith('0');
});
});
@@ -1,10 +1,7 @@
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle
onClick={key => console.log(`I've been clicked by : ${key}`)}
eventKey="0"
>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
@@ -14,10 +11,7 @@
</Card>
<Card>
<Card.Header>
<Accordion.Toggle
onClick={key => console.log(`I've been clicked by : ${key}`)}
eventKey="1"
>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
@@ -1,10 +1,7 @@
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle
onClick={key => console.log(`I've been clicked by : ${key}`)}
eventKey="0"
>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
@@ -14,10 +11,7 @@
</Card>
<Card>
<Card.Header>
<Accordion.Toggle
onClick={key => console.log(`I've been clicked by : ${key}`)}
eventKey="1"
>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
@@ -1,22 +1,14 @@
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
onClick={key => console.log(`I've been clicked by : ${key}`)}
eventKey="0"
>
<Accordion.Toggle as={Card.Header} eventKey="0">
Click me!
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
onClick={key => console.log(`I've been clicked by : ${key}`)}
eventKey="1"
>
<Accordion.Toggle as={Card.Header} eventKey="1">
Click me!
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">

0 comments on commit 511e566

Please sign in to comment.
You can’t perform that action at this time.