Skip to content
Permalink
Browse files

feat: Add useAccordionToggle hook

Adds a hook that API users can utilize to make custom
AccordionToggle components.y
  • Loading branch information
bpas247 committed Jul 13, 2019
1 parent d879923 commit 140ddf7d5a0e3c82714af25823ab1f9b485b1973
@@ -1,7 +1,6 @@
import React, { useContext } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import SelectableContext from './SelectableContext';
import AccordionContext from './AccordionContext';
import useAccordionToggle from './useAccordionToggle';

const propTypes = {
/** Set a custom element for this component */
@@ -32,24 +31,10 @@ const AccordionToggle = React.forwardRef(
},
ref,
) => {
const contextEventKey = useContext(AccordionContext);
const onSelect = useContext(SelectableContext);
const accordionOnClick = useAccordionToggle(eventKey, onClick);

return (
<Component
ref={ref}
onClick={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);
}}
{...props}
>
<Component ref={ref} onClick={accordionOnClick} {...props}>
{children}
</Component>
);
@@ -1,4 +1,5 @@
export Accordion from './Accordion';
export useAccordionToggle from './useAccordionToggle';
export Alert from './Alert';
export Badge from './Badge';
export Breadcrumb from './Breadcrumb';
@@ -0,0 +1,19 @@
import { useContext } from 'react';
import SelectableContext from './SelectableContext';
import AccordionContext from './AccordionContext';

export default (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);
};
};
@@ -69,6 +69,8 @@

"ThemeProvider": false,

"useAccordionToggle": false,

"mountNode": false,
"yup": false,
"formik": false,
@@ -0,0 +1,40 @@
function CustomToggle({ children, eventKey }) {
const decoratedOnClick = useAccordionToggle(eventKey, () =>
console.log('totally custom!'),
);

return (
<button
type="button"
style={{ backgroundColor: 'pink' }}
onClick={decoratedOnClick}
>
{children}
</button>
);
}

function Example() {
return (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<CustomToggle eventKey="0">Click me!</CustomToggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<CustomToggle eventKey="1">Click me!</CustomToggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
}

render(<Example />);
@@ -7,6 +7,7 @@ import ReactPlayground from '../../components/ReactPlayground';
import Basic from '../../examples/Accordion/Basic';
import AllCollapse from '../../examples/Accordion/AllCollapse';
import EntireHeaderClickable from '../../examples/Accordion/EntireHeaderClickable';
import CustomToggle from '../../examples/Accordion/CustomToggle.js';

# Accordion

@@ -37,12 +38,24 @@ underlying component to be a CardHeader component.

<ReactPlayground codeText={EntireHeaderClickable} />

### Custom Toggle

You can now hook into the Accordion toggle functionality via `useAccordionToggle` to make custom toggle components.

<ReactPlayground codeText={CustomToggle} />

## API

<ComponentApi metadata={props.data.Accordion} />
<ComponentApi metadata={props.data.AccordionToggle} exportedBy={props.data.Accordion} />
<ComponentApi metadata={props.data.AccordionCollapse} exportedBy={props.data.Accordion} />

### useAccordionToggle

```js
const decoratedOnClick = useAccordionToggle(eventKey, onClick);
```

export const query = graphql`
query AccordionQuery {
Accordion: componentMetadata(displayName: { eq: "Accordion" }) {

0 comments on commit 140ddf7

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