Sha256: a888f8f63d3cef52960c5386d31b75432f20feeb4c21460f7241a2273c5dbb67
Contents?: true
Size: 1.4 KB
Versions: 29
Compression:
Stored size: 1.4 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
type FlexProps = {
children: Array<React.ReactNode> | React.ReactNode,
className?: String,
horizontal?: 'left' | 'center' | 'right' | 'stretch',
id?: String,
inline?: Boolean,
orientation?: 'row' | 'column',
spacing?: 'around' | 'between' | 'evenly' | 'none',
reverse?: Boolean,
vertical?: 'top' | 'center' | 'bottom' | 'stretch',
wrap?: Boolean,
}
const Flex = ({
children,
className,
inline = false,
horizontal = 'left',
orientation = 'row',
spacing = 'none',
reverse = false,
vertical = 'top',
wrap = false,
}: FlexProps) => {
const orientationClass = orientation !== undefined ? `orientation_${orientation}` : ''
const horizontalClass = horizontal !== undefined ? `justify_content_${horizontal}` : ''
const verticalClass = vertical !== undefined ? `align_items_${vertical}` : ''
const inlineClass = inline === true ? 'inline' : ''
const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
const wrapClass = wrap === true ? 'wrap' : ''
const reverseClass = reverse === true ? 'reverse' : ''
return (
<div
className={classnames(buildCss('pb_flex_kit', orientationClass, horizontalClass, verticalClass, inlineClass, spacingClass, reverseClass, wrapClass
), className)}
>
{children}
</div>
)
}
export default Flex
Version data entries
29 entries across 29 versions & 1 rubygems