text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var React = require("react");
  var ComboBox_1 = require("office-ui-fabric-react/lib/ComboBox");
  require("./ComboBox.Basic.Example.scss");
  var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
  var SelectableOption_Props_1 = require("office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.Props");
  var ComboBoxBasicExample = /** @class */ (function (_super) {
      tslib_1.__extends(ComboBoxBasicExample, _super);
      function ComboBoxBasicExample() {
          var _this = _super.call(this) || this;
          _this._testOptions = [{ key: 'Header', text: 'Theme Fonts', itemType: SelectableOption_Props_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_Props_1.SelectableOptionMenuItemType.Divider },
              { key: 'Header1', text: 'Other Options', itemType: SelectableOption_Props_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._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: null,
              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, 
                  // 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: 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_Props_1.SelectableOptionMenuItemType.Header ||
              item.itemType === SelectableOption_Props_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_Props_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_Props_1.SelectableOptionMenuItemType.Divider },
              { key: 'Header1', text: 'Other Options', itemType: SelectableOption_Props_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: null
          });
          return newOptions;
      };
      ComboBoxBasicExample.prototype._onChanged = function (option, index, value) {
          if (option !== undefined) {
              this.setState({
                  selectedOptionKey: option.key,
                  value: null
              });
          }
          else if (index !== undefined && index >= 0 && index < this.state.options.length) {
              this.setState({
                  selectedOptionKey: this.state.options[index].key,
                  value: null
              });
          }
          else if (value !== undefined) {
              var newOption = { key: value, text: value };
              this.setState({
                  options: this.state.options.concat([newOption]),
                  selectedOptionKey: newOption.key,
                  value: null
              });
          }
      };
      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);
      return ComboBoxBasicExample;
  }(React.Component));
  exports.ComboBoxBasicExample = ComboBoxBasicExample;
  //# sourceMappingURL=ComboBox.Basic.Example.js.map