"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Dialog_Basic_Example_1 = require("./examples/Dialog.Basic.Example");
var Dialog_LargeHeader_Example_1 = require("./examples/Dialog.LargeHeader.Example");
var Dialog_Blocking_Example_1 = require("./examples/Dialog.Blocking.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Dialog_checklist_1 = require("./Dialog.checklist");
var DialogBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Basic.Example.tsx');
var DialogLargeHeaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.LargeHeader.Example.tsx');
var DialogBlockingExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dialog/examples/Dialog.Blocking.Example.tsx');
var DialogPage = (function (_super) {
    tslib_1.__extends(DialogPage, _super);
    function DialogPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    DialogPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Dialog', componentName: 'DialogExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Default Dialog', code: DialogBasicExampleCode },
                    React.createElement(Dialog_Basic_Example_1.DialogBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Dialog with large header and ChoiceGroup', code: DialogLargeHeaderExampleCode },
                    React.createElement("p", null, "Use this Dialog sparingly, when calling extra attention to the content. It can be used in situations where you want to teach the user something or notify them of an important change."),
                    React.createElement(Dialog_LargeHeader_Example_1.DialogLargeHeaderExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Blocking Dialog', code: DialogBlockingExampleCode },
                    React.createElement("p", null, "A blocking Dialog disables all other actions and commands on the page behind it. They should be used very sparingly, only when it is critical that the user makes a choice or provides information before they can proceed. Blocking Dialogs are generally used for irreversible or potentially destructive tasks."),
                    React.createElement(Dialog_Blocking_Example_1.DialogBlockingExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Dialog/Dialog.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use Dialogs for quick, actionable interactions, such as making a choice or needing the user to provide information."),
                    React.createElement("li", null, "When possible, try a non-blocking Dialog before resorting to a blocking Dialog."),
                    React.createElement("li", null, "Only include information needed to help users make a decision."),
                    React.createElement("li", null, "Button text should reflect the actions available to the user (e.g. save, delete)."),
                    React.createElement("li", null, "Validate that the user's entries are acceptable before closing the Dialog. Show an inline validation error near the field they must correct."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don\u2019t overuse Dialogs. To some extent they can be perceived as interrupting workflow, and too many can be a bad user experience."),
                    React.createElement("li", null, "Avoid \"Are you sure?\" or confirmation Dialogs unless the user is making an irreversible or destructive choice."),
                    React.createElement("li", null, "Do not use a blocking Dialog unless absolutely necessary because they are very disruptive."),
                    React.createElement("li", null, "Don\u2019t have long sentences or complicated choices."),
                    React.createElement("li", null, "Avoid generic button labels like \"Ok\" if you can be more specific about the action a user is about to complete. "),
                    React.createElement("li", null, "Don't dismiss the Dialog if underlying problem is not fixed. Don't put the user back into a broken/error state."),
                    React.createElement("li", null, "Don't provide the user with more than 3 buttons."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Dialog_checklist_1.DialogStatus)) }));
    };
    return DialogPage;
}(React.Component));
exports.DialogPage = DialogPage;
//# sourceMappingURL=DialogPage.js.map