-
Notifications
You must be signed in to change notification settings - Fork 78
/
GridContainer.tsx
79 lines (70 loc) · 2.08 KB
/
GridContainer.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
import React from 'react'
import classnames from 'classnames'
import { ContainerSizes } from '../types'
type GridContainerProps = {
containerSize?: ContainerSizes
className?: string
children: React.ReactNode
}
interface WithCustomGridContainerProps<T> {
asCustom: React.FunctionComponent<T>
}
export type DefaultGridContainerProps = GridContainerProps
export type CustomGridContainerProps<T> = GridContainerProps &
WithCustomGridContainerProps<T>
export function isCustomProps<T>(
props: DefaultGridContainerProps | CustomGridContainerProps<T>
): props is CustomGridContainerProps<T> {
return 'asCustom' in props
}
function gridContainerClasses(
className: GridContainerProps['className'],
containerSize: GridContainerProps['containerSize']
): string | undefined {
const classes = classnames(
{
'grid-container': !containerSize,
[`grid-container-${containerSize}`]: !!containerSize,
},
className
)
return classes
}
export function GridContainer(
props: DefaultGridContainerProps
): React.ReactElement
export function GridContainer<T>(
props: CustomGridContainerProps<T>
): React.ReactElement
export function GridContainer<
FCProps extends React.PropsWithChildren<object> = DefaultGridContainerProps,
>(
props: DefaultGridContainerProps | CustomGridContainerProps<FCProps>
): React.ReactElement {
if (isCustomProps(props)) {
const { className, containerSize, asCustom, children, ...remainingProps } =
props
const gridContainerProps: FCProps = remainingProps as unknown as FCProps
const classes = gridContainerClasses(className, containerSize)
return React.createElement(
asCustom,
{
'data-testid': 'gridContainer',
className: classes,
...gridContainerProps,
},
children
)
} else {
const { className, containerSize, children, ...gridContainerProps } = props
const classes = gridContainerClasses(className, containerSize)
return (
<div
data-testid="gridContainer"
className={classes}
{...gridContainerProps}>
{children}
</div>
)
}
}