@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
44 lines • 2.3 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({
height: 60,
width: '100%',
objectFit: 'contain',
});
var imageStyling = mergeStyles({
maxWidth: '100%',
height: '100%',
overflow: 'hidden',
objectFit: 'contain',
});
var ChicletXsmallBase = /** @class */ (function (_super) {
__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: css(preview.props.className, customPreviewStyling) })) : (React.createElement("img", { className: imageStyling, src: image, alt: imageAlt ? imageAlt : undefined }))));
};
return ChicletXsmallBase;
}(React.Component));
export { ChicletXsmallBase };
//# sourceMappingURL=ChicletXsmall.base.js.map