-
Notifications
You must be signed in to change notification settings - Fork 100
/
Inline.tsx
82 lines (74 loc) · 2.15 KB
/
Inline.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
import assert from 'assert';
import React, { Children } from 'react';
import flattenChildren from 'react-keyed-flatten-children';
import { Box } from '../Box/Box';
import { ResponsiveSpace } from '../Box/useBoxStyles';
import {
useNegativeMarginLeft,
useNegativeMarginTop,
} from '../../hooks/useNegativeMargin/useNegativeMargin';
import { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
import {
resolveCollapsibleAlignmentProps,
CollapsibleAlignmentProps,
} from '../../utils/collapsibleAlignmentProps';
export const validInlineComponents = ['div', 'ol', 'ul'] as const;
export interface InlineProps extends CollapsibleAlignmentProps {
space: ResponsiveSpace;
component?: typeof validInlineComponents[number];
children: ReactNodeNoStrings;
}
export const Inline = ({
space = 'none',
align,
alignY,
collapseBelow,
reverse,
component = 'div',
children,
}: InlineProps) => {
assert(
validInlineComponents.includes(component),
`Invalid Inline component: '${component}'. Should be one of [${validInlineComponents
.map((c) => `'${c}'`)
.join(', ')}]`,
);
const negativeMarginLeft = useNegativeMarginLeft(space);
const negativeMarginTop = useNegativeMarginTop(space);
const isList = component === 'ol' || component === 'ul';
const inlineItemComponent = isList ? 'li' : 'div';
const {
collapsibleAlignmentProps,
collapsibleAlignmentChildProps,
orderChildren,
} = resolveCollapsibleAlignmentProps({
align,
alignY,
collapseBelow,
reverse,
});
return (
<Box className={negativeMarginTop}>
<Box
component={component}
className={negativeMarginLeft}
flexWrap="wrap"
{...collapsibleAlignmentProps}
>
{Children.map(orderChildren(flattenChildren(children)), (child) =>
child !== null && child !== undefined ? (
<Box
component={inlineItemComponent}
minWidth={0}
marginLeft={space}
marginTop={space}
{...collapsibleAlignmentChildProps}
>
{child}
</Box>
) : null,
)}
</Box>
</Box>
);
};