UNPKG

hiromi

Version:

React components for Bulma. http://bulma.io/

82 lines (70 loc) 1.87 kB
import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import Icon from '../Icon'; import Label from '../Label'; import { modifierClassList, defaultReactProps, defaultReactPropsValues } from '../utils'; const Control = ({ iconTag, iconRight, hasAddons, prefix, suffix, isGrouped, isHorizontal, className, children, ...props }) => { const hasIcon = !!iconTag; const icon = hasIcon ? <Icon tag={iconTag} hasSpan={false} /> : null; let {classList, ...finalProps} = modifierClassList(props); classList = classnames('control', className, classList, { 'has-icon': hasIcon, 'has-icon-right': iconRight, 'has-addons': hasAddons, 'is-grouped': isGrouped, }); return ( <div className={classList} {...finalProps}> {prefix} {children} {icon} {suffix} </div> ); }; Control.propTypes = { iconTag: PropTypes.string, iconRight: PropTypes.bool, hasAddons: PropTypes.bool, isGrouped: PropTypes.bool, prefix: PropTypes.node, suffix: PropTypes.node, children: PropTypes.node, ...defaultReactProps }; Control.defaultProps = { iconRight: false, hasAddons: false, isGrouped: false, ...defaultReactPropsValues }; const HorizontalControl = ({label, className, children, ...props}) => { let {classList, ...finalProps} = modifierClassList(props); classList = classnames('control', className, 'is-horizontal', classList); return ( <div className={classList} {...finalProps}> <div className='control-label'> <Label>{label}</Label> </div> {children} </div> ); }; HorizontalControl.propTypes = { label: PropTypes.string, children: PropTypes.element.isRequired, ...defaultReactProps }; HorizontalControl.defaultProps = { ...defaultReactPropsValues }; export { Control as default, HorizontalControl };