@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
46 lines • 2.43 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({
height: 60,
width: '100%',
objectFit: 'contain',
});
var imageStyling = Styling_1.mergeStyles({
maxWidth: '100%',
height: '100%',
overflow: 'hidden',
objectFit: 'contain',
});
var ChicletXsmallBase = /** @class */ (function (_super) {
tslib_1.__extends(ChicletXsmallBase, _super);
function ChicletXsmallBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
ChicletXsmallBase.prototype.render = function () {
var _a = this.props, onClick = _a.onClick, title = _a.title, className = _a.className, footer = _a.footer, theme = _a.theme, styles = _a.styles, url = _a.url;
var footerProvided = !!footer;
this._classNames = getClassNames(styles, { theme: theme, className: className, footerProvided: footerProvided });
// if this element is actionable it should have an aria role
var role = onClick ? 'button' : 'link';
var tabIndex = onClick ? 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 ? title : null),
React.createElement("div", { className: this._classNames.url }, url)),
footer));
};
ChicletXsmallBase.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 ChicletXsmallBase;
}(React.Component));
exports.ChicletXsmallBase = ChicletXsmallBase;
//# sourceMappingURL=ChicletXsmall.base.js.map