-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
List.tsx
98 lines (83 loc) · 2.46 KB
/
List.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
import React, { forwardRef } from 'react';
import {
DefaultProps,
MantineNumberSize,
Selectors,
useComponentDefaultProps,
StylesApiProvider,
} from '@mantine/styles';
import { ForwardRefWithStaticComponents } from '@mantine/utils';
import { Box } from '../Box';
import { ListItem, ListItemStylesNames } from './ListItem/ListItem';
import { ListContext } from './List.context';
import useStyles from './List.styles';
export type ListStylesNames = ListItemStylesNames | Selectors<typeof useStyles>;
export interface ListProps
extends DefaultProps<ListStylesNames>,
React.ComponentPropsWithoutRef<'ul'> {
/** <List.Item /> components only */
children: React.ReactNode;
/** List type: ol or ul */
type?: 'ordered' | 'unordered';
/** Include padding-left to offset list from main content */
withPadding?: boolean;
/** Font size from theme or number to set value in px */
size?: MantineNumberSize;
/** Icon that should replace list item dot */
icon?: React.ReactNode;
/** Spacing between items from theme or number to set value in px */
spacing?: MantineNumberSize;
/** Center items with icon */
center?: boolean;
/** List style */
listStyleType?: React.CSSProperties['listStyleType'];
}
type ListComponent = ForwardRefWithStaticComponents<
HTMLUListElement,
ListProps,
{ Item: typeof ListItem }
>;
const defaultProps: Partial<ListProps> = {
type: 'unordered',
size: 'md',
spacing: 0,
};
export const List: ListComponent = forwardRef<HTMLUListElement, ListProps>(
(props: ListProps, ref) => {
const {
children,
type,
size,
listStyleType,
withPadding,
center,
spacing,
icon,
className,
styles,
classNames,
unstyled,
...others
} = useComponentDefaultProps('List', defaultProps, props);
const { classes, cx } = useStyles(
{ withPadding, size, listStyleType },
{ classNames, styles, name: 'List', unstyled }
);
return (
<StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>
<ListContext.Provider value={{ spacing, center, icon }}>
<Box<any>
component={type === 'unordered' ? 'ul' : 'ol'}
className={cx(classes.root, className)}
ref={ref}
{...others}
>
{children}
</Box>
</ListContext.Provider>
</StylesApiProvider>
);
}
) as any;
List.Item = ListItem;
List.displayName = '@mantine/core/List';