import { __assign, __extends, __spreadArrays } from "tslib";
import * as React from 'react';
import { mergeStyles, ResizeGroupDirection, CommandBarButton, ResizeGroup, OverflowSet, DirectionalHint } from 'office-ui-fabric-react';
function generateData(count, cachingEnabled, checked) {
    var icons = ['Add', 'Share', 'Upload'];
    var dataItems = [];
    var cacheKey = '';
    for (var index = 0; index < count; index++) {
        var item = {
            key: "item" + index,
            name: "Item " + index,
            icon: icons[index % icons.length],
            checked: checked
        };
        cacheKey = cacheKey + item.key;
        dataItems.push(item);
    }
    var result = {
        primary: dataItems,
        overflow: []
    };
    if (cachingEnabled) {
        result = __assign(__assign({}, result), { cacheKey: cacheKey });
    }
    return result;
}
// Styles for the vertical buttons
var buttonStyles = {
    root: {
        paddingBottom: 10,
        paddingTop: 10,
        width: 100
    }
};
// Styles for the container of the ResizeGroup
// This is only for the example to be constrained to a certain height to demonstrate the resizing
var exampleHeight = '40vh';
var resizeRootClassName = mergeStyles({ height: exampleHeight });
var ResizeGroupVerticalOverflowSetExample = /** @class */ (function (_super) {
    __extends(ResizeGroupVerticalOverflowSetExample, _super);
    function ResizeGroupVerticalOverflowSetExample() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._onReduceData = function (currentData) {
            if (currentData.primary.length === 0) {
                return undefined;
            }
            var overflow = __spreadArrays(currentData.primary.slice(-1), currentData.overflow);
            var primary = currentData.primary.slice(0, -1);
            return { primary: primary, overflow: overflow, undefined: undefined };
        };
        return _this;
    }
    ResizeGroupVerticalOverflowSetExample.prototype.render = function () {
        var dataToRender = generateData(20, false, false);
        return (React.createElement(ResizeGroup, { className: resizeRootClassName, role: "tabpanel", "aria-label": "Vertical Resize Group with an Overflow Set", direction: ResizeGroupDirection.vertical, data: dataToRender, onReduceData: this._onReduceData, 
            // tslint:disable-next-line:jsx-no-lambda
            onRenderData: function (data) {
                return (React.createElement(OverflowSet, { role: "menubar", vertical: true, items: data.primary, overflowItems: data.overflow.length ? data.overflow : null, onRenderItem: function (item) {
                        return (React.createElement(CommandBarButton, { role: "menuitem", text: item.name, iconProps: { iconName: item.icon }, onClick: item.onClick, checked: item.checked, styles: buttonStyles }));
                    }, onRenderOverflowButton: function (overflowItems) {
                        return (React.createElement(CommandBarButton, { role: "menuitem", styles: buttonStyles, menuIconProps: { iconName: 'ChevronRight' }, menuProps: { items: overflowItems, directionalHint: DirectionalHint.rightCenter } }));
                    } }));
            } }));
    };
    return ResizeGroupVerticalOverflowSetExample;
}(React.Component));
export { ResizeGroupVerticalOverflowSetExample };
//# sourceMappingURL=ResizeGroup.VerticalOverflowSet.Example.js.map