Sha256: cd22749322df2b0347a57609505840fd6de759ff283714e372deb9bf95b55fc8
Contents?: true
Size: 1.64 KB
Versions: 7
Compression:
Stored size: 1.64 KB
Contents
/* @flow */
import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
import { globalProps } from '../utilities/globalProps.js'
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 = (props: FlexProps) => {
const {
children,
className,
inline = false,
horizontal = 'left',
orientation = 'row',
spacing = 'none',
reverse = false,
vertical = 'top',
wrap = false,
} = props
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,
globalProps(props)
)}
>
{children}
</div>
)
}
export default Flex
Version data entries
7 entries across 7 versions & 1 rubygems