office-ui-fabric-react/lib-amd/components/Modal/ModalPage.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "office-ui-fabric-react/lib/Link", "./examples/Modal.Basic.Example", "../../demo/ComponentStatus/ComponentStatus", "./Modal.checklist"], function (require, exports, tslib_1, React, example_app_base_1, Link_1, Modal_Basic_Example_1, ComponentStatus_1, Modal_checklist_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ModalBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx');
    var ModalPage = /** @class */ (function (_super) {
        tslib_1.__extends(ModalPage, _super);
        function ModalPage() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ModalPage.prototype.render = function () {
            return (React.createElement(example_app_base_1.ComponentPage, { title: 'Modal', componentName: 'ModalExample', exampleCards: React.createElement("div", null,
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Modal', code: ModalBasicExampleCode },
                        React.createElement(Modal_Basic_Example_1.ModalBasicExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                        require('!raw-loader!office-ui-fabric-react/src/components/Modal/Modal.types.ts')
                    ] }), overview: React.createElement("div", null,
                    React.createElement("p", null, "Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content."),
                    React.createElement("p", null,
                        "For usage requiring a quick choice from the user, ",
                        React.createElement(Link_1.Link, { href: '#/components/dialog' }, "Dialog"),
                        " may be a more appropriate control.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Use Modals for actionable interactions, such as needing the user to provide information or change settings."),
                        React.createElement("li", null, "When possible, try a non-blocking Modal before resorting to a blocking Modal."))), donts: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Don\u2019t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Modal_checklist_1.ModalStatus)) }));
        };
        return ModalPage;
    }(React.Component));
    exports.ModalPage = ModalPage;
});
//# sourceMappingURL=ModalPage.js.map