@instructure/quiz-interactions/es/components/hotspot/Take/index.js

A React UI component Library for quiz interaction types.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = _getPrototypeOf(derived);
  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import isEmpty from 'lodash/fp/isEmpty';
import { ItemBodyWrapper } from '@instructure/quiz-rce';
import { Text } from '@instructure/ui-text';
import { Button, CloseButton, CondensedButton, IconButton } from '@instructure/ui-buttons';
import { Flex } from '@instructure/quiz-common';
import { IconKeyboardShortcutsLine } from '@instructure/ui-icons';
import { Modal } from '@instructure/ui-modal';
import { Heading } from '@instructure/ui-heading';
import { Table } from '@instructure/ui-table';
import TargetContainer from '../common/TargetContainer';
import t from '@instructure/quiz-i18n/es/format-message';
import Target from './Target';

/**
 ---
category: HotSpot
---

  HotSpot Take component

   ```jsx_example
   function Example (props) {
    const exampleProps = {
      itemBody: 'Which of these players is David Ferrer',
      interactionData: {
        imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg'
      },
      userResponse: {
        value: {
          x: 0.3,
          y: 0.3
        }
      }
    }

    return (
      <HotSpotTake {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <TakeStateProvider>
      <Example />
    </TakeStateProvider>
  </SettingsSwitcher>
  ```
**/
var HotSpotTake = /*#__PURE__*/function (_Component) {
  function HotSpotTake(props) {
    var _this2;
    _classCallCheck(this, HotSpotTake);
    _this2 = _callSuper(this, HotSpotTake, [props]);
    _defineProperty(_this2, "canAddPoint", function () {
      var _this2$state = _this2.state,
        selectedCoordinates = _this2$state.selectedCoordinates,
        keyboardCoordinates = _this2$state.keyboardCoordinates;
      var hotspotsCount = _this2.props.interactionData.hotspotsCount;
      var totalSelections = selectedCoordinates.length + (keyboardCoordinates ? 1 : 0);
      return totalSelections < (hotspotsCount || 1);
    });
    _defineProperty(_this2, "saveSelectedPoint", function () {
      var _this2$state2 = _this2.state,
        selectedCoordinates = _this2$state2.selectedCoordinates,
        keyboardCoordinates = _this2$state2.keyboardCoordinates;
      var _this2$props = _this2.props,
        multipleHotSpotEnabled = _this2$props.multipleHotSpotEnabled,
        hotspotsCount = _this2$props.interactionData.hotspotsCount;
      if (!keyboardCoordinates) return;
      var updatedCoordinates = [].concat(_toConsumableArray(selectedCoordinates), [keyboardCoordinates]);
      _this2.setState({
        selectedCoordinates: updatedCoordinates,
        keyboardCoordinates: null,
        isSelectingPoint: false
      });
      var response = !multipleHotSpotEnabled && (!hotspotsCount || hotspotsCount === 1) ? keyboardCoordinates : updatedCoordinates;
      _this2.props.handleResponseUpdate(response);
    });
    _defineProperty(_this2, "handleKeyDown", function (event) {
      var stepSize = 0.05;
      var key = event.key;
      if (!_this2.state.focusedContainer) return;
      if (_this2.isAnyInputFocused()) return;
      if (key === 's') {
        _this2.startSelectingPoint();
      } else if (key === 'd' && _this2.state.isSelectingPoint) {
        _this2.saveSelectedPoint();
      } else if (key === 'Backspace' || key === 'Delete') {
        _this2.handleResetSelections();
      } else if (_this2.isArrowKey(key) && _this2.state.keyboardCoordinates) {
        event.preventDefault();
        _this2.movePosition(key, stepSize);
      }
    });
    _defineProperty(_this2, "startSelectingPoint", function () {
      if (!_this2.canAddPoint()) return;
      _this2.setState({
        keyboardCoordinates: {
          x: 0.5,
          y: 0.5
        },
        isSelectingPoint: true
      });
    });
    _defineProperty(_this2, "isArrowKey", function (key) {
      return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key);
    });
    _defineProperty(_this2, "movePosition", function (key, stepSize) {
      var _this2$state$keyboard = _this2.state.keyboardCoordinates,
        x = _this2$state$keyboard.x,
        y = _this2$state$keyboard.y;
      var offsets = {
        ArrowUp: {
          x: x,
          y: Math.max(y - stepSize, 0)
        },
        ArrowDown: {
          x: x,
          y: Math.min(y + stepSize, 1)
        },
        ArrowLeft: {
          x: Math.max(x - stepSize, 0),
          y: y
        },
        ArrowRight: {
          x: Math.min(x + stepSize, 1),
          y: y
        }
      };
      _this2.setState({
        keyboardCoordinates: offsets[key]
      });
    });
    _defineProperty(_this2, "handleSetCoordinates", function (coordinatesArray) {
      if (!_this2.canAddPoint()) return;
      var selectedCoordinates = _this2.state.selectedCoordinates;
      var _this2$props2 = _this2.props,
        multipleHotSpotEnabled = _this2$props2.multipleHotSpotEnabled,
        hotspotsCount = _this2$props2.interactionData.hotspotsCount;
      var x = coordinatesArray[0].x / _this2.targetContainer.state.imageWidth;
      var y = coordinatesArray[0].y / _this2.targetContainer.state.imageHeight;
      var updatedCoordinates = [].concat(_toConsumableArray(selectedCoordinates), [{
        x: x,
        y: y
      }]);
      _this2.setState({
        selectedCoordinates: updatedCoordinates
      });
      var response = !multipleHotSpotEnabled && (!hotspotsCount || hotspotsCount === 1) ? {
        x: x,
        y: y
      } : updatedCoordinates;
      _this2.props.handleResponseUpdate(response);
    });
    _defineProperty(_this2, "targetContainerRef", function (node) {
      _this2.targetContainer = node;
    });
    _defineProperty(_this2, "handleResetSelections", function () {
      _this2.setState({
        selectedCoordinates: [],
        keyboardCoordinates: null
      });
      _this2.props.handleResponseUpdate([]);
    });
    _defineProperty(_this2, "handleCloseShortcutsClick", function () {
      _this2.setState({
        shortcutsModalOpen: false
      });
    });
    _defineProperty(_this2, "handleOpenShortcutsClick", function () {
      _this2.setState({
        shortcutsModalOpen: true
      });
    });
    _this2.state = {
      selectedCoordinates: [],
      keyboardCoordinates: null,
      isSelectingPoint: false,
      focusedContainer: null,
      shortcutsModalOpen: false
    };
    return _this2;
  }
  _inherits(HotSpotTake, _Component);
  return _createClass(HotSpotTake, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props$userRespo;
      window.addEventListener('keydown', this.handleKeyDown);
      var value = (_this$props$userRespo = this.props.userResponse) === null || _this$props$userRespo === void 0 ? void 0 : _this$props$userRespo.value;
      if (!isEmpty(value)) {
        this.setState({
          selectedCoordinates: Array.isArray(value) ? value : [value]
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('keydown', this.handleKeyDown);
    }
  }, {
    key: "isAnyInputFocused",
    value: function isAnyInputFocused() {
      var inputs = document.querySelectorAll('input');
      return Array.from(inputs).some(function (input) {
        return input === document.activeElement;
      });
    }
  }, {
    key: "render",
    value:
    // ===========
    //   RENDER
    // ===========

    function render() {
      var _this3 = this;
      var _this$state = this.state,
        selectedCoordinates = _this$state.selectedCoordinates,
        keyboardCoordinates = _this$state.keyboardCoordinates;
      var hotspots = selectedCoordinates.length > 0 || keyboardCoordinates ? [].concat(_toConsumableArray(selectedCoordinates.map(function (coordinate) {
        return {
          coordinates: [coordinate],
          drawingType: Target
        };
      })), _toConsumableArray(keyboardCoordinates ? [{
        coordinates: [keyboardCoordinates],
        drawingType: Target
      }] : [])) : [{
        coordinates: [{}],
        drawingType: Target
      }];
      var keyboardShortcuts = [{
        id: 'select',
        shortcut: 'S',
        action: t('Select a point')
      }, {
        id: 'save',
        shortcut: 'D',
        action: t('Save the position')
      }, {
        id: 'delete',
        shortcut: 'Backspace/Delete',
        action: t('Clear all selections')
      }, {
        id: 'move',
        shortcut: 'Arrow keys',
        action: t('Move the point')
      }];
      return /*#__PURE__*/React.createElement(ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, /*#__PURE__*/React.createElement("div", {
        className: "fs-mask"
      }, /*#__PURE__*/React.createElement(TargetContainer, {
        hotspots: hotspots,
        handleSetCoordinates: this.handleSetCoordinates,
        ref: this.targetContainerRef,
        url: this.props.interactionData.imageUrl,
        onFocus: function onFocus() {
          return _this3.setState({
            focusedContainer: _this3.targetContainer
          });
        },
        onBlur: function onBlur() {
          return _this3.setState({
            focusedContainer: null
          });
        }
      })), /*#__PURE__*/React.createElement(Flex, {
        direction: "row",
        justifyItems: "space-between",
        alignItems: "center",
        gap: "small",
        margin: "x-small 0 0"
      }, /*#__PURE__*/React.createElement(Flex.Item, null, this.state.selectedCoordinates.length > 0 && /*#__PURE__*/React.createElement(CondensedButton, {
        onClick: this.handleResetSelections,
        "data-automation": "sdk-hotspot-take-clear-selections-button"
      }, t('Clear my selection'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
        color: "secondary",
        screenReaderLabel: t('Show keyboard shortcuts'),
        withBackground: false,
        withBorder: false,
        onClick: this.handleOpenShortcutsClick
      }, /*#__PURE__*/React.createElement(IconKeyboardShortcutsLine, null)), /*#__PURE__*/React.createElement(Modal, {
        size: "medium",
        label: t('Keyboard shortcuts'),
        open: this.state.shortcutsModalOpen,
        onDismiss: this.handleCloseShortcutsClick,
        shouldCloseOnDocumentClick: true
      }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Heading, {
        level: "h2"
      }, t('Keyboard shortcuts')), /*#__PURE__*/React.createElement(CloseButton, {
        placement: "end",
        offset: "small",
        onClick: this.handleCloseShortcutsClick,
        screenReaderLabel: t('Close')
      })), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Table, {
        caption: t('Keyboard shortcuts')
      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
        id: "shortcut"
      }, t('Shortcut')), /*#__PURE__*/React.createElement(Table.ColHeader, {
        id: "action"
      }, t('Action')))), /*#__PURE__*/React.createElement(Table.Body, null, keyboardShortcuts.map(function (_ref) {
        var id = _ref.id,
          shortcut = _ref.shortcut,
          action = _ref.action;
        return /*#__PURE__*/React.createElement(Table.Row, {
          key: id
        }, /*#__PURE__*/React.createElement(Table.RowHeader, null, /*#__PURE__*/React.createElement(Text, {
          id: "shortcut-".concat(id)
        }, shortcut)), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(Text, {
          id: "action-".concat(id)
        }, action)));
      })))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
        onClick: this.handleCloseShortcutsClick
      }, t('Close')))))));
    }
  }]);
}(Component);
_defineProperty(HotSpotTake, "propTypes", {
  handleResponseUpdate: PropTypes.func.isRequired,
  interactionData: PropTypes.shape({
    imageUrl: PropTypes.string.isRequired,
    hotspotsCount: PropTypes.number
  }).isRequired,
  itemBody: PropTypes.string.isRequired,
  userResponse: PropTypes.shape({
    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
      x: PropTypes.number,
      y: PropTypes.number
    })), PropTypes.shape({
      x: PropTypes.number,
      y: PropTypes.number
    })]).isRequired
  }),
  scoringData: PropTypes.shape({
    value: PropTypes.arrayOf(PropTypes.shape({
      x: PropTypes.number,
      y: PropTypes.number
    })).isRequired
  }),
  multipleHotSpotEnabled: PropTypes.bool
});
export { HotSpotTake as default };