@shakthillc/components/src/RadioGroupAvatar/RadioGroupAvatar.js

React generic components for shakthi products

import React from "react";
import PropTypes from "prop-types";
import style from "./RadioGroupAvatar.module.css";
import Avatar from "./../Avatar/Avatar";
export default class RadioGroupAvatar 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) {
    const { selectedOption,options } = this.props;

    if (options.length> 0 && (prevProps.selectedOption == "" || prevProps.selectedOption != selectedOption)) {
      this.setState({ selectedOption });
    }
  }

  render() {
    let { options,id="defaultRadio" } = this.props;
    let optionHtml = options.map((obj, i) => {
      return (
        <label key={i} className={style["radio-button"]}>
          <div className={style["radio-button__holder"]}>
            <Avatar size="32px" imageUrl={obj.url} text={obj.value} />
            <div style={{ cursor: "pointer" }}>{obj.value}</div>
          </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}
            data-id={'option'+i}
          ></span>
        </label>
      );
    });
    return <div data-id={id} className={style["radio-group"]}>{optionHtml}</div>;
  }
}

RadioGroupAvatar.defaultProps = {
  isChecked: false,
  disabled: false,
  dataId: "checkBoxComp",
  label: "CheckBox",
  onChange: function (id, data) {
    console.log("inbuilt", id, data);
  },
  options: [
    { id: "option1", value: "Kevin" },
    { id: "option2", value: "rick", url: "https://picsum.photos/200/300" },
    { id: "option3", value: "morty" },
    { id: "option4", value: "Jenny", url: "" },
  ],
};
RadioGroupAvatar.propTypes = {
  isChecked: PropTypes.bool,
  disabled: PropTypes.bool,
  dataId: PropTypes.string,
  label: PropTypes.string,
  options: PropTypes.array,
};