forked from mantinedev/mantine
/
HorizontalSection.tsx
119 lines (102 loc) · 2.93 KB
/
HorizontalSection.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import React, { forwardRef } from 'react';
import { DefaultProps, MantineNumberSize, getDefaultZIndex, Global } from '@mantine/styles';
import { Box } from '../../Box';
import { useAppShellContext } from '../AppShell.context';
import { getSortedBreakpoints } from './get-sorted-breakpoints/get-sorted-breakpoints';
import useStyles, {
HorizontalSectionPosition,
HorizontalSectionWidth,
} from './HorizontalSection.styles';
export interface HorizontalSectionSharedProps extends DefaultProps {
/** Component width with breakpoints */
width?: HorizontalSectionWidth;
/** Component height */
height?: string | number;
/** HorizontalSection content */
children: React.ReactNode;
/** Border */
withBorder?: boolean;
/** Set position to fixed */
fixed?: boolean;
/** Position for fixed variant */
position?: HorizontalSectionPosition;
/** Breakpoint at which component will be hidden if hidden prop is true */
hiddenBreakpoint?: MantineNumberSize;
/** Set to true to hide component at hiddenBreakpoint */
hidden?: boolean;
/** z-index */
zIndex?: React.CSSProperties['zIndex'];
}
export interface HorizontalSectionProps
extends HorizontalSectionSharedProps,
Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> {
section: 'navbar' | 'aside';
__staticSelector: string;
}
export const HorizontalSection = forwardRef<HTMLElement, HorizontalSectionProps>(
(
{
width,
height,
fixed = false,
position,
zIndex = getDefaultZIndex('app'),
hiddenBreakpoint = 'md',
hidden = false,
withBorder = true,
className,
classNames,
styles,
children,
section,
__staticSelector,
unstyled,
...others
}: HorizontalSectionProps,
ref
) => {
const ctx = useAppShellContext();
const { classes, cx, theme } = useStyles(
{
width,
height,
fixed: ctx.fixed || fixed,
position,
hiddenBreakpoint,
zIndex: ctx.zIndex || zIndex,
section,
withBorder,
},
{ classNames, styles, name: __staticSelector, unstyled }
);
const breakpoints = getSortedBreakpoints(width, theme).reduce(
(acc, [breakpoint, breakpointSize]) => {
acc[`@media (min-width: ${breakpoint + 1}px)`] = {
[`--mantine-${section}-width`]: `${breakpointSize}px`,
};
return acc;
},
{}
);
return (
<Box
component={section === 'navbar' ? 'nav' : 'aside'}
ref={ref}
data-hidden={hidden || undefined}
className={cx(classes.root, className)}
{...others}
>
{children}
<Global
styles={() => ({
':root': {
[`--mantine-${section}-width`]: width?.base ? `${width.base}px` : '0px',
...breakpoints,
},
})}
/>
</Box>
);
}
);
HorizontalSection.displayName = '@mantine/core/HorizontalSection';