@microsoft/teamsfx-react 3.0.0-alpha.46da7cd00.0 → 3.0.1-alpha.ru6q1vrv0.0

package/build/cjs/useTeamsFx.d.ts

@@ -1,42 +1,42 @@
-import { TeamsFx } from "@microsoft/teamsfx";
-import { Theme } from "@fluentui/react-components";
-export type TeamsFxContext = {
-    /**
-     * Instance of TeamsFx.
-     */
-    teamsfx?: TeamsFx;
-    /**
-     * Status of data loading.
-     */
-    loading: boolean;
-    /**
-     * Error information.
-     */
-    error: unknown;
-    /**
-     * Indicates that current environment is in Teams
-     */
-    inTeams?: boolean;
-    /**
-     * Teams theme.
-     */
-    theme: Theme;
-    /**
-     * Teams theme string.
-     */
-    themeString: string;
-    /**
-     * Teams context object.
-     */
-    context?: any;
-};
-/**
- * Initialize TeamsFx SDK with customized configuration.
- *
- * @param teamsfxConfig - custom configuration to override default ones.
- * @returns TeamsFxContext object
- *
- * @beta
- */
-export declare function useTeamsFx(teamsfxConfig?: Record<string, string>): TeamsFxContext;
+import { TeamsFx } from "@microsoft/teamsfx";
+import { Theme } from "@fluentui/react-components";
+export type TeamsFxContext = {
+    /**
+     * Instance of TeamsFx.
+     */
+    teamsfx?: TeamsFx;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error: unknown;
+    /**
+     * Indicates that current environment is in Teams
+     */
+    inTeams?: boolean;
+    /**
+     * Teams theme.
+     */
+    theme: Theme;
+    /**
+     * Teams theme string.
+     */
+    themeString: string;
+    /**
+     * Teams context object.
+     */
+    context?: any;
+};
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param teamsfxConfig - custom configuration to override default ones.
+ * @returns TeamsFxContext object
+ *
+ * @beta
+ */
+export declare function useTeamsFx(teamsfxConfig?: Record<string, string>): TeamsFxContext;
 //# sourceMappingURL=useTeamsFx.d.ts.map

package/build/cjs/useTeamsFx.js

@@ -1,34 +1,34 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTeamsFx = void 0;
-var tslib_1 = require("tslib");
-var teamsfx_1 = require("@microsoft/teamsfx");
-var useTeams_1 = require("./useTeams");
-var useData_1 = require("./useData");
-/**
- * Initialize TeamsFx SDK with customized configuration.
- *
- * @param teamsfxConfig - custom configuration to override default ones.
- * @returns TeamsFxContext object
- *
- * @beta
- */
-function useTeamsFx(teamsfxConfig) {
-    var _this = this;
-    var result = (0, useTeams_1.useTeams)({})[0];
-    var _a = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        return tslib_1.__generator(this, function (_a) {
-            if (process.env.NODE_ENV === "development") {
-                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
-                (0, teamsfx_1.setLogFunction)(function (level, message) {
-                    console.log(message);
-                });
-            }
-            return [2 /*return*/, new teamsfx_1.TeamsFx(teamsfx_1.IdentityType.User, teamsfxConfig)];
-        });
-    }); }), data = _a.data, error = _a.error, loading = _a.loading;
-    return tslib_1.__assign({ teamsfx: data, error: error, loading: loading }, result);
-}
-exports.useTeamsFx = useTeamsFx;
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTeamsFx = void 0;
+var tslib_1 = require("tslib");
+var teamsfx_1 = require("@microsoft/teamsfx");
+var useTeams_1 = require("./useTeams");
+var useData_1 = require("./useData");
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param teamsfxConfig - custom configuration to override default ones.
+ * @returns TeamsFxContext object
+ *
+ * @beta
+ */
+function useTeamsFx(teamsfxConfig) {
+    var _this = this;
+    var result = (0, useTeams_1.useTeams)({})[0];
+    var _a = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            if (process.env.NODE_ENV === "development") {
+                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
+                (0, teamsfx_1.setLogFunction)(function (level, message) {
+                    console.log(message);
+                });
+            }
+            return [2 /*return*/, new teamsfx_1.TeamsFx(teamsfx_1.IdentityType.User, teamsfxConfig)];
+        });
+    }); }), data = _a.data, error = _a.error, loading = _a.loading;
+    return tslib_1.__assign({ teamsfx: data, error: error, loading: loading }, result);
+}
+exports.useTeamsFx = useTeamsFx;

