Pass "raw" component constructor down to FormComponentInner instead of passing function that instantiates it

This commit is contained in:
SachaG 2018-05-23 17:12:04 +09:00
parent 2edebcf551
commit 2b05700e41
2 changed files with 24 additions and 30 deletions

View file

@ -235,66 +235,59 @@ class FormComponent extends Component {
Function passed to FormComponentInner to help with rendering the component
*/
renderComponent = properties => {
const { input, inputType } = properties;
getFormInput = () => {
const inputType = this.getType();
// if input is a React component, use it
if (typeof input === 'function') {
const InputComponent = input;
return <InputComponent {...properties} />;
if (typeof this.props.input === 'function') {
const InputComponent = this.props.input;
return InputComponent;
} else {
// else pick a predefined component
switch (inputType) {
case 'text':
return <Components.FormComponentDefault {...properties} />;
case 'nested':
return <Components.FormNested {...properties} />;
return Components.FormComponentDefault;
case 'number':
return <Components.FormComponentNumber {...properties} />;
return Components.FormComponentNumber;
case 'url':
return <Components.FormComponentUrl {...properties} />;
return Components.FormComponentUrl;
case 'email':
return <Components.FormComponentEmail {...properties} />;
return Components.FormComponentEmail;
case 'textarea':
return <Components.FormComponentTextarea {...properties} />;
return Components.FormComponentTextarea;
case 'checkbox':
return <Components.FormComponentCheckbox {...properties} />;
return Components.FormComponentCheckbox;
case 'checkboxgroup':
return <Components.FormComponentCheckboxGroup {...properties} />;
return Components.FormComponentCheckboxGroup;
case 'radiogroup':
return <Components.FormComponentRadioGroup {...properties} />;
return Components.FormComponentRadioGroup;
case 'select':
return <Components.FormComponentSelect {...properties} />;
return Components.FormComponentSelect;
case 'selectmultiple':
return <Components.FormComponentSelectMultiple {...properties} />;
return Components.FormComponentSelectMultiple;
case 'datetime':
return <Components.FormComponentDateTime {...properties} />;
return Components.FormComponentDateTime;
case 'date':
return <Components.FormComponentDate {...properties} />;
return Components.FormComponentDate;
case 'time':
return <Components.FormComponentTime {...properties} />;
return Components.FormComponentTime;
default:
const CustomComponent = Components[input];
return CustomComponent ? (
<CustomComponent {...properties} />
) : (
<Components.FormComponentDefault {...properties} />
);
const CustomComponent = Components[this.props.input];
return CustomComponent ? CustomComponent : Components.FormComponentDefault;
}
}
};
@ -311,7 +304,7 @@ class FormComponent extends Component {
showCharsRemaining={!!this.showCharsRemaining()}
onChange={this.handleChange}
clearField={this.clearField}
renderComponent={this.renderComponent}
formInput={this.getFormInput()}
/>
);
}

View file

@ -66,13 +66,14 @@ class FormComponentInner extends PureComponent {
);
const properties = this.getProperties();
const FormInput = this.props.formInput;
if (intlInput) {
return <Components.FormIntl {...properties} />;
} else {
return (
<div className={inputClass}>
{instantiateComponent(beforeComponent, properties)}
{renderComponent(properties)}
<FormInput {...properties}/>
{hasErrors ? <Components.FieldErrors errors={errors} /> : null}
{this.renderClear()}
{showCharsRemaining && (
@ -99,7 +100,7 @@ FormComponentInner.propTypes = {
charsRemaining: PropTypes.number,
charsCount: PropTypes.number,
charsMax: PropTypes.number,
renderComponent: PropTypes.func.isRequired,
inputComponent: PropTypes.func,
};
FormComponentInner.contextTypes = {