/
ComponentsListRenderer.tsx
99 lines (92 loc) · 2.22 KB
/
ComponentsListRenderer.tsx
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'clsx';
import Link from 'rsg-components/Link';
import Styled, { JssInjectedProps } from 'rsg-components/Styled';
import { useStyleGuideContext } from 'rsg-components/Context';
const styles = ({ color, fontFamily, fontSize, space, mq }: Rsg.Theme) => ({
list: {
margin: 0,
paddingLeft: space[2],
},
item: {
color: color.base,
display: 'block',
margin: [[space[1], 0, space[1], 0]],
fontFamily: fontFamily.base,
fontSize: fontSize.base,
listStyle: 'none',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
isChild: {
[mq.small]: {
display: 'inline-block',
margin: [[0, space[1], 0, 0]],
},
},
heading: {
color: color.base,
marginTop: space[1],
fontFamily: fontFamily.base,
fontWeight: 'bold',
},
isSelected: {
fontWeight: 'bold',
},
});
interface ComponentsListRendererProps extends JssInjectedProps {
items: Rsg.TOCItem[];
}
export const ComponentsListRenderer: React.FunctionComponent<ComponentsListRendererProps> = ({
classes,
items,
}) => {
return (
<ul className={classes.list}>
{items.map(item => (
<ComponentsListSectionRenderer key={item.slug} classes={classes} {...item} />
))}
</ul>
);
};
const ComponentsListSectionRenderer: React.FunctionComponent<Rsg.TOCItem & JssInjectedProps> = ({
classes,
heading,
visibleName,
href,
content,
shouldOpenInNewTab,
selected,
initialOpen,
forcedOpen,
}) => {
const {
config: { tocMode },
} = useStyleGuideContext();
const [open, setOpen] = tocMode !== 'collapse' ? [true, () => {}] : React.useState(!!initialOpen);
return (
<li
className={cx(classes.item, {
[classes.isChild]: !content && !shouldOpenInNewTab,
[classes.isSelected]: selected,
})}
key={href}
>
<Link
className={cx(heading && classes.heading)}
href={href}
onClick={() => setOpen(!open)}
target={shouldOpenInNewTab ? '_blank' : undefined}
>
{visibleName}
</Link>
{open || forcedOpen ? content : null}
</li>
);
};
ComponentsListRenderer.propTypes = {
classes: PropTypes.objectOf(PropTypes.string.isRequired).isRequired,
items: PropTypes.array.isRequired,
};
export default Styled<ComponentsListRendererProps>(styles)(ComponentsListRenderer);