@instructure/quiz-interactions/lib/components/fill_blank/Take/take_components/TakeStem.js

A React UI component Library for quiz interaction types.

/** @jsx jsx */ function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_with_holes(arr) {
    if (Array.isArray(arr)) return arr;
}
function _iterable_to_array_limit(arr, i) {
    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
    if (_i == null) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _s, _e;
    try {
        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
            _arr.push(_s.value);
            if (i && _arr.length === i) break;
        }
    } catch (err) {
        _d = true;
        _e = err;
    } finally{
        try {
            if (!_n && _i["return"] != null) _i["return"]();
        } finally{
            if (_d) throw _e;
        }
    }
    return _arr;
}
function _non_iterable_rest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { v4 as uuid } from 'uuid';
import { jsx, css } from '@instructure/emotion';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { Text } from '@instructure/ui-text';
import { ItemBodyWrapper } from '@instructure/quiz-rce/components/ItemBodyWrapper/index';
import BlankDropTarget from '../../drag_components/BlankDropTarget';
import { trimPunctuation, getTrimmedPunctuation } from '../../helpers/punctuation';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import t from '@instructure/quiz-i18n/format-message';
import { SimpleSelect } from '@instructure/quiz-common/components/SimpleSelect/index';
import { TextInput } from '@instructure/quiz-common/components/TextInput/index';
import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
// ============================================
// Sub-components for different blank types
// ============================================
function DropdownBlank(param) {
    var blank = param.blank, blankSRText = param.blankSRText, value = param.value, onUpdate = param.onUpdate, readOnly = param.readOnly, styles = param.styles;
    var selectOptionIdPrefix = 'take-stem-select-option-';
    var choice = blank.choices.find(function(c) {
        return c.id === value;
    });
    var handleChange = useCallback(function(_event, param) {
        var value = param.value;
        onUpdate(blank.id, value);
    }, [
        blank.id,
        onUpdate
    ]);
    return /*#__PURE__*/ jsx(React.Fragment, null, /*#__PURE__*/ jsx("div", {
        css: styles.printBlank
    }, /*#__PURE__*/ jsx(TextInput, {
        display: "inline-block",
        renderLabel: /*#__PURE__*/ jsx(ScreenReaderContent, null, t('Printed Blank')),
        interaction: "readonly",
        defaultValue: choice && choice.itemBody
    })), /*#__PURE__*/ jsx("div", {
        className: "fs-mask",
        css: styles.noPrintBlank
    }, /*#__PURE__*/ jsx(SimpleSelect, {
        value: value,
        renderLabel: /*#__PURE__*/ jsx(ScreenReaderContent, null, blankSRText),
        onChange: handleChange,
        interaction: readOnly ? 'readonly' : 'enabled',
        mountNode: function() {
            return document.body;
        },
        optionsMaxHeight: "12rem"
    }, /*#__PURE__*/ jsx(SimpleSelect.Option, {
        id: "take-stem-select-option-empty",
        value: "",
        style: css(styles.selectPlaceholder).styles
    }, t('choose your answer...')), blank.choices.map(function(choice) {
        return /*#__PURE__*/ jsx(SimpleSelect.Option, {
            id: selectOptionIdPrefix + choice.id,
            key: choice.id,
            value: choice.id
        }, choice.itemBody);
    }))));
}
function WordbankBlank(param) {
    var blank = param.blank, blankSRText = param.blankSRText, choice = param.choice, wordBankChoices = param.wordBankChoices, onUpdate = param.onUpdate, returnChoiceToWordbank = param.returnChoiceToWordbank, readOnly = param.readOnly, styles = param.styles;
    var handleChange = useCallback(function(choice) {
        onUpdate(blank.id, choice);
    }, [
        blank.id,
        onUpdate
    ]);
    var handleReturnChoice = useCallback(function(choiceId) {
        returnChoiceToWordbank(blank.id, choiceId);
    }, [
        blank.id,
        returnChoiceToWordbank
    ]);
    return /*#__PURE__*/ jsx(React.Fragment, null, /*#__PURE__*/ jsx("div", {
        css: styles.printBlank
    }, /*#__PURE__*/ jsx(TextInput, {
        display: "inline-block",
        renderLabel: /*#__PURE__*/ jsx(ScreenReaderContent, null, t('Printed Blank')),
        interaction: "readonly",
        defaultValue: choice && choice.itemBody
    })), /*#__PURE__*/ jsx("div", {
        className: "fs-mask",
        css: styles.noPrintBlank
    }, /*#__PURE__*/ jsx(ScreenReaderContent, null, blankSRText), /*#__PURE__*/ jsx(BlankDropTarget, {
        key: blank.id,
        choices: wordBankChoices,
        choice: choice,
        blankId: blank.id,
        onChange: handleChange,
        onDrop: handleChange,
        readOnly: readOnly,
        returnChoiceToWordbank: handleReturnChoice
    })));
}
function OpenEntryBlank(param) {
    var blank = param.blank, blankSRText = param.blankSRText, value = param.value, onUpdate = param.onUpdate, readOnly = param.readOnly;
    var handleChange = useCallback(function(e) {
        onUpdate(blank.id, e.target.value.trim());
    }, [
        blank.id,
        onUpdate
    ]);
    return /*#__PURE__*/ jsx("span", {
        className: "fs-mask"
    }, /*#__PURE__*/ jsx(TextInput, {
        display: "inline-block",
        renderLabel: /*#__PURE__*/ jsx(ScreenReaderContent, null, blankSRText),
        placeholder: t('type your answer...'),
        defaultValue: readOnly ? void 0 : value,
        value: readOnly ? value : void 0,
        onChange: handleChange,
        interaction: readOnly ? 'readonly' : 'enabled',
        "data-automation": "sdk-fitb-taking-answer",
        autoComplete: "off"
    }));
}
function Blank(param) {
    var blank = param.blank, blankSRText = param.blankSRText, value = param.value, choice = param.choice, wordBankChoices = param.wordBankChoices, onUpdate = param.onUpdate, onUpdateWordBank = param.onUpdateWordBank, returnChoiceToWordbank = param.returnChoiceToWordbank, readOnly = param.readOnly, styles = param.styles;
    switch(blank.answerType){
        case 'openEntry':
            return /*#__PURE__*/ jsx(OpenEntryBlank, {
                blank: blank,
                blankSRText: blankSRText,
                value: value,
                onUpdate: onUpdate,
                readOnly: readOnly
            });
        case 'dropdown':
            return /*#__PURE__*/ jsx(DropdownBlank, {
                blank: blank,
                blankSRText: blankSRText,
                value: value,
                onUpdate: onUpdate,
                readOnly: readOnly,
                styles: styles
            });
        default:
            return /*#__PURE__*/ jsx(WordbankBlank, {
                blank: blank,
                blankSRText: blankSRText,
                choice: choice,
                wordBankChoices: wordBankChoices,
                onUpdate: onUpdateWordBank,
                returnChoiceToWordbank: returnChoiceToWordbank,
                readOnly: readOnly,
                styles: styles
            });
    }
}
function StemItem(param) {
    var stemItem = param.stemItem, stemItems = param.stemItems, blanks = param.blanks, getValueForBlank = param.getValueForBlank, getWordbankChoiceByResponseValue = param.getWordbankChoiceByResponseValue, onUpdate = param.onUpdate, onUpdateWordBank = param.onUpdateWordBank, returnChoiceToWordbank = param.returnChoiceToWordbank, wordBankChoices = param.wordBankChoices, readOnly = param.readOnly, styles = param.styles;
    if (stemItem.type === 'text') {
        return /*#__PURE__*/ jsx(Text, {
            color: "primary",
            key: stemItem.id
        }, trimPunctuation(stemItem, stemItems));
    }
    var blank = blanks.find(function(b) {
        return b.id === stemItem.blankId;
    });
    var punctuation = getTrimmedPunctuation(stemItem, stemItems);
    var blankPosition = blanks.indexOf(blank) + 1;
    var value = getValueForBlank(blank.id);
    var blankResponseValue = value;
    var choice = getWordbankChoiceByResponseValue(blankResponseValue);
    var blankSRText = t('Question Blank { blankPosition } of { totalBlanks }', {
        blankPosition: blankPosition,
        totalBlanks: blanks.length
    });
    return /*#__PURE__*/ jsx("span", {
        key: stemItem.id,
        className: "stemItem",
        css: styles.stemItem
    }, punctuation.start, /*#__PURE__*/ jsx(Blank, {
        blank: blank,
        blankSRText: blankSRText,
        value: value,
        choice: choice,
        wordBankChoices: wordBankChoices,
        onUpdate: onUpdate,
        onUpdateWordBank: onUpdateWordBank,
        returnChoiceToWordbank: returnChoiceToWordbank,
        readOnly: readOnly,
        styles: styles
    }), punctuation.end);
}
function RichBlanks(param) {
    var isMounted = param.isMounted, componentId = param.componentId, blanks = param.blanks, getValueForBlank = param.getValueForBlank, getWordbankChoiceByResponseValue = param.getWordbankChoiceByResponseValue, onUpdate = param.onUpdate, onUpdateWordBank = param.onUpdateWordBank, returnChoiceToWordbank = param.returnChoiceToWordbank, wordBankChoices = param.wordBankChoices, readOnly = param.readOnly, styles = param.styles;
    if (!isMounted) {
        return null;
    }
    var questionWrapper = document.getElementById(componentId);
    return blanks.map(function(blank) {
        var blankPosition = blanks.indexOf(blank) + 1;
        var value = getValueForBlank(blank.id);
        var blankResponseValue = value;
        var choice = getWordbankChoiceByResponseValue(blankResponseValue);
        var blankSRText = t('Question Blank { blankPosition } of { totalBlanks }', {
            blankPosition: blankPosition,
            totalBlanks: blanks.length
        });
        if (questionWrapper === null || questionWrapper === void 0 ? void 0 : questionWrapper.querySelector("#blank_".concat(blank.id))) {
            return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ jsx(Blank, {
                blank: blank,
                blankSRText: blankSRText,
                componentId: componentId,
                value: value,
                choice: choice,
                wordBankChoices: wordBankChoices,
                onUpdate: onUpdate,
                onUpdateWordBank: onUpdateWordBank,
                returnChoiceToWordbank: returnChoiceToWordbank,
                readOnly: readOnly,
                styles: styles
            }), questionWrapper.querySelector("#blank_".concat(blank.id)));
        }
        return null;
    });
}
// ============================================
// Main Component
// ============================================
var TakeStem = /*#__PURE__*/ React.forwardRef(function(props, ref) {
    var interactionData = props.interactionData, userResponses = props.userResponses, onUpdate = props.onUpdate, readOnly = props.readOnly, wordBankChoices = props.wordBankChoices, returnChoiceToWordbank = props.returnChoiceToWordbank, styles = props.styles, itemBody = props.itemBody, richFITB = props.richFITB;
    var _useState = _sliced_to_array(useState(false), 2), isMounted = _useState[0], setIsMounted = _useState[1];
    var componentId = useMemo(function() {
        return uuid();
    }, []);
    useEffect(function() {
        setIsMounted(true);
    }, []);
    // =============
    //   HELPERS
    // =============
    var getWordbankChoiceById = useCallback(function(choiceId) {
        return interactionData.blanks.map(function(b) {
            return b.answerType === 'wordbank' ? b.choices : [];
        }).flat().find(function(choice) {
            return choice.id === choiceId;
        });
    }, [
        interactionData.blanks
    ]);
    var getWordbankChoiceByResponseValue = useCallback(function(responseValue) {
        if (interactionData.wordBankChoices) {
            return interactionData.wordBankChoices.find(function(choice) {
                return choice.itemBody === responseValue;
            });
        }
        return getWordbankChoiceById(responseValue);
    }, [
        interactionData.wordBankChoices,
        getWordbankChoiceById
    ]);
    var updateUserResponse = useCallback(function(blankId, blankValue) {
        var newResponses = userResponses.filter(function(blank) {
            return blank.id !== blankId;
        }).concat([
            {
                id: blankId,
                value: blankValue,
                type: 'Text'
            }
        ]);
        onUpdate(newResponses);
    }, [
        userResponses,
        onUpdate
    ]);
    var updateWordBankUserResponse = useCallback(function(blankId, choice) {
        var wbChoices = interactionData.wordBankChoices;
        var choiceValue = wbChoices ? choice.itemBody : choice.id;
        updateUserResponse(blankId, choiceValue);
    }, [
        interactionData,
        updateUserResponse
    ]);
    var getValueForBlank = useCallback(function(blankId) {
        var objectForBlank = userResponses.find(function(response) {
            return response.id === blankId;
        });
        return objectForBlank && 'value' in objectForBlank ? objectForBlank.value : null;
    }, [
        userResponses
    ]);
    if (richFITB) {
        return /*#__PURE__*/ jsx(ItemBodyWrapper, {
            id: componentId,
            itemBody: itemBody
        }, /*#__PURE__*/ jsx(RichBlanks, {
            isMounted: isMounted,
            componentId: componentId,
            blanks: interactionData.blanks,
            getValueForBlank: getValueForBlank,
            getWordbankChoiceByResponseValue: getWordbankChoiceByResponseValue,
            onUpdate: updateUserResponse,
            onUpdateWordBank: updateWordBankUserResponse,
            returnChoiceToWordbank: returnChoiceToWordbank,
            wordBankChoices: wordBankChoices,
            readOnly: readOnly,
            styles: styles
        }));
    }
    return /*#__PURE__*/ jsx("div", {
        css: styles.stemWrapper,
        "data-automation": "take-stem-wrapper"
    }, interactionData.stemItems.slice().sort(function(a, b) {
        return a.position - b.position;
    }).map(function(stemItem) {
        return /*#__PURE__*/ jsx(StemItem, {
            key: stemItem.id,
            stemItem: stemItem,
            stemItems: interactionData.stemItems,
            blanks: interactionData.blanks,
            getValueForBlank: getValueForBlank,
            getWordbankChoiceByResponseValue: getWordbankChoiceByResponseValue,
            onUpdate: updateUserResponse,
            onUpdateWordBank: updateWordBankUserResponse,
            returnChoiceToWordbank: returnChoiceToWordbank,
            wordBankChoices: wordBankChoices,
            readOnly: readOnly,
            styles: styles
        });
    }));
});
TakeStem.displayName = 'TakeStem';
TakeStem.propTypes = {
    onUpdate: PropTypes.func.isRequired,
    interactionData: PropTypes.object.isRequired,
    itemBody: PropTypes.string,
    returnChoiceToWordbank: PropTypes.func,
    userResponses: PropTypes.array,
    readOnly: PropTypes.bool,
    richFITB: PropTypes.bool,
    wordBankChoices: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string,
        itemBody: PropTypes.string
    })),
    styles: PropTypes.object
};
TakeStem.defaultProps = {
    itemBody: '',
    returnChoiceToWordbank: void 0,
    userResponses: [],
    readOnly: false,
    richFITB: false,
    wordBankChoices: void 0
};
var TakeStemWithStyles = withStyleOverrides(generateStyle, generateComponentTheme)(TakeStem);
TakeStemWithStyles.componentId = "Quizzes".concat(TakeStem.displayName);
export default TakeStemWithStyles;