office-ui-fabric-react/lib/components/DocumentCard/DocumentCard.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { DocumentCardType } from './DocumentCard.types';
import { BaseComponent, css } from '../../Utilities';
import * as stylesImport from './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 === 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: css('ms-DocumentCard', styles.root, (_b = {},
                _b['ms-DocumentCard--actionable ' + styles.rootIsActionable] = actionable,
                _b['ms-DocumentCard--compact ' + styles.rootIsCompact] = type === DocumentCardType.compact ? true : false,
                _b), className), onKeyDown: actionable ? this._onKeyDown : undefined, onClick: actionable ? this._onClick : undefined, style: style }, children));
        var _b;
    };
    DocumentCard.defaultProps = {
        type: DocumentCardType.normal
    };
    return DocumentCard;
}(BaseComponent));
export { DocumentCard };
//# sourceMappingURL=DocumentCard.js.map