git.iko.soy/bridge
on 4c8c607 help sign in
bridge/src/components/Accordion.js
63 lines 1.7 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import { Grid, AccessoryIcon } from 'indigo-react';
5export default function Accordion({
6 className,
7 views,
8 options,
9 currentTab,
10 onTabChange,
12 // Tab props
13 ...rest
14}) {
15 const Tab = views[currentTab];
17 return (
18 <Grid className={className}>
19 {options.map((option, i) => {
20 const isActive = option.value === currentTab;
22 return (
23 <React.Fragment key={option.value}>
24 <Grid.Item
25 full
26 className={cn('f5 pv3 rel', {
27 pointer: !option.disabled,
28 gray3: option.disabled,
29 })}
30 onClick={
31 option.disabled
32 ? null
33 : () => onTabChange(isActive ? undefined : option.value)
34 }>
35 {option.text}
36 {option.disabled && (
37 <sup className="f6 lowercase">{option.disabled}</sup>
38 )}
39 <div
40 className="abs"
41 style={{
42 top: 0,
43 right: 0,
44 height: '100%',
45 width: '44px',
46 overflow: 'hidden',
47 }}>
48 <AccessoryIcon
49 className={cn({
50 black: !option.disabled,
51 })}>
52 {isActive ? '▲' : '▼'}
53 </AccessoryIcon>
54 </div>
55 </Grid.Item>
56 {isActive && <Grid.Item full as={Tab} {...rest} />}
57 <Grid.Divider />
58 </React.Fragment>
59 );
60 })}
61 </Grid>
62 );