@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
78 lines • 4.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Image_1 = require("office-ui-fabric-react/lib/Image");
var getClassNames = Utilities_1.classNamesFunction();
var ASSET_CDN_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/assets';
var PREVIEW_IMAGE_WIDTH = '198px';
var PREVIEW_IMAGE_HEIGHT = '122px';
var ChicletCardBase = /** @class */ (function (_super) {
tslib_1.__extends(ChicletCardBase, _super);
function ChicletCardBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onClick = function (ev) {
var onClick = _this.props.onClick;
if (onClick) {
onClick(ev);
}
};
return _this;
}
ChicletCardBase.prototype.render = function () {
var _a = this.props, title = _a.title, itemType = _a.itemType, description = _a.description, image = _a.image, imageWidth = _a.imageWidth, imageHeight = _a.imageHeight, imageAlt = _a.imageAlt, url = _a.url, onClick = _a.onClick, className = _a.className, footer = _a.footer, theme = _a.theme, styles = _a.styles;
var actionable = onClick ? true : false;
this._classNames = getClassNames(styles, { theme: theme, className: className });
// if this element is actionable it should have an aria role
var role = actionable ? (onClick ? 'button' : 'link') : undefined;
var tabIndex = actionable ? 0 : undefined;
var preview = this._renderPreviewImage(image, imageHeight, imageWidth, itemType, imageAlt);
return (React.createElement("div", { tabIndex: tabIndex, role: role, onClick: actionable ? this._onClick : undefined, className: this._classNames.root },
React.createElement("div", { className: this._classNames.preview }, preview),
React.createElement("div", { className: this._classNames.info },
React.createElement("div", { className: this._classNames.title }, title ? title : null),
React.createElement("div", { className: this._classNames.description }, description ? description : url),
footer)));
};
ChicletCardBase.prototype._renderPreviewImage = function (imageUrl, imageHeight, imageWidth, itemType, imageAlt) {
var image;
if (imageUrl) {
image = React.createElement(Image_1.Image, { width: imageWidth, height: imageHeight, src: imageUrl, role: "presentation", alt: imageAlt ? imageAlt : undefined });
}
else {
image = (React.createElement(Image_1.Image, { width: PREVIEW_IMAGE_WIDTH, height: PREVIEW_IMAGE_HEIGHT, src: itemType
? ASSET_CDN_BASE_URL + "/brand-icons/document/svg/" + itemType + "_48x1.svg"
: undefined /* @todo: this will be replaced by something built by the design team */, role: "presentation", alt: imageAlt ? imageAlt : undefined }));
}
var src;
if (itemType !== null) {
src = ASSET_CDN_BASE_URL + "/brand-icons/product/svg/" + itemType + "_16x1_5.svg";
}
var icon = React.createElement("img", { className: this._classNames.icon, src: src });
switch (itemType // for "hero" apps, we'll use the app icons
) {
case 'word':
case 'docx':
icon = React.createElement("img", { className: this._classNames.icon, src: ASSET_CDN_BASE_URL + "/brand-icons/product/svg/word_16x1_5.svg" });
break;
case 'powerpoint':
case 'pptx':
icon = React.createElement("img", { className: this._classNames.icon, src: ASSET_CDN_BASE_URL + "/brand-icons/product/svg/powerpoint_16x1_5.svg" });
break;
case 'excel':
icon = React.createElement("img", { className: this._classNames.icon, src: ASSET_CDN_BASE_URL + "/brand-icons/product/svg/excel_16x1_5.svg" });
break;
}
return (React.createElement("div", null,
image,
icon));
};
ChicletCardBase.defaultProps = {
imageWidth: PREVIEW_IMAGE_WIDTH,
imageHeight: PREVIEW_IMAGE_HEIGHT
};
return ChicletCardBase;
}(Utilities_1.BaseComponent));
exports.ChicletCardBase = ChicletCardBase;
//# sourceMappingURL=ChicletCard.base.js.map