teamsfx-extension/out/src/controls/LearnToolkit.js

Create, debug, and deploy Teams apps with Teams Toolkit

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_1 = require("@fluentui/react");
require("./LearnToolkit.scss");
const Commands_1 = require("./Commands");
const teams_png_1 = require("../../media/teams.png");
const azure_svg_1 = require("../../media/azure.svg");
class LearnToolkit extends React.Component {
    constructor(props) {
        super(props);
        this.receiveMessage = (event) => {
            const message = event.data.message;
            switch (message) {
                default:
                    break;
            }
        };
        this.onBack = () => {
            this.props.history.go(-1);
        };
        this.onNextStep = (step) => {
            this.setState({
                currentStep: step + 1,
            });
        };
        this.onNextPage = () => { };
        this.displayCommands = () => {
            vscode.postMessage({
                command: Commands_1.Commands.DisplayCommandPalette,
                data: "Teams",
            });
        };
        this.state = {
            currentStep: 1,
        };
    }
    componentDidMount() {
        window.addEventListener("message", this.receiveMessage, false);
    }
    render() {
        return (React.createElement("div", { className: "learn-toolkit-page" },
            React.createElement("div", { className: "back" },
                React.createElement(react_1.ActionButton, { iconProps: { iconName: "ChevronLeft", styles: { root: { width: 16, height: 16 } } }, onClick: this.onBack }, "Back")),
            React.createElement("div", { className: "flex-section" },
                React.createElement("div", { className: "table-of-contents" },
                    React.createElement("div", { className: "flex-section header" },
                        React.createElement(react_1.Icon, { style: { color: "#0097FB", fontSize: 28 }, iconName: "lightbulb", className: "logo" }),
                        React.createElement("div", { className: "title" },
                            React.createElement("h2", null, "Learn about the Toolkit"),
                            React.createElement("h3", null, "Understand the Teams Toolkit fundamentals"))),
                    React.createElement(GetStartedAction, { title: "1. What are Teams app 'Capabilities'?", content: [
                            React.createElement("a", { href: "https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/capabilities-overview" }, "Capabilities"),
                            " are the extension points for building apps on the Microsoft Teams platform.",
                        ], actionText: "Watch Video (1 min)", secondaryActionText: "Next", onSecondaryAction: () => {
                            this.onNextStep(1);
                        }, expanded: this.state.currentStep === 1 }),
                    React.createElement(GetStartedAction, { title: "2. How can I use the Command Palette?", content: "Discover Teams Toolkit actions in VS Code Command Palette.", actionText: "Display all commands", onAction: this.displayCommands, secondaryActionText: "Next", onSecondaryAction: () => {
                            this.onNextStep(2);
                        }, expanded: this.state.currentStep === 2, tip: "Tip: Open Command Palette and type 'Teams' to find all relevant commands." }),
                    React.createElement(GetStartedAction, { title: "3. How can I use the Command Line Interface(CLI)?", content: "Increase efficiency with the Teams Toolkit CLI", actionText: "Display all CLI commands", secondaryActionText: "Next page", onSecondaryAction: this.onNextPage, expanded: this.state.currentStep === 3, tip: "Tip: Open Terminal (^') and type 'Teams --help' to see all CLI commands" })),
                React.createElement("div", { className: "stage" },
                    this.state.currentStep === 1 && React.createElement(react_1.Image, { src: teams_png_1.default }),
                    this.state.currentStep === 2 && React.createElement(react_1.Image, { src: teams_png_1.default }),
                    this.state.currentStep === 3 && React.createElement(react_1.Image, { src: azure_svg_1.default })))));
    }
}
exports.default = LearnToolkit;
class GetStartedAction extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        if (this.props.expanded) {
            return (React.createElement("div", { className: "action-card" },
                React.createElement("div", { className: "flex-section card-line" },
                    React.createElement(react_1.Icon, { style: { color: "#3794FF", fontSize: 16 }, iconName: "lightbulb", className: "action-icon" }),
                    React.createElement("div", { className: "action-title" }, this.props.title)),
                React.createElement("div", { className: "card-line" }, this.props.content),
                React.createElement("div", { className: "left-right-align" },
                    React.createElement("div", { className: "left" },
                        React.createElement(react_1.PrimaryButton, { onClick: this.props.onAction, text: this.props.actionText })),
                    React.createElement("div", { className: "right" },
                        React.createElement(react_1.ActionButton, { onClick: this.props.onSecondaryAction, text: this.props.secondaryActionText }))),
                React.createElement("div", { className: "tip" }, this.props.tip)));
        }
        else {
            return (React.createElement("div", { className: "collapse-action-card" },
                React.createElement("div", { className: "flex-section" },
                    React.createElement(react_1.Icon, { style: { color: "##3794FF", fontSize: 16 }, iconName: "lightbulb", className: "action-icon" }),
                    React.createElement("div", { className: "action-title" }, this.props.title))));
        }
    }
}
//# sourceMappingURL=LearnToolkit.js.map