modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
72 lines • 3.21 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.PlayerEntry = 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 Checkbox_1 = require("@fluentui/react/lib/Checkbox");
const TextField_1 = require("@fluentui/react/lib/TextField");
const react_2 = require("@fluentui/react");
require("../state/TeamState");
const CancelButton_1 = require("./CancelButton");
const playerNameStyle = {
root: {
minWidth: 80,
marginRight: 20,
},
};
const playerNameLabelStyle = {
root: {
marginRight: 20,
},
};
const starterCheckboxStyle = {
root: {
alignItems: "center",
marginRight: 5,
},
};
exports.PlayerEntry = mobx_react_lite_1.observer(function PlayerEntry(props) {
const classes = getClassNames();
const starterChangeHandler = react_1.default.useCallback((ev, checked) => {
if (checked != undefined) {
props.player.setStarterStatus(checked);
}
}, [props.player]);
let playerName;
let cancelButtonOrSpacer;
if (isEditablePlayerEntryProps(props)) {
const nameChangeHandler = (ev, newName) => {
if (newName != undefined) {
props.player.setName(newName);
}
};
const removeHandler = () => props.onRemovePlayerClick(props.player);
playerName = (jsx_runtime_1.jsx(TextField_1.TextField, { ariaLabel: "Name", onChange: nameChangeHandler, onGetErrorMessage: props.validateName, required: props.required, styles: playerNameStyle, validateOnFocusOut: true, value: props.player.name }, void 0));
cancelButtonOrSpacer = props.canRemove ? (jsx_runtime_1.jsx(CancelButton_1.CancelButton, { tooltip: "Remove", onClick: removeHandler }, void 0)) : (jsx_runtime_1.jsx("span", { className: classes.spacer }, void 0));
}
else {
playerName = jsx_runtime_1.jsx(react_2.Label, Object.assign({ styles: playerNameLabelStyle }, { children: props.player.name }), void 0);
}
const checkbox = props.canSetStarter !== false && (jsx_runtime_1.jsx(Checkbox_1.Checkbox, { label: "Starter", onChange: starterChangeHandler, styles: starterCheckboxStyle, checked: props.player.isStarter }, void 0));
return (jsx_runtime_1.jsxs("div", Object.assign({ className: classes.playerEntryContainer }, { children: [playerName, checkbox, cancelButtonOrSpacer, props.children] }), void 0));
});
function isEditablePlayerEntryProps(props) {
return props.player != undefined && props.canRemove != undefined;
}
const getClassNames = () => react_2.mergeStyleSets({
playerEntryContainer: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
margin: "5px 0",
},
spacer: {
// TODO: See if this needs to change, based on different media queries
width: 32,
},
});
//# sourceMappingURL=PlayerEntry.js.map