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

70 lines
1.4 KiB
JavaScript
Raw Normal View History

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';
2017-02-20 18:15:36 +02:00
class FormGroup extends Component {
constructor(props) {
super(props);
2017-02-20 18:15:36 +02:00
this.renderGroup = this.renderGroup.bind(this);
}
2017-02-20 18:15:36 +02:00
renderGroup(inputProps) {
const { className, style, children, ...rest } = this.props;
2017-02-20 18:15:36 +02:00
const value = {
id: rndId(),
...rest,
...inputProps
};
return (
<Fieldset className={className} style={style}>
<Broadcast channel="input-group" value={value}>
2017-02-20 18:15:36 +02:00
<div>
{children}
</div>
</Broadcast>
</Fieldset>
);
}
2017-02-20 18:15:36 +02:00
render() {
const {
name = rndId(),
defaultValue,
normalize,
reduxForm = false
} = this.props;
if (!reduxForm) {
return this.renderGroup({});
}
return (
<Field
name={name}
defaultValue={defaultValue}
component={this.renderGroup}
normalize={normalize}
/>
);
}
}
FormGroup.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
defaultValue: PropTypes.string,
name: PropTypes.string,
normalize: PropTypes.func,
reduxForm: PropTypes.bool,
style: PropTypes.object
2017-02-20 18:15:36 +02:00
};
export default Baseline(FormGroup);