Make heading configurable in AccodionTitleItem

Would be nice to have the <h3> configurable in https://github.com/daviferreira/react-sanfona/blob/master/src/AccordionItemTitle/index.jsx#L16. It does not necessary suit the rest of the markup semantic in the application.

Thanks for your nice module! 😃

[psimyn]

Just had a quick run at this, the change allows AccordionTitle title prop to be a string or a component. It keeps the default onClick so the Accordion still works, this means if you want other elements on there (e.g. the close/arrow icons above) you need to stop the event from propagating.

Here’s an example of using it:

<Accordion
  allowMultiple={true}
  activeItems={2}
>
  {[1, 2, 3, 4, 5].map((item) => {
    const title = (
      <h2>
        <span>Item { item }</span>
        <span style={{float: 'right'}} onClick={(evt) => {
          alert('click')
          evt.stopPropagation() // don't trigger AccordionItemTitle onClick
        }}>x</span>
      </h2>
    )

    return (
      <AccordionItem title={title} key={item}>
        <div>
          {`Item ${ item } content`}
        </div>
      </AccordionItem>
    );
  })}
</Accordion>

I’ll try to clean up the onClick stuff a bit with this as well

[psimyn]

Awesome, thanks. I’ll try to have a pass at this tonight, will depend on some other PRs though. Custom button or something in the title (I am assuming that is ‘delete’?) is an interesting idea.

In the meantime, if just for the arrows you could use some CSS

.react-sanfona-item-title {
  position: relative;
}

.react-sanfona-item-title:after {
  position: absolute;
  content: url(chevron.svg); /* can use icon font here if you'd rather */
  right: 1em;
}

.react-sanfona-item-expanded .react-sanfona-item-title:after {
  transform: rotate(180deg);
}