Commit af130da8 authored by Tasso Evangelista's avatar Tasso Evangelista

(temp)

parent 95e30849
......@@ -4,14 +4,18 @@ import React from 'react';
import { useProps } from '../../../hooks';
export function FlexContainer({ inline = false, children, direction, wrap, justifyContent, alignItems, alignContent }) {
const [, PropsProvider] = useProps(({ style, ...props }) => ({
const [, PropsProvider] = useProps(({ className, style, ...props }) => ({
className: [
className,
'rcx-box--flex',
inline && 'rcx-box--flex-inline',
direction && `rcx-box--flex-${ direction }`,
wrap && `rcx-box--flex-${ wrap }`,
alignItems && `rcx-box--flex-items-${ alignItems }`,
].filter(Boolean).join(' '),
style: {
...style,
display: inline ? 'inline-flex' : 'flex',
flexDirection: direction,
flexWrap: wrap,
justifyContent,
alignItems,
alignContent,
},
...props,
......@@ -23,30 +27,17 @@ export function FlexContainer({ inline = false, children, direction, wrap, justi
FlexContainer.propTypes = {
inline: PropTypes.bool,
direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
wrap: PropTypes.oneOf(['no-wrap', 'wrap', 'wrap-reverse']),
justifyContent: PropTypes.oneOf([
'flex-start', 'flex-end', 'center',
'space-between', 'space-around', 'space-evenly',
'start', 'end', 'left', 'right',
'flex-start safe', 'flex-end safe', 'center safe',
'space-between safe', 'space-around safe', 'space-evenly safe',
'start safe', 'end safe', 'left safe', 'right safe',
]),
alignItems: PropTypes.oneOf([
'stretch', 'flex-start', 'flex-end', 'center',
'baseline', 'first baseline', 'last baseline',
'start', 'end', 'self-start', 'self-end',
'stretch safe', 'flex-start safe', 'flex-end safe', 'center safe',
'baseline safe', 'first baseline safe', 'last baseline safe',
'start safe', 'end safe', 'self-start safe', 'self-end safe',
]),
alignItems: PropTypes.oneOf(['stretch', 'start', 'center', 'end', 'baseline']),
alignContent: PropTypes.oneOf([
'flex-start', 'flex-end', 'center',
'space-between', 'space-around', 'space-evenly', 'stretch',
'start', 'end', 'baseline', 'first baseline', 'last baseline',
'flex-start safe', 'flex-end safe', 'center safe',
'space-between safe', 'space-around safe', 'space-evenly safe', 'stretch safe',
'start safe', 'end safe', 'baseline safe', 'first baseline safe', 'last baseline safe',
]),
};
......
......@@ -10,7 +10,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Default'>
<Flex.Container>
<Tile>
{Array.from({ length: 3 }).map((_, i) =>
{Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}>
<Tile>#{i + 1}</Tile>
</Flex.Item>
......@@ -30,7 +30,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Direction'>
<Flex.Container direction='row-reverse'>
<Tile>
{Array.from({ length: 3 }).map((_, i) =>
{Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}>
<Tile>#{i + 1}</Tile>
</Flex.Item>
......@@ -46,7 +46,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Wrap'>
<Flex.Container wrap='wrap'>
<Tile>
{Array.from({ length: 12 }).map((_, i) =>
{Array.from({ length: 24 }, (_, i) =>
<Flex.Item key={i}>
<Tile>#{i + 1}</Tile>
</Flex.Item>
......@@ -62,7 +62,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Justify Content'>
<Flex.Container justifyContent='space-around'>
<Tile>
{Array.from({ length: 3 }).map((_, i) =>
{Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}>
<Tile>#{i + 1}</Tile>
</Flex.Item>
......@@ -76,9 +76,9 @@ import { Box, Flex, Tile } from '../../..';
<Preview>
<Story name='Align Items'>
<Flex.Container alignItems='flex-end'>
<Flex.Container alignItems='end'>
<Tile>
{Array.from({ length: 3 }).map((_, i) =>
{Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}>
<Tile style={{ height: i * 100 }}>#{i + 1}</Tile>
</Flex.Item>
......@@ -94,7 +94,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Align Content'>
<Flex.Container wrap='wrap' alignContent='flex-end'>
<Tile style={{ minHeight: 400 }}>
{Array.from({ length: 12 }).map((_, i) =>
{Array.from({ length: 12 }, (_, i) =>
<Flex.Item key={i}>
<Tile>#{i + 1}</Tile>
</Flex.Item>
......
.rcx-box {
&--flex {
display: flex !important;
&-inline {
display: inline-flex !important;
}
&-row {
flex-direction: row !important;
}
&-row-reverse {
flex-direction: row-reverse !important;
}
&-col {
flex-direction: column !important;
}
&-col-reverse {
flex-direction: column-reverse !important;
}
&-wrap {
flex-wrap: wrap !important;
}
&-no-wrap {
flex-wrap: nowrap !important;
}
&-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
&-items-stretch {
align-items: stretch !important;
}
&-items-start {
align-items: flex-start !important;
}
&-items-center {
align-items: center !important;
}
&-items-end {
align-items: flex-end !important;
}
&-items-baseline {
align-items: baseline !important;
}
}
}
......@@ -48,6 +48,7 @@
}
@import './AnimatedVisibility/styles.scss';
@import './Flex/styles.scss';
@import './Margins/styles.scss';
@import './Position/styles.scss';
@import './Scrollable/styles.scss';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment