@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
105 lines • 6.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MyTeams = void 0;
var tslib_1 = require("tslib");
var Text_1 = require("@fluentui/react/lib/Text");
var Stack_1 = require("@fluentui/react/lib/Stack");
var Icon_1 = require("@fluentui/react/lib/Icon");
var MessageBar_1 = require("@fluentui/react/lib/MessageBar");
var Spinner_1 = require("@fluentui/react/lib/Spinner");
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var React = tslib_1.__importStar(require("react"));
var MyTeamsStyles_1 = require("./MyTeamsStyles");
var mgt_spfx_1 = require("@microsoft/mgt-spfx");
var Team_1 = require("../MyTeams/components/Team");
var hooks_1 = require("./../../hooks");
var ShowMessage_1 = require("../MyTeams/components/ShowMessage");
var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
var MyTeamsReducer_1 = require("./MyTeamsReducer");
var EMyTeamsTypes_1 = require("./EMyTeamsTypes");
var initialState = {
myTeams: [],
message: undefined,
hasError: false,
isLoading: true,
};
var MyTeams = function (props) {
var _a = (0, MyTeamsStyles_1.getMyTeamsStyles)(props.themeVariant), stackStyles = _a.stackStyles, stackTokens = _a.stackTokens, styleClasses = _a.styleClasses, titleStyles = _a.titleStyles;
var title = props.title, webPartContext = props.webPartContext, onSelectedChannel = props.onSelectedChannel, themeVariant = props.themeVariant, enablePersonCardInteraction = props.enablePersonCardInteraction;
var _b = React.useReducer(MyTeamsReducer_1.myTeamsReducer, initialState), state = _b[0], dispatch = _b[1];
mgt_spfx_1.Providers.globalProvider = React.useMemo(function () {
if (!mgt_spfx_1.Providers.globalProvider) {
return new mgt_spfx_1.SharePointProvider(webPartContext);
}
return;
}, [props.webPartContext]);
var getMyTeams = (0, hooks_1.useTeams)(webPartContext.serviceScope).getMyTeams;
React.useEffect(function () {
(function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var _teams, _a, messageError;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_b.trys.push([0, 2, , 3]);
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_HAS_ERROR,
payload: false
});
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_IS_LOADING,
payload: true
});
return [4 /*yield*/, getMyTeams()];
case 1:
_teams = _b.sent();
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_IS_LOADING,
payload: false
});
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_MESSAGE,
payload: undefined
});
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_MYTEAMS,
payload: _teams
});
return [3 /*break*/, 3];
case 2:
_a = _b.sent();
messageError = {
isShow: true,
message: ControlStrings_1.default.MyTeamsMessageError,
messageBarType: MessageBar_1.MessageBarType.error,
};
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_IS_LOADING,
payload: false
});
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_MESSAGE,
payload: messageError
});
dispatch({
type: EMyTeamsTypes_1.EMyTeamsTypes.SET_HAS_ERROR,
payload: true
});
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); })().then(function () { }).catch(function () { });
}, []);
var hasError = state.hasError, isLoading = state.isLoading, message = state.message, myTeams = state.myTeams;
return (React.createElement(React.Fragment, null,
React.createElement(Utilities_1.Customizer, { settings: { theme: themeVariant } },
React.createElement(Stack_1.Stack, { styles: stackStyles, tokens: stackTokens },
React.createElement(Text_1.Text, { variant: "xLargePlus", styles: titleStyles }, title),
hasError ? (React.createElement(ShowMessage_1.ShowMessage, tslib_1.__assign({}, message))) : (React.createElement("div", { className: styleClasses.teamsContainer }, !(myTeams === null || myTeams === void 0 ? void 0 : myTeams.length) && !isLoading ? (React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "center", verticalAlign: "center", tokens: { childrenGap: 20 }, styles: { root: { margin: 20 } } },
React.createElement(Icon_1.FontIcon, { iconName: "TeamsLogo", style: { fontSize: 28, width: 28, height: 28 } }),
React.createElement(Text_1.Text, { variant: "mediumPlus" }, ControlStrings_1.default.MyTeamsNoTeamsMessage))) : isLoading ? (React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.medium, label: ControlStrings_1.default.MyTeamsLoadingMessage, labelPosition: "bottom" })) : (myTeams.map(function (team) {
return (React.createElement(Team_1.Team, { key: team.id, team: team, serviceScope: webPartContext.serviceScope, themeVariant: themeVariant, onSelectedChannel: onSelectedChannel, enablePersonCardInteraction: enablePersonCardInteraction }));
}))))))));
};
exports.MyTeams = MyTeams;
//# sourceMappingURL=MyTeams.js.map