@e-group/material-module/esm/SurveyQuestions/QuestionRating/QuestionRating.js

EGroup Team react component modules.

import React from 'react';
import { makeStyles } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(3, 0)
  },
  label: {
    marginBottom: theme.spacing(3)
  },
  edgeLabel: {
    marginBottom: 4
  }
}));

const QuestionRating = ({
  question
}) => {
  var _question$questionRat, _question$questionRat2;

  const classes = useStyles();
  const start = (_question$questionRat = question === null || question === void 0 ? void 0 : question.questionRatingStartValue) !== null && _question$questionRat !== void 0 ? _question$questionRat : 1;
  const end = (_question$questionRat2 = question === null || question === void 0 ? void 0 : question.questionRatingEndValue) !== null && _question$questionRat2 !== void 0 ? _question$questionRat2 : 5;
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true,
    alignItems: "flex-end",
    justify: "space-around"
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "body1",
    color: "textSecondary",
    className: classes.edgeLabel
  }, question.questionRatingStartName)), end > start && Array.from(Array(end - start + 1).keys()).map(num => {
    const sNum = num + start;
    return /*#__PURE__*/React.createElement(Grid, {
      key: sNum,
      item: true
    }, /*#__PURE__*/React.createElement(Typography, {
      align: "center",
      variant: "body2",
      className: classes.label
    }, sNum), /*#__PURE__*/React.createElement(RadioButtonUncheckedIcon, {
      color: "disabled"
    }));
  }), /*#__PURE__*/React.createElement(Grid, {
    item: true
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "body1",
    color: "textSecondary",
    className: classes.edgeLabel
  }, question.questionRatingEndName))));
};

export default QuestionRating;