blob: 8ce8437108b114916666fcc720c1672c1133c932 (
plain)
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
|
import { FC } from 'react';
import styles from './list.module.scss';
export type ListItem = {
/**
* Nested list.
*/
child?: ListItem[];
/**
* Item id.
*/
id: string;
/**
* Item value.
*/
value: any;
};
export type ListProps = {
/**
* Add additional classes to the list element.
*/
classes?: string;
/**
* An array of list items.
*/
items: ListItem[];
/**
* The list kind (ordered or unordered).
*/
kind?: 'ordered' | 'unordered';
};
/**
* List component
*
* Render either an ordered or an unordered list.
*/
const List: FC<ListProps> = ({ classes, items, kind = 'unordered' }) => {
const ListTag = kind === 'ordered' ? 'ol' : 'ul';
const additionalClasses = classes || '';
const kindClass = `list--${kind}`;
/**
* Retrieve the list items.
* @param array - An array of items.
* @returns {JSX.Element[]} - An array of li elements.
*/
const getItems = (array: ListItem[]): JSX.Element[] => {
return array.map(({ child, id, value }) => (
<li key={id} className={styles.list__item}>
{value}
{child && (
<ListTag
className={`${styles.list} ${styles[kindClass]} ${additionalClasses}`}
>
{getItems(child)}
</ListTag>
)}
</li>
));
};
return (
<ListTag
className={`${styles.list} ${styles[kindClass]} ${additionalClasses}`}
>
{getItems(items)}
</ListTag>
);
};
export default List;
|
