sailboat-design
Version:
A simple sailboat simulator
38 lines (37 loc) • 1.78 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import classNames from 'classnames';
import Icon from '../Icon/icon';
function Draggle(props) {
var children = props.children, theme = props.theme, onFile = props.onFile;
var _a = useState(false), draggering = _a[0], setDraggering = _a[1];
var handleDrag = function (e, over) {
e.preventDefault();
setDraggering(over);
};
var handleDrop = function (e) {
e.preventDefault();
setDraggering(false);
onFile(e.dataTransfer.files);
};
var classes = classNames('sailboat-upload-dragger', "color--".concat(theme), {
'upload-draggering': draggering
});
return (_jsx("div", __assign({ className: classes, onDragOver: function (e) {
handleDrag(e, true);
}, onDragLeave: function (e) {
handleDrag(e, false);
}, onDrop: handleDrop }, { children: children ? (children) : (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "sailboat-upload-dragger_icon" }, { children: _jsx(Icon, { icon: "upload", size: "5x", theme: draggering ? theme : 'secondary' }) })), _jsx("div", __assign({ className: "sailboat-upload-dragger_text" }, { children: 'Drag file to this area to upload' }))] })) })));
}
export default Draggle;