@quillforms/blocklib-multiple-choice-block
Version:
Multiple choice block for quillforms
206 lines (192 loc) • 6.45 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 _classnames = _interopRequireDefault(require("classnames"));
var _emotion = require("emotion");
var _react = require("react");
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* QuillForms Depndencies
*/
/**
* External Dependencies
*/
const ChoiceItem = ({
order,
selected,
choiceLabel,
choiceValue,
clickHandler,
theme,
isAnswerLocked,
blockId,
correctIncorrectQuiz,
isOther,
val,
setVal,
checkfieldValidation,
multiple
}) => {
const {
answersColor
} = theme;
const messages = (0, _rendererCore.useMessages)();
const [isClicked, setIsClicked] = (0, _react.useState)(false);
const [otherTextValue, setOtherText] = (0, _react.useState)('');
const inputRef = (0, _react.useRef)(null);
// Initialize other text from existing value
(0, _react.useEffect)(() => {
if (isOther && val && val.length > 0) {
const otherValue = val.find(item => typeof item === 'object' && item.type === 'other');
if (otherValue && otherValue.value) {
setOtherText(otherValue.value);
}
}
}, [isOther, val]);
// Focus the input when 'Other' is selected
(0, _react.useEffect)(() => {
if (isOther && selected && inputRef.current) {
inputRef.current.focus();
}
}, [isOther, selected]);
const handleOtherTextChange = text => {
setOtherText(text);
// Update the value in the parent component
let $val = val ? [...val] : [];
// Remove existing other value if any
$val = $val.filter(item => !(typeof item === 'object' && item.type === 'other'));
// Add new other value if text is not empty
if (text.trim() !== '') {
$val.push({
type: 'other',
value: text.trim()
});
}
setVal($val);
checkfieldValidation($val);
};
const handleOtherClick = () => {
if (!isAnswerLocked) {
let $val = val ? [...val] : [];
if (selected) {
// Remove other option
$val = $val.filter(item => !(typeof item === 'object' && item.type === 'other'));
setOtherText('');
} else {
// Add other option with empty text
// if (multiple) {
// $val.push({
// type: 'other',
// value: ''
// });
// } else {
$val = [{
type: 'other',
value: ''
}];
// }
}
setVal($val);
checkfieldValidation($val);
if (!selected) {
setIsClicked(false);
setTimeout(() => {
setIsClicked(true);
}, 0);
}
}
};
const oppositeColor = (0, _tinycolor.default)(answersColor).isDark() ? '#fff' : '#333';
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
role: "presentation",
className: (0, _classnames.default)('multipleChoice__optionWrapper', {
selected,
locked: isAnswerLocked,
clicked: isClicked,
correct: isAnswerLocked && correctIncorrectQuiz?.enabled && correctIncorrectQuiz?.showAnswersDuringQuiz && correctIncorrectQuiz?.questions?.[blockId]?.correctAnswers?.includes(choiceValue),
wrong: isAnswerLocked && correctIncorrectQuiz?.enabled && correctIncorrectQuiz?.showAnswersDuringQuiz && selected && !correctIncorrectQuiz?.questions?.[blockId]?.correctAnswers?.includes(choiceValue)
}, (0, _emotion.css)`
background: ${(0, _tinycolor.default)(answersColor).setAlpha(0.1).toString()};
border-color: ${answersColor};
color: ${answersColor};
${!isAnswerLocked && `&:hover {
background: ${(0, _tinycolor.default)(answersColor).setAlpha(0.2).toString()};
}`}
&.selected {
background: ${(0, _tinycolor.default)(answersColor).setAlpha(0.75).toString()};
color: ${(0, _tinycolor.default)(answersColor).isDark() ? '#fff' : '#333'};
.multipleChoice__optionKey {
color: ${(0, _tinycolor.default)(answersColor).isDark() ? '#fff' : '#333'};
border-color: ${(0, _tinycolor.default)(answersColor).isDark() ? '#fff' : '#333'};
}
}
&.locked {
pointer-events: none;
cursor: default !important;
}
`),
onClick: () => {
if (!isAnswerLocked) {
if (isOther) {
handleOtherClick();
} else {
clickHandler();
if (!selected) {
setIsClicked(false);
setTimeout(() => {
setIsClicked(true);
}, 0);
}
}
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "multipleChoice__optionLabel",
children: isOther && selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
type: "text",
value: otherTextValue,
onChange: e => handleOtherTextChange(e.target.value),
placeholder: "Please specify...",
className: (0, _emotion.css)`
border: none !important;
background: transparent;
color: ${oppositeColor} !important;
font-size: inherit !important;
font-family: inherit !important;
width: 100%;
outline: none;
&::placeholder {
color: ${(0, _tinycolor.default)(oppositeColor).setAlpha(0.6).toString()};
}
&:focus {
outline: none !important;
}
`,
onClick: e => e.stopPropagation(),
onKeyDown: e => e.stopPropagation(),
ref: inputRef
}) : choiceLabel
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: (0, _classnames.default)('multipleChoice__optionKey', (0, _emotion.css)`
background: ${(0, _tinycolor.default)(answersColor).setAlpha(0.1).toString()};
color: ${answersColor};
border-color: ${(0, _tinycolor.default)(answersColor).setAlpha(0.4).toString()};
`),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _classnames.default)('multipleChoice__optionKeyTip', (0, _emotion.css)`
background: ${answersColor};
color: ${oppositeColor};
${isAnswerLocked && `display: none !important;`}
`),
children: messages['label.hintText.key']
}), order]
})]
});
};
var _default = exports.default = ChoiceItem;
//# sourceMappingURL=choice-item.js.map