Vulcan/packages/vulcan-forms/lib/components/FormNestedObject.jsx
2018-11-29 14:24:18 +01:00

74 lines
2.1 KiB
JavaScript

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { registerComponent, mergeWithComponents } from 'meteor/vulcan:core';
// Replaceable layout
const FormNestedObjectLayout = ({ hasErrors, label, content }) => (
<div
className={`form-group row form-nested ${hasErrors ? 'input-error' : ''}`}
>
<label className="control-label col-sm-3">{label}</label>
<div className="col-sm-9">{content}</div>
</div>
);
FormNestedObjectLayout.propTypes = {
hasErrors: PropTypes.bool,
label: PropTypes.node,
content: PropTypes.node
};
registerComponent({
name: 'FormNestedObjectLayout',
component: FormNestedObjectLayout
});
class FormNestedObject extends PureComponent {
render() {
const FormComponents = mergeWithComponents(this.props.formComponents);
//const value = this.getCurrentValue()
// do not pass FormNested's own value, input and inputProperties props down
const properties = _.omit(
this.props,
'value',
'input',
'inputProperties',
'nestedInput'
);
const { errors } = this.props;
// only keep errors specific to the nested array (and not its subfields)
const nestedObjectErrors = errors.filter(
error => error.path && error.path === this.props.path
);
const hasErrors = nestedObjectErrors && nestedObjectErrors.length;
return (
<FormComponents.FormNestedObjectLayout
hasErros={hasErrors}
label={this.props.label}
content={[
<FormComponents.FormNestedItem
key="form-nested-item"
{...properties}
path={`${this.props.path}`}
/>,
hasErrors ? (
<FormComponents.FieldErrors
key="form-nested-errors"
errors={nestedObjectErrors}
/>
) : null
]}
/>
);
}
}
FormNestedObject.propTypes = {
currentValues: PropTypes.object,
path: PropTypes.string,
label: PropTypes.string,
errors: PropTypes.array.isRequired,
formComponents: PropTypes.object
};
module.exports = FormNestedObject;
registerComponent('FormNestedObject', FormNestedObject);