office-ui-fabric-react/lib/components/Dropdown/examples/Dropdown.Basic.Example.js

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
require("./Dropdown.Basic.Example.scss");
var Dropdown_Props_1 = require("./../Dropdown.Props");
var DropdownBasicExample = (function (_super) {
    tslib_1.__extends(DropdownBasicExample, _super);
    function DropdownBasicExample() {
        var _this = _super.call(this) || this;
        _this.state = {
            selectedItem: null
        };
        return _this;
    }
    DropdownBasicExample.prototype.render = function () {
        var _this = this;
        var selectedItem = this.state.selectedItem;
        return (React.createElement("div", { className: 'dropdownExample' },
            React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select an Option', label: 'Basic uncontrolled example:', id: 'Basicdrop1', ariaLabel: 'Basic dropdown example', options: [
                    { key: 'Header', text: 'Actions', itemType: Dropdown_Props_1.DropdownMenuItemType.Header },
                    { key: 'A', text: 'Option a' },
                    { key: 'B', text: 'Option b' },
                    { key: 'C', text: 'Option c' },
                    { key: 'D', text: 'Option d' },
                    { key: 'E', text: 'Option e' },
                    { key: 'divider_2', text: '-', itemType: Dropdown_Props_1.DropdownMenuItemType.Divider },
                    { key: 'Header2', text: 'People', itemType: Dropdown_Props_1.DropdownMenuItemType.Header },
                    { key: 'F', text: 'Option f' },
                    { key: 'G', text: 'Option g' },
                    { key: 'H', text: 'Option h' },
                    { key: 'I', text: 'Option i' },
                    { key: 'J', text: 'Option j' },
                ] }),
            React.createElement(Dropdown_1.Dropdown, { label: 'Disabled uncontrolled example with defaultSelectedKey:', defaultSelectedKey: 'D', options: [
                    { key: 'A', text: 'Option a' },
                    { key: 'B', text: 'Option b' },
                    { key: 'C', text: 'Option c' },
                    { key: 'D', text: 'Option d' },
                    { key: 'E', text: 'Option e' },
                    { key: 'F', text: 'Option f' },
                    { key: 'G', text: 'Option g' },
                ], disabled: true }),
            React.createElement(Dropdown_1.Dropdown, { label: 'Controlled example:', selectedKey: selectedItem && selectedItem.key, onChanged: function (item) { return _this.setState({ selectedItem: item }); }, options: [
                    { key: 'A', text: 'Option a' },
                    { key: 'B', text: 'Option b' },
                    { key: 'C', text: 'Option c' },
                    { key: 'D', text: 'Option d' },
                    { key: 'divider_1', text: '-', itemType: Dropdown_Props_1.DropdownMenuItemType.Divider },
                    { key: 'E', text: 'Option e' },
                    { key: 'F', text: 'Option f' },
                    { key: 'G', text: 'Option g' },
                ] })));
    };
    DropdownBasicExample.prototype.makeList = function (items) {
        var list = [];
        for (var i = 0; i < items; i++) {
            list.push({ key: i, text: 'Option ' + i });
        }
        return list;
    };
    return DropdownBasicExample;
}(React.Component));
exports.DropdownBasicExample = DropdownBasicExample;

//# sourceMappingURL=Dropdown.Basic.Example.js.map