package/build/cjs/useTeamsUserCredential.d.ts

@@ -1,42 +1,42 @@
-import { TeamsUserCredentialAuthConfig, TeamsUserCredential } from "@microsoft/teamsfx";
-import { Theme } from "@fluentui/react-components";
-export type TeamsContextWithCredential = {
-    /**
-     * Instance of TeamsUserCredential.
-     */
-    teamsUserCredential?: TeamsUserCredential;
-    /**
-     * Status of data loading.
-     */
-    loading: boolean;
-    /**
-     * Error information.
-     */
-    error: unknown;
-    /**
-     * Indicates that current environment is in Teams
-     */
-    inTeams?: boolean;
-    /**
-     * Teams theme.
-     */
-    theme: Theme;
-    /**
-     * Teams theme string.
-     */
-    themeString: string;
-    /**
-     * Teams context object.
-     */
-    context?: any;
-};
-/**
- * Initialize TeamsFx SDK with customized configuration.
- *
- * @param authConfig - custom configuration to override default ones.
- * @returns TeamsContextWithCredential object
- *
- * @beta
- */
-export declare function useTeamsUserCredential(authConfig: TeamsUserCredentialAuthConfig): TeamsContextWithCredential;
+import { TeamsUserCredentialAuthConfig, TeamsUserCredential } from "@microsoft/teamsfx";
+import { Theme } from "@fluentui/react-components";
+export type TeamsContextWithCredential = {
+    /**
+     * Instance of TeamsUserCredential.
+     */
+    teamsUserCredential?: TeamsUserCredential;
+    /**
+     * Status of data loading.
+     */
+    loading: boolean;
+    /**
+     * Error information.
+     */
+    error: unknown;
+    /**
+     * Indicates that current environment is in Teams
+     */
+    inTeams?: boolean;
+    /**
+     * Teams theme.
+     */
+    theme: Theme;
+    /**
+     * Teams theme string.
+     */
+    themeString: string;
+    /**
+     * Teams context object.
+     */
+    context?: any;
+};
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param authConfig - custom configuration to override default ones.
+ * @returns TeamsContextWithCredential object
+ *
+ * @beta
+ */
+export declare function useTeamsUserCredential(authConfig: TeamsUserCredentialAuthConfig): TeamsContextWithCredential;
 //# sourceMappingURL=useTeamsUserCredential.d.ts.map

package/build/cjs/useTeamsUserCredential.js

@@ -1,34 +1,34 @@
-"use strict";
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTeamsUserCredential = void 0;
-var tslib_1 = require("tslib");
-var teamsfx_1 = require("@microsoft/teamsfx");
-var useTeams_1 = require("./useTeams");
-var useData_1 = require("./useData");
-/**
- * Initialize TeamsFx SDK with customized configuration.
- *
- * @param authConfig - custom configuration to override default ones.
- * @returns TeamsContextWithCredential object
- *
- * @beta
- */
-function useTeamsUserCredential(authConfig) {
-    var _this = this;
-    var result = (0, useTeams_1.useTeams)({})[0];
-    var _a = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        return tslib_1.__generator(this, function (_a) {
-            if (process.env.NODE_ENV === "development") {
-                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
-                (0, teamsfx_1.setLogFunction)(function (level, message) {
-                    console.log(message);
-                });
-            }
-            return [2 /*return*/, new teamsfx_1.TeamsUserCredential(authConfig)];
-        });
-    }); }), data = _a.data, error = _a.error, loading = _a.loading;
-    return tslib_1.__assign({ teamsUserCredential: data, error: error, loading: loading }, result);
-}
-exports.useTeamsUserCredential = useTeamsUserCredential;
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTeamsUserCredential = void 0;
+var tslib_1 = require("tslib");
+var teamsfx_1 = require("@microsoft/teamsfx");
+var useTeams_1 = require("./useTeams");
+var useData_1 = require("./useData");
+/**
+ * Initialize TeamsFx SDK with customized configuration.
+ *
+ * @param authConfig - custom configuration to override default ones.
+ * @returns TeamsContextWithCredential object
+ *
+ * @beta
+ */
+function useTeamsUserCredential(authConfig) {
+    var _this = this;
+    var result = (0, useTeams_1.useTeams)({})[0];
+    var _a = (0, useData_1.useData)(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            if (process.env.NODE_ENV === "development") {
+                (0, teamsfx_1.setLogLevel)(teamsfx_1.LogLevel.Verbose);
+                (0, teamsfx_1.setLogFunction)(function (level, message) {
+                    console.log(message);
+                });
+            }
+            return [2 /*return*/, new teamsfx_1.TeamsUserCredential(authConfig)];
+        });
+    }); }), data = _a.data, error = _a.error, loading = _a.loading;
+    return tslib_1.__assign({ teamsUserCredential: data, error: error, loading: loading }, result);
+}
+exports.useTeamsUserCredential = useTeamsUserCredential;

