@instructure/quiz-interactions/lib/util/TakeStateProvider/index.js

A React UI component Library for quiz interaction types.

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, useRef, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import pickBy from 'lodash/fp/pickBy';
import forEach from 'lodash/fp/forEach';
import Alert from '../Alert';
var dummyImg = 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg';
function clone(children, props) {
    return /*#__PURE__*/ React.cloneElement(children, pickBy(function(prop) {
        return prop !== void 0;
    }, props));
}
function TakeStateProvider(param) {
    var children = param.children;
    var _useState = _sliced_to_array(useState(undefined), 2), userResponse = _useState[0], setUserResponse = _useState[1];
    var alertRef = useRef(null);
    var uploadRequestsRef = useRef({});
    // Cleanup on unmount
    useEffect(function() {
        return function() {
            forEach(clearTimeout, uploadRequestsRef.current);
        };
    }, []);
    // generates the callback used when an upload has finished
    var makeUploadHandler = useCallback(function(id, callback) {
        return function() {
            delete uploadRequestsRef.current[id];
            callback(dummyImg);
        };
    }, []);
    var cancelMediaUpload = useCallback(function(id) {
        clearTimeout(uploadRequestsRef.current[id]);
        delete uploadRequestsRef.current[id];
    }, []);
    var handleResponseUpdate = useCallback(function(value, properties) {
        setUserResponse({
            value: value,
            properties: properties
        });
    }, []);
    var notifyScreenreader = useCallback(function(content) {
        var _alertRef_current;
        (_alertRef_current = alertRef.current) === null || _alertRef_current === void 0 ? void 0 : _alertRef_current.setAlert(content);
    }, []);
    var mediaUpload = useCallback(function(id, file, callback) {
        // Simulates the upload of file
        // calls callback when the upload has finished
        if (uploadRequestsRef.current[id] !== void 0) {
            cancelMediaUpload(id);
        }
        uploadRequestsRef.current[id] = setTimeout(makeUploadHandler(id, callback), 2000 + Math.random() * 2000);
    }, [
        cancelMediaUpload,
        makeUploadHandler
    ]);
    return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Alert, {
        ref: alertRef
    }), clone(children, {
        notifyScreenreader: notifyScreenreader,
        userResponse: userResponse,
        handleResponseUpdate: handleResponseUpdate,
        cancelMediaUpload: cancelMediaUpload,
        mediaUpload: mediaUpload
    }));
}
TakeStateProvider.propTypes = {
    children: PropTypes.node.isRequired
};
export default TakeStateProvider;