office-ui-fabric-react/lib/components/OverflowSet/examples/OverflowSet.Custom.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import { OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';
import * as stylesImport from './OverflowSet.Example.scss';
var styles = stylesImport;
var OverflowSetCustomExample = /** @class */ (function (_super) {
    tslib_1.__extends(OverflowSetCustomExample, _super);
    function OverflowSetCustomExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OverflowSetCustomExample.prototype.render = function () {
        return (React.createElement(OverflowSet, { items: [
                {
                    key: 'search',
                    onRender: function (item) {
                        return React.createElement(SearchBox, { placeholder: "Search" });
                    }
                },
                {
                    key: 'newItem',
                    name: 'New',
                    icon: 'Add',
                    ariaLabel: 'New. Use left and right arrow keys to navigate',
                    onClick: function () {
                        return;
                    },
                    subMenuProps: {
                        items: [
                            {
                                key: 'emailMessage',
                                name: 'Email message',
                                icon: 'Mail'
                            },
                            {
                                key: 'calendarEvent',
                                name: 'Calendar event',
                                icon: 'Calendar'
                            }
                        ]
                    }
                },
                {
                    key: 'upload',
                    name: 'Upload',
                    icon: 'Upload',
                    onClick: function () {
                        return;
                    }
                },
                {
                    key: 'share',
                    name: 'Share',
                    icon: 'Share',
                    onClick: function () {
                        return;
                    }
                }
            ], overflowItems: [
                {
                    key: 'newItem',
                    name: 'Add',
                    icon: 'Add',
                    ariaLabel: 'New. Use left and right arrow keys to navigate',
                    onClick: function () {
                        return;
                    },
                    subMenuProps: {
                        items: [
                            {
                                key: 'emailMessage',
                                name: 'Email message',
                                icon: 'Mail'
                            },
                            {
                                key: 'calendarEvent',
                                name: 'Calendar event',
                                icon: 'Calendar'
                            }
                        ]
                    }
                },
                {
                    key: 'move',
                    name: 'Move to...',
                    icon: 'MoveToFolder',
                    onClick: function () {
                        return;
                    }
                },
                {
                    key: 'copy',
                    name: 'Copy to...',
                    icon: 'Copy',
                    onClick: function () {
                        return;
                    }
                },
                {
                    key: 'rename',
                    name: 'Rename...',
                    icon: 'Edit',
                    onClick: function () {
                        return;
                    }
                },
                {
                    key: 'disabled',
                    name: 'Disabled...',
                    icon: 'Cancel',
                    disabled: true,
                    onClick: function () {
                        return;
                    }
                }
            ], onRenderOverflowButton: this._onRenderOverflowButton, onRenderItem: this._onRenderItem }));
    };
    OverflowSetCustomExample.prototype._onRenderItem = function (item) {
        if (item.onRender) {
            return item.onRender(item);
        }
        return React.createElement(DefaultButton, { iconProps: { iconName: item.icon }, menuProps: item.subMenuProps, text: item.name });
    };
    OverflowSetCustomExample.prototype._onRenderOverflowButton = function (overflowItems) {
        return (React.createElement(DefaultButton, { className: css(styles.overflowButton), menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems } }));
    };
    return OverflowSetCustomExample;
}(BaseComponent));
export { OverflowSetCustomExample };
//# sourceMappingURL=OverflowSet.Custom.Example.js.map