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 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_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_1.DropdownMenuItemType.Divider },
                    { key: 'Header2', text: 'People', itemType: Dropdown_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' },
                ], onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } }),
            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' },
                ], onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, disabled: true }),
            React.createElement(Dropdown_1.Dropdown, { label: 'Controlled example:', selectedKey: selectedItem && selectedItem.key, onChanged: function (item) { return _this.setState({ selectedItem: item }); }, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, placeHolder: 'Select an Option', 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_1.DropdownMenuItemType.Divider },
                    { key: 'E', text: 'Option e' },
                    { key: 'F', text: 'Option f' },
                    { key: 'G', text: 'Option g' },
                ] }),
            React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select options', label: 'Multi-Select uncontrolled example:', defaultSelectedKeys: ['Apple', 'Banana'], onChanged: function (item) { return _this.changeState(item); }, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, multiSelect: true, options: [
                    { key: 'Header2', text: 'Fruits', itemType: Dropdown_1.DropdownMenuItemType.Header },
                    { key: 'Apple', text: 'apple' },
                    { key: 'Banana', text: 'banana' },
                    { key: 'Orange', text: 'orange' },
                    { key: 'Grape', text: 'grape' },
                    { key: 'divider_1', text: '-', itemType: Dropdown_1.DropdownMenuItemType.Divider },
                    { key: 'Header3', text: 'Lanuages', itemType: Dropdown_1.DropdownMenuItemType.Header },
                    { key: 'English', text: 'english' },
                    { key: 'French', text: 'french' },
                    { key: 'Germany', text: 'germany' },
                ] }),
            React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select options', label: 'Multi-Select controlled example:', selectedKeys: selectedItem && selectedItem.key, onChanged: function (item) { return _this.onChangeMultiSelect(item); }, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, multiSelect: true, options: [
                    { key: 'Header4', text: 'Colors', itemType: Dropdown_1.DropdownMenuItemType.Header },
                    { key: 'red', text: 'Red' },
                    { key: 'green', text: 'Green' },
                    { key: 'blue', text: 'Blue' },
                    { key: 'yellow', text: 'Yellow' },
                    { key: 'divider_2', text: '-', itemType: Dropdown_1.DropdownMenuItemType.Divider },
                    { key: 'Header5', text: 'Flower', itemType: Dropdown_1.DropdownMenuItemType.Header },
                    { key: 'rose', text: 'Rose' },
                    { key: 'lily', text: 'Lily' },
                    { key: 'sunflower', text: 'Sunflower' },
                ] }),
            React.createElement(Dropdown_1.Dropdown, { label: 'Disabled uncontrolled example with defaultSelectedKey:', defaultSelectedKeys: ['GG', 'FF'], multiSelect: true, options: [
                    { key: 'AA', text: 'Option a' },
                    { key: 'BB', text: 'Option b' },
                    { key: 'CC', text: 'Option c' },
                    { key: 'DD', text: 'Option d' },
                    { key: 'EE', text: 'Option e' },
                    { key: 'FF', text: 'Option f' },
                    { key: 'GG', text: 'Option g' },
                ], disabled: true, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } })));
    };
    DropdownBasicExample.prototype.makeList = function (items) {
        var list = [];
        for (var i = 0; i < items; i++) {
            list.push({ key: i, text: 'Option ' + i });
        }
        return list;
    };
    DropdownBasicExample.prototype.changeState = function (item) {
        console.log('here is the things updating...' + item.key + ' ' + item.text + ' ' + item.selected);
        this.setState({ selectedItem: item });
    };
    DropdownBasicExample.prototype.onChangeMultiSelect = function (item) {
        var updatedSelectedItem = this.state.selectedItem ? this.copyArray(this.state.selectedItem) : [];
        if (item.selected) {
            // add the option if it's checked
            updatedSelectedItem.push(item);
        }
        else {
            // remove the option if it's unchecked
            var currIndex = updatedSelectedItem.indexOf(item.index);
            if (currIndex > -1) {
                updatedSelectedItem.splice(currIndex, 1);
            }
        }
        this.setState({
            selectedItem: updatedSelectedItem
        });
    };
    DropdownBasicExample.prototype.copyArray = function (array) {
        var newArray = [];
        for (var i = 0; i < array.length; i++) {
            newArray[i] = array[i];
        }
        return newArray;
    };
    return DropdownBasicExample;
}(React.Component));
exports.DropdownBasicExample = DropdownBasicExample;
//# sourceMappingURL=Dropdown.Basic.Example.js.map