import * as tslib_1 from "tslib";
import * as React from 'react';
import { Facepile, OverflowButtonType, } from 'office-ui-fabric-react/lib/Facepile';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { Slider } from 'office-ui-fabric-react/lib/Slider';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import { facepilePersonas } from './FacepileExampleData';
import './Facepile.Examples.scss';
var facepileProps = {
    personas: facepilePersonas,
    maxDisplayablePersonas: 5,
    overflowButtonType: OverflowButtonType.downArrow,
    overflowButtonProps: {
        ariaLabel: 'More users',
        onClick: function (ev) {
            return alert('overflow icon clicked');
        }
    },
    ariaDescription: 'To move through the items use left and right arrow keys.'
};
var FacepileOverflowExample = /** @class */ (function (_super) {
    tslib_1.__extends(FacepileOverflowExample, _super);
    function FacepileOverflowExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            displayedPersonas: 5,
            overflowButtonType: OverflowButtonType.none
        };
        return _this;
    }
    FacepileOverflowExample.prototype.render = function () {
        var _a = this.state, displayedPersonas = _a.displayedPersonas, overflowButtonType = _a.overflowButtonType;
        facepileProps.maxDisplayablePersonas = displayedPersonas;
        facepileProps.overflowButtonType = overflowButtonType;
        return (React.createElement("div", { className: 'ms-FacepileExample' },
            React.createElement(Facepile, tslib_1.__assign({}, facepileProps)),
            React.createElement("div", { className: 'control' },
                React.createElement(Slider, { label: 'Number of Personas:', min: 0, max: 6, step: 1, showValue: true, value: this.state.displayedPersonas, onChange: this._onChangePersonaNumber }),
                React.createElement(Dropdown, { label: 'Overflow Button Type:', selectedKey: this.state.overflowButtonType, options: [
                        { key: OverflowButtonType.none, text: OverflowButtonType[OverflowButtonType.none] },
                        { key: OverflowButtonType.descriptive, text: OverflowButtonType[OverflowButtonType.descriptive] },
                        { key: OverflowButtonType.downArrow, text: OverflowButtonType[OverflowButtonType.downArrow] },
                        { key: OverflowButtonType.more, text: OverflowButtonType[OverflowButtonType.more] },
                    ], onChanged: this._onChangeType }))));
    };
    FacepileOverflowExample.prototype._onChangePersonaNumber = function (value) {
        this.setState(function (prevState) {
            prevState.displayedPersonas = value;
            return prevState;
        });
    };
    FacepileOverflowExample.prototype._onChangeType = function (value) {
        this.setState(function (prevState) {
            prevState.overflowButtonType = value.key;
            return prevState;
        });
    };
    tslib_1.__decorate([
        autobind
    ], FacepileOverflowExample.prototype, "_onChangePersonaNumber", null);
    tslib_1.__decorate([
        autobind
    ], FacepileOverflowExample.prototype, "_onChangeType", null);
    return FacepileOverflowExample;
}(React.Component));
export { FacepileOverflowExample };
//# sourceMappingURL=Facepile.Overflow.Example.js.map