Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import { Field } from 'redux-form';
import { compose, withHandlers, mapProps } from 'recompose';
import classNames from 'classnames';
import { EditFormGroup, EditFormGroupRow, EditFormGroupRowTitle } from 'app/components/wrappers';
import { Radio } from 'app/components/ui';
const RadioEnhance = compose(
mapProps(props => ({
...props,
checked: props.input.value === props.itemValue,
})),
withHandlers({
onChange: props => e => {
const { input, itemValue } = props;
input.onChange(e.target.checked ? itemValue : null);
},
})
)(Radio);
const RadioGroup = ({ name, fieldName, values, type }) => {
return (
<EditFormGroup>
<EditFormGroupRowTitle>{name}</EditFormGroupRowTitle>
<EditFormGroupRow>
<div
className={classNames('radio-list', {
'radio-list_line': type === 'line',
})}>
{values.map((item, i) => (
<div className="radio-list__item" key={item.id || i}>
<Field
component={RadioEnhance}
label={item.name}
itemValue={item.value}
name={fieldName}
id={`${fieldName}[${item.id || i}]`}
values={values}
/>
</div>
))}
</div>
</EditFormGroupRow>
</EditFormGroup>
);
};
export default RadioGroup;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment