RadioButtonVertical_Ant.js

RadioButtonVertical_Ant.js

import { Radio } from "antd";
import React from "react";
import * as css from "./RadioButtonVertical.scss";
import 'antd/lib/radio/style/index.css';


export const RadioButtonVertical_Ant = (props) => {
    const { field, item, name } = props;

    const { value, onChange } = field;

    const onCustomChange = (data) => {
        console.log(data, 'onCustomChangeonCustomChange')
        onChange(data);
    }

    const {
        label,
        type,
        options
    } = item;

    return (
        <div className={`row ${css.inputPair}`}>
            <div className="col-xs-12 col-sm-6">
                <label>{label}</label>
            </div>
            <div className="col-xs-12 col-sm-6">
                <Radio.Group value={value} onChange={onCustomChange}>
                    {
                        item.options.map((entry, index) => <div key={index}>
                            <Radio value={entry.value}>
                                <img className={css.radiobtnlabel}
                                    src={entry.value === value ?
                                        "/static/icons/radio_yellow.svg" :
                                        "/static/icons/radio-unselected-small.svg"}
                                />
                                {entry.label}
                            </Radio>
                        </div>)
                    }
                </Radio.Group>
            </div>
        </div>
    );
}