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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
import {
type ForwardedRef,
type ReactNode,
forwardRef,
type CSSProperties,
} from 'react';
import type { Spacing } from '../../../types';
import { List, ListItem, type ListProps } from '../../atoms';
import styles from './grid.module.scss';
export type GridItem = {
id: string;
item: ReactNode;
};
export type GridProps<T extends boolean> = Omit<
ListProps<T, false>,
'children' | 'hideMarker' | 'isHierarchical' | 'isInline' | 'spacing'
> & {
/**
* Control the number of column.
*
* @default 'auto-fit'
*/
col?: number | 'auto-fill' | 'auto-fit';
/**
* The gap between the items.
*
* @default null
*/
gap?: Spacing | null;
/**
* Should the grid be centered?
*
* @default false
*/
isCentered?: boolean;
/**
* The grid items.
*/
items: GridItem[];
/**
* Define a fixed size for each item.
*
* You should either use `size` or `sizeMax`/`sizeMin` not both.
*
* @default undefined
*/
size?: string;
/**
* Define the maximal size of each item.
*
* You should either use `size` or `sizeMax`/`sizeMin` not both.
*
* @default '1fr'
*/
sizeMax?: string;
/**
* Define the maximal size of each item.
*
* You should either use `size` or `sizeMax`/`sizeMin` not both.
*
* @default 0
*/
sizeMin?: 0 | string;
};
const GridWithRef = <T extends boolean>(
{
className = '',
col = 'auto-fit',
gap,
isCentered = false,
items,
size,
sizeMax,
sizeMin,
style,
...props
}: GridProps<T>,
ref?: ForwardedRef<T extends true ? HTMLOListElement : HTMLUListElement>
) => {
const gridClass = [
styles.wrapper,
styles[isCentered ? 'wrapper--is-centered' : ''],
styles[size ? 'wrapper--has-fixed-size' : ''],
styles[sizeMin ? 'wrapper--has-min-size' : ''],
className,
].join(' ');
const gridStyles = {
...style,
'--col': col,
...(size ? { '--size': size } : {}),
...(sizeMax ? { '--size-max': sizeMax } : {}),
...(sizeMin ? { '--size-min': sizeMin } : {}),
...(gap ? { '--gap': `var(--spacing-${gap})` } : {}),
} as CSSProperties;
return (
<List
{...props}
className={gridClass}
hideMarker
ref={ref}
style={gridStyles}
>
{items.map(({ id, item }) => (
<ListItem className={styles.item} key={id}>
{item}
</ListItem>
))}
</List>
);
};
export const Grid = forwardRef(GridWithRef);
|
