git.iko.soy/bridge
on 63a4aea help sign in
bridge/src/indigo-react/components/Flex.js
61 lines 1.1 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import getComponent from 'indigo-react/lib/getComponent';
6function Flex({
7 as = 'div',
8 row = false,
9 wrap = false,
10 col = false,
11 align,
12 justify,
13 className,
14 ...rest
15}) {
16 if (row && col) {
17 throw new Error('Only one of row or col must be true, not both.');
18 }
20 const Component = getComponent(as);
21 return (
22 <Component
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 );
41// flex can be boolean {true} or integer flex
42Flex.Item = function FlexItem({ as = 'div', flex, className, ...rest }) {
43 if (flex === true) {
44 flex = 1;
45 }
47 const Component = getComponent(as);
48 return (
49 <Component
50 className={cn(
51 {
52 [`flex${flex}`]: flex,
53 },
54 className
55 )}
56 {...rest}
57 />
58 );
59};
61export default Flex;