office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
101 lines (99 loc) • 6.74 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Styling", "./ActivityItem.styles", "office-ui-fabric-react/lib/Persona"], function (require, exports, tslib_1, React, Utilities_1, Styling_1, ActivityItem_styles_1, Persona_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ActivityItem = (function (_super) {
tslib_1.__extends(ActivityItem, _super);
function ActivityItem(props) {
return _super.call(this, props) || this;
}
ActivityItem.prototype.render = function () {
var _a = this.props, className = _a.className, _b = _a.onRenderIcon, onRenderIcon = _b === void 0 ? this._onRenderIcon : _b, _c = _a.onRenderActivityDescription, onRenderActivityDescription = _c === void 0 ? this._onRenderActivityDescription : _c, _d = _a.onRenderComments, onRenderComments = _d === void 0 ? this._onRenderComments : _d, _e = _a.onRenderTimeStamp, onRenderTimeStamp = _e === void 0 ? this._onRenderTimeStamp : _e, customStyles = _a.styles;
this._styles = ActivityItem_styles_1.getStyles(undefined, customStyles);
this._classNames = this._getClassNames(this._styles, this.props.className, this.props.activityPersonas, this.props.isCompact);
return (React.createElement("div", { className: this._classNames.root, style: this.props.style },
(this.props.onRenderIcon || this.props.activityPersonas) &&
React.createElement("div", { className: this._classNames.activityTypeIcon }, onRenderIcon(this.props, this._onRenderIcon)),
React.createElement("div", { className: this._classNames.activityContent },
onRenderActivityDescription(this.props, this._onRenderActivityDescription),
onRenderComments(this.props, this._onRenderComments),
onRenderTimeStamp(this.props, this._onRenderTimeStamp))));
};
ActivityItem.prototype._onRenderIcon = function (props) {
if (props.activityPersonas) {
return this._onRenderPersonaArray(props);
}
};
ActivityItem.prototype._onRenderActivityDescription = function (props) {
if (props.activityDescriptionText) {
return (React.createElement("span", { className: this._classNames.activityText }, props.activityDescriptionText));
}
};
ActivityItem.prototype._onRenderComments = function (props) {
if (!props.isCompact && props.commentText) {
return (React.createElement("div", { className: this._classNames.commentText }, props.commentText));
}
};
ActivityItem.prototype._onRenderTimeStamp = function (props) {
if (!props.isCompact && props.timeStamp) {
return (React.createElement("div", { className: this._classNames.timeStamp }, props.timeStamp));
}
};
// If activityPersonas is an array of persona props, build the persona cluster element.
ActivityItem.prototype._onRenderPersonaArray = function (props) {
var _this = this;
var personaElement;
var activityPersonas = props.activityPersonas;
if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
var personaList_1 = [];
var showSize16Personas_1 = (activityPersonas.length > 1 || props.isCompact);
var personaLimit_1 = props.isCompact ? 3 : 4;
activityPersonas.filter(function (person, index) { return index < personaLimit_1; }).forEach(function (person, index) {
personaList_1.push(React.createElement(Persona_1.Persona, tslib_1.__assign({}, person, {
// tslint:disable-next-line:no-string-literal
key: person['key'] ? person['key'] : index, className: _this._classNames.activityPersona, size: showSize16Personas_1 ? Persona_1.PersonaSize.size16 : Persona_1.PersonaSize.extraSmall, hidePersonaDetails: true, style: props.isCompact && {
display: 'inline-block',
width: '8px',
minWidth: '8px',
overflow: 'visible'
} })));
});
personaElement = React.createElement("div", { className: this._classNames.personaContainer }, personaList_1);
}
return personaElement;
};
// Determine what classNames each element needs
ActivityItem.prototype._getClassNames = function (styles, className, activityPersonas, isCompact) {
return {
root: Styling_1.mergeStyles('ms-ActivityItem', styles.root, className, isCompact && styles.isCompactRoot),
personaContainer: Styling_1.mergeStyles('ms-ActivityItem-personaContainer', styles.personaContainer, isCompact && styles.isCompactPersonaContainer),
activityPersona: Styling_1.mergeStyles('ms-ActivityItem-activityPersona', styles.activityPersona, isCompact && styles.isCompactPersona, !isCompact && activityPersonas && activityPersonas.length === 2 && styles.doublePersona),
activityTypeIcon: Styling_1.mergeStyles('ms-ActivityItem-activityTypeIcon', styles.activityTypeIcon, isCompact && styles.isCompactIcon),
activityContent: Styling_1.mergeStyles('ms-ActivityItem-activityContent', styles.activityContent, isCompact && styles.isCompactContent),
activityText: Styling_1.mergeStyles('ms-ActivityItem-activityText', styles.activityText),
commentText: Styling_1.mergeStyles('ms-ActivityItem-commentText', styles.commentText),
timeStamp: Styling_1.mergeStyles('ms-ActivityItem-timeStamp', styles.timeStamp)
};
};
return ActivityItem;
}(Utilities_1.BaseComponent));
tslib_1.__decorate([
Utilities_1.autobind
], ActivityItem.prototype, "_onRenderIcon", null);
tslib_1.__decorate([
Utilities_1.autobind
], ActivityItem.prototype, "_onRenderActivityDescription", null);
tslib_1.__decorate([
Utilities_1.autobind
], ActivityItem.prototype, "_onRenderComments", null);
tslib_1.__decorate([
Utilities_1.autobind
], ActivityItem.prototype, "_onRenderTimeStamp", null);
tslib_1.__decorate([
Utilities_1.autobind
], ActivityItem.prototype, "_onRenderPersonaArray", null);
tslib_1.__decorate([
Utilities_1.memoize
], ActivityItem.prototype, "_getClassNames", null);
exports.ActivityItem = ActivityItem;
});
//# sourceMappingURL=ActivityItem.js.map