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
|
import { type ForwardRefRenderFunction, forwardRef } from 'react';
import { DescriptionList, type DescriptionListProps } from '../../atoms';
import { MetaItem, type MetaItemProps } from './meta-item';
import styles from './meta-list.module.scss';
export type MetaItemData = Pick<
MetaItemProps,
| 'hasBorderedValues'
| 'hasInlinedValues'
| 'isCentered'
| 'isInline'
| 'label'
| 'value'
> & {
id: string;
};
export type MetaListProps = Omit<DescriptionListProps, 'children' | 'spacing'> &
Pick<MetaItemProps, 'hasBorderedValues' | 'hasInlinedValues'> & {
/**
* Should the items be inlined?
*
* @default false
*/
hasInlinedItems?: boolean;
/**
* Should the meta be centered?
*
* @default false
*/
isCentered?: boolean;
/**
* The meta items.
*/
items: MetaItemData[];
};
const MetaListWithRef: ForwardRefRenderFunction<
HTMLDListElement,
MetaListProps
> = (
{
className = '',
hasBorderedValues = false,
hasInlinedItems = false,
hasInlinedValues = false,
isCentered = false,
isInline = false,
items,
...props
},
ref
) => {
const listClass = [
styles.list,
styles[isCentered ? 'list--centered' : ''],
styles[isInline ? 'list--inlined' : 'list--stacked'],
className,
].join(' ');
return (
<DescriptionList {...props} className={listClass} ref={ref}>
{items.map(({ id, ...item }) => (
<MetaItem
hasBorderedValues={hasBorderedValues}
hasInlinedValues={hasInlinedValues}
isCentered={isCentered}
isInline={hasInlinedItems}
// Each item should be able to override the global settings.
{...item}
key={id}
/>
))}
</DescriptionList>
);
};
export const MetaList = forwardRef(MetaListWithRef);
|
