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

EGroup Team react component modules.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core';
import Select from '@material-ui/core/Select';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
const useStyles = makeStyles(theme => ({
  header: {
    padding: theme.spacing(1.5, 0),
    marginBottom: theme.spacing(1)
  },
  selectWrapper: {
    padding: theme.spacing(1, 2)
  },
  textDivider: {
    margin: theme.spacing(0, 1.5)
  },
  row: {
    marginBottom: theme.spacing(2),
    '&:last-child': {
      marginBottom: 0
    }
  },
  label: {
    width: 20,
    fontFamily: 'Roboto, Arial,sans-serif;',
    marginBottom: 2,
    letterSpacing: 0.2
  },
  labelInput: {
    marginLeft: theme.spacing(2)
  }
}));

const QuestionRatingEditable = ({
  question,
  onStartChange,
  onEndChange,
  onStartInputChange,
  onEndInputChange
}) => {
  var _question$questionRat, _question$questionRat2, _question$questionRat3, _question$questionRat4;

  const classes = useStyles();

  const _useState = useState((_question$questionRat = question.questionRatingStartValue) !== null && _question$questionRat !== void 0 ? _question$questionRat : 1),
        _useState2 = _slicedToArray(_useState, 2),
        start = _useState2[0],
        setStart = _useState2[1];

  const _useState3 = useState((_question$questionRat2 = question.questionRatingEndValue) !== null && _question$questionRat2 !== void 0 ? _question$questionRat2 : 5),
        _useState4 = _slicedToArray(_useState3, 2),
        end = _useState4[0],
        setEnd = _useState4[1];

  const _useState5 = useState((_question$questionRat3 = question.questionRatingStartName) !== null && _question$questionRat3 !== void 0 ? _question$questionRat3 : ''),
        _useState6 = _slicedToArray(_useState5, 2),
        startInput = _useState6[0],
        setStartInput = _useState6[1];

  const _useState7 = useState((_question$questionRat4 = question.questionRatingEndName) !== null && _question$questionRat4 !== void 0 ? _question$questionRat4 : ''),
        _useState8 = _slicedToArray(_useState7, 2),
        endInput = _useState8[0],
        setEndInput = _useState8[1];

  const handleStartChange = e => {
    setStart(Number(e.target.value));

    if (onStartChange) {
      onStartChange(e, question);
    }
  };

  const handleEndChange = e => {
    setEnd(Number(e.target.value));

    if (onEndChange) {
      onEndChange(e, question);
    }
  };

  const handleStartInputChange = e => {
    setStartInput(e.target.value);

    if (onStartInputChange) {
      onStartInputChange(e, question);
    }
  };

  const handleEndInputChange = e => {
    setEndInput(e.target.value);

    if (onEndInputChange) {
      onEndInputChange(e, question);
    }
  };

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: classes.header
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true,
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Grid, {
    className: classes.selectWrapper
  }, /*#__PURE__*/React.createElement(Select, {
    onChange: handleStartChange,
    value: start,
    disableUnderline: true
  }, Array.from(Array(2).keys()).map(num => /*#__PURE__*/React.createElement(ListItem, {
    key: num,
    value: num
  }, num)))), /*#__PURE__*/React.createElement(Grid, {
    className: classes.textDivider
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "body1"
  }, "\u5230")), /*#__PURE__*/React.createElement(Grid, {
    className: classes.selectWrapper
  }, /*#__PURE__*/React.createElement(Select, {
    onChange: handleEndChange,
    value: end,
    disableUnderline: true
  }, Array.from(Array(9).keys()).map(num => {
    const nnum = num + 2;
    return /*#__PURE__*/React.createElement(ListItem, {
      key: nnum,
      value: nnum
    }, nnum);
  }))))), /*#__PURE__*/React.createElement(Grid, {
    container: true,
    alignItems: "flex-end",
    className: classes.row
  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Typography, {
    variant: "body1",
    color: "textSecondary",
    className: classes.label
  }, start)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(TextField, {
    placeholder: "\u6A19\u7C64 (\u9078\u586B)",
    className: classes.labelInput,
    value: startInput,
    onChange: handleStartInputChange
  }))), /*#__PURE__*/React.createElement(Grid, {
    container: true,
    alignItems: "flex-end",
    className: classes.row
  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Typography, {
    variant: "body1",
    color: "textSecondary",
    className: classes.label
  }, end)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(TextField, {
    placeholder: "\u6A19\u7C64 (\u9078\u586B)",
    className: classes.labelInput,
    value: endInput,
    onChange: handleEndInputChange
  }))));
};

export default QuestionRatingEditable;