modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
48 lines • 2.56 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.FromRostersTeamEntry = 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 react_2 = require("@fluentui/react");
require("../state/TeamState");
const PlayerRoster_1 = require("./PlayerRoster");
exports.FromRostersTeamEntry = mobx_react_lite_1.observer(function FromRostersTeamEntry(props) {
const classes = getClassNames(props.playerListHeight);
const partChangeHandler = react_1.default.useCallback((ev, option) => {
if ((option === null || option === void 0 ? void 0 : option.text) != undefined) {
props.onTeamChange(option.text, props.players);
}
}, [props]);
if (props.playerPool.length === 0) {
return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
}
const selectedTeamName = props.players.length > 0 ? props.players[0].teamName : undefined;
const set = new Set(props.playerPool.map((player) => player.teamName));
const teamOptions = [];
for (const teamName of set.values()) {
teamOptions.push({
key: teamName,
text: teamName,
});
}
return (jsx_runtime_1.jsxs("div", Object.assign({ className: classes.teamEntry }, { children: [jsx_runtime_1.jsx(react_2.Dropdown, { label: props.teamLabel, options: teamOptions, selectedKey: selectedTeamName, onChange: partChangeHandler, errorMessage: props.teamNameErrorMessage }, void 0),
jsx_runtime_1.jsx("div", Object.assign({ className: classes.playerListContainer, "data-is-scrollable": "true" }, { children: jsx_runtime_1.jsx(PlayerRoster_1.PlayerRoster, { canSetStarter: true, players: props.players, onMovePlayerBackward: props.onMovePlayerBackward, onMovePlayerForward: props.onMovePlayerForward, onMovePlayerToIndex: props.onMovePlayerToIndex }, void 0) }), void 0)] }), void 0));
});
// TODO: Unify with ManualTeamEntry
const getClassNames = (playerListHeight) => react_2.mergeStyleSets({
playerListContainer: {
height: playerListHeight,
marginBottom: 10,
overflowY: "auto",
},
teamEntry: {
display: "flex",
flexDirection: "column",
padding: "5px 20px",
},
});
//# sourceMappingURL=FromRostersTeamEntry.js.map