office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
179 lines • 13.7 kB
JavaScript
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