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

EGroup Team react component modules.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _core = require("@material-ui/core");

var _Select = _interopRequireDefault(require("@material-ui/core/Select"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

const useStyles = (0, _core.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 = (0, _react.useState)((_question$questionRat = question.questionRatingStartValue) !== null && _question$questionRat !== void 0 ? _question$questionRat : 1),
        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
        start = _useState2[0],
        setStart = _useState2[1];

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

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

  const _useState7 = (0, _react.useState)((_question$questionRat4 = question.questionRatingEndName) !== null && _question$questionRat4 !== void 0 ? _question$questionRat4 : ''),
        _useState8 = (0, _slicedToArray2.default)(_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.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.header
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    className: classes.selectWrapper
  }, /*#__PURE__*/_react.default.createElement(_Select.default, {
    onChange: handleStartChange,
    value: start,
    disableUnderline: true
  }, Array.from(Array(2).keys()).map(num => /*#__PURE__*/_react.default.createElement(_ListItem.default, {
    key: num,
    value: num
  }, num)))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    className: classes.textDivider
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "body1"
  }, "\u5230")), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    className: classes.selectWrapper
  }, /*#__PURE__*/_react.default.createElement(_Select.default, {
    onChange: handleEndChange,
    value: end,
    disableUnderline: true
  }, Array.from(Array(9).keys()).map(num => {
    const nnum = num + 2;
    return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
      key: nnum,
      value: nnum
    }, nnum);
  }))))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    alignItems: "flex-end",
    className: classes.row
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "body1",
    color: "textSecondary",
    className: classes.label
  }, start)), /*#__PURE__*/_react.default.createElement(_Grid.default, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
    placeholder: "\u6A19\u7C64 (\u9078\u586B)",
    className: classes.labelInput,
    value: startInput,
    onChange: handleStartInputChange
  }))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    alignItems: "flex-end",
    className: classes.row
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "body1",
    color: "textSecondary",
    className: classes.label
  }, end)), /*#__PURE__*/_react.default.createElement(_Grid.default, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
    placeholder: "\u6A19\u7C64 (\u9078\u586B)",
    className: classes.labelInput,
    value: endInput,
    onChange: handleEndInputChange
  }))));
};

var _default = QuestionRatingEditable;
exports.default = _default;