define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Dropdown", "./Dropdown.Basic.Example.scss"], function (require, exports, tslib_1, React, Dropdown_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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 selectedItem = this.state.selectedItem;
            return (React.createElement("div", { className: 'DropdownBasicExample' },
                React.createElement(Dropdown_1.Dropdown, { className: 'Dropdown-example', 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: this._log('onFocus called'), onBlur: this._log('onBlur called') }),
                React.createElement(Dropdown_1.Dropdown, { className: 'Dropdown-example', 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: this._log('onFocus called'), onBlur: this._log('onBlur called'), disabled: true }),
                React.createElement(Dropdown_1.Dropdown, { className: 'Dropdown-example', label: 'Controlled example:', selectedKey: selectedItem && selectedItem.key, onChanged: this.changeState, onFocus: this._log('onFocus called'), onBlur: this._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: this.changeState, onFocus: this._log('onFocus called'), onBlur: this._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: this.onChangeMultiSelect, onFocus: this._log('onFocus called'), onBlur: this._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: this._log('onFocus called'), onBlur: this._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;
        };
        DropdownBasicExample.prototype._log = function (str) {
            return function () {
                console.log(str);
            };
        };
        return DropdownBasicExample;
    }(React.Component));
    exports.DropdownBasicExample = DropdownBasicExample;
});
//# sourceMappingURL=Dropdown.Basic.Example.js.map