office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
63 lines • 3.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var DocumentCard_types_1 = require("./DocumentCard.types");
var Utilities_1 = require("../../Utilities");
var stylesImport = require("./DocumentCard.scss");
var styles = stylesImport;
var DocumentCard = /** @class */ (function (_super) {
tslib_1.__extends(DocumentCard, _super);
function DocumentCard(props) {
var _this = _super.call(this, props) || this;
_this._onClick = function (ev) {
_this._onAction(ev);
};
_this._onKeyDown = function (ev) {
if (ev.which === 13 /* enter */ || ev.which === 32 /* space */) {
_this._onAction(ev);
}
};
_this._onAction = function (ev) {
var _a = _this.props, onClick = _a.onClick, onClickHref = _a.onClickHref;
if (onClick) {
onClick(ev);
}
else if (!onClick && onClickHref) {
// If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref
window.location.href = onClickHref;
ev.preventDefault();
ev.stopPropagation();
}
};
_this._warnDeprecations({
accentColor: undefined
});
return _this;
}
DocumentCard.prototype.render = function () {
var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, children = _a.children, className = _a.className, type = _a.type, accentColor = _a.accentColor;
var actionable = onClick || onClickHref ? true : false;
// Override the border color if an accent color was provided (compact card only)
var style;
if (type === DocumentCard_types_1.DocumentCardType.compact && accentColor) {
style = {
borderBottomColor: accentColor
};
}
// if this element is actionable it should have an aria role
var role = actionable ? (onClick ? 'button' : 'link') : undefined;
var tabIndex = actionable ? 0 : undefined;
return (React.createElement("div", { tabIndex: tabIndex, role: role, className: Utilities_1.css('ms-DocumentCard', styles.root, (_b = {},
_b['ms-DocumentCard--actionable ' + styles.rootIsActionable] = actionable,
_b['ms-DocumentCard--compact ' + styles.rootIsCompact] = type === DocumentCard_types_1.DocumentCardType.compact ? true : false,
_b), className), onKeyDown: actionable ? this._onKeyDown : undefined, onClick: actionable ? this._onClick : undefined, style: style }, children));
var _b;
};
DocumentCard.defaultProps = {
type: DocumentCard_types_1.DocumentCardType.normal
};
return DocumentCard;
}(Utilities_1.BaseComponent));
exports.DocumentCard = DocumentCard;
//# sourceMappingURL=DocumentCard.js.map