modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
78 lines • 3.98 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattedText = 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");
require("../parser/IFormattedText");
const StateContext_1 = require("../contexts/StateContext");
require("../state/AppState");
exports.FormattedText = mobx_react_lite_1.observer(function FormattedText(props) {
const appState = React.useContext(StateContext_1.StateContext);
const classes = useStyles(appState.uiState.pronunciationGuideColor, props.disabled);
const elements = [];
for (let i = 0; i < props.segments.length; i++) {
elements.push(jsx_runtime_1.jsx(FormattedSegment, { classNames: classes, segment: props.segments[i] }, `segment_${i}`));
}
const className = props.className ? `${classes.text} ${props.className}` : classes.text;
return jsx_runtime_1.jsx("div", Object.assign({ className: className }, { children: elements }), void 0);
});
const FormattedSegment = mobx_react_lite_1.observer(function FormattedSegment(props) {
// I used inline styles with divs for each individual element, but that messes up kerning when punctuation
// following the text has a different format. Basic formatting tags (<b>, <u>, <i>) will keep them together.
let element = jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: props.segment.text }, void 0);
if (props.segment.bolded) {
element = jsx_runtime_1.jsx("b", { children: element }, void 0);
}
if (props.segment.emphasized) {
element = jsx_runtime_1.jsx("i", { children: element }, void 0);
}
if (props.segment.underlined) {
element = jsx_runtime_1.jsx("u", { children: element }, void 0);
}
if (props.segment.subscripted) {
element = jsx_runtime_1.jsx("sub", { children: element }, void 0);
}
if (props.segment.superscripted) {
element = jsx_runtime_1.jsx("sup", { children: element }, void 0);
}
// Obsolete, but here for back-compat with YAPP versions before 0.2.4
if (props.segment.required) {
element = (jsx_runtime_1.jsx("u", { children: jsx_runtime_1.jsx("b", { children: element }, void 0) }, void 0));
}
if (props.segment.pronunciation) {
element = jsx_runtime_1.jsx("span", Object.assign({ className: props.classNames.pronunciationGuide }, { children: element }), void 0);
}
return element;
});
const useStyles = react_1.memoizeFunction((pronunciationGuideColor, disabled) => react_1.mergeStyleSets({
text: {
display: "inline",
textDecorationSkipInk: "none",
},
pronunciationGuide: {
// Don't override the color if it's disabled; the container has that responsibility
color: disabled ? undefined : pronunciationGuideColor !== null && pronunciationGuideColor !== void 0 ? pronunciationGuideColor : "#777777",
},
}));
//# sourceMappingURL=FormattedText.js.map