-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
AccordionToggle.js
63 lines (52 loc) · 1.68 KB
/
AccordionToggle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import SelectableContext from './SelectableContext';
import AccordionContext from './AccordionContext';
const propTypes = {
/** Set a custom element for this component */
as: PropTypes.elementType,
/**
* A key that corresponds to the collapse component that gets triggered
* when this has been clicked.
*/
eventKey: PropTypes.string.isRequired,
/** A callback function for when this component is clicked */
onClick: PropTypes.func,
/** Children prop should only contain a single child, and is enforced as such */
children: PropTypes.element,
};
export function useAccordionToggle(eventKey, onClick) {
const contextEventKey = useContext(AccordionContext);
const onSelect = useContext(SelectableContext);
return (e) => {
/*
Compare the event key in context with the given event key.
If they are the same, then collapse the component.
*/
let eventKeyPassed = eventKey === contextEventKey ? null : eventKey;
onSelect(eventKeyPassed, e);
if (onClick) onClick(e);
};
}
const AccordionToggle = React.forwardRef(
(
{
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'button',
children,
eventKey,
onClick,
...props
},
ref,
) => {
const accordionOnClick = useAccordionToggle(eventKey, onClick);
return (
<Component ref={ref} onClick={accordionOnClick} {...props}>
{children}
</Component>
);
},
);
AccordionToggle.propTypes = propTypes;
export default AccordionToggle;