teamsfx-extension
Version:
Create, debug, and deploy Teams apps with Teams Toolkit
227 lines • 13.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
require("./WelcomePanel.scss");
const react_1 = require("@fluentui/react");
const Commands_1 = require("./Commands");
class WelcomePanel extends React.Component {
constructor(props) {
super(props);
this.receiveMessage = (event) => {
const message = event.data.message;
switch (message) {
default:
break;
}
};
this.showCancelLearnToolkitCard = () => {
const showCard = this.state.learnToolkit.show;
this.setState({
learnToolkit: { show: showCard, showCancel: true },
});
};
this.hideCancelLearnToolkitCard = () => {
const showCard = this.state.learnToolkit.show;
this.setState({
learnToolkit: { show: showCard, showCancel: false },
});
};
this.showCancelBuildAppCard = () => {
const showCard = this.state.buildApp.show;
this.setState({
buildApp: { show: showCard, showCancel: true },
});
};
this.hideCancelBuildAppCard = () => {
const showCard = this.state.buildApp.show;
this.setState({
buildApp: { show: showCard, showCancel: false },
});
};
this.closeLearnToolkitCard = () => {
const showAnotherCard = this.state.buildApp.show;
this.setState({
learnToolkit: { show: false, showCancel: false },
showGettingStarted: showAnotherCard,
});
};
this.closeBuildAppCard = () => {
const showAnotherCard = this.state.learnToolkit.show;
this.setState({
buildApp: { show: false, showCancel: false },
showGettingStarted: showAnotherCard,
});
};
this.openExternalLink = (link) => {
vscode.postMessage({
command: Commands_1.Commands.OpenExternalLink,
data: link,
});
};
this.cloneSampleApp = (sampleAppName, sampleAppUrl) => {
vscode.postMessage({
command: Commands_1.Commands.CloneSampleApp,
data: {
appName: sampleAppName,
appUrl: sampleAppUrl,
},
});
};
this.navigateToLearnToolkit = () => {
this.props.history.push("/learn-toolkit");
};
this.state = {
learnToolkit: { show: true, showCancel: false },
buildApp: { show: true, showCancel: false },
showGettingStarted: true,
};
}
componentDidMount() {
window.addEventListener("message", this.receiveMessage, false);
}
render() {
return (React.createElement("div", { className: "welcome-page" },
React.createElement("div", { className: "section" },
React.createElement("div", { className: "logo" },
React.createElement(react_1.Icon, { style: { color: "#8B8CC7", fontSize: 30 }, iconName: "TeamsLogo", className: "logo" })),
React.createElement("div", { className: "title" },
React.createElement("h2", null, "Microsoft Teams Toolkit"),
React.createElement("h3", { className: "text" },
"Create apps and extensions for Microsoft Teams (",
React.createElement("a", { href: "www.baidu.com" }, "v.2.0"),
")."))),
React.createElement("div", { className: "section" },
this.state.showGettingStarted && (React.createElement("div", { className: "getting-started" },
React.createElement("div", { className: "content-header" },
React.createElement("p", { className: "text" }, "Get Started")),
this.state.learnToolkit.show && (React.createElement("div", { className: "get-started-card", onMouseEnter: this.showCancelLearnToolkitCard, onMouseLeave: this.hideCancelLearnToolkitCard, onClick: this.navigateToLearnToolkit },
React.createElement(react_1.Icon, { style: { color: "#3794FF", fontSize: 24, width: 24, height: 24 }, iconName: "lightbulb", className: "icon" }),
React.createElement("div", { className: "card-body" },
React.createElement("h2", null, "Learn about the Toolkit"),
React.createElement("h3", null, "Understand the Teams Toolkit fundamentals"),
React.createElement(react_1.ProgressIndicator, { label: "3 items", barHeight: 6, styles: {
progressBar: {
borderRadius: 6,
backgroundColor: "#3794FF",
},
progressTrack: {
borderRadius: 6,
paddingTop: 0,
paddingBottom: 0,
},
itemName: {
color: "#808080",
fontSize: 11,
lineHeight: 11,
paddingBottom: 4,
paddingTop: 0,
},
itemProgress: {
borderRadius: 6,
paddingTop: 0,
paddingBottom: 0,
},
} })),
this.state.learnToolkit.showCancel && (React.createElement("div", null,
React.createElement(react_1.IconButton, { iconProps: { iconName: "Cancel" }, style: {
backgroundColor: "transparent",
color: "#FFFFFF",
width: 16,
height: 16,
margin: 0,
padding: 0,
}, onClick: this.closeLearnToolkitCard }))))),
this.state.buildApp.show && (React.createElement("div", { className: "get-started-card", onMouseEnter: this.showCancelBuildAppCard, onMouseLeave: this.hideCancelBuildAppCard },
React.createElement(react_1.Icon, { style: { color: "#3794FF", fontSize: 24, width: 24, height: 24 }, iconName: "lightbulb", className: "icon" }),
React.createElement("div", { className: "card-body" },
React.createElement("h2", null, "Build your first Teams app"),
React.createElement("h3", null, "Prepare your environment and build a Hello World from samples"),
React.createElement(react_1.ProgressIndicator, { label: "3 items", barHeight: 6, styles: {
progressBar: {
borderRadius: 6,
backgroundColor: "#3794FF",
},
progressTrack: {
borderRadius: 6,
paddingTop: 0,
paddingBottom: 0,
},
itemName: {
color: "#808080",
fontSize: 11,
lineHeight: 11,
paddingBottom: 4,
paddingTop: 0,
},
itemProgress: {
borderRadius: 6,
paddingTop: 0,
paddingBottom: 0,
},
} })),
this.state.buildApp.showCancel && (React.createElement("div", null,
React.createElement(react_1.IconButton, { iconProps: { iconName: "Cancel" }, style: {
backgroundColor: "transparent",
color: "#FFFFFF",
width: 16,
height: 16,
margin: 0,
padding: 0,
}, onClick: this.closeBuildAppCard }))))))),
React.createElement("div", { className: "content" },
React.createElement("div", { className: "content-block" },
React.createElement("div", { className: "content-header" },
React.createElement("p", { className: "text" }, "Samples"),
React.createElement("div", null,
React.createElement(react_1.ActionButton, null, "View all Samples"))),
React.createElement("div", { className: "content-item" },
React.createElement("div", null,
React.createElement(react_1.TooltipHost, { content: "This app combines all capabilities: tab, conversational bot and messaging extension. A great starting point to use the full potential of all capabilities.", tooltipProps: {
styles: {
content: { color: "#CCCCCC" },
},
}, calloutProps: {
backgroundColor: "#333333",
calloutMaxWidth: 250,
styles: {
beak: { background: "#333333" },
beakCurtain: { background: "#333333" },
calloutMain: { background: "#333333" },
},
} },
React.createElement(react_1.ActionButton, { iconProps: { iconName: "Link" }, onClick: () => {
this.cloneSampleApp("To Do List", "https://github.com/OfficeDev/TeamsFx-Samples/archive/refs/heads/main.zip");
} }, "Blank app"))),
React.createElement("p", { className: "tag" }, "Tab"),
React.createElement("p", { className: "tag" }, "TS")),
React.createElement("div", { className: "content-item" },
React.createElement("div", null,
React.createElement(react_1.ActionButton, { iconProps: { iconName: "Link" } }, "Goal Tracker"))),
React.createElement("div", { className: "content-item" },
React.createElement("div", null,
React.createElement(react_1.ActionButton, { iconProps: { iconName: "Link" } }, "Contact Group Look Up")))),
React.createElement("div", { className: "content-block" },
React.createElement("div", { className: "content-header" },
React.createElement("p", { className: "text" }, "Documentation")),
React.createElement("div", { className: "content-item" },
React.createElement("div", null,
React.createElement(react_1.ActionButton, { iconProps: { iconName: "Link" }, onClick: () => {
this.openExternalLink("https://review.docs.microsoft.com");
} }, "Teams app fundamentals"))),
React.createElement("div", { className: "content-item" },
React.createElement("div", null,
React.createElement(react_1.ActionButton, { iconProps: { iconName: "Link" } }, "Teams Toolkit Command Line Interface (CLI) reference"))),
React.createElement("div", { className: "content-item" },
React.createElement("div", null,
React.createElement(react_1.ActionButton, { iconProps: { iconName: "Link" }, onClick: () => {
this.openExternalLink("https://developer.microsoft.com/en-us/fluentui#/controls");
} }, "Basic Fluent UI components"))),
React.createElement("div", { className: "content-item" },
React.createElement("div", null,
React.createElement(react_1.ActionButton, { iconProps: { iconName: "Link" }, onClick: () => {
this.openExternalLink("https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema");
} }, "Manifest file schema for Microsoft Teams"))))))));
}
}
exports.default = WelcomePanel;
//# sourceMappingURL=WelcomePanel.js.map