joyent-portal/packages/ui-toolkit/src/form/group.js

68 lines
1.3 KiB
JavaScript

import React, { Component } from 'react';
import { Broadcast } from 'react-broadcast';
import { Field } from 'redux-form';
import Fieldset from './fieldset';
import Baseline from '../baseline';
import PropTypes from 'prop-types';
import rndId from 'rnd-id';
class FormGroup extends Component {
constructor(props) {
super(props);
this.renderGroup = this.renderGroup.bind(this);
}
renderGroup(inputProps) {
const { className, style, children, ...rest } = this.props;
const value = {
id: rndId(),
...rest,
...inputProps
};
return (
<Fieldset className={className} style={style}>
<Broadcast channel="input-group" value={value}>
<div>
{children}
</div>
</Broadcast>
</Fieldset>
);
}
render() {
const {
name = rndId(),
reduxForm = false,
...rest
} = this.props;
if (!reduxForm) {
return this.renderGroup({});
}
return (
<Field
name={name}
component={this.renderGroup}
{...rest}
/>
);
}
}
FormGroup.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
defaultValue: PropTypes.string,
name: PropTypes.string,
normalize: PropTypes.func,
reduxForm: PropTypes.bool,
style: PropTypes.object
};
export default Baseline(FormGroup);