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