modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
125 lines • 6.17 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CycleChooser = 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 Button_1 = require("@fluentui/react/lib/Button");
const TextField_1 = require("@fluentui/react/lib/TextField");
const react_hooks_1 = require("@fluentui/react-hooks");
require("../state/UIState");
require("../state/AppState");
const react_2 = require("@fluentui/react");
const StateContext_1 = require("../contexts/StateContext");
const StatusDisplayType_1 = require("../state/StatusDisplayType");
const ReturnKeyCode = 13;
const questionNumberTextStyle = {
root: {
display: "inline-flex",
width: 40,
margin: "0 10px",
},
field: {
textAlign: "center",
},
};
const previousButtonStyle = {
root: {
marginRight: 10,
},
};
const questionLableStyle = {
root: {
display: "inline-flex",
},
};
const nextButtonStyle = {
root: {
marginLeft: 10,
},
};
exports.CycleChooser = mobx_react_lite_1.observer(function CycleChooser() {
const appState = react_1.default.useContext(StateContext_1.StateContext);
const onPreviousClickHandler = react_1.default.useCallback(() => onPreviousClick(appState), [appState]);
const onNextClickHandler = react_1.default.useCallback(() => onNextClick(appState), [appState]);
const onProposedQuestionNumberBlurHandler = react_1.default.useCallback((ev) => onProposedQuestionNumberBlur(ev, appState), [
appState,
]);
const onProposedQuestionNumberKeyDownHandler = react_1.default.useCallback((ev) => onProposedQuestionNumberKeyDown(ev, appState), [appState]);
const onQuestionLabelDoubleClickHandler = react_1.default.useCallback(() => onQuestionLabelDoubleClick(appState), [appState]);
const uiState = appState.uiState;
const previousButtonTooltipId = react_hooks_1.useId();
const previousButton = (jsx_runtime_1.jsx(react_2.TooltipHost, Object.assign({ "aria-describedby": previousButtonTooltipId, content: "Previous (B or P)", id: previousButtonTooltipId }, { children: jsx_runtime_1.jsx(Button_1.DefaultButton, Object.assign({ onClick: onPreviousClickHandler, disabled: uiState.cycleIndex === 0, styles: previousButtonStyle }, { children: "\u2190 Previous" }), "previousButton") }), void 0));
let nextButton;
let nextButtonTooltip;
const doesNextButtonExport = shouldNextButtonExport(appState);
if (doesNextButtonExport) {
nextButtonTooltip = "Export";
nextButton = (jsx_runtime_1.jsx(Button_1.PrimaryButton, Object.assign({ "aria-describedby": nextButtonTooltip, onClick: onNextClickHandler, styles: nextButtonStyle }, { children: "Export..." }), "nextButton"));
}
else {
nextButtonTooltip = "Next (N)";
nextButton = (jsx_runtime_1.jsx(Button_1.DefaultButton, Object.assign({ "aria-describedby": nextButtonTooltip, onClick: onNextClickHandler, styles: nextButtonStyle }, { children: "Next \u2192" }), "nextButton"));
}
const nextButtonTooltipId = react_hooks_1.useId();
const nextButtonWrapper = (jsx_runtime_1.jsx(react_2.TooltipHost, Object.assign({ content: nextButtonTooltip, id: nextButtonTooltipId }, { children: nextButton }), void 0));
const questionNumber = uiState.cycleIndex + 1;
let questionNumberViewer = null;
if (uiState.isEditingCycleIndex) {
questionNumberViewer = (jsx_runtime_1.jsx(TextField_1.TextField, { type: "text", defaultValue: questionNumber.toString(), onBlur: onProposedQuestionNumberBlurHandler, onKeyDown: onProposedQuestionNumberKeyDownHandler, tabIndex: 0, autoFocus: true, styles: questionNumberTextStyle }, void 0));
}
else {
questionNumberViewer = (jsx_runtime_1.jsxs(react_2.Label, Object.assign({ styles: questionLableStyle, onDoubleClick: onQuestionLabelDoubleClickHandler }, { children: ["Question #", questionNumber] }), "questionViewer"));
}
return (jsx_runtime_1.jsxs("div", { children: [previousButton, questionNumberViewer, nextButtonWrapper] }, void 0));
});
function shouldNextButtonExport(appState) {
const nextCycleIndex = appState.uiState.cycleIndex + 1;
return nextCycleIndex >= appState.game.playableCycles.length;
}
function onProposedQuestionNumberBlur(event, appState) {
commitCycleIndex(appState, event.currentTarget.value);
}
function onProposedQuestionNumberKeyDown(event, appState) {
if (event.which == ReturnKeyCode) {
commitCycleIndex(appState, event.currentTarget.value);
}
}
function onNextClick(appState) {
if (shouldNextButtonExport(appState)) {
// If they use Sheets, show the Export Sheets dialog. Otherwise, show the Export JSON dialog
if (appState.uiState.customExportOptions != undefined) {
appState.handleCustomExport(StatusDisplayType_1.StatusDisplayType.MessageDialog, "NextButton");
}
else if (appState.uiState.sheetsState.sheetId != undefined) {
appState.uiState.createPendingSheet();
}
else {
appState.uiState.dialogState.showExportToJsonDialog();
}
}
else {
appState.uiState.nextCycle();
}
}
function onPreviousClick(appState) {
appState.uiState.previousCycle();
}
function onQuestionLabelDoubleClick(appState) {
// The question number is one higher than the cycle index
appState.uiState.setIsEditingCycleIndex(true);
}
function commitCycleIndex(appState, value) {
if (value == undefined) {
return;
}
const propsedCycleIndex = parseInt(value, 10);
if (propsedCycleIndex >= 1 && propsedCycleIndex <= appState.game.packet.tossups.length) {
appState.uiState.setCycleIndex(propsedCycleIndex - 1);
}
appState.uiState.setIsEditingCycleIndex(false);
}
//# sourceMappingURL=CycleChooser.js.map