define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/ResizeGroup", "../../OverflowSet", "office-ui-fabric-react/lib/Checkbox", "office-ui-fabric-react/lib/Dropdown", "./ResizeGroup.Example.scss"], function (require, exports, tslib_1, React, Utilities_1, Button_1, ResizeGroup_1, OverflowSet_1, Checkbox_1, Dropdown_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    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 = tslib_1.__assign({}, result, { cacheKey: cacheKey });
        }
        return result;
    }
    function computeCacheKey(primaryControls) {
        return primaryControls.reduce(function (acc, current) { return acc + current.key; }, '');
    }
    var ResizeGroupOverflowSetExample = (function (_super) {
        tslib_1.__extends(ResizeGroupOverflowSetExample, _super);
        function ResizeGroupOverflowSetExample(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                short: false,
                buttonsChecked: false,
                cachingEnabled: false,
                onGrowDataEnabled: false,
                numberOfItems: 20
            };
            return _this;
        }
        ResizeGroupOverflowSetExample.prototype.render = function () {
            var _a = this.state, numberOfItems = _a.numberOfItems, cachingEnabled = _a.cachingEnabled, buttonsChecked = _a.buttonsChecked, short = _a.short, onGrowDataEnabled = _a.onGrowDataEnabled;
            var dataToRender = generateData(numberOfItems, cachingEnabled, buttonsChecked);
            return (React.createElement("div", { className: short ? styles.resizeIsShort : 'notResized' },
                React.createElement(ResizeGroup_1.ResizeGroup, { data: dataToRender, onReduceData: this.onReduceData, onGrowData: onGrowDataEnabled ? this.onGrowData : undefined, onRenderData: function (data) {
                        return (React.createElement(OverflowSet_1.OverflowSet, { items: data.primary, overflowItems: data.overflow.length ? data.overflow : null, onRenderItem: function (item) {
                                return (React.createElement(Button_1.DefaultButton, { text: item.name, iconProps: { iconName: item.icon }, onClick: item.onClick, checked: item.checked }));
                            }, onRenderOverflowButton: function (overflowItems) {
                                return (React.createElement(Button_1.DefaultButton, { menuProps: { items: overflowItems } }));
                            } }));
                    } }),
                React.createElement("div", { className: styles.settingsGroup },
                    React.createElement(Checkbox_1.Checkbox, { label: 'Enable caching', onChange: this.onCachingEnabledChanged, checked: cachingEnabled }),
                    React.createElement(Checkbox_1.Checkbox, { label: 'Set onGrowData', onChange: this.onGrowDataEnabledChanged, checked: onGrowDataEnabled }),
                    React.createElement(Checkbox_1.Checkbox, { label: 'Buttons checked', onChange: this.onButtonsCheckedChanged, checked: buttonsChecked }),
                    React.createElement("div", { className: styles.itemCountDropdown },
                        React.createElement(Dropdown_1.Dropdown, { label: 'Number of items to render', selectedKey: numberOfItems.toString(), onChanged: this.onNumberOfItemsChanged, options: [{ key: '20', text: '20' },
                                { key: '30', text: '30' },
                                { key: '40', text: '40' },
                                { key: '50', text: '50' },
                                { key: '75', text: '75' },
                                { key: '100', text: '100' },
                                { key: '200', text: '200' }] })))));
        };
        ResizeGroupOverflowSetExample.prototype.onReduceData = function (currentData) {
            if (currentData.primary.length === 0) {
                return undefined;
            }
            var overflow = currentData.primary.slice(-1).concat(currentData.overflow);
            var primary = currentData.primary.slice(0, -1);
            var cacheKey = undefined;
            if (this.state.cachingEnabled) {
                cacheKey = computeCacheKey(primary);
            }
            return { primary: primary, overflow: overflow, cacheKey: cacheKey };
        };
        ResizeGroupOverflowSetExample.prototype.onGrowData = function (currentData) {
            if (currentData.overflow.length === 0) {
                return undefined;
            }
            var overflow = currentData.overflow.slice(1);
            var primary = currentData.primary.concat(currentData.overflow.slice(0, 1));
            var cacheKey = undefined;
            if (this.state.cachingEnabled) {
                cacheKey = computeCacheKey(primary);
            }
            return { primary: primary, overflow: overflow, cacheKey: cacheKey };
        };
        ResizeGroupOverflowSetExample.prototype.onCachingEnabledChanged = function (_, checked) {
            this.setState({ cachingEnabled: checked });
        };
        ResizeGroupOverflowSetExample.prototype.onGrowDataEnabledChanged = function (_, checked) {
            this.setState({ onGrowDataEnabled: checked });
        };
        ResizeGroupOverflowSetExample.prototype.onButtonsCheckedChanged = function (_, checked) {
            this.setState({ buttonsChecked: checked });
        };
        ResizeGroupOverflowSetExample.prototype.onNumberOfItemsChanged = function (option) {
            this.setState({ numberOfItems: parseInt(option.text, 10) });
        };
        return ResizeGroupOverflowSetExample;
    }(Utilities_1.BaseComponent));
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ResizeGroupOverflowSetExample.prototype, "onReduceData", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ResizeGroupOverflowSetExample.prototype, "onGrowData", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ResizeGroupOverflowSetExample.prototype, "onCachingEnabledChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ResizeGroupOverflowSetExample.prototype, "onGrowDataEnabledChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ResizeGroupOverflowSetExample.prototype, "onButtonsCheckedChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ResizeGroupOverflowSetExample.prototype, "onNumberOfItemsChanged", null);
    exports.ResizeGroupOverflowSetExample = ResizeGroupOverflowSetExample;
});

//# sourceMappingURL=ResizeGroup.OverflowSet.Example.js.map
