modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
59 lines • 3.01 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilePicker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const mobx_react_lite_1 = require("mobx-react-lite");
const react_2 = require("@fluentui/react");
const fileDraggedOverStyle = {
root: {
border: "1px dotted gray",
},
};
exports.FilePicker = mobx_react_lite_1.observer(function FilePicker(props) {
// Not worth keeping this state in UIState, so just track it here. This should only be used for styling
const [fileDraggedOver, setFileDraggedOver] = react_1.default.useState(false);
const fileInput = react_1.default.useRef(null);
const changeHandler = react_1.default.useCallback((event) => {
var _a;
const files = (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.files;
if (files == undefined || files.length === 0) {
return;
}
props.onChange(event, files[0]);
}, [props]);
const dropHandler = react_1.default.useCallback((event) => {
setFileDraggedOver(false);
if (event.dataTransfer.items.length === 0) {
return;
}
const file = event.dataTransfer.items[0].getAsFile();
if (file == undefined) {
return;
}
event.preventDefault();
props.onChange(event, file);
}, [props]);
const classNames = getClassNames();
const label = props.label != undefined && (jsx_runtime_1.jsx(react_2.Label, Object.assign({ required: props.required }, { children: props.label }), void 0));
// The border can make the border a little jumpy. A low priority issue for now.
const stackStyles = fileDraggedOver ? fileDraggedOverStyle : undefined;
return (jsx_runtime_1.jsxs(react_2.Stack, Object.assign({ onDrop: dropHandler, onDragOver: (ev) => {
setFileDraggedOver(true);
ev.preventDefault();
}, onDragLeave: () => setFileDraggedOver(false), styles: stackStyles }, { children: [jsx_runtime_1.jsx(react_2.StackItem, { children: label }, void 0),
jsx_runtime_1.jsxs(react_2.StackItem, { children: [jsx_runtime_1.jsx("input", { type: "file", className: classNames.fileInput, accept: props.accept, ref: fileInput, onChange: changeHandler }, void 0),
jsx_runtime_1.jsx(react_2.DefaultButton, { text: props.buttonText, onClick: () => {
var _a;
(_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
} }, void 0), props.children] }, void 0)] }), void 0));
});
const getClassNames = () => react_2.mergeStyleSets({
fileInput: {
display: "none",
},
});
//# sourceMappingURL=FilePicker.js.map