@quillforms/blocklib-multiple-choice-block
Version:
Multiple choice block for quillforms
193 lines (187 loc) • 6.54 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _rendererCore = require("@quillforms/renderer-core");
var _utils = require("@quillforms/utils");
var _react = require("react");
var _lodash = require("lodash");
var _choiceItem = _interopRequireDefault(require("./choice-item"));
var styles = _interopRequireWildcard(require("./styles"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
* QuillForms Dependencies
*/
/**
* WordPress Dependencies
*/
/**
* External Dependencies
*/
/**
* Internal Dependencies
*/
const ChoicesWrapper = ({
id,
attributes,
val,
isActive,
correctIncorrectQuiz,
isAnswerLocked,
setVal,
setChoiceClicked,
checkfieldValidation
}) => {
const {
editor
} = (0, _rendererCore.useFormContext)();
const {
verticalAlign,
multiple,
choices,
themeId,
max,
min,
other,
otherText
} = attributes;
const cx = (0, _utils.useCx)();
const theme = (0, _rendererCore.useBlockTheme)(themeId);
const charCode = 'a'.charCodeAt(0);
// Simple algorithm to generate alphabatical idented order
const identName = a => {
const b = [a];
let sp, out, i, div;
sp = 0;
while (sp < b.length) {
if (b[sp] > 25) {
div = Math.floor(b[sp] / 26);
b[sp + 1] = div - 1;
b[sp] %= 26;
}
sp += 1;
}
out = '';
for (i = 0; i < b.length; i += 1) {
out = String.fromCharCode(charCode + b[i]) + out;
}
return out;
};
const $verticalAlign = verticalAlign;
let $choices = (0, _lodash.cloneDeep)(choices).map(($choice, index) => {
if (!$choice.label) $choice.label = 'Choice ' + (index + 1);
// if ( ! verticalAlign && $choice.label.length > 26 )
// $verticalAlign = true;
$choice.selected = val && val.length > 0 && val.includes($choice.value) ? true : false;
$choice.order = identName(index);
return $choice;
});
// Add "Other" option if enabled
if (other) {
const otherChoice = {
value: 'other',
label: otherText,
selected: val && val.length > 0 && val.some(item => typeof item === 'object' && item.type === 'other'),
order: identName($choices.length),
isOther: true
};
$choices.push(otherChoice);
}
const clickHandler = (newValue, selected) => {
let $val;
if (val?.length > 0) {
$val = (0, _lodash.cloneDeep)(val);
} else {
$val = [];
}
if (selected) {
if (!correctIncorrectQuiz?.enabled || !correctIncorrectQuiz?.showAnswersDuringQuiz) {
// Remove the selected value
if (typeof newValue === 'object' && newValue.type === 'other') {
$val = $val.filter(item => !(typeof item === 'object' && item.type === 'other'));
} else {
$val.splice($val.findIndex(item => item === newValue), 1);
}
setVal($val);
}
} else {
if (multiple) {
$val.push(newValue);
} else {
// If selecting 'Other', set value directly
if (typeof newValue === 'object' && newValue.type === 'other') {
$val = [newValue];
} else {
$val = [newValue];
}
}
setChoiceClicked(false);
setVal($val);
checkfieldValidation($val);
setTimeout(() => {
setChoiceClicked(true);
}, 10);
}
};
const handleClick = (0, _react.useCallback)((0, _lodash.debounce)(map => {
const pressedLetter = Object.values(map).join('');
// //console.log(pressedLetter);
// //console.log($choices)
const $choiceIndex = $choices.findIndex(choice => choice.order.toUpperCase() === pressedLetter.toUpperCase());
// //console.log($choiceIndex)
document.querySelector(`#block-${id} .multiplechoice__options .multipleChoice__optionWrapper:nth-child(${$choiceIndex + 1})`)?.click();
mappedKeyboardTicks = {};
}, 100), [$choices]);
let mappedKeyboardTicks = {};
const valRef = (0, _react.useRef)(val);
(0, _react.useEffect)(() => {
valRef.current = val;
}, [val]);
const handleKeyDown = e => {
console.log(valRef.current);
if (!isAnswerLocked && editor.mode === 'off' && !valRef.current?.some(item => typeof item === 'object' && item.type === 'other')) {
mappedKeyboardTicks[e.code] = String.fromCharCode(e.keyCode);
handleClick(mappedKeyboardTicks);
}
};
(0, _react.useEffect)(() => {
document.getElementById(`block-${id}`)?.addEventListener('keydown', handleKeyDown);
return () => {
document.getElementById(`block-${id}`)?.removeEventListener('keydown', handleKeyDown);
};
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "qf-multiple-choice-block",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: cx('multiplechoice__options', {
valigned: $verticalAlign
}, styles.MultipleChoiceOptions),
children: $choices && $choices.length > 0 && $choices.map((choice, index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_choiceItem.default, {
theme: theme,
blockId: id,
choiceLabel: choice.label,
choiceValue: choice.value,
order: choice.order.toUpperCase(),
isAnswerLocked: isAnswerLocked,
selected: choice.selected,
correctIncorrectQuiz: correctIncorrectQuiz,
multiple: multiple,
isOther: choice.isOther,
otherText: otherText,
val: val,
setVal: setVal,
checkfieldValidation: checkfieldValidation,
clickHandler: () => {
clickHandler(choice.value, choice.selected);
}
}, `block-multiple-choice-${id}-choice-${choice.value}`);
})
})
});
};
var _default = exports.default = ChoicesWrapper;
//# sourceMappingURL=choices-wrapper.js.map