-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
101 lines (91 loc) · 2.45 KB
/
index.js
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
// @flow
import * as React from "react";
import { createUseStyles } from "react-jss";
type FlexAlignType = "center" | "space-between" | "start";
export type ContainerProps = {
backgroundColor?: string,
border?: string,
borderBottom?: string,
borderLeft?: string,
borderRight?: string,
boderTop?: string,
height?: string,
padding?: string,
paddingBottom?: string,
paddingLeft?: string,
paddingRight?: string,
paddingTop?: string,
width?: string,
};
export type LayoutProps = {
height?: string,
width?: string,
};
type RowType = {
justifyContent: FlexAlignType,
alignItems: FlexAlignType,
container?: ContainerProps,
children?: React.Node,
className?: string,
};
export function Row({
alignItems,
justifyContent,
container,
children,
className,
}: RowType & LayoutProps): React.Node {
const classes = useRowStyles({ alignItems, justifyContent });
const containerClasses = useContainerStyles(container || {});
return (
<div
className={[classes.row, containerClasses.container, className]
.join(" ")
.trim()}
>
{children}
</div>
);
}
Row.defaultProps = {
alignItems: "start",
justifyContent: "space-between",
};
const useRowStyles = createUseStyles({
row: {
display: "flex",
padding: "0.375rem 0",
alignItems: ({ alignItems }: { alignItems: FlexAlignType }) => alignItems,
justifyContent: ({ justifyContent }: { justifyContent: FlexAlignType }) =>
justifyContent,
},
});
export const useLayoutStyles: (LayoutProps) => {
layout: string,
} = createUseStyles({
layout: {
height: ({ height }) => height,
width: ({ width }) => width,
},
});
export const useContainerStyles: (
container: ContainerProps
) => {
container: string,
} = createUseStyles({
container: {
backgroundColor: (container) => container.backgroundColor,
border: (container) => container.border,
borderBottom: (container) => container.borderBottom,
borderLeft: (container) => container.borderLeft,
borderRight: (container) => container.borderRight,
borderTop: (container) => container.borderTop,
height: (container) => container.height,
padding: (container) => container.padding,
paddingBottom: (container) => container.paddingBottom,
paddingLeft: (container) => container.paddingLeft,
paddingRight: (container) => container.paddingRight,
paddingTop: (container) => container.paddingTop,
width: (container) => container.width,
},
});