/
Group.tsx
53 lines (43 loc) · 1.5 KB
/
Group.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
import React, { forwardRef } from 'react';
import { DefaultProps, MantineNumberSize, useComponentDefaultProps } from '@mantine/styles';
import { Box } from '../Box';
import { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children';
import useStyles, { GroupPosition } from './Group.styles';
export interface GroupProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
/** Defines justify-content property */
position?: GroupPosition;
/** Defined flex-wrap property */
noWrap?: boolean;
/** Defines flex-grow property for each element, true -> 1, false -> 0 */
grow?: boolean;
/** Space between elements */
spacing?: MantineNumberSize;
/** Defines align-items css property */
align?: React.CSSProperties['alignItems'];
}
const defaultProps: Partial<GroupProps> = {
position: 'left',
spacing: 'md',
};
export const Group = forwardRef<HTMLDivElement, GroupProps>((props: GroupProps, ref) => {
const { className, position, align, children, noWrap, grow, spacing, unstyled, ...others } =
useComponentDefaultProps('Group', defaultProps, props);
const filteredChildren = filterFalsyChildren(children);
const { classes, cx } = useStyles(
{
align,
grow,
noWrap,
spacing,
position,
count: filteredChildren.length,
},
{ unstyled, name: 'Group' }
);
return (
<Box className={cx(classes.root, className)} ref={ref} {...others}>
{filteredChildren}
</Box>
);
});
Group.displayName = '@mantine/core/Group';