office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
132 lines • 7.99 kB
JavaScript
import * as tslib_1 from "tslib";
// @codepen
import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown, DropdownMenuItemType } from 'office-ui-fabric-react/lib/Dropdown';
import { BaseComponent, createRef } from 'office-ui-fabric-react/lib/Utilities';
import './Dropdown.Basic.Example.scss';
var DropdownBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(DropdownBasicExample, _super);
function DropdownBasicExample(props) {
var _this = _super.call(this, props) || this;
_this._basicDropdown = createRef();
_this.changeState = function (event, item) {
console.log('here is the things updating...' + item.key + ' ' + item.text + ' ' + item.selected);
_this.setState({ selectedItem: item });
};
_this.onChangeMultiSelect = function (event, 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
});
};
_this.copyArray = function (array) {
var newArray = [];
for (var i = 0; i < array.length; i++) {
newArray[i] = array[i];
}
return newArray;
};
_this._onSetFocusButtonClicked = function () {
if (_this._basicDropdown.current) {
_this._basicDropdown.current.focus(true);
}
};
_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, { placeHolder: "Select an Option", label: "Basic uncontrolled example:", id: "Basicdrop1", ariaLabel: "Basic dropdown example", options: [
{ key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
{ key: 'A', text: 'Option a', title: 'I am 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: DropdownMenuItemType.Divider },
{ key: 'Header2', text: 'People', itemType: 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._basicDropdown }),
React.createElement(PrimaryButton, { text: "Set focus", onClick: this._onSetFocusButtonClicked }),
React.createElement(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, { label: "Controlled example:", selectedKey: selectedItem ? selectedItem.key : undefined, onChange: 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: DropdownMenuItemType.Divider },
{ key: 'E', text: 'Option e' },
{ key: 'F', text: 'Option f' },
{ key: 'G', text: 'Option g' }
] }),
React.createElement(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: 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: DropdownMenuItemType.Divider },
{ key: 'Header3', text: 'Lanuages', itemType: DropdownMenuItemType.Header },
{ key: 'English', text: 'english' },
{ key: 'French', text: 'french' },
{ key: 'Germany', text: 'germany' }
] }),
React.createElement(Dropdown, { placeHolder: "Select options", label: "Multi-Select controlled example:", selectedKeys: selectedItems, onChange: this.onChangeMultiSelect, onFocus: this._log('onFocus called'), onBlur: this._log('onBlur called'), multiSelect: true, options: [
{ key: 'Header4', text: 'Colors', itemType: DropdownMenuItemType.Header },
{ key: 'red', text: 'Red' },
{ key: 'green', text: 'Green' },
{ key: 'blue', text: 'Blue' },
{ key: 'yellow', text: 'Yellow' },
{ key: 'divider_2', text: '-', itemType: DropdownMenuItemType.Divider },
{ key: 'Header5', text: 'Flower', itemType: DropdownMenuItemType.Header },
{ key: 'rose', text: 'Rose' },
{ key: 'lily', text: 'Lily' },
{ key: 'sunflower', text: 'Sunflower' }
] }),
React.createElement(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._log = function (str) {
return function () {
console.log(str);
};
};
return DropdownBasicExample;
}(BaseComponent));
export { DropdownBasicExample };
//# sourceMappingURL=Dropdown.Basic.Example.js.map