@quillforms/blocklib-multiple-choice-block/build/renderer/display.js

Multiple choice block for quillforms

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _rendererCore = require("@quillforms/renderer-core");
var _react = require("react");
var _lodash = require("lodash");
var _choicesWrapper = _interopRequireDefault(require("./choices-wrapper"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * QuillForms Depndencies
 */

/**
 * WordPress Dependencies
 */

/**
 * External Dependencies
 */

/**
 * Internal Dependencies
 */

let multipleChoiceTimer;
const MultipleChoiceOutput = props => {
  const {
    id,
    attributes,
    setIsValid,
    setIsAnswered,
    showNextBtn,
    setValidationErr,
    val,
    setVal,
    next,
    isAnswerLocked,
    isActive,
    isAnimating,
    showErrMsg,
    isPreview,
    isReviewing,
    setIsAnswerCorrect
  } = props;
  const {
    multiple,
    required,
    min,
    max,
    other
  } = attributes;
  const messages = (0, _rendererCore.useMessages)();
  const correctIncorrectQuiz = (0, _rendererCore.useCorrectIncorrectQuiz)();
  const [choiceClicked, setChoiceClicked] = (0, _react.useState)(null);
  const checkfieldValidation = $val => {
    if (required === true && (!$val || $val.length === 0)) {
      setIsValid(false);
      setValidationErr(messages['label.errorAlert.required']);
    } else {
      if ((0, _lodash.size)($val) > 0 && correctIncorrectQuiz?.enabled) {
        // Handle "Other" option in quiz validation
        const regularChoices = $val?.filter(item => typeof item !== 'object' || item.type !== 'other');
        const otherChoice = $val?.find(item => typeof item === 'object' && item.type === 'other');

        // For quiz validation, we only consider regular choices
        if (regularChoices.length > 0) {
          const isCorrect = regularChoices.every(answer => correctIncorrectQuiz?.questions?.[id]?.correctAnswers?.includes(answer));
          setIsAnswerCorrect(isCorrect);
        } else {
          setIsAnswerCorrect(false);
        }
      }

      // Count valid selections (including "Other" with text)
      const validSelections = $val?.filter(item => {
        if (typeof item === 'object' && item.type === 'other') {
          return item.value && item.value.trim() !== '';
        }
        return true;
      });
      if (multiple && min && (0, _lodash.size)(validSelections) < min) {
        setIsValid(false);
        setValidationErr(messages['label.errorAlert.minChoices']);
      } else if (multiple && max && (0, _lodash.size)(validSelections) > max) {
        setIsValid(false);
        setValidationErr(messages['label.errorAlert.maxChoices']);
      } else {
        setIsValid(true);
        setValidationErr(null);
      }
    }
  };
  (0, _react.useEffect)(() => {
    return () => clearTimeout(multipleChoiceTimer);
  }, []);
  (0, _react.useEffect)(() => {
    if (!isActive) {
      clearTimeout(multipleChoiceTimer);
    }
    if (!isActive && !isAnimating) {
      setChoiceClicked(null);
    }
  }, [isActive, isAnimating]);
  (0, _react.useEffect)(() => {
    clearTimeout(multipleChoiceTimer);
    if (choiceClicked && val?.length > 0 && !multiple) {
      // For single choice, check if we have a valid selection
      const hasValidSelection = val.some(item => {
        if (typeof item === 'object' && item.type === 'other') {
          return item.value && item.value.trim() !== '';
        }
        return true;
      });
      if (hasValidSelection) {
        multipleChoiceTimer = setTimeout(() => {
          next();
        }, 600);
      }
    }
  }, [choiceClicked, val]);
  (0, _react.useEffect)(() => {
    if (isPreview || !isReviewing) checkfieldValidation(val);
  }, [attributes, correctIncorrectQuiz]);
  (0, _react.useEffect)(() => {
    // Check if we have valid selections
    const hasValidSelections = val && val.length > 0 && val.some(item => {
      if (typeof item === 'object' && item.type === 'other') {
        return item.value && item.value.trim() !== '';
      }
      return true;
    });
    if (hasValidSelections) {
      setIsAnswered(true);
    } else {
      setIsAnswered(false);
    }
    if (multiple) {
      if (hasValidSelections) {
        showNextBtn(true);
      }
    }
  }, [val, attributes]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "qf-multiple-choice-block-renderer",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_choicesWrapper.default, {
      attributes: attributes,
      id: id,
      val: val,
      isActive: isActive,
      isAnswerLocked: isAnswerLocked,
      correctIncorrectQuiz: correctIncorrectQuiz,
      checkfieldValidation: checkfieldValidation,
      setVal: setVal,
      setChoiceClicked: val => {
        showErrMsg(false);
        setChoiceClicked(val);
      }
    })
  });
};
var _default = exports.default = MultipleChoiceOutput;
//# sourceMappingURL=display.js.map