@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
44 lines • 2.36 kB
JavaScript
import { __extends } from "tslib";
import * as React from 'react';
import { css, classNamesFunction } from '../../Utilities';
import { mergeStyles } from '../../Styling';
var getClassNames = classNamesFunction();
var customPreviewStyling = mergeStyles('ms-ChicletCard-preview-custom', {
height: 112,
width: '100%',
objectFit: 'contain',
});
var imageStyling = mergeStyles({
maxWidth: '100%',
height: '100%',
overflow: 'hidden',
objectFit: 'contain',
});
var ChicletCardBase = /** @class */ (function (_super) {
__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: css(preview.props.className, customPreviewStyling) })) : (React.createElement("img", { className: imageStyling, src: image, alt: imageAlt ? imageAlt : undefined }))));
};
return ChicletCardBase;
}(React.Component));
export { ChicletCardBase };
//# sourceMappingURL=ChicletCard.base.js.map