office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
137 lines • 8.99 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Dropdown", "../../../Utilities", "./Dropdown.Basic.Example.scss"], function (require, exports, tslib_1, React, Button_1, Dropdown_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DropdownBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(DropdownBasicExample, _super);
function DropdownBasicExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
selectedItem: undefined,
selectedItems: [],
};
return _this;
}
DropdownBasicExample.prototype.render = function () {
var _a = this.state, selectedItem = _a.selectedItem, selectedItems = _a.selectedItems;
return (React.createElement("div", { className: 'docs-DropdownExample' },
React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select an Option', label: 'Basic uncontrolled example:', id: 'Basicdrop1', ariaLabel: 'Basic dropdown example', options: [
{ key: 'Header', text: 'Actions', itemType: Dropdown_1.DropdownMenuItemType.Header },
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c', disabled: true },
{ key: 'D', text: 'Option d' },
{ key: 'E', text: 'Option e' },
{ key: 'divider_2', text: '-', itemType: Dropdown_1.DropdownMenuItemType.Divider },
{ key: 'Header2', text: 'People', itemType: Dropdown_1.DropdownMenuItemType.Header },
{ 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' },
], onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), componentRef: this._resolveRef('_basicDropdown') }),
React.createElement(Button_1.PrimaryButton, { text: 'Set focus', onClick: this._onSetFocusButtonClicked }),
React.createElement(Dropdown_1.Dropdown, { 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' },
], onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), disabled: true }),
React.createElement(Dropdown_1.Dropdown, { label: 'Controlled example:', selectedKey: (selectedItem ? selectedItem.key : undefined), onChanged: this.changeState, onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), placeHolder: 'Select an Option', options: [
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' },
{ key: 'D', text: 'Option d' },
{ key: 'divider_1', text: '-', itemType: Dropdown_1.DropdownMenuItemType.Divider },
{ key: 'E', text: 'Option e' },
{ key: 'F', text: 'Option f' },
{ key: 'G', text: 'Option g' },
] }),
React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select options', label: 'Multi-Select uncontrolled example:', defaultSelectedKeys: ['Apple', 'Banana', 'Orange'], onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), multiSelect: true, options: [
{ key: 'Header2', text: 'Fruits', itemType: Dropdown_1.DropdownMenuItemType.Header },
{ key: 'Apple', text: 'apple' },
{ key: 'Banana', text: 'banana' },
{ key: 'Orange', text: 'orange', disabled: true },
{ key: 'Grape', text: 'grape', disabled: true },
{ key: 'divider_1', text: '-', itemType: Dropdown_1.DropdownMenuItemType.Divider },
{ key: 'Header3', text: 'Lanuages', itemType: Dropdown_1.DropdownMenuItemType.Header },
{ key: 'English', text: 'english' },
{ key: 'French', text: 'french' },
{ key: 'Germany', text: 'germany' },
] }),
React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select options', label: 'Multi-Select controlled example:', selectedKeys: selectedItems, onChanged: this.onChangeMultiSelect, onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), multiSelect: true, options: [
{ key: 'Header4', text: 'Colors', itemType: Dropdown_1.DropdownMenuItemType.Header },
{ key: 'red', text: 'Red' },
{ key: 'green', text: 'Green' },
{ key: 'blue', text: 'Blue' },
{ key: 'yellow', text: 'Yellow' },
{ key: 'divider_2', text: '-', itemType: Dropdown_1.DropdownMenuItemType.Divider },
{ key: 'Header5', text: 'Flower', itemType: Dropdown_1.DropdownMenuItemType.Header },
{ key: 'rose', text: 'Rose' },
{ key: 'lily', text: 'Lily' },
{ key: 'sunflower', text: 'Sunflower' },
] }),
React.createElement(Dropdown_1.Dropdown, { label: 'Disabled uncontrolled example with defaultSelectedKey:', defaultSelectedKeys: ['GG', 'FF'], multiSelect: true, options: [
{ key: 'AA', text: 'Option a' },
{ key: 'BB', text: 'Option b' },
{ key: 'CC', text: 'Option c' },
{ key: 'DD', text: 'Option d' },
{ key: 'EE', text: 'Option e' },
{ key: 'FF', text: 'Option f' },
{ key: 'GG', text: 'Option g' },
], disabled: true, onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called') })));
};
DropdownBasicExample.prototype.changeState = function (item) {
console.log('here is the things updating...' + item.key + ' ' + item.text + ' ' + item.selected);
this.setState({ selectedItem: item });
};
DropdownBasicExample.prototype.onChangeMultiSelect = function (item) {
var updatedSelectedItem = this.state.selectedItems ? this.copyArray(this.state.selectedItems) : [];
if (item.selected) {
// add the option if it's checked
updatedSelectedItem.push(item.key);
}
else {
// remove the option if it's unchecked
var currIndex = updatedSelectedItem.indexOf(item.key);
if (currIndex > -1) {
updatedSelectedItem.splice(currIndex, 1);
}
}
this.setState({
selectedItems: updatedSelectedItem
});
};
DropdownBasicExample.prototype.copyArray = function (array) {
var newArray = [];
for (var i = 0; i < array.length; i++) {
newArray[i] = array[i];
}
return newArray;
};
DropdownBasicExample.prototype._onSetFocusButtonClicked = function () {
if (this._basicDropdown) {
this._basicDropdown.focus(true);
}
};
DropdownBasicExample.prototype._log = function (str) {
return function () {
console.log(str);
};
};
tslib_1.__decorate([
Utilities_1.autobind
], DropdownBasicExample.prototype, "changeState", null);
tslib_1.__decorate([
Utilities_1.autobind
], DropdownBasicExample.prototype, "onChangeMultiSelect", null);
tslib_1.__decorate([
Utilities_1.autobind
], DropdownBasicExample.prototype, "_onSetFocusButtonClicked", null);
return DropdownBasicExample;
}(Utilities_1.BaseComponent));
exports.DropdownBasicExample = DropdownBasicExample;
});
//# sourceMappingURL=Dropdown.Basic.Example.js.map