define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/ComboBox", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types", "../../../Button", "./ComboBox.Basic.Example.scss"], function (require, exports, tslib_1, React, ComboBox_1, Utilities_1, SelectableOption_types_1, Button_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ComboBoxBasicExample = /** @class */ (function (_super) {
        tslib_1.__extends(ComboBoxBasicExample, _super);
        function ComboBoxBasicExample(props) {
            var _this = _super.call(this, props) || this;
            _this._testOptions = [{ key: 'Header', text: 'Theme Fonts', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
                { key: 'A', text: 'Arial Black' },
                { key: 'B', text: 'Times New Roman' },
                { key: 'C', text: 'Comic Sans MS' },
                { key: 'divider_2', text: '-', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Divider },
                { key: 'Header1', text: 'Other Options', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
                { key: 'D', text: 'Option d' },
                { key: 'E', text: 'Option e' },
                { 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', disabled: true },
            ];
            _this._fontMapping = (_a = {},
                _a['Arial Black'] = '"Arial Black", "Arial Black_MSFontService", sans-serif',
                _a['Time New Roman'] = '"Times New Roman", "Times New Roman_MSFontService", serif',
                _a['Comic Sans MS'] = '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy',
                _a['Calibri'] = 'Calibri, Calibri_MSFontService, sans-serif',
                _a);
            _this.scaleOptions = [];
            _this.state = {
                options: [],
                selectedOptionKey: undefined,
                value: 'Calibri'
            };
            for (var i = 0; i < 1000; i++) {
                _this.scaleOptions.push({
                    key: "" + i,
                    text: "Option " + i
                });
            }
            return _this;
            var _a;
        }
        ComboBoxBasicExample.prototype.render = function () {
            var _a = this.state, options = _a.options, selectedOptionKey = _a.selectedOptionKey, value = _a.value;
            return (React.createElement("div", { className: 'ms-ComboBoxBasicExample' },
                React.createElement(ComboBox_1.ComboBox, { defaultSelectedKey: 'C', label: 'Basic uncontrolled example (allowFreeform: T, AutoComplete: T):', id: 'Basicdrop1', ariaLabel: 'Basic ComboBox example', allowFreeform: true, autoComplete: 'on', options: this._testOptions, onRenderOption: this._onRenderFontOption, componentRef: this._basicComboBoxComponentRef, 
                    // tslint:disable:jsx-no-lambda
                    onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
                React.createElement(Button_1.PrimaryButton, { text: 'Set focus', onClick: this._basicComboBoxOnClick }),
                React.createElement(ComboBox_1.ComboBox, { defaultSelectedKey: 'C', label: 'Basic uncontrolled example (allowFreeform: T, AutoComplete: F):', id: 'Basicdrop2', ariaLabel: 'Basic ComboBox example', allowFreeform: true, autoComplete: 'off', options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                    // tslint:disable:jsx-no-lambda
                    onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
                React.createElement(ComboBox_1.ComboBox, { selectedKey: 'C', label: 'Basic uncontrolled example (allowFreeform: F, AutoComplete: T):', id: 'Basicdrop3', ariaLabel: 'Basic ComboBox example', allowFreeform: false, autoComplete: 'on', options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                    // tslint:disable:jsx-no-lambda
                    onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
                React.createElement(ComboBox_1.VirtualizedComboBox, { defaultSelectedKey: 'C', label: 'Scaled example with 1000 items (allowFreeform: T, AutoComplete: T):', id: 'Basicdrop1', ariaLabel: 'Basic ComboBox example', allowFreeform: true, autoComplete: 'on', options: this.scaleOptions, 
                    // tslint:disable:jsx-no-lambda
                    onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
                React.createElement(ComboBox_1.ComboBox, { defaultSelectedKey: 'C', label: 'Basic uncontrolled example (allowFreeform: F, AutoComplete: F):', id: 'Basicdrop4', ariaLabel: 'Basic ComboBox example', allowFreeform: false, autoComplete: 'off', options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                    // tslint:disable:jsx-no-lambda
                    onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
                React.createElement(ComboBox_1.ComboBox, { label: 'Basic uncontrolled example:', id: 'Basicdrop5', ariaLabel: 'Basic ComboBox example', errorMessage: 'Error! Here is some text!', options: this._testOptions, onRenderOption: this._onRenderFontOption, 
                    // tslint:disable:jsx-no-lambda
                    onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
                React.createElement(ComboBox_1.ComboBox, { 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, 
                    // tslint:disable:jsx-no-lambda
                    onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } }),
                value ?
                    React.createElement(ComboBox_1.ComboBox, { label: 'Basic controlled example:', id: 'Basicdrop5', ariaLabel: 'Basic ComboBox example', allowFreeform: true, autoComplete: 'on', options: options, onChanged: this._onChanged, onResolveOptions: this._getOptions, value: value && value, onRenderOption: this._onRenderFontOption, 
                        // tslint:disable:jsx-no-lambda
                        onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } })
                    :
                        React.createElement(ComboBox_1.ComboBox, { selectedKey: selectedOptionKey && selectedOptionKey, label: 'Basic controlled example:', id: 'Basicdrop5', ariaLabel: 'Basic ComboBox example', allowFreeform: true, autoComplete: 'on', options: options, onChanged: this._onChanged, onResolveOptions: this._getOptions, onRenderOption: this._onRenderFontOption, 
                            // tslint:disable:jsx-no-lambda
                            onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, onMenuOpen: function () { return console.log('ComboBox menu opened'); } })));
        };
        // Render content of item
        ComboBoxBasicExample.prototype._onRenderFontOption = function (item) {
            if (item.itemType === SelectableOption_types_1.SelectableOptionMenuItemType.Header ||
                item.itemType === SelectableOption_types_1.SelectableOptionMenuItemType.Divider) {
                return React.createElement("span", { className: 'ms-ComboBox-optionText' }, item.text);
            }
            var fontFamily = this._fontMapping[item.text];
            if (fontFamily === null || fontFamily === undefined) {
                var newFontFamily = item.text;
                if (newFontFamily.indexOf(' ') > -1) {
                    newFontFamily = '"' + newFontFamily + '"';
                }
                // add a default fallback font
                newFontFamily += ',"Segoe UI",Tahoma,Sans-Serif';
                this._fontMapping = Utilities_1.assign({}, this._fontMapping, (_a = {}, _a[fontFamily] = newFontFamily, _a));
                fontFamily = newFontFamily;
            }
            return React.createElement("span", { className: 'ms-ComboBox-optionText', style: { fontFamily: fontFamily && fontFamily } }, item.text);
            var _a;
        };
        ComboBoxBasicExample.prototype._getOptions = function (currentOptions) {
            if (this.state.options.length > 0) {
                return this.state.options;
            }
            var newOptions = [
                { key: 'Header', text: 'Theme Fonts', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
                { key: 'A', text: 'Arial Black', fontFamily: '"Arial Black", "Arial Black_MSFontService", sans-serif' },
                { key: 'B', text: 'Time New Roman', fontFamily: '"Times New Roman", "Times New Roman_MSFontService", serif' },
                { key: 'C', text: 'Comic Sans MS', fontFamily: '"Comic Sans MS", "Comic Sans MS_MSFontService", fantasy' },
                { key: 'C1', text: 'Calibri', fontFamily: 'Calibri, Calibri_MSFontService, sans-serif' },
                { key: 'divider_2', text: '-', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Divider },
                { key: 'Header1', text: 'Other Options', itemType: SelectableOption_types_1.SelectableOptionMenuItemType.Header },
                { key: 'D', text: 'Option d' },
                { key: 'E', text: 'Option e' },
                { 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' }
            ];
            this.setState({
                options: newOptions,
                selectedOptionKey: 'C1',
                value: undefined
            });
            return newOptions;
        };
        ComboBoxBasicExample.prototype._onChanged = function (option, index, value) {
            if (option !== undefined) {
                this.setState({
                    selectedOptionKey: option.key,
                    value: undefined
                });
            }
            else if (index !== undefined && index >= 0 && index < this.state.options.length) {
                this.setState({
                    selectedOptionKey: this.state.options[index].key,
                    value: undefined
                });
            }
            else if (value !== undefined) {
                var newOption = { key: value, text: value };
                this.setState({
                    options: this.state.options.concat([newOption]),
                    selectedOptionKey: newOption.key,
                    value: undefined
                });
            }
        };
        ComboBoxBasicExample.prototype._basicComboBoxOnClick = function () {
            this._basicCombobox.focus(true);
        };
        ComboBoxBasicExample.prototype._basicComboBoxComponentRef = function (component) {
            this._basicCombobox = component;
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ComboBoxBasicExample.prototype, "_onRenderFontOption", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ComboBoxBasicExample.prototype, "_getOptions", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ComboBoxBasicExample.prototype, "_onChanged", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ComboBoxBasicExample.prototype, "_basicComboBoxOnClick", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], ComboBoxBasicExample.prototype, "_basicComboBoxComponentRef", null);
        return ComboBoxBasicExample;
    }(React.Component));
    exports.ComboBoxBasicExample = ComboBoxBasicExample;
});
//# sourceMappingURL=ComboBox.Basic.Example.js.map