office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
74 lines (72 loc) • 4.31 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/index", "./FacepileExampleData", "./Facepile.Examples.scss"], function (require, exports, tslib_1, React, index_1, FacepileExampleData_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ExtraDataType;
(function (ExtraDataType) {
ExtraDataType[ExtraDataType["none"] = 0] = "none";
ExtraDataType[ExtraDataType["name"] = 1] = "name";
})(ExtraDataType = exports.ExtraDataType || (exports.ExtraDataType = {}));
var FacepileBasicExample = (function (_super) {
tslib_1.__extends(FacepileBasicExample, _super);
function FacepileBasicExample() {
var _this = _super.call(this) || this;
_this.state = {
numberOfFaces: 3,
imagesFadeIn: true,
extraDataType: ExtraDataType.none,
personaSize: index_1.PersonaSize.extraSmall
};
return _this;
}
FacepileBasicExample.prototype.render = function () {
var _this = this;
var _a = this.state, extraDataType = _a.extraDataType, numberOfFaces = _a.numberOfFaces, personaSize = _a.personaSize;
var facepileProps = {
personaSize: personaSize,
personas: FacepileExampleData_1.facepilePersonas.slice(0, numberOfFaces),
getPersonaProps: function (persona) {
if (extraDataType === ExtraDataType.name) {
return {
imageShouldFadeIn: _this.state.imagesFadeIn,
hidePersonaDetails: false
};
}
return {
imageShouldFadeIn: _this.state.imagesFadeIn
};
},
ariaDescription: 'To move through the items use left and right arrow keys.'
};
return (React.createElement("div", { className: 'ms-FacepileExample' },
React.createElement(index_1.Facepile, tslib_1.__assign({}, facepileProps)),
React.createElement("div", { className: 'control' },
React.createElement(index_1.Slider, { label: 'Number of Personas:', min: 1, max: 5, step: 1, showValue: true, value: numberOfFaces, onChange: function (value) { return _this.setState(function (prevState) {
prevState.numberOfFaces = value;
return prevState;
}); } })),
React.createElement(index_1.Checkbox, { label: 'Fade In', checked: this.state.imagesFadeIn, onChange: function (ev, checked) {
_this.setState(function (prevState) {
prevState.imagesFadeIn = checked;
return prevState;
});
} }),
React.createElement(index_1.Dropdown, { label: 'Persona Size:', selectedKey: this.state.personaSize, options: [
{ key: index_1.PersonaSize.extraSmall, text: index_1.PersonaSize[index_1.PersonaSize.extraSmall] },
{ key: index_1.PersonaSize.extraExtraSmall, text: index_1.PersonaSize[index_1.PersonaSize.extraExtraSmall] }
], onChanged: function (value) { return _this.setState(function (prevState) {
prevState.personaSize = value.key;
return prevState;
}); } }),
React.createElement(index_1.Dropdown, { label: 'Additional Data:', selectedKey: this.state.extraDataType, options: [
{ key: ExtraDataType.none, text: ExtraDataType[ExtraDataType.none] },
{ key: ExtraDataType.name, text: ExtraDataType[ExtraDataType.name] }
], onChanged: function (value) { return _this.setState(function (prevState) {
prevState.extraDataType = value.key;
return prevState;
}); } })));
};
return FacepileBasicExample;
}(React.Component));
exports.FacepileBasicExample = FacepileBasicExample;
});
//# sourceMappingURL=Facepile.Basic.Example.js.map