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

EGroup Team react component modules.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import InputAdornment from '@material-ui/core/InputAdornment';
import Grid from '@material-ui/core/Grid';
import InsertInvitationIcon from '@material-ui/icons/InsertInvitation';
import QuestionOptions from '../QuestionOptions';
import QuestionRating from '../QuestionRating';
import QuestionDragHandle from '../QuestionDragHandle';
const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(1.5, 0),
    boxShadow: theme.egShadows[3],
    border: "1px solid #e3e6f0",
    borderRadius: "0.35rem",
    '& $dragHandle': {
      visibility: 'hidden'
    },
    '&:hover': {
      '& $dragHandle': {
        visibility: 'visible'
      }
    }
  },
  main: {
    padding: theme.spacing(0, 3),
    paddingBottom: theme.spacing(3)
  },
  disabled: {
    backgroundColor: theme.palette.action.disabledBackground
  },
  text: {
    width: '50%'
  },
  textarea: {
    width: '85%'
  },
  dragHandle: {}
}));

const Question = (_ref) => {
  let className = _ref.className,
      question = _ref.question,
      disabled = _ref.disabled,
      DragHandleProps = _ref.DragHandleProps,
      onQuestionNameClick = _ref.onQuestionNameClick,
      onOptionClick = _ref.onOptionClick,
      other = _objectWithoutProperties(_ref, ["className", "question", "disabled", "DragHandleProps", "onQuestionNameClick", "onOptionClick"]);

  const classes = useStyles();

  const renderContent = () => {
    switch (question.questionType) {
      case 'titleBlock':
        return /*#__PURE__*/React.createElement(TextField, {
          className: classes.textarea,
          label: "\u5340\u584A\u63CF\u8FF0",
          disabled: true,
          value: question.questionDescription,
          multiline: true
        });

      case 'text':
        return /*#__PURE__*/React.createElement(TextField, {
          className: classes.text,
          label: "\u7C21\u7B54\u6587\u5B57",
          disabled: true
        });

      case 'textarea':
        return /*#__PURE__*/React.createElement(TextField, {
          className: classes.textarea,
          label: "\u8A73\u7B54\u6587\u5B57",
          disabled: true
        });

      case 'choiceone':
        return /*#__PURE__*/React.createElement(QuestionOptions, {
          type: "radio",
          question: question,
          onOptionClick: onOptionClick
        });

      case 'choicemulti':
        return /*#__PURE__*/React.createElement(QuestionOptions, {
          type: "checkbox",
          question: question,
          onOptionClick: onOptionClick
        });

      case 'select':
        return /*#__PURE__*/React.createElement(QuestionOptions, {
          type: "select",
          question: question,
          onOptionClick: onOptionClick
        });

      case 'email':
        return /*#__PURE__*/React.createElement(TextField, {
          className: classes.text,
          label: "\u96FB\u5B50\u90F5\u4EF6",
          disabled: true
        });

      case 'rating':
        return /*#__PURE__*/React.createElement(QuestionRating, {
          question: question
        });

      case 'date':
        return /*#__PURE__*/React.createElement(TextField, {
          className: classes.text,
          label: "\u5E74/\u6708/\u65E5",
          disabled: true,
          InputProps: {
            endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
              position: "end"
            }, /*#__PURE__*/React.createElement(InsertInvitationIcon, null))
          }
        });

      default:
        return undefined;
    }
  };

  return /*#__PURE__*/React.createElement(Paper, _extends({
    className: clsx(className, classes.root, disabled && classes.disabled)
  }, other), /*#__PURE__*/React.createElement(QuestionDragHandle, {
    className: classes.dragHandle,
    disabled: disabled,
    DragHandleProps: DragHandleProps
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.main
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true,
    spacing: 1,
    alignItems: "flex-start"
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "body1",
    onClick: onQuestionNameClick
  }, question.questionName || '問題', ' ', Boolean(question.isRequired) && /*#__PURE__*/React.createElement("span", {
    style: {
      color: 'red'
    }
  }, "*"))), /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: 12
  }, renderContent()))));
};

export default Question;