Sha256: ef359674ef8515070b3f652978645a4890e49d5f7ca484d41a4622202e981d02

Contents?: true

Size: 1.34 KB

Versions: 6

Compression:

Stored size: 1.34 KB

Contents

/* @flow */
import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
import { globalProps } from '../utilities/globalProps.js'
type FlexItemPropTypes = {
  children: array<React.ReactNode> | React.ReactNode,
  fixedSize: string,
  grow: boolean,
  shrink: boolean,
  flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
  className: string,
  overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
}

const FlexItem = (props: FlexItemPropTypes) => {
  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
  const growClass = grow === true ? 'grow' : ''
  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
  const overflowClass = overflow ? `overflow_${overflow}` : ''
  const shrinkClass = shrink === true ? 'shrink' : ''
  const fixedStyle =
    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
  const orderClass = order !== 'none' ? `order_${order}` : null

  return (
    <div
        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
        style={fixedStyle}
    >
      {children}
    </div>
  )
}

export default FlexItem

Version data entries

6 entries across 6 versions & 1 rubygems

Version Path
playbook_ui-10.16.0 app/pb_kits/playbook/pb_flex/_flex_item.jsx
playbook_ui-10.15.1 app/pb_kits/playbook/pb_flex/_flex_item.jsx
playbook_ui-10.15.1.pre.alpha.rubocop.deps app/pb_kits/playbook/pb_flex/_flex_item.jsx
playbook_ui-10.15.0 app/pb_kits/playbook/pb_flex/_flex_item.jsx
playbook_ui-10.14.1.pre.alpha2 app/pb_kits/playbook/pb_flex/_flex_item.jsx
playbook_ui-10.14.1.pre.alpha1 app/pb_kits/playbook/pb_flex/_flex_item.jsx