RadioGroup.jsx

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;