office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
58 lines • 3.76 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import './Dropdown.Basic.Example.scss';
import { DropdownMenuItemType } from './../Dropdown.types';
import { Icon } from '../../../Icon';
var DropdownCustomExample = /** @class */ (function (_super) {
tslib_1.__extends(DropdownCustomExample, _super);
function DropdownCustomExample(props) {
var _this = _super.call(this, props) || this;
_this._onRenderOption = function (option) {
return (React.createElement("div", { className: "dropdownExample-option" },
option.data &&
option.data.icon && (React.createElement(Icon, { style: { marginRight: '8px' }, iconName: option.data.icon, "aria-hidden": "true", title: option.data.icon })),
React.createElement("span", null, option.text)));
};
_this._onRenderTitle = function (options) {
var option = options[0];
return (React.createElement("div", { className: "dropdownExample-option" },
option.data &&
option.data.icon && (React.createElement(Icon, { style: { marginRight: '8px' }, iconName: option.data.icon, "aria-hidden": "true", title: option.data.icon })),
React.createElement("span", null, option.text)));
};
_this._onRenderPlaceHolder = function (props) {
return (React.createElement("div", { className: "dropdownExample-placeholder" },
React.createElement(Icon, { style: { marginRight: '8px' }, iconName: 'MessageFill', "aria-hidden": "true" }),
React.createElement("span", null, props.placeHolder)));
};
_this._onRenderCaretDown = function (props) {
return React.createElement(Icon, { iconName: "CirclePlus" });
};
_this.state = {
selectedItem: null
};
return _this;
}
DropdownCustomExample.prototype.render = function () {
return (React.createElement("div", { className: "docs-DropdownExample" },
React.createElement(Dropdown, { placeHolder: "Select an Option", label: "Custom example:", id: "Customdrop1", ariaLabel: "Custom dropdown example", onRenderPlaceHolder: this._onRenderPlaceHolder, onRenderTitle: this._onRenderTitle, onRenderOption: this._onRenderOption, onRenderCaretDown: this._onRenderCaretDown, options: [
{ key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
{ key: 'A', text: 'Option a', data: { icon: 'Memo' } },
{ key: 'B', text: 'Option b', data: { icon: 'Print' } },
{ key: 'C', text: 'Option c', data: { icon: 'ShoppingCart' } },
{ key: 'D', text: 'Option d', data: { icon: 'Train' } },
{ key: 'E', text: 'Option e', data: { icon: 'Repair' } },
{ key: 'divider_2', text: '-', itemType: DropdownMenuItemType.Divider },
{ key: 'Header2', text: 'People', itemType: DropdownMenuItemType.Header },
{ key: 'F', text: 'Option f', data: { icon: 'Running' } },
{ key: 'G', text: 'Option g', data: { icon: 'EmojiNeutral' } },
{ key: 'H', text: 'Option h', data: { icon: 'ChatInviteFriend' } },
{ key: 'I', text: 'Option i', data: { icon: 'SecurityGroup' } },
{ key: 'J', text: 'Option j', data: { icon: 'AddGroup' } }
] })));
};
return DropdownCustomExample;
}(React.Component));
export { DropdownCustomExample };
//# sourceMappingURL=Dropdown.Custom.Example.js.map