Sha256: 94b3750ddcd8663d529e0cac83c9cd6b2ea037bb3f691b953474cf94e83d9b74
Contents?: true
Size: 1.4 KB
Versions: 70
Compression:
Stored size: 1.4 KB
Contents
/* @flow */
import classnames from 'classnames'
import React, { useContext } from 'react'
import { buildCss } from '../../utilities/props'
import { globalProps } from '../../utilities/globalProps'
import Flex from '../../pb_flex/_flex'
import FlexItem from '../../pb_flex/_flex_item'
import CollapsibleContext from '../context'
type CollapsibleMainProps = {
children: array<React.ReactNode> | React.ReactNode,
className?: string,
padding?: string,
}
type IconProps = {
collapsed: boolean
}
const Icon = ({ collapsed }: IconProps) => {
const direction = collapsed ? 'down' : 'up'
return (
<div
key={direction}
style={{ verticalAlign: 'middle' }}
>
<i className={`far fa-chevron-${direction} fa-fw`} />
</div>
)
}
const CollapsibleMain = ({
children,
className,
padding = 'md',
...props
}: CollapsibleMainProps) => {
const context = useContext(CollapsibleContext)
const mainCSS = buildCss('pb_collapsible_main_kit')
const mainSpacing = globalProps(props, { padding })
return (
<div className={classnames(mainCSS, className, mainSpacing)}>
<div onClick={() => context.collapse()}>
<Flex
spacing="between"
vertical="center"
>
<FlexItem>{children}</FlexItem>
<FlexItem><Icon collapsed={context.collapsed} /></FlexItem>
</Flex>
</div>
</div>
)
}
export default CollapsibleMain
Version data entries
70 entries across 70 versions & 1 rubygems