"use strict";
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/es.weak-map.js");
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.object.get-own-property-descriptor.js");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("core-js/modules/es.function.name.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.regexp.to-string.js");
var bootstrap = _interopRequireWildcard(require("react-bootstrap"));
var _react = _interopRequireDefault(require("react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
* Copyright (C) 2016 Max Prettyjohns
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/
var Card = bootstrap.Card,
Form = bootstrap.Form;
var useState = _react.default.useState,
useCallback = _react.default.useCallback;
/**
* The Achievement interface, defining the properties of an achievement.
* @typedef
* @property {string} name - The name of the achievement.
* @property {string} badgeUrl - The source URL of the achievement's badge image.
* @property {number} id - The ID of the achievement.
*/
var blankBadge = {
badgeUrl: '/images/blankbadge.svg',
id: null,
name: 'drag badge to set'
};
/**
* Props for DragAndDropImage component
* @typedef {Object} Props
* @property {string} name - The name of the DragAndDrop component.
* @property {Achievement} initialAchievement - The initial achievement to display in the card.
*/
/**
* A component for a drag-and-drop card that displays an achievement.
* The card displays an image of the achievement and allows the user to drag and drop a different achievement onto it.
* When a new achievement is dropped onto the card, it is displayed instead of the original achievement.
* @param {Props} props - The props object containing the following:
* @returns {JSX.Element} A React component that displays a drag-and-drop card for an achievement.
*/
function DragAndDrop(_ref) {
var name = _ref.name,
initialAchievement = _ref.initialAchievement;
var _useState = useState(initialAchievement),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
achievement = _useState2[0],
setAchievement = _useState2[1];
var handleClick = useCallback(function (event) {
event.preventDefault();
setAchievement(blankBadge);
}, []);
var handleDragOver = useCallback(function (event) {
event.preventDefault();
}, []);
var handleDrop = useCallback(function (event) {
event.preventDefault();
var data;
try {
data = JSON.parse(event.dataTransfer.getData('text'));
} catch (error) {
return;
}
setAchievement({
badgeUrl: data.src,
id: data.id,
name: data.name
});
}, [setAchievement]);
return /*#__PURE__*/_react.default.createElement(Card, {
bg: "light",
onClick: handleClick,
onDragOver: handleDragOver,
onDrop: handleDrop
}, /*#__PURE__*/_react.default.createElement(Card.Img, {
className: "mt-4",
height: 100,
src: achievement.badgeUrl,
variant: "top"
}), /*#__PURE__*/_react.default.createElement(Card.Body, {
className: "text-center"
}, /*#__PURE__*/_react.default.createElement(Form.Group, null, /*#__PURE__*/_react.default.createElement(Form.Control, {
name: name,
type: "hidden",
value: achievement.id ? achievement.id.toString() : ''
})), /*#__PURE__*/_react.default.createElement("div", {
className: "h3"
}, achievement.name)));
}
DragAndDrop.displayName = 'DragAndDrop';
DragAndDrop.defaultProps = {
initialAchievement: blankBadge
};
var _default = DragAndDrop;
exports.default = _default;
//# sourceMappingURL=drag-and-drop.js.map