office-ui-fabric-react/lib/components/Facepile/examples/Facepile.AddFace.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { Facepile, OverflowButtonType } from 'office-ui-fabric-react/lib/Facepile';
import { facepilePersonas } from './FacepileExampleData';
var FacepileAddFaceExample = /** @class */ (function (_super) {
    tslib_1.__extends(FacepileAddFaceExample, _super);
    function FacepileAddFaceExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            numberOfFaces: 0
        };
        return _this;
    }
    FacepileAddFaceExample.prototype.render = function () {
        var _this = this;
        var numberOfFaces = this.state.numberOfFaces;
        var facepileProps = {
            personas: facepilePersonas.slice(0, numberOfFaces),
            maxDisplayablePersonas: 5,
            overflowButtonProps: {
                ariaLabel: 'More users',
                onClick: function (ev) { return alert('overflow icon clicked'); }
            },
            overflowButtonType: OverflowButtonType.descriptive,
            showAddButton: true,
            addButtonProps: {
                ariaLabel: 'Add a new person',
                onClick: function (ev) {
                    return _this.setState({
                        numberOfFaces: _this.state.numberOfFaces + 1
                    });
                }
            },
            ariaDescription: 'To move through the items use left and right arrow keys.'
        };
        return React.createElement(Facepile, tslib_1.__assign({}, facepileProps));
    };
    return FacepileAddFaceExample;
}(React.Component));
export { FacepileAddFaceExample };
//# sourceMappingURL=Facepile.AddFace.Example.js.map