define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Dropdown", "./../Dropdown.types", "../../Icon", "./Dropdown.Basic.Example.scss"], function (require, exports, tslib_1, React, Dropdown_1, Dropdown_types_1, Icon_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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_1.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_1.Icon, { style: { marginRight: '8px' }, iconName: 'MessageFill', "aria-hidden": 'true' }),
                    React.createElement("span", null, props.placeHolder)));
            };
            _this._onRenderCaretDown = function (props) {
                return (React.createElement(Icon_1.Icon, { iconName: 'CirclePlus' }));
            };
            _this.state = {
                selectedItem: null
            };
            return _this;
        }
        DropdownCustomExample.prototype.render = function () {
            return (React.createElement("div", { className: 'docs-DropdownExample' },
                React.createElement(Dropdown_1.Dropdown, { placeHolder: 'Select an Option', label: 'Custom example:', id: 'Customdrop1', ariaLabel: 'Custom dropdown example', onRenderPlaceHolder: this._onRenderPlaceHolder, onRenderTitle: this._onRenderOption, onRenderOption: this._onRenderOption, onRenderCaretDown: this._onRenderCaretDown, options: [
                        { key: 'Header', text: 'Actions', itemType: Dropdown_types_1.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: Dropdown_types_1.DropdownMenuItemType.Divider },
                        { key: 'Header2', text: 'People', itemType: Dropdown_types_1.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));
    exports.DropdownCustomExample = DropdownCustomExample;
});
//# sourceMappingURL=Dropdown.Custom.Example.js.map