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

EGroup Team react component modules.

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React, { useState, useContext } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import Question from './Question';
import QuestionEditable from './QuestionEditable';
import SurveyContext from '../Survey/SurveyContext';

const SurveyQuestions = ({
  onDragEnd,
  droppableId,
  optionTypes,
  onNameChange,
  onTypeChange,
  onDescChange,
  onRequiredChange,
  onDelete,
  onOptionChange,
  onOptionDelete,
  onOptionDragEnd,
  onOptionCreate,
  onOptionCreateOther,
  onRatingStartChange,
  onRatingEndChange,
  onRatingStartInputChange,
  onRatingEndInputChange
}) => {
  const _useContext = useContext(SurveyContext),
        questions = _useContext.questions,
        setQuestions = _useContext.setQuestions,
        selectedQuestionId = _useContext.selectedQuestionId,
        setSelectedQuestionId = _useContext.setSelectedQuestionId;

  const _useState = useState(0),
        _useState2 = _slicedToArray(_useState, 2),
        autoFocusIndex = _useState2[0],
        setAutoFocusIndex = _useState2[1];

  const _useState3 = useState(false),
        _useState4 = _slicedToArray(_useState3, 2),
        autoFocusName = _useState4[0],
        setAutoFocusName = _useState4[1];

  const handleDragEnd = (result, provided) => {
    const destination = result.destination,
          source = result.source;

    if (!destination) {
      return;
    }

    if (destination.droppableId === source.droppableId && destination.index === source.index) {
      return;
    }

    if (!questions) return;
    const sourceQuestion = questions[source.index];
    if (!sourceQuestion) return;
    const nextQuestions = [...questions];
    nextQuestions.splice(source.index, 1);
    nextQuestions.splice(destination.index, 0, sourceQuestion);
    setQuestions(nextQuestions);

    if (onDragEnd) {
      onDragEnd(result, provided, nextQuestions);
    }
  };

  const handleNameChange = (event, question) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          questionName: event.target.value
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onNameChange) {
      onNameChange(event, question);
    }
  };

  const handleTypeChange = (event, question) => {
    const nextQuestionType = event.target.value;
    let questionRatingEndValue;
    let questionRatingStartValue;
    const shouldCreateOneOption = (nextQuestionType === 'choicemulti' || nextQuestionType === 'choiceone' || nextQuestionType === 'select') && (!question.optionList || question.optionList.length === 0);

    if (nextQuestionType === 'rating') {
      questionRatingStartValue = 1;
      questionRatingEndValue = 5;
    }

    let nextQuestion = _objectSpread({}, question);

    let createdOption;
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        createdOption = {
          optionId: uuidv4(),
          optionName: '選項 1',
          isOther: 0
        };

        const result = _objectSpread(_objectSpread({}, el), {}, {
          questionType: nextQuestionType,
          optionList: shouldCreateOneOption ? [createdOption] : el.optionList,
          questionRatingEndValue,
          questionRatingStartValue
        });

        nextQuestion = _objectSpread({}, result);
        return result;
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onTypeChange) {
      onTypeChange(event, question, nextQuestion, shouldCreateOneOption ? createdOption : undefined);
    }
  };

  const handleDescChange = (event, question) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          questionDescription: event.target.value
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onDescChange) {
      onDescChange(event, question);
    }
  };

  const handleIsRequiredChange = (event, question) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          isRequired: Number(event.target.checked)
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onRequiredChange) {
      onRequiredChange(event, question);
    }
  };

  const handleDelete = (event, question) => {
    const nextQuestions = questions.filter(el => el.questionId !== question.questionId);
    setQuestions(nextQuestions);

    if (onDelete) {
      onDelete(event, question);
    }
  };

  const handleOptionChange = (event, question, option) => {
    let nextOption = _objectSpread({}, option);

    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        var _el$optionList;

        return _objectSpread(_objectSpread({}, el), {}, {
          optionList: (_el$optionList = el.optionList) === null || _el$optionList === void 0 ? void 0 : _el$optionList.map(opt => {
            if (opt.optionId === option.optionId) {
              const result = _objectSpread(_objectSpread({}, opt), {}, {
                optionName: event.target.value
              });

              nextOption = _objectSpread({}, result);
              return result;
            }

            return opt;
          })
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onOptionChange) {
      onOptionChange(event, question, option, nextOption);
    }
  };

  const handleOptionDelete = (event, question, deletedOption) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        var _el$optionList2;

        return _objectSpread(_objectSpread({}, el), {}, {
          optionList: (_el$optionList2 = el.optionList) === null || _el$optionList2 === void 0 ? void 0 : _el$optionList2.filter(opt => opt.optionId !== deletedOption.optionId)
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onOptionDelete) {
      onOptionDelete(event, question, deletedOption);
    }
  };

  const handleOptionDragEnd = (result, question, options) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          optionList: options
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onOptionDragEnd) {
      onOptionDragEnd(result, question, options);
    }
  };

  const handleOptionCreate = (e, question, index) => {
    let createdOption;
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId && el.optionList) {
        createdOption = {
          optionId: uuidv4(),
          optionName: "\u9078\u9805 ".concat(index),
          isOther: 0
        };
        return _objectSpread(_objectSpread({}, el), {}, {
          optionList: [...el.optionList, createdOption]
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onOptionCreate) {
      onOptionCreate(e, question, index, createdOption);
    }
  };

  const handleOptionCreateOther = (e, question) => {
    let createdOption;
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId && el.optionList) {
        createdOption = {
          optionId: uuidv4(),
          optionName: '其他...',
          isOther: 1
        };
        return _objectSpread(_objectSpread({}, el), {}, {
          optionList: [...el.optionList, createdOption]
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

    if (onOptionCreateOther) {
      onOptionCreateOther(e, question, createdOption);
    }
  };

  const handleRatingStartChange = (e, question) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          questionRatingStartValue: e.target.value
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

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

  const handleRatingEndChange = (e, question) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          questionRatingEndValue: e.target.value
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

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

  const handleRatingStartInputChange = (e, question) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          questionRatingStartName: e.target.value
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

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

  const handleRatingEndInputChange = (e, question) => {
    const nextQuestions = questions.map(el => {
      if (el.questionId === question.questionId) {
        return _objectSpread(_objectSpread({}, el), {}, {
          questionRatingEndName: e.target.value
        });
      }

      return el;
    });
    setQuestions(nextQuestions);

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

  return /*#__PURE__*/React.createElement(DragDropContext, {
    onDragEnd: handleDragEnd
  }, /*#__PURE__*/React.createElement(Droppable, {
    droppableId: droppableId
  }, dropProvided => /*#__PURE__*/React.createElement("div", dropProvided.droppableProps, /*#__PURE__*/React.createElement("div", {
    ref: dropProvided.innerRef
  }, questions.map((question, index) => /*#__PURE__*/React.createElement(Draggable, {
    draggableId: question.questionId,
    key: question.questionId,
    index: index
  }, dragProvided => /*#__PURE__*/React.createElement("div", _extends({
    ref: dragProvided.innerRef
  }, dragProvided.draggableProps), question.questionId === selectedQuestionId ? /*#__PURE__*/React.createElement(QuestionEditable, {
    DragHandleProps: dragProvided.dragHandleProps,
    question: question,
    onNameChange: handleNameChange,
    onTypeChange: handleTypeChange,
    onDescChange: handleDescChange,
    onRequiredChange: handleIsRequiredChange,
    onDelete: handleDelete,
    onOptionChange: handleOptionChange,
    onOptionDelete: handleOptionDelete,
    onOptionDragEnd: handleOptionDragEnd,
    onOptionCreate: handleOptionCreate,
    onOptionCreateOther: handleOptionCreateOther,
    onRatingStartChange: handleRatingStartChange,
    onRatingEndChange: handleRatingEndChange,
    onRatingStartInputChange: handleRatingStartInputChange,
    onRatingEndInputChange: handleRatingEndInputChange,
    autoFocusOptionIndex: autoFocusIndex,
    autoFocusName: autoFocusName,
    optionTypes: optionTypes
  }) : /*#__PURE__*/React.createElement(Question, {
    DragHandleProps: dragProvided.dragHandleProps,
    onClick: () => setSelectedQuestionId(question.questionId),
    question: question,
    onOptionClick: (el, opt, index) => {
      setAutoFocusName(false);
      setAutoFocusIndex(index);
    },
    onQuestionNameClick: () => {
      setAutoFocusName(true);
    }
  })))), dropProvided.placeholder))));
};

export default SurveyQuestions;