import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import { GroupProps as ReakitGroupProps } from 'reakit/ts' ; import _get from 'lodash/get' ; import { withTheme } from '../styled' ; import { Omit , Breakpoint , breakpointPropType } from '../types' ; import _Group from './styled' ; export type LocalGroupProps = { children : React . ReactNode ; className ? : string ; isVertical ? : boolean ; theme ? : Object ; verticalAt ? : Breakpoint | number ; } ; export type GroupProps = LocalGroupProps & Omit < ReakitGroupProps , 'verticalAt' > ; const getVerticalBreakpoint = ( { breakpoint , theme } ) => { return typeof breakpoint === 'number' ? breakpoint : _get ( theme , `fannypack.layout[${ breakpoint }Breakpoint]` ) ; } ; export const Group = ( { children , className , isVertical , theme , verticalAt : _verticalAt , ... props } ) => { const verticalAt = getVerticalBreakpoint ( { breakpoint : _verticalAt , theme } ) ; return ( < _Group className = { className } vertical = { isVertical } verticalAt = { verticalAt } { ... props } > { children } < /_Group>); } ; export const groupPropTypes = { children : PropTypes . node . isRequired , className : PropTypes . string , isVertical : PropTypes . bool , theme : PropTypes . object , verticalAt : PropTypes . oneOfType ( [ breakpointPropType , PropTypes . number ] ) } ; Group . propTypes = groupPropTypes ; export const groupDefaultProps = { className : undefined , isVertical : false , theme : { } , verticalAt : undefined } ; Group . defaultProps = groupDefaultProps ; const C = withTheme ( Group ) ; export default C ;