office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
230 lines • 18.3 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 INITIAL_OPTIONS = [
{ 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' }
];
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 = [];
// Render content of item
_this._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;
};
_this._getOptions = function (currentOptions) {
if (_this.state.options.length > 0) {
return _this.state.options;
}
_this.setState({
options: INITIAL_OPTIONS,
selectedOptionKey: 'C1',
value: undefined
});
return INITIAL_OPTIONS;
};
_this._getOptionsMulti = function (currentOptions) {
if (_this.state.optionsMulti.length > 0) {
return _this.state.optionsMulti;
}
_this.setState({
optionsMulti: INITIAL_OPTIONS,
selectedOptionKeys: ['C1'],
valueMulti: undefined
});
return INITIAL_OPTIONS;
};
_this._onChange = function (event, option, index, value) {
console.log('_onChanged() is called: option = ' + JSON.stringify(option));
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
});
}
};
_this._onChangeMulti = function (event, option, index, value) {
console.log('_onChangeMulti() is called: option = ' + JSON.stringify(option));
if (option !== undefined) {
// User selected/de-selected an existing option
_this.setState({
selectedOptionKeys: _this._updateSelectedOptionKeys(_this.state.selectedOptionKeys || [], option),
valueMulti: undefined
});
}
else if (value !== undefined) {
// User typed a freeform option
var newOption = { key: value, text: value };
var updatedSelectedKeys = _this.state.selectedOptionKeys
? _this.state.selectedOptionKeys.concat([newOption.key]) : [newOption.key];
_this.setState({
optionsMulti: _this.state.optionsMulti.concat([newOption]),
selectedOptionKeys: updatedSelectedKeys,
valueMulti: undefined
});
}
};
_this._updateSelectedOptionKeys = function (selectedKeys, option) {
if (selectedKeys && option) {
var index = selectedKeys.indexOf(option.key);
if (option.selected && index < 0) {
selectedKeys.push(option.key);
}
else {
selectedKeys.splice(index, 1);
}
}
return selectedKeys;
};
_this._basicComboBoxOnClick = function () {
_this._basicCombobox.focus(true);
};
_this._basicComboBoxComponentRef = function (component) {
_this._basicCombobox = component;
};
_this.state = {
options: [],
optionsMulti: [],
selectedOptionKey: undefined,
value: 'Calibri',
valueMulti: 'Calibri'
};
for (var i = 0; i < 1000; i++) {
_this.scaleOptions.push({
key: "" + i,
text: "Option " + i
});
}
_this.scaleOptions.push({ key: '1000', text: 'Very Very Very Very long option' });
return _this;
var _a;
}
ComboBoxBasicExample.prototype.render = function () {
var _a = this.state, options = _a.options, selectedOptionKey = _a.selectedOptionKey, value = _a.value;
var optionsMulti = this.state.optionsMulti;
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'); }, onPendingValueChanged: function (option, pendingIndex, pendingValue) {
return console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue);
} }),
React.createElement(Button_1.PrimaryButton, { text: "Set focus", onClick: this._basicComboBoxOnClick }),
React.createElement(ComboBox_1.ComboBox, { multiSelect: true, defaultSelectedKey: ['C', 'E'], label: "Basic uncontrolled multi select example (allowFreeform: T, AutoComplete: T):", id: "Basicdrop11", 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'); }, onPendingValueChanged: function (option, pendingIndex, pendingValue) {
return console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue);
},
// tslint:enable:jsx-no-lambda
dropdownMaxWidth: 200, useComboBoxAsMenuWidth: true }),
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'); }, onPendingValueChanged: function (option, pendingIndex, pendingValue) {
return console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue);
},
// tslint:enable:jsx-no-lambda
dropdownMaxWidth: 400, useComboBoxAsMenuWidth: true }),
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, onChange: this._onChange, onResolveOptions: this._getOptions, text: 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, onChange: this._onChange, 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'); } })),
React.createElement(ComboBox_1.ComboBox, { multiSelect: true, selectedKey: this.state.selectedOptionKeys, label: "Basic controlled ComboBox multi-select example:", id: "Basicdrop5", ariaLabel: "Basic controlled ComboBox multi-select example", allowFreeform: true, autoComplete: "on", options: optionsMulti, onChange: this._onChangeMulti, onResolveOptions: this._getOptionsMulti, 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'); } })));
};
return ComboBoxBasicExample;
}(React.Component));
exports.ComboBoxBasicExample = ComboBoxBasicExample;
});
//# sourceMappingURL=ComboBox.Basic.Example.js.map