git.iko.soy/bridge
on master help sign in
bridge/src/indigo-react/components/Flex.jsx
64 lines 1.1 kB history raw
1import React from 'react';
2import cn from 'classnames';
4const Flex = React.forwardRef(function Flex(
5 {
6 as: As = 'div',
7 row = false,
8 wrap = false,
9 col = false,
10 align,
11 justify,
12 className,
13 ...rest
14 },
15 ref
16) {
17 if (row && col) {
18 throw new Error('Only one of row or col must be true, not both.');
19 }
20 return (
21 <As
22 ref={ref}
23 className={cn(
24 'flex',
25 {
26 'flex-row': row,
27 'flex-col': col,
28 'flex-wrap': wrap,
29 },
30 {
31 [`align-${align}`]: align,
32 [`justify-${justify}`]: justify,
33 },
34 className
35 )}
36 {...rest}
37 />
38 );
39});
41// flex can be boolean {true} or integer flex
42Flex.Item = React.forwardRef(function FlexItem(
43 { as: As = 'div', flex, className, ...rest },
44 ref
45) {
46 if (flex === true) {
47 flex = 1;
48 }
50 return (
51 <As
52 ref={ref}
53 className={cn(
54 {
55 [`flex${flex}`]: flex,
56 },
57 className
58 )}
59 {...rest}
60 />
61 );
62});
64export default Flex;