blob: 7197c346b13350660a9419d239b994597329f306 (
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
|
import { VFC } 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 = {
/**
* Set additional classnames to the list wrapper
*/
className?: 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: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => {
const ListTag = kind === 'ordered' ? 'ol' : 'ul';
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]} ${className}`}
>
{getItems(child)}
</ListTag>
)}
</li>
));
};
return (
<ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
{getItems(items)}
</ListTag>
);
};
export default List;
|
