burdy
Version:
Open Source Headless Platform
146 lines (145 loc) • 7.62 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const react_dropzone_1 = require("react-dropzone");
const backup_context_1 = require("../context/backup.context");
const snackbar_1 = require("../../../context/snackbar");
const useStyles = (0, react_1.makeStyles)((theme) => {
const primary = (0, react_1.cssColor)(theme.palette.themePrimary);
return {
zone: {
position: 'relative',
padding: '2rem',
height: 100,
border: `1px solid ${theme.palette.themeLight}`,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center'
},
zoneDrag: {
position: 'absolute',
zIndex: 999,
top: 0,
left: 0,
right: 0,
bottom: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 0,
background: `rgba(${primary.r}, ${primary.g}, ${primary.b}, 0.04)`,
border: `2px dashed ${theme.palette.themePrimary}`,
color: theme.palette.white,
pointerEvents: 'none'
}
};
});
const accept = 'zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed';
const BackupImportDialog = (props) => {
const { isOpen, onDismiss } = props;
const styles = useStyles();
const snackbar = (0, snackbar_1.useSnackbar)();
const fileInput = (0, react_2.useRef)(null);
const { upload } = (0, backup_context_1.useBackups)();
const [file, setFile] = (0, react_2.useState)(null);
const [drag, setDrag] = (0, react_2.useState)(false);
const onDrop = (acceptedFiles) => __awaiter(void 0, void 0, void 0, function* () {
var _a;
setDrag(false);
if (accept.split(',').indexOf((_a = acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles[0]) === null || _a === void 0 ? void 0 : _a.type) === -1)
return;
setFile(acceptedFiles === null || acceptedFiles === void 0 ? void 0 : acceptedFiles[0]);
});
const onDragEnter = (0, react_2.useCallback)(() => {
setDrag(true);
}, []);
const onDragLeave = (0, react_2.useCallback)(() => {
setDrag(false);
}, []);
const dropzone = (0, react_dropzone_1.useDropzone)({
noDragEventsBubbling: true,
onDragEnter,
onDragLeave,
onDrop
});
(0, react_2.useEffect)(() => {
if (upload === null || upload === void 0 ? void 0 : upload.result) {
snackbar.openSnackbar({
duration: 1000,
messageBarType: react_1.MessageBarType.success,
message: 'Backup imported.'
});
onDismiss();
}
}, [upload === null || upload === void 0 ? void 0 : upload.result]);
(0, react_2.useEffect)(() => {
if (isOpen) {
upload.reset();
setFile(null);
}
}, [isOpen]);
const handleImportFile = (event) => __awaiter(void 0, void 0, void 0, function* () {
var _b;
const files = (_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.files;
setFile(files === null || files === void 0 ? void 0 : files[0]);
});
return (react_2.default.createElement(react_1.Dialog, { hidden: !isOpen, onDismiss: () => onDismiss && onDismiss(), dialogContentProps: {
type: react_1.DialogType.normal,
title: 'Import Backup'
}, modalProps: {
styles: { main: { maxWidth: 450 } }
} },
(upload === null || upload === void 0 ? void 0 : upload.error) && (react_2.default.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.error, isMultiline: false, onDismiss: () => upload.reset(), dismissButtonAriaLabel: 'Close' }, "Upload failed")),
react_2.default.createElement("form", null,
react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 10 } },
react_2.default.createElement("input", { hidden: true, type: 'file', accept: accept, ref: fileInput, onChange: handleImportFile, onClick: (event) => {
event.target.value = null;
} }),
file && (react_2.default.createElement("div", { className: 'chip chip--actionable' },
react_2.default.createElement("div", { className: 'content' }, file === null || file === void 0 ? void 0 : file.name),
react_2.default.createElement(react_1.IconButton, { onClick: () => setFile(null), iconProps: { iconName: 'Cancel' } }))),
!file && (react_2.default.createElement("div", Object.assign({}, dropzone.getRootProps(), { className: styles.zone, "data-name": 'dropzone' }, props),
drag && react_2.default.createElement("div", { className: styles.zoneDrag }),
react_2.default.createElement("div", { onClick: () => {
var _a, _b;
(_b = (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a);
} }, "Drag and Drop file here or click to upload")))),
react_2.default.createElement(react_1.DialogFooter, null,
react_2.default.createElement(react_1.DefaultButton, { onClick: () => onDismiss && onDismiss(), text: 'Cancel', type: 'button' }),
react_2.default.createElement(react_1.PrimaryButton, { "data-cy": 'backups-import-submit', onClick: () => {
return upload.execute({
file
});
}, type: 'button', text: 'Import', disabled: (upload === null || upload === void 0 ? void 0 : upload.loading) || !file })))));
};
exports.default = BackupImportDialog;