modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
178 lines • 9.64 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 });
exports.ExportToSheetsDialog = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const mobx_react_lite_1 = require("mobx-react-lite");
const react_1 = require("@fluentui/react");
const Sheets = __importStar(require("../../sheets/Sheets"));
require("../../state/UIState");
require("../../state/IPendingSheet");
const SheetState_1 = require("../../state/SheetState");
require("../../state/AppState");
const StateContext_1 = require("../../contexts/StateContext");
const RoundSelector_1 = require("../RoundSelector");
const ModalVisibilityStatus_1 = require("../../state/ModalVisibilityStatus");
const ModalDialog_1 = require("./ModalDialog");
const warningIconStyles = {
root: {
marginRight: 5,
},
};
const typeOptions = [
{
key: SheetState_1.SheetType.TJSheets,
text: "TJ Sheets",
},
{
key: SheetState_1.SheetType.UCSDSheets,
text: "UCSD Sheets",
},
];
const sheetsPrefix = "https://docs.google.com/spreadsheets/d/";
const settingsStackTokens = { childrenGap: 10 };
// TODO: Look into making a DefaultDialog, which handles the footers and default props
exports.ExportToSheetsDialog = mobx_react_lite_1.observer(function ExportToSheetsDialog() {
var _a, _b, _c;
const appState = React.useContext(StateContext_1.StateContext);
const uiState = appState.uiState;
const cancelHandler = React.useCallback(() => onClose(appState), [appState]);
let footer;
if (((_a = uiState.sheetsState) === null || _a === void 0 ? void 0 : _a.exportState) == undefined ||
uiState.sheetsState.exportState === SheetState_1.ExportState.OverwritePrompt) {
// Can't use React.useCallback since it only appears in the first stage
const exportHandler = () => onExport(appState);
const exportDisabled = ((_c = (_b = uiState.pendingSheet) === null || _b === void 0 ? void 0 : _b.sheetId) !== null && _c !== void 0 ? _c : "") === "";
const exportText = uiState.sheetsState.exportState === SheetState_1.ExportState.OverwritePrompt ? "Continue" : "Export";
footer = (jsx_runtime_1.jsxs(react_1.DialogFooter, { children: [jsx_runtime_1.jsx(react_1.DefaultButton, { text: "Cancel", onClick: cancelHandler, autoFocus: false }, void 0),
jsx_runtime_1.jsx(react_1.PrimaryButton, { text: exportText, onClick: exportHandler, disabled: exportDisabled, autoFocus: false }, void 0)] }, void 0));
}
else {
const text = uiState.sheetsState.exportState === SheetState_1.ExportState.CheckingOvewrite ||
uiState.sheetsState.exportState === SheetState_1.ExportState.Exporting
? "Cancel"
: "Close";
footer = (jsx_runtime_1.jsx(react_1.DialogFooter, { children: jsx_runtime_1.jsx(react_1.PrimaryButton, { text: text, onClick: cancelHandler }, void 0) }, void 0));
}
return (jsx_runtime_1.jsxs(ModalDialog_1.ModalDialog, Object.assign({ title: "Export to Sheets", visibilityStatus: ModalVisibilityStatus_1.ModalVisibilityStatus.ExportToSheets, maxWidth: "40vw", onDismiss: cancelHandler }, { children: [jsx_runtime_1.jsx(ExportSettingsDialogBody, {}, void 0), footer] }), void 0));
});
const ExportSettingsDialogBody = mobx_react_lite_1.observer(function ExportSettingsDialogBody() {
var _a, _b, _c;
const appState = React.useContext(StateContext_1.StateContext);
const uiState = appState.uiState;
const sheetsUrlChangeHandler = React.useCallback((ev, newValue) => {
const sheetsId = Sheets.getSheetsId(newValue);
if (sheetsId != undefined) {
uiState.updatePendingSheetId(sheetsId);
}
else {
uiState.updatePendingSheetId("");
}
}, [uiState]);
const typeChangeHandler = React.useCallback((ev, option) => {
if (option == undefined) {
return;
}
// The keys are always SheetType values
appState.uiState.sheetsState.setSheetType(option.key);
}, [appState]);
const sheet = uiState.pendingSheet;
if (sheet === undefined) {
return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
}
const selectedType = (_a = uiState.sheetsState.sheetType) !== null && _a !== void 0 ? _a : SheetState_1.SheetType.TJSheets;
const roundNumber = (_b = sheet.roundNumber) !== null && _b !== void 0 ? _b : 1;
let warningIconName;
switch (uiState.sheetsState.exportState) {
case SheetState_1.ExportState.OverwritePrompt:
warningIconName = "Warning";
break;
case SheetState_1.ExportState.Error:
warningIconName = "Error";
break;
default:
warningIconName = undefined;
break;
}
const warningIcon = warningIconName != undefined && (jsx_runtime_1.jsx(react_1.Icon, { iconName: warningIconName, styles: warningIconStyles }, void 0));
const status = (_c = uiState.sheetsState.exportStatus) === null || _c === void 0 ? void 0 : _c.status;
const controlsDisabled = uiState.sheetsState.exportState != undefined;
// It would be great to make the TextField wider, but that requires some changes to the dialog width that
// Fluent UI hates to do
return (jsx_runtime_1.jsxs(react_1.Stack, Object.assign({ tokens: settingsStackTokens }, { children: [jsx_runtime_1.jsx(react_1.StackItem, { children: jsx_runtime_1.jsx(react_1.TextField, { label: "SheetsUrl", defaultValue: sheet.sheetId == undefined || sheet.sheetId.length === 0
? ""
: `${sheetsPrefix}${sheet.sheetId}`, disabled: controlsDisabled, required: true, onChange: sheetsUrlChangeHandler, onGetErrorMessage: validateSheetsUrl, validateOnFocusOut: true, validateOnLoad: false, autoFocus: true }, void 0) }, void 0),
jsx_runtime_1.jsx(react_1.StackItem, { children: jsx_runtime_1.jsx(react_1.Dropdown, { label: "Type", disabled: controlsDisabled, options: typeOptions, selectedKey: selectedType, onChange: typeChangeHandler }, void 0) }, void 0),
jsx_runtime_1.jsx(react_1.StackItem, { children: jsx_runtime_1.jsx(RoundSelector_1.RoundSelector, { roundNumber: roundNumber, disabled: controlsDisabled, onRoundNumberChange: (newValue) => uiState.updatePendingSheetRoundNumber(newValue) }, void 0) }, void 0),
jsx_runtime_1.jsx(react_1.StackItem, { children: jsx_runtime_1.jsxs(react_1.Label, { children: [warningIcon, status] }, void 0) }, void 0)] }), void 0));
});
function validateSheetsUrl(url) {
// TODO: Move to Sheets.ts?
if (url == undefined) {
return undefined;
}
else if (url.trim() === "") {
return "URL is required";
}
url = url.trim();
if (!url.startsWith(sheetsPrefix)) {
return `The URL must start with \"${sheetsPrefix}\"`;
}
return undefined;
}
function onExport(appState) {
return __awaiter(this, void 0, void 0, function* () {
const uiState = appState.uiState;
if (uiState.pendingSheet == undefined) {
hideDialog(appState);
return;
}
if (uiState.pendingSheet.roundNumber == undefined ||
uiState.pendingSheet.sheetId == undefined ||
uiState.pendingSheet.sheetId.trim() === "") {
return;
}
uiState.sheetsState.setRoundNumber(uiState.pendingSheet.roundNumber);
uiState.sheetsState.setSheetId(uiState.pendingSheet.sheetId);
yield Sheets.exportToSheet(appState);
// We've exported, so we don't have more updates
appState.game.markUpdateComplete();
});
}
function onClose(appState) {
hideDialog(appState);
}
function hideDialog(appState) {
const uiState = appState.uiState;
uiState.resetPendingSheet();
uiState.sheetsState.clearExportStatus();
}
//# sourceMappingURL=ExportToSheetsDialog.js.map