@fluentui/react
Version:
Reusable React components for building web experiences.
93 lines • 4.91 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./DocumentCard.types", "@fluentui/react-window-provider", "../../utilities/dom"], function (require, exports, tslib_1, React, Utilities_1, DocumentCard_types_1, react_window_provider_1, dom_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DocumentCardBase = exports.DocumentCardContext = void 0;
var getClassNames = (0, Utilities_1.classNamesFunction)();
var COMPONENT_NAME = 'DocumentCard';
exports.DocumentCardContext = React.createContext({});
/**
* {@docCategory DocumentCard}
*/
var DocumentCardBase = exports.DocumentCardBase = /** @class */ (function (_super) {
tslib_1.__extends(DocumentCardBase, _super);
function DocumentCardBase(props) {
var _this = _super.call(this, props) || this;
_this._rootElement = React.createRef();
_this._onClick = function (ev) {
_this._onAction(ev);
};
_this._onKeyDown = function (ev) {
// eslint-disable-next-line deprecation/deprecation
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
_this._onAction(ev);
}
};
_this._onAction = function (ev) {
var _a;
var onClick = (_a = _this.props, _a.onClick), onClickHref = _a.onClickHref, onClickTarget = _a.onClickTarget;
var win = (0, dom_1.getWindowEx)(_this.context); // can only be called on the client
if (onClick) {
onClick(ev);
}
else if (!onClick && onClickHref) {
// If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref
if (onClickTarget) {
win.open(onClickHref, onClickTarget, 'noreferrer noopener nofollow');
}
else {
win.location.href = onClickHref;
}
ev.preventDefault();
ev.stopPropagation();
}
};
(0, Utilities_1.initializeComponentRef)(_this);
(0, Utilities_1.warnDeprecations)(COMPONENT_NAME, props, {
accentColor: undefined,
});
return _this;
}
DocumentCardBase.prototype.render = function () {
var _a;
// eslint-disable-next-line deprecation/deprecation
var onClick = (_a = this.props, _a.onClick), onClickHref = _a.onClickHref, children = _a.children, type = _a.type, accentColor = _a.accentColor, styles = _a.styles, theme = _a.theme, className = _a.className;
var nativeProps = (0, Utilities_1.getNativeProps)(this.props, Utilities_1.divProperties, [
'className',
'onClick',
'type',
'role',
]);
var actionable = onClick || onClickHref ? true : false;
this._classNames = getClassNames(styles, {
theme: theme,
className: className,
actionable: actionable,
compact: type === DocumentCard_types_1.DocumentCardType.compact ? 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 = this.props.role || (actionable ? (onClick ? 'button' : 'link') : undefined);
var tabIndex = actionable ? 0 : undefined;
var documentCardContextValue = { role: role, tabIndex: tabIndex };
return (React.createElement("div", tslib_1.__assign({ ref: this._rootElement, role: 'group', className: this._classNames.root, onKeyDown: actionable ? this._onKeyDown : undefined, onClick: actionable ? this._onClick : undefined, style: style }, nativeProps),
React.createElement(exports.DocumentCardContext.Provider, { value: documentCardContextValue }, children)));
};
DocumentCardBase.prototype.focus = function () {
if (this._rootElement.current) {
this._rootElement.current.focus();
}
};
DocumentCardBase.defaultProps = {
type: DocumentCard_types_1.DocumentCardType.normal,
};
DocumentCardBase.contextType = react_window_provider_1.WindowContext;
return DocumentCardBase;
}(React.Component));
});
//# sourceMappingURL=DocumentCard.base.js.map