office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
144 lines • 10.3 kB
JavaScript
"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 = (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.state = {
options: [],
selectedOptionKey: null,
value: 'Calibri'
};
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } }),
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } }),
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } }),
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } }),
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } }),
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } }),
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } })
:
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, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); } })));
};
// 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