xchain-components/src/components/XAccordion/index.js

Xchain Components

/* eslint react/jsx-filename-extension: 0 */
import * as React from 'react';
import { Accordion, Icon } from 'semantic-ui-react';
import XDivider from 'components/XDivider';

type Props = {
  width?: string,
  height?: string,
  headerHasDivider?: boolean,
  activeIndex: number,
  accordionHasLineBreak?: boolean,
  accordions: Array<{title: React.Node, content: React.Node, onClickAccordion: ()=> void}>,
};

const AccordionStyle = {
  backgroundColor: 'transparent',
};

const AccordionTitleStyle = {
  padding: 0,
  backgroundColor: 'white',
};

const AccordionTitleContentStyle = {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'space-around',
  alignItems: 'center',
};

const AccordionContentStyle = {
  padding: 0,
  backgroundColor: 'white',
};


const XAccordion = (props:Props) => {
  const {
    width,
    accordions,
    activeIndex,
    headerHasDivider,
    accordionHasLineBreak,
  } = props;

  return (
    <Accordion style={AccordionStyle}>
      {
        accordions.map((accordion, idx) => (
          <div key={idx} >
            <Accordion.Title
              style={AccordionTitleStyle}
              active={activeIndex === idx}
              index={idx}
              onClick={accordion.onClickAccordion}
            >
              <div style={AccordionTitleContentStyle}>
                <Icon style={{ width: '5%' }} name="angle right" />
                <div style={{ width: '95%' }}>
                  {
                     accordion.title
                  }
                </div>
              </div>
              { headerHasDivider
                ? (<XDivider width="100%" height="0" />) : null
              }
            </Accordion.Title>
            <Accordion.Content active={activeIndex === idx} style={AccordionContentStyle}>
              {
                accordion.content
              }
            </Accordion.Content>
            {
              accordionHasLineBreak
                ? (<br />) : null
            }
          </div>
        ))
      }
    </Accordion>
  );
};

XAccordion.defaultProps = {
  width: '700px',
  height: '32px',
  headerHasDivider: false,
  accordionHasLineBreak: false,
};
export default XAccordion;