@instructure/quiz-interactions/lib/components/categorization/Edit/index.js

A React UI component Library for quiz interaction types.

/** @jsx jsx */ function _assert_this_initialized(self) {
    if (self === void 0) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return self;
}
function _call_super(_this, derived, args) {
    derived = _get_prototype_of(derived);
    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
}
function _class_call_check(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}
function _defineProperties(target, props) {
    for(var i = 0; i < props.length; i++){
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
    }
}
function _create_class(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
}
function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _get_prototype_of(o) {
    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _get_prototype_of(o);
}
function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function");
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            writable: true,
            configurable: true
        }
    });
    if (superClass) _set_prototype_of(subClass, superClass);
}
function _object_spread(target) {
    for(var i = 1; i < arguments.length; i++){
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function(key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
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 _object_spread_props(target, source) {
    source = source != null ? source : {};
    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;
}
function _possible_constructor_return(self, call) {
    if (call && (_type_of(call) === "object" || typeof call === "function")) {
        return call;
    }
    return _assert_this_initialized(self);
}
function _set_prototype_of(o, p) {
    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
        o.__proto__ = p;
        return o;
    };
    return _set_prototype_of(o, p);
}
function _type_of(obj) {
    "@swc/helpers - typeof";
    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
function _is_native_reflect_construct() {
    try {
        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
    } catch (_) {}
    return (_is_native_reflect_construct = function() {
        return !!result;
    })();
}
function _ts_decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
}
import { Component } from 'react';
import PropTypes from 'prop-types';
import find from 'lodash/fp/find';
import flatMap from 'lodash/fp/flatMap';
import isEqual from 'lodash/fp/isEqual';
import flow from 'lodash/fp/flow';
import filter from 'lodash/fp/filter';
import sortBy from 'lodash/fp/sortBy';
import set from 'lodash/fp/set';
import { v4 as uuid } from 'uuid';
import striptags from 'striptags';
import { Text } from '@instructure/ui-text';
import { jsx } from '@instructure/emotion';
import CategorizationInteractionType from '../../../records/interactions/categorization';
import ChoiceInput from '../../common/edit/components/ChoiceInput';
import Footer from '../../common/edit/components/Footer';
import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer';
import QuestionContainer from '../../common/edit/components/QuestionContainer';
import { getNextItemIdFromArray } from '../../../util/focusHelpers';
import CategorizationPresenter from './CategorizationPresenter';
import CategoryForm from './CategoryForm';
import { getSortedCategories } from '../common/utils';
import withEditTools from '../../../util/withEditTools';
import t from '@instructure/quiz-i18n/format-message';
import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel';
import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { FormFieldGroup, Flex } from '@instructure/quiz-common';
var CategorizationEdit = /*#__PURE__*/ function(Component) {
    "use strict";
    _inherits(CategorizationEdit, Component);
    function CategorizationEdit(props) {
        _class_call_check(this, CategorizationEdit);
        var _this;
        _this = _call_super(this, CategorizationEdit, [
            props
        ]), _define_property(_this, "distractorRefs", {}), _define_property(_this, "categoryRef", null), _define_property(_this, "stemElement", null), // ===========
        //   HELPERS
        // ===========
        _define_property(_this, "getViewDistractors", function() {
            var answerIds = flatMap(function(param) {
                var value = param.scoringData.value;
                return value;
            }, _this.props.scoringData.value);
            return flow(Object.values, filter(function(param) {
                var id = param.id;
                return !answerIds.includes(id);
            }), sortBy(function(param) {
                var id = param.id;
                return _this.state.distractorOrder.indexOf(id);
            }))(_this.props.interactionData.distractors);
        }), _define_property(_this, "getCategoryErrors", function(categoryId) {
            return _this.props.getErrors("interactionData.categories.".concat(categoryId, ".itemBody"));
        }), _define_property(_this, "getDistractorErrors", function(distractorId) {
            return _this.props.getErrors("interactionData.distractors.".concat(distractorId, ".itemBody"));
        }), _define_property(_this, "getAnswerIds", function(categoryId) {
            var categoryScoringData = find({
                id: categoryId
            }, _this.props.scoringData.value);
            // since kinesis doesnt save empty array
            return categoryScoringData.scoringData.value || [];
        }), // ===========
        //   HANDLERS
        // ===========
        _define_property(_this, "handleCalculatorTypeChange", function(e, value) {
            _this.props.changeItemState({
                calculatorType: value
            });
        }), _define_property(_this, "handleRemoveDistractor", function(distractorId) {
            var nextDistractorId = getNextItemIdFromArray(distractorId, _this.getViewDistractors());
            var nextDistractorRef = _this.distractorRefs[nextDistractorId];
            if (nextDistractorRef) {
                nextDistractorRef.removeChoicebutton.focus();
            } else {
                // focus on add category button
                _this.categoryRef.footerRef.focus();
            }
            _this.presenter.onRemoveDistractor(distractorId);
        }), _define_property(_this, "handleRemoveCategory", function(categoryId) {
            var categoryOrder = _this.props.interactionData.categoryOrder;
            var removingFirstCategory = categoryOrder && categoryOrder.indexOf(categoryId) === 0;
            if (removingFirstCategory) {
                _this.stemElement.focus();
            } else {
                var nextCategoryId = getNextItemIdFromArray(categoryId, _this.state.sortedCategories);
                var nextAddAnswerRef = _this.categoryRef.categoryRefs[nextCategoryId];
                if (nextAddAnswerRef) {
                    // will focus the previous category's "+Answer" button
                    nextAddAnswerRef.focus();
                }
            }
            _this.presenter.onRemoveCategory(categoryId);
        }), _define_property(_this, "handleRemoveAnswer", function(answerId, categoryId) {
            var answerIds = _this.getAnswerIds(categoryId);
            var removingFirstAnswer = answerIds.indexOf(answerId) === 0;
            if (removingFirstAnswer) {
                _this.categoryRef.categoryAnswerInputRefs[categoryId].answerInput.focus();
            } else {
                var nextAnswerId = getNextItemIdFromArray(answerId, answerIds);
                var nextAnswerRef = _this.categoryRef.answerRefs[nextAnswerId];
                if (nextAnswerRef) {
                    nextAnswerRef.removeChoicebutton.focus();
                }
            }
            _this.presenter.onRemoveAnswer(answerId, categoryId);
        }), _define_property(_this, "handleCreateDistractor", function() {
            var id = _this.props.newId();
            var newDistractor = {
                id: id,
                itemBody: ''
            };
            _this.setState(function(prevState) {
                return {
                    distractorOrder: prevState.distractorOrder.concat([
                        id
                    ])
                };
            });
            _this.props.changeItemState({
                interactionData: set("distractors[".concat(id, "]"), newDistractor, _this.props.interactionData)
            });
        }), _define_property(_this, "handleStemRef", function(node) {
            _this.stemElement = node;
        }), _define_property(_this, "handleCategoryRef", function(node) {
            _this.categoryRef = node;
        }), _define_property(_this, "handleDescriptionChange", function(itemBody) {
            _this.props.changeItemState({
                itemBody: itemBody
            });
        });
        _this.presenter = new CategorizationPresenter(props);
        var _this_props_interactionData = _this.props.interactionData, categories = _this_props_interactionData.categories, categoryOrder = _this_props_interactionData.categoryOrder;
        _this.state = {
            sortedCategories: getSortedCategories(categories, categoryOrder),
            distractorOrder: sortBy('itemBody', props.interactionData.distractors).map(function(param) {
                var id = param.id;
                return id;
            })
        };
        return _this;
    }
    _create_class(CategorizationEdit, [
        {
            key: "UNSAFE_componentWillReceiveProps",
            value: function UNSAFE_componentWillReceiveProps(nextProps) {
                this.presenter.UNSAFE_componentWillReceiveProps(nextProps);
                var _nextProps_interactionData = nextProps.interactionData, categories = _nextProps_interactionData.categories, categoryOrder = _nextProps_interactionData.categoryOrder;
                if (!isEqual(this.props.interactionData.categories, categories) || !isEqual(this.props.interactionData.categoryOrder, categoryOrder)) {
                    this.setState({
                        sortedCategories: getSortedCategories(categories, categoryOrder)
                    });
                }
            }
        },
        {
            // ===========
            //   RENDER
            // ===========
            key: "renderDistractor",
            value: function renderDistractor(distractor, focusOnMount) {
                var _this = this;
                return /*#__PURE__*/ jsx(ChoiceInput, {
                    key: distractor.id,
                    id: distractor.id,
                    disabledFields: this.props.overrideEditableForRegrading ? [
                        'answerInput'
                    ] : [],
                    itemBody: distractor.itemBody,
                    errors: this.getDistractorErrors(distractor.id),
                    onInputChange: this.presenter.onDistractorInputChange,
                    onModalClose: this.props.onModalClose,
                    onModalOpen: this.props.onModalOpen,
                    onRemoveChoice: function() {
                        return _this.handleRemoveDistractor(distractor.id);
                    },
                    ref: function(node) {
                        _this.distractorRefs[distractor.id] = node;
                    },
                    renderLabel: t('Distractor'),
                    isRequired: true,
                    focusOnMount: focusOnMount,
                    shouldRenderRemoveChoice: !this.props.overrideEditableForRegrading,
                    noRCE: true,
                    notifyScreenreader: this.props.notifyScreenreader,
                    screenReaderText: t('Additional Distractor {itemBody}', {
                        itemBody: striptags(distractor.itemBody)
                    })
                });
            }
        },
        {
            key: "renderDistractors",
            value: function renderDistractors(distractors) {
                var _this = this;
                return distractors.map(function(distractor, i, source) {
                    var focusOnMount = i + 1 === source.length && !distractor.itemBody;
                    return /*#__PURE__*/ jsx(Flex.Item, {
                        key: "".concat(distractor.id, "-i"),
                        overflowY: "visible"
                    }, _this.renderDistractor(distractor, focusOnMount));
                });
            }
        },
        {
            key: "renderDistractorSection",
            value: function renderDistractorSection() {
                var _this = this;
                var distractors = this.getViewDistractors();
                return /*#__PURE__*/ jsx(Flex, {
                    direction: "column",
                    gap: "small",
                    className: "distractorsContainer",
                    padding: "x-small 0 0 0"
                }, /*#__PURE__*/ jsx(Text, {
                    color: "primary"
                }, t('Additional Distractors')), /*#__PURE__*/ jsx(Flex, {
                    direction: "column",
                    gap: "small"
                }, distractors.map(function(distractor, i, source) {
                    var focusOnMount = i + 1 === source.length && !distractor.itemBody;
                    return _this.renderDistractor(distractor, focusOnMount);
                })), !this.props.overrideEditableForRegrading && /*#__PURE__*/ jsx(Flex.Item, {
                    overflowY: "visible"
                }, /*#__PURE__*/ jsx(Footer, {
                    onCreateChoice: this.handleCreateDistractor,
                    buttonText: t('Distractor'),
                    screenReaderText: t('Add Distractor'),
                    notifyScreenreader: this.props.notifyScreenreader,
                    automationData: "add-categorization-distractor-button"
                })));
            }
        },
        {
            key: "renderOptionsDescription",
            value: function renderOptionsDescription() {
                return /*#__PURE__*/ jsx(ScreenReaderContent, null, t('Categorization options'));
            }
        },
        {
            key: "render",
            value: function render() {
                var _this = this;
                this.distractorRefs = {};
                return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(QuestionContainer, {
                    disabled: this.props.overrideEditableForRegrading,
                    enableRichContentEditor: this.props.enableRichContentEditor,
                    itemBody: this.props.itemBody,
                    onDescriptionChange: this.handleDescriptionChange,
                    onModalClose: this.props.onModalClose,
                    onModalOpen: this.props.onModalOpen,
                    openImportModal: this.props.openImportModal,
                    stemErrors: this.props.getErrors('itemBody'),
                    textareaRef: this.handleStemRef
                }, /*#__PURE__*/ jsx(CategoryForm, {
                    categoriesErrors: this.props.getErrors('scoringData.value.$errors'),
                    // These error callbacks are passed in as new functions, to force
                    // the component to re-render when errors change. Not ideal - we
                    // should be passing the errors in directly
                    getCategoryErrors: function(categoryId) {
                        return _this.getCategoryErrors(categoryId);
                    },
                    distractorErrors: function(distractorId) {
                        return _this.getDistractorErrors(distractorId);
                    },
                    categoryScoringData: this.getAnswerIds,
                    distractors: this.props.interactionData.distractors,
                    disabled: this.props.overrideEditableForRegrading,
                    sortedCategories: this.state.sortedCategories,
                    notifyScreenreader: this.props.notifyScreenreader,
                    onCategoryInputChange: this.presenter.onCategoryInputChange,
                    onCreateAnswer: this.presenter.onCreateAnswer,
                    onCreateCategory: this.presenter.onCreateCategory,
                    onDistractorInputChange: this.presenter.onDistractorInputChange,
                    onModalClose: this.props.onModalClose,
                    onModalOpen: this.props.onModalOpen,
                    onRemoveAnswer: this.handleRemoveAnswer,
                    onRemoveCategory: this.handleRemoveCategory,
                    ref: this.handleCategoryRef
                }), this.renderDistractorSection()), /*#__PURE__*/ jsx(QuestionSettingsContainer, {
                    additionalOptions: this.props.additionalOptions
                }, this.props.showCalculatorOption && /*#__PURE__*/ jsx(QuestionSettingsPanel, {
                    label: t('Options'),
                    defaultExpanded: true
                }, /*#__PURE__*/ jsx(FormFieldGroup, {
                    rowSpacing: "small",
                    description: this.renderOptionsDescription()
                }, /*#__PURE__*/ jsx(CalculatorOptionWithOqaatAlert, {
                    disabled: this.props.overrideEditableForRegrading,
                    calculatorValue: this.props.calculatorType,
                    onCalculatorTypeChange: this.handleCalculatorTypeChange,
                    oqaatChecked: this.props.oneQuestionAtATime,
                    onOqaatChange: this.props.setOneQuestionAtATime
                })))));
            }
        }
    ]);
    return CategorizationEdit;
}(Component);
_define_property(CategorizationEdit, "displayName", 'CategorizationEdit');
_define_property(CategorizationEdit, "componentId", "Quizzes".concat(CategorizationEdit.displayName));
_define_property(CategorizationEdit, "interactionType", CategorizationInteractionType);
_define_property(CategorizationEdit, "propTypes", _object_spread_props(_object_spread({
    additionalOptions: QuestionSettingsContainer.propTypes.additionalOptions,
    calculatorType: PropTypes.string,
    changeItemState: PropTypes.func,
    enableRichContentEditor: PropTypes.bool,
    errors: PropTypes.shape({
        itemBody: PropTypes.arrayOf(PropTypes.string),
        interactionData: PropTypes.shape({
            distractors: PropTypes.objectOf(PropTypes.shape({
                itemBody: PropTypes.arrayOf(PropTypes.string)
            })),
            categories: PropTypes.objectOf(PropTypes.shape({
                itemBody: PropTypes.arrayOf(PropTypes.string)
            }))
        }),
        scoringData: PropTypes.shape({
            value: PropTypes.shape({
                $errors: PropTypes.arrayOf(PropTypes.string)
            })
        })
    }),
    interactionData: PropTypes.shape({
        categoryOrder: PropTypes.arrayOf(PropTypes.string),
        categories: PropTypes.objectOf(PropTypes.shape({
            id: PropTypes.string,
            itemBody: PropTypes.string
        })),
        distractors: PropTypes.objectOf(PropTypes.shape({
            id: PropTypes.string,
            itemBody: PropTypes.string
        }))
    }).isRequired,
    itemBody: PropTypes.string,
    notifyScreenreader: PropTypes.func.isRequired,
    onModalClose: PropTypes.func,
    onModalOpen: PropTypes.func,
    oneQuestionAtATime: PropTypes.bool,
    openImportModal: PropTypes.func.isRequired,
    overrideEditableForRegrading: PropTypes.bool,
    scoringData: PropTypes.shape({
        value: PropTypes.arrayOf(PropTypes.shape({
            id: PropTypes.string
        }))
    }).isRequired,
    setOneQuestionAtATime: PropTypes.func,
    newId: PropTypes.func
}, withEditTools.injectedProps), {
    styles: PropTypes.object,
    showCalculatorOption: PropTypes.bool
}));
_define_property(CategorizationEdit, "defaultProps", {
    calculatorType: 'none',
    enableRichContentEditor: true,
    oneQuestionAtATime: false,
    overrideEditableForRegrading: false,
    newId: uuid,
    setOneQuestionAtATime: Function.prototype,
    additionalOptions: void 0,
    changeItemState: void 0,
    errors: void 0,
    itemBody: void 0,
    onModalClose: void 0,
    onModalOpen: void 0,
    showCalculatorOption: true
});
export { CategorizationEdit as default };
CategorizationEdit = _ts_decorate([
    withEditTools
], CategorizationEdit);