Sha256: 4e85be1364707290ee20778cadf1e0b482efcfac0bd80d9e30411953a447411d
Contents?: true
Size: 1.65 KB
Versions: 32
Compression:
Stored size: 1.65 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" | "baseline",
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
),
globalProps(props),
className
)}
>
{children}
</div>
)
}
export default Flex
Version data entries
32 entries across 32 versions & 1 rubygems