package/build/esm/BaseDashboard.d.ts

@@ -0,0 +1,54 @@
+import { Component, CSSProperties } from "react";
+interface BaseDashboardState {
+    isMobile?: boolean;
+    showLogin?: boolean;
+    observer?: ResizeObserver;
+}
+/**
+ * The base class for dashboard implementation.
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P The type of props.
+ * @param S The type of state.
+ */
+export declare class BaseDashboard<P, S> extends Component<P, S & BaseDashboardState> {
+    private ref;
+    /**
+     * Constructor for the dashboard class.
+     * @param props The properties for the dashboard.
+     */
+    constructor(props: Readonly<P>);
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * This method is invoked immediately when a component will be unmounted. It's a good place to clean up the resources.
+     */
+    componentWillUnmount(): void;
+    /**
+     * Define thie dashboard default layout.
+     */
+    render(): JSX.Element;
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     */
+    protected layout(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The style for the dashboard
+     */
+    protected styling(): CSSProperties | string;
+    /**
+     * Construct CSSProperties object for styling the dashboard.
+     * @returns CSSProperties object
+     */
+    private genStyle;
+    /**
+     * Construct className string for styling the dashboard.
+     * @returns className for styling the dashboard
+     */
+    private genClassName;
+}
+export {};
+//# sourceMappingURL=BaseDashboard.d.ts.map

package/build/esm/BaseDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDashboard.d.ts","sourceRoot":"","sources":["../../src/BaseDashboard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAexD,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;GAKG;AACH,qBAAa,aAAa,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,kBAAkB,CAAC;IAC3E,OAAO,CAAC,GAAG,CAAkC;IAE7C;;;OAGG;gBACS,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAU9B;;;OAGG;IACG,iBAAiB;IAavB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAO5B;;OAEG;IACH,MAAM;IAaN;;OAEG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,aAAa,GAAG,MAAM;IAI3C;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAMhB;;;OAGG;IACH,OAAO,CAAC,YAAY;CAGrB"}

package/build/esm/BaseDashboard.js

@@ -0,0 +1,99 @@
+import { __assign, __awaiter, __extends, __generator } from "tslib";
+import React, { Component } from "react";
+import { mergeStyles } from "@fluentui/react";
+function dashboardStyle(isMobile) {
+    return mergeStyles(__assign({ display: "grid", gap: "20px", padding: "20px", gridTemplateRows: "1fr", gridTemplateColumns: "4fr 6fr" }, (isMobile === true ? { gridTemplateColumns: "1fr", gridTemplateRows: "1fr" } : {})));
+}
+/**
+ * The base class for dashboard implementation.
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P The type of props.
+ * @param S The type of state.
+ */
+var BaseDashboard = /** @class */ (function (_super) {
+    __extends(BaseDashboard, _super);
+    /**
+     * Constructor for the dashboard class.
+     * @param props The properties for the dashboard.
+     */
+    function BaseDashboard(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isMobile: undefined,
+            showLogin: undefined,
+            observer: undefined,
+        };
+        _this.ref = React.createRef();
+        return _this;
+    }
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    BaseDashboard.prototype.componentDidMount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var observer;
+            var _this = this;
+            return __generator(this, function (_a) {
+                observer = new ResizeObserver(function (entries) {
+                    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                        var entry = entries_1[_i];
+                        if (entry.target === _this.ref.current) {
+                            var width = entry.contentRect.width;
+                            _this.setState({ isMobile: width < 600 });
+                        }
+                    }
+                });
+                observer.observe(this.ref.current);
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * This method is invoked immediately when a component will be unmounted. It's a good place to clean up the resources.
+     */
+    BaseDashboard.prototype.componentWillUnmount = function () {
+        // Unobserve the dashboard div for resize events
+        if (this.state.observer && this.ref.current) {
+            this.state.observer.unobserve(this.ref.current);
+        }
+    };
+    /**
+     * Define thie dashboard default layout.
+     */
+    BaseDashboard.prototype.render = function () {
+        var root = dashboardStyle(this.state.isMobile);
+        return (React.createElement("div", { ref: this.ref, className: mergeStyles(root, this.genClassName()), style: this.genStyle() }, this.layout()));
+    };
+    /**
+     * Override this method to define the layout of the widget in the dashboard.
+     */
+    BaseDashboard.prototype.layout = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the dashboard style.
+     * @returns The style for the dashboard
+     */
+    BaseDashboard.prototype.styling = function () {
+        return {};
+    };
+    /**
+     * Construct CSSProperties object for styling the dashboard.
+     * @returns CSSProperties object
+     */
+    BaseDashboard.prototype.genStyle = function () {
+        return typeof this.styling() === "string"
+            ? {}
+            : this.styling();
+    };
+    /**
+     * Construct className string for styling the dashboard.
+     * @returns className for styling the dashboard
+     */
+    BaseDashboard.prototype.genClassName = function () {
+        return typeof this.styling() === "string" ? this.styling() : "";
+    };
+    return BaseDashboard;
+}(Component));
+export { BaseDashboard };

package/build/esm/BaseWidget.d.ts

@@ -0,0 +1,63 @@
+import { Component, CSSProperties } from "react";
+interface BaseWidgetState {
+    loading?: boolean;
+}
+/**
+ * The base class for widget implementation. I
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+export declare class BaseWidget<P, S> extends Component<P, S & BaseWidgetState> {
+    constructor(props: Readonly<P>);
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    componentDidMount(): Promise<void>;
+    /**
+     * Define the basic layout of a widget
+     */
+    render(): JSX.Element;
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    protected getData(): Promise<S>;
+    /**
+     * Override this method to customize the widget header.
+     * @returns JSX component for the widget body
+     */
+    protected header(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the widget body.
+     * @returns JSX component for the widget body
+     */
+    protected body(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the widget footer.
+     * @returns react node for the widget footer
+     */
+    protected footer(): JSX.Element | undefined;
+    /**
+     * Override this method to customize what the widget will look like when it is loading.
+     */
+    protected loading(): JSX.Element | undefined;
+    /**
+     * Override this method to customize the widget style.
+     * @returns custom style for the widget
+     */
+    protected styling(): CSSProperties | string;
+    /**
+     * Construct CSSProperties object for styling the widget.
+     * @returns CSSProperties object
+     */
+    private genStyle;
+    /**
+     * Construct className string for styling the widget.
+     * @returns className for styling the widget
+     */
+    private genClassName;
+}
+export {};
+//# sourceMappingURL=BaseWidget.d.ts.map

package/build/esm/BaseWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseWidget.d.ts","sourceRoot":"","sources":["../../src/BaseWidget.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AA0CxD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,qBAAa,UAAU,CAAC,CAAC,EAAE,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC;gBACzD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAK9B;;;OAGG;IACG,iBAAiB;IAIvB;;OAEG;IACH,MAAM;IAiBN;;;OAGG;cACa,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC;IAIrC;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;;OAGG;IACH,SAAS,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAIzC;;;OAGG;IACH,SAAS,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI3C;;OAEG;IACH,SAAS,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,GAAG,SAAS;IAI5C;;;OAGG;IACH,SAAS,CAAC,OAAO,IAAI,aAAa,GAAG,MAAM;IAI3C;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAIhB;;;OAGG;IACH,OAAO,CAAC,YAAY;CAGrB"}

package/build/esm/BaseWidget.js

@@ -0,0 +1,146 @@
+import { __assign, __awaiter, __extends, __generator } from "tslib";
+import React, { Component } from "react";
+import { mergeStyles, mergeStyleSets } from "@fluentui/react";
+import { tokens } from "@fluentui/react-components";
+var widgetStyle = mergeStyleSets({
+    root: {
+        display: "grid",
+        padding: "1.25rem 2rem 1.25rem 2rem",
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: "1px solid var(--colorTransparentStroke)",
+        boxShadow: tokens.shadow4,
+        borderRadius: tokens.borderRadiusMedium,
+        gap: tokens.spacingHorizontalL,
+        gridTemplateRows: "max-content 1fr max-content",
+    },
+    header: {
+        display: "grid",
+        height: "max-content",
+        "& div": {
+            display: "grid",
+            gap: tokens.spacingHorizontalS,
+            alignItems: "center",
+            gridTemplateColumns: "min-content 1fr min-content",
+        },
+        "& svg": {
+            height: "1.5rem",
+            width: "1.5rem",
+        },
+        "& span": {
+            fontWeight: tokens.fontWeightSemibold,
+            lineHeight: tokens.lineHeightBase200,
+            fontSize: tokens.fontSizeBase200,
+        },
+    },
+    footer: {
+        "& button": {
+            width: "fit-content",
+        },
+    },
+});
+/**
+ * The base class for widget implementation. I
+ * It's also a react component, for more information about react component, please refer to https://reactjs.org/docs/react-component.html
+ * @param P the type of props.
+ * @param S the type of state.
+ */
+var BaseWidget = /** @class */ (function (_super) {
+    __extends(BaseWidget, _super);
+    function BaseWidget(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { loading: undefined };
+        return _this;
+    }
+    /**
+     * This method is invoked immediately after a component is mounted.
+     * For more information about react lifecycle, please refer to https://reactjs.org/docs/react-component.html#componentdidmount
+     */
+    BaseWidget.prototype.componentDidMount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _a = this.setState;
+                        _b = [{}];
+                        return [4 /*yield*/, this.getData()];
+                    case 1:
+                        _a.apply(this, [__assign.apply(void 0, [__assign.apply(void 0, _b.concat([(_c.sent())])), { loading: false }])]);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Define the basic layout of a widget
+     */
+    BaseWidget.prototype.render = function () {
+        var root = widgetStyle.root, header = widgetStyle.header, footer = widgetStyle.footer;
+        return (React.createElement("div", { className: mergeStyles(root, this.genClassName()), style: this.genStyle() },
+            this.header() && React.createElement("div", { className: header }, this.header()),
+            this.state.loading !== false && this.loading() !== undefined ? (this.loading()) : (React.createElement(React.Fragment, null,
+                this.body() !== undefined && this.body(),
+                this.footer() !== undefined && React.createElement("div", { className: footer }, this.footer())))));
+    };
+    /**
+     * Get data required by the widget
+     * @returns data for the widget
+     */
+    BaseWidget.prototype.getData = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, undefined];
+            });
+        });
+    };
+    /**
+     * Override this method to customize the widget header.
+     * @returns JSX component for the widget body
+     */
+    BaseWidget.prototype.header = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the widget body.
+     * @returns JSX component for the widget body
+     */
+    BaseWidget.prototype.body = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the widget footer.
+     * @returns react node for the widget footer
+     */
+    BaseWidget.prototype.footer = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize what the widget will look like when it is loading.
+     */
+    BaseWidget.prototype.loading = function () {
+        return undefined;
+    };
+    /**
+     * Override this method to customize the widget style.
+     * @returns custom style for the widget
+     */
+    BaseWidget.prototype.styling = function () {
+        return "";
+    };
+    /**
+     * Construct CSSProperties object for styling the widget.
+     * @returns CSSProperties object
+     */
+    BaseWidget.prototype.genStyle = function () {
+        return typeof this.styling() === "string" ? undefined : this.styling();
+    };
+    /**
+     * Construct className string for styling the widget.
+     * @returns className for styling the widget
+     */
+    BaseWidget.prototype.genClassName = function () {
+        return typeof this.styling() === "string" ? this.styling() : "";
+    };
+    return BaseWidget;
+}(Component));
+export { BaseWidget };