office-ui-fabric-react/lib/components/ContextualMenu/examples/ContextualMenu.CustomMenuList.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
// @codepen
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import './ContextualMenuExample.scss';
var ITEMS = [
    {
        key: 'newItem',
        text: 'New',
        onClick: function () { return console.log('New clicked'); }
    },
    {
        key: 'rename',
        text: 'Rename',
        onClick: function () { return console.log('Rename clicked'); }
    },
    {
        key: 'edit',
        text: 'Edit',
        onClick: function () { return console.log('Edit clicked'); }
    },
    {
        key: 'properties',
        text: 'Properties',
        onClick: function () { return console.log('Properties clicked'); }
    },
    {
        key: 'linkNoTarget',
        text: 'Link same window',
        href: 'http://bing.com'
    },
    {
        key: 'linkWithTarget',
        text: 'Link new window',
        href: 'http://bing.com',
        target: '_blank'
    },
    {
        key: 'linkWithOnClick',
        name: 'Link click',
        href: 'http://bing.com',
        onClick: function (ev) {
            alert('Link clicked');
            ev.preventDefault();
        },
        target: '_blank'
    },
    {
        key: 'disabled',
        text: 'Disabled item',
        disabled: true,
        onClick: function () { return console.error('Disabled item should not be clickable.'); }
    }
];
var ContextualMenuWithCustomMenuListExample = /** @class */ (function (_super) {
    tslib_1.__extends(ContextualMenuWithCustomMenuListExample, _super);
    function ContextualMenuWithCustomMenuListExample(props) {
        var _this = _super.call(this, props) || this;
        _this._renderMenuList = _this._renderMenuList.bind(_this);
        _this._onAbort = _this._onAbort.bind(_this);
        _this._onChange = _this._onChange.bind(_this);
        _this.state = {
            items: ITEMS
        };
        return _this;
    }
    ContextualMenuWithCustomMenuListExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(DefaultButton, { id: "ContextualMenuButton1", text: "Click for ContextualMenu", menuProps: {
                    onRenderMenuList: this._renderMenuList,
                    title: 'Actions',
                    shouldFocusOnMount: true,
                    items: this.state.items
                } })));
    };
    ContextualMenuWithCustomMenuListExample.prototype._onAbort = function () {
        this.setState({ items: ITEMS });
    };
    ContextualMenuWithCustomMenuListExample.prototype._onChange = function (newValue) {
        var filteredItems = ITEMS.filter(function (item) { return item.text && item.text.toLowerCase().includes(newValue.toLowerCase()); });
        if (!filteredItems || !filteredItems.length) {
            filteredItems.push({
                key: 'no_results',
                onRender: function (item, dismissMenu) { return (React.createElement("div", { key: "no_results", style: {
                        width: '100%',
                        height: '100px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    } },
                    React.createElement(Icon, { iconName: "SearchIssue", title: "No actions found" }),
                    React.createElement("span", null, "No actions found"))); }
            });
        }
        this.setState(function (prevState, props) { return ({
            items: filteredItems
        }); });
    };
    ContextualMenuWithCustomMenuListExample.prototype._renderMenuList = function (menuListProps, defaultRender) {
        return (React.createElement("div", null,
            React.createElement("div", { style: { borderBottom: '1px solid #ccc' } },
                React.createElement(SearchBox, { placeholder: "Filter actions", onAbort: this._onAbort, onChange: this._onChange, styles: {
                        root: [{ margin: '8px' }]
                    } })),
            defaultRender(menuListProps)));
    };
    return ContextualMenuWithCustomMenuListExample;
}(React.Component));
export { ContextualMenuWithCustomMenuListExample };
//# sourceMappingURL=ContextualMenu.CustomMenuList.Example.js.map