I had some problems with the integration of PrimeReact and Redux Form.
Redux form injects events like onChange on input components in order to synchronize the form state with the input and doing other stuffs like validation. It's like a two-way data binding.
Here is the spec of redux form:
https://github.com/erikras/redux-form/b ... mponent.md
https://github.com/erikras/redux-form/b ... i/Field.md
It is specified that in order to work properly, the custom component needs at least to implement "value" and "onChange" in a standard way.
Some react input components:input.onChange(eventOrValue) : Function
A function to call when the form field is changed. It expects to either receive the React SyntheticEvent or the new value of the field.
- don't implements onChange (like Chips, Editor )
-don't have a "value" property (like Checkbox)
-don't send a "standard" event object (often the value of the object is in e.value property)
I made a quick and dirty HOC in order to fix all prime react input problems that I found with redux form :
Code: Select all
import React from 'react';
const resolveClassName = (field) => {
if (field.meta.touched && field.meta.error) {
return 'ui-state-error';
}
return '';
};
const removeElementInArray = (array, elementsToRemove) => (array.filter(item => elementsToRemove.indexOf(item) < 0));
const onChangeEvent = (e, field) => {
if (!e.target) {
if (e.htmlValue != undefined) {
e.target = { value: e.htmlValue };
}
else if (e.checked != undefined) {
e.target = { value: e.checked };
}
else if (e.value != undefined) {
e.target = { value: e.value };
}
}
field.input.onChange(e.target ? e.target.value : null);
};
const ultimaReduxFormField = ComposedComponent => (field) => {
const inputType = ComposedComponent.name;
const attributesToAdd = {};
if (inputType.indexOf('Chips') > -1) {
attributesToAdd.onAdd = e => field.input.onChange(field.input.value.concat(e.value));
attributesToAdd.onRemove = e => field.input.onChange(removeElementInArray(field.input.value, e.value));
}
if (inputType === 'Checkbox' || inputType === 'InputSwitch') {
attributesToAdd.checked = field.input.value;
}
const isCheckbox = inputType === 'Checkbox';
const isCalendar = inputType === 'Calendar';
const isEditor = inputType === 'Editor';
const isTriStateCheckbox = inputType === 'TriStateCheckbox';
const isToggleButton = inputType === 'ToggleButton';
if (isTriStateCheckbox) {
if (field.input.value === '') {
field.input.value = null;
}
}
if (isToggleButton) {
return (
<span>
<span className="md-inputfield">
<span className="ui-inputwrapper-filled" />
<label>{field.label}</label>
</span>
<ComposedComponent
{...field}
onChange={e => onChangeEvent(e, field)}
checked={field.input.value}
/>
{field.meta.touched && field.meta.error &&
<span className="md-inputfield">
<div className="ui-message ui-messages-error ui-corner-all">
{field.meta.error}
</div>
</span>
}
</span>
);
} else if (isCheckbox) {
return (
<div>
<ComposedComponent
{...field}
onChange={e => onChangeEvent(e, field)}
checked={field.input.value}
/>
<label htmlFor={field.inputId} style={{ cursor: 'pointer' }}>
{field.label}
</label>
</div>
);
} else if (isCalendar) {
return (
<span>
<span className="md-inputfield">
<span className="ui-inputwrapper-filled" />
<label>{field.label}</label>
</span>
<ComposedComponent
className={resolveClassName(field)}
value={field.input.value}
{...field}
onChange={e => onChangeEvent(e, field)}
{...attributesToAdd}
/>
{field.meta.touched && field.meta.error &&
<span className="md-inputfield">
<div className="ui-message ui-messages-error ui-corner-all">
{field.meta.error}
</div>
</span>
}
</span>
);
} else if (isEditor) {
return (
<span>
<span className="md-inputfield">
<span className="ui-inputwrapper-filled" />
<label>{field.label}</label>
</span>
<ComposedComponent
className={resolveClassName(field)}
value={field.input.value}
{...field}
onTextChange={e => onChangeEvent(e, field)}
{...attributesToAdd}
/>
{field.meta.touched && field.meta.error &&
<span className="md-inputfield">
<div className="ui-message ui-messages-error ui-corner-all">
{field.meta.error}
</div>
</span>
}
</span>
);
}
return (
<span>
<span className="md-inputfield">
<span className="ui-inputwrapper-filled" />
<label>{field.label}</label>
</span>
<ComposedComponent
className={resolveClassName(field)}
{...field.input}
{...field}
onChange={e => onChangeEvent(e, field)}
{...attributesToAdd}
/>
{field.meta.touched && field.meta.error &&
<span className="md-inputfield">
<div className="ui-message ui-messages-error ui-corner-all">
{field.meta.error}
</div>
</span>
}
</span>
);
};
export default ultimaReduxFormField;
Thanks!