office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
65 lines (63 loc) • 3.77 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Dropdown", "./../Dropdown.Props", "./Dropdown.Basic.Example.scss"], function (require, exports, tslib_1, React, Dropdown_1, Dropdown_Props_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DropdownBasicExample = (function (_super) {
tslib_1.__extends(DropdownBasicExample, _super);
function DropdownBasicExample() {
var _this = _super.call(this) || this;
_this.state = {
selectedItem: null
};
return _this;
}
DropdownBasicExample.prototype.render = function () {
var _this = this;
var selectedItem = this.state.selectedItem;
return (React.createElement("div", { className: '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_Props_1.DropdownMenuItemType.Header },
{ 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: 'divider_2', text: '-', itemType: Dropdown_Props_1.DropdownMenuItemType.Divider },
{ key: 'Header2', text: 'People', itemType: Dropdown_Props_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' },
] }),
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' },
], disabled: true }),
React.createElement(Dropdown_1.Dropdown, { label: 'Controlled example:', selectedKey: selectedItem && selectedItem.key, onChanged: function (item) { return _this.setState({ selectedItem: item }); }, 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_Props_1.DropdownMenuItemType.Divider },
{ key: 'E', text: 'Option e' },
{ key: 'F', text: 'Option f' },
{ key: 'G', text: 'Option g' },
] })));
};
DropdownBasicExample.prototype.makeList = function (items) {
var list = [];
for (var i = 0; i < items; i++) {
list.push({ key: i, text: 'Option ' + i });
}
return list;
};
return DropdownBasicExample;
}(React.Component));
exports.DropdownBasicExample = DropdownBasicExample;
});
//# sourceMappingURL=Dropdown.Basic.Example.js.map