joyent-portal/packages/ui-toolkit/src/form/group.js
2017-12-22 14:51:07 +00:00

74 lines
1.5 KiB
JavaScript

import React, { Component } from 'react';
import { Broadcast } from 'joy-react-broadcast';
import PropTypes from 'prop-types';
import rndId from 'rnd-id';
import styled from 'styled-components';
import is from 'styled-is';
import Fieldset from './fieldset';
import Baseline from '../baseline';
const Noop = ({ children }) => children;
const Wrapper = styled(Fieldset)`
${is('center')`
align-items: center;
`};
${is('flex')`
display: flex;
`};
`;
class FormGroup extends Component {
constructor(props) {
super(props);
this.renderGroup = this.renderGroup.bind(this);
}
renderGroup(inputProps) {
const { className, style, children, fluid = false, ...rest } = this.props;
const value = {
id: rndId(),
...rest,
...inputProps
};
return (
<Wrapper className={className} style={style} fluid={fluid} {...rest}>
<Broadcast channel="input-group" value={value}>
<Noop>{children}</Noop>
</Broadcast>
</Wrapper>
);
}
render() {
const { name = rndId(), field = null, children, ...rest } = this.props;
if (!field) {
return this.renderGroup({});
}
return React.createElement(
field,
{ ...rest, name, component: this.renderGroup },
children
);
}
}
FormGroup.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
defaultValue: PropTypes.string,
name: PropTypes.string,
normalize: PropTypes.func,
field: PropTypes.node,
style: PropTypes.object
};
export default Baseline(FormGroup);