@shakthillc/components/src/RadioGroup/RadioGroup.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./RadioGroup.module.css";
export default class RadioGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: props.selectedOption,
    };
  }

  handleOptionChange(id, data) {
    var { onChange } = this.props;
    this.setState({
      selectedOption: id,
    });
    onChange && onChange(id, data);
  }
  componentDidUpdate(prevProps, prevState) {
    if (
      this.props.selectedOption != null &&
      prevProps.selectedOption != this.props.selectedOption
    ) {
      this.setState({ selectedOption: this.props.selectedOption });
    }
  }
  render() {
    let { options } = this.props;
    let optionHtml = options.map((obj, i) => {
      return (
        <label key={i} className={style["radio-button"]}>
          <div style={{ cursor: "pointer" }}>{obj.value}</div>
          <input
            type="radio"
            checked={this.state.selectedOption === obj.id}
            name="radio"
            onClick={this.handleOptionChange.bind(this, obj.id, obj)}
          />
          <span
            className={style["radio-button__checkmark"]}
            value={obj.value}
            id={obj.id}
          ></span>
        </label>
      );
    });
    return <div className={style["radio-group"]}>{optionHtml}</div>;
  }
}

RadioGroup.defaultProps = {
  isChecked: false,
  disabled: false,
  dataId: "checkBoxComp",
  label: "CheckBox",
  onChange: (id, data) => {
    console.log("inbuilt", id, data);
  },
  options: [
    { id: "1", value: "Option 1" },
    { id: "2", value: "Option 2" },
    { id: "3", value: "Option 3" },
    { id: "4", value: "Option 4" },
  ],
};
RadioGroup.propTypes = {
  isChecked: PropTypes.bool,
  disabled: PropTypes.bool,
  dataId: PropTypes.string,
  label: PropTypes.string,
  options: PropTypes.array,
};