@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
46 lines • 2.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Styling_1 = require("../../Styling");
var getClassNames = Utilities_1.classNamesFunction();
var customPreviewStyling = Styling_1.mergeStyles('ms-ChicletCard-preview-custom', {
height: 112,
width: '100%',
objectFit: 'contain',
});
var imageStyling = Styling_1.mergeStyles({
maxWidth: '100%',
height: '100%',
overflow: 'hidden',
objectFit: 'contain',
});
var ChicletCardBase = /** @class */ (function (_super) {
tslib_1.__extends(ChicletCardBase, _super);
function ChicletCardBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
ChicletCardBase.prototype.render = function () {
var _a = this.props, title = _a.title, description = _a.description, 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 = onClick ? 'button' : 'link';
var tabIndex = actionable ? 0 : undefined;
return (React.createElement("div", { tabIndex: tabIndex, role: role, onClick: onClick, className: this._classNames.root },
this._renderPreview(),
React.createElement("div", { className: this._classNames.info },
React.createElement("div", { className: this._classNames.title }, title),
React.createElement("div", { className: this._classNames.description }, description ? description : url),
footer)));
};
ChicletCardBase.prototype._renderPreview = function () {
var _a = this.props, image = _a.image, imageAlt = _a.imageAlt, preview = _a.preview;
return (React.createElement("div", { className: this._classNames.preview }, preview ? ( // render custom preview
React.cloneElement(preview, { className: Utilities_1.css(preview.props.className, customPreviewStyling) })) : (React.createElement("img", { className: imageStyling, src: image, alt: imageAlt ? imageAlt : undefined }))));
};
return ChicletCardBase;
}(React.Component));
exports.ChicletCardBase = ChicletCardBase;
//# sourceMappingURL=ChicletCard.base.js.map