Commit af130da8 authored by Tasso Evangelista's avatar Tasso Evangelista

(temp)

parent 95e30849
...@@ -4,14 +4,18 @@ import React from 'react'; ...@@ -4,14 +4,18 @@ import React from 'react';
import { useProps } from '../../../hooks'; import { useProps } from '../../../hooks';
export function FlexContainer({ inline = false, children, direction, wrap, justifyContent, alignItems, alignContent }) { 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: {
...style, ...style,
display: inline ? 'inline-flex' : 'flex',
flexDirection: direction,
flexWrap: wrap,
justifyContent, justifyContent,
alignItems,
alignContent, alignContent,
}, },
...props, ...props,
...@@ -23,30 +27,17 @@ export function FlexContainer({ inline = false, children, direction, wrap, justi ...@@ -23,30 +27,17 @@ export function FlexContainer({ inline = false, children, direction, wrap, justi
FlexContainer.propTypes = { FlexContainer.propTypes = {
inline: PropTypes.bool, inline: PropTypes.bool,
direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']), 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([ justifyContent: PropTypes.oneOf([
'flex-start', 'flex-end', 'center', 'flex-start', 'flex-end', 'center',
'space-between', 'space-around', 'space-evenly', 'space-between', 'space-around', 'space-evenly',
'start', 'end', 'left', 'right', '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([ alignContent: PropTypes.oneOf([
'flex-start', 'flex-end', 'center', 'flex-start', 'flex-end', 'center',
'space-between', 'space-around', 'space-evenly', 'stretch', 'space-between', 'space-around', 'space-evenly', 'stretch',
'start', 'end', 'baseline', 'first baseline', 'last baseline', '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 '../../..'; ...@@ -10,7 +10,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Default'> <Story name='Default'>
<Flex.Container> <Flex.Container>
<Tile> <Tile>
{Array.from({ length: 3 }).map((_, i) => {Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}> <Flex.Item key={i}>
<Tile>#{i + 1}</Tile> <Tile>#{i + 1}</Tile>
</Flex.Item> </Flex.Item>
...@@ -30,7 +30,7 @@ import { Box, Flex, Tile } from '../../..'; ...@@ -30,7 +30,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Direction'> <Story name='Direction'>
<Flex.Container direction='row-reverse'> <Flex.Container direction='row-reverse'>
<Tile> <Tile>
{Array.from({ length: 3 }).map((_, i) => {Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}> <Flex.Item key={i}>
<Tile>#{i + 1}</Tile> <Tile>#{i + 1}</Tile>
</Flex.Item> </Flex.Item>
...@@ -46,7 +46,7 @@ import { Box, Flex, Tile } from '../../..'; ...@@ -46,7 +46,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Wrap'> <Story name='Wrap'>
<Flex.Container wrap='wrap'> <Flex.Container wrap='wrap'>
<Tile> <Tile>
{Array.from({ length: 12 }).map((_, i) => {Array.from({ length: 24 }, (_, i) =>
<Flex.Item key={i}> <Flex.Item key={i}>
<Tile>#{i + 1}</Tile> <Tile>#{i + 1}</Tile>
</Flex.Item> </Flex.Item>
...@@ -62,7 +62,7 @@ import { Box, Flex, Tile } from '../../..'; ...@@ -62,7 +62,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Justify Content'> <Story name='Justify Content'>
<Flex.Container justifyContent='space-around'> <Flex.Container justifyContent='space-around'>
<Tile> <Tile>
{Array.from({ length: 3 }).map((_, i) => {Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}> <Flex.Item key={i}>
<Tile>#{i + 1}</Tile> <Tile>#{i + 1}</Tile>
</Flex.Item> </Flex.Item>
...@@ -76,9 +76,9 @@ import { Box, Flex, Tile } from '../../..'; ...@@ -76,9 +76,9 @@ import { Box, Flex, Tile } from '../../..';
<Preview> <Preview>
<Story name='Align Items'> <Story name='Align Items'>
<Flex.Container alignItems='flex-end'> <Flex.Container alignItems='end'>
<Tile> <Tile>
{Array.from({ length: 3 }).map((_, i) => {Array.from({ length: 3 }, (_, i) =>
<Flex.Item key={i}> <Flex.Item key={i}>
<Tile style={{ height: i * 100 }}>#{i + 1}</Tile> <Tile style={{ height: i * 100 }}>#{i + 1}</Tile>
</Flex.Item> </Flex.Item>
...@@ -94,7 +94,7 @@ import { Box, Flex, Tile } from '../../..'; ...@@ -94,7 +94,7 @@ import { Box, Flex, Tile } from '../../..';
<Story name='Align Content'> <Story name='Align Content'>
<Flex.Container wrap='wrap' alignContent='flex-end'> <Flex.Container wrap='wrap' alignContent='flex-end'>
<Tile style={{ minHeight: 400 }}> <Tile style={{ minHeight: 400 }}>
{Array.from({ length: 12 }).map((_, i) => {Array.from({ length: 12 }, (_, i) =>
<Flex.Item key={i}> <Flex.Item key={i}>
<Tile>#{i + 1}</Tile> <Tile>#{i + 1}</Tile>
</Flex.Item> </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 @@ ...@@ -48,6 +48,7 @@
} }
@import './AnimatedVisibility/styles.scss'; @import './AnimatedVisibility/styles.scss';
@import './Flex/styles.scss';
@import './Margins/styles.scss'; @import './Margins/styles.scss';
@import './Position/styles.scss'; @import './Position/styles.scss';
@import './Scrollable/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