synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
102 lines • 6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var IconSvg_1 = (0, tslib_1.__importDefault)(require("../../IconSvg"));
var RegularExpressions_1 = require("../../../utils/functions/RegularExpressions");
var CardFooter = /** @class */ (function (_super) {
(0, tslib_1.__extends)(CardFooter, _super);
function CardFooter(props) {
var _this = _super.call(this, props) || this;
_this.renderRowValue = function (columnName, value, tableColumnName) {
var columnIconOptions = _this.props.columnIconOptions;
if (!value.match || !value.trim) {
// value can sometimes be a react element, so it doesn't have a .match function, interestingly I didn't
// see typeof return 'object' for that case which would be a better check.
return value;
}
value = value.trim();
if (value.match(RegularExpressions_1.DOI_REGEX)) {
return (React.createElement("a", { "data-search-handle": columnName, target: "_blank", rel: "noopener noreferrer", href: "https://dx.doi.org/" + value }, value));
}
// Only display icon when columnIconOptions is set in config file
if (columnIconOptions && columnIconOptions.columns && Object.keys(columnIconOptions.columns).includes(tableColumnName)) {
var options = columnIconOptions.columns[tableColumnName][value];
if (!options) { // if we can't find an icon to match, just return the value
return React.createElement("span", null, value);
}
else {
options.padding = "right";
return (React.createElement(React.Fragment, null,
React.createElement(IconSvg_1.default, { options: options }),
React.createElement("span", { style: { "verticalAlign": "middle" } }, value)));
}
}
return value;
};
_this.renderRows = function (values, limit, isDesktop) {
return values.map(function (kv, index) {
var hideClass = index >= limit ? 'SRC-hidden' : '';
var columnName = kv[0];
var value = _this.renderRowValue(columnName, kv[1], kv[2]);
if (isDesktop) {
return (React.createElement("tr", { className: 'SRC-cardRowDesktop ' + hideClass, key: index },
React.createElement("td", { className: 'SRC-verticalAlignTop SRC-row-label' }, columnName),
React.createElement("td", { "data-search-handle": columnName, className: 'SRC-row-data SRC-limitMaxWidth ' }, value)));
}
return (React.createElement(React.Fragment, { key: index },
React.createElement("tr", { className: 'SRC-cardRowMobile ' + hideClass },
React.createElement("td", { className: 'SRC-verticalAlignTop SRC-row-label' }, columnName)),
React.createElement("tr", { className: 'SRC-cardRowMobile ' + hideClass },
React.createElement("td", { "data-search-handle": columnName, className: "SRC-row-data SRC-limitMaxWidth" }, value))));
});
};
_this.state = {
isShowMoreOn: false,
isDesktop: false,
};
_this.toggleShowMore = _this.toggleShowMore.bind(_this);
_this.updatePredicate = _this.updatePredicate.bind(_this);
return _this;
}
CardFooter.prototype.toggleShowMore = function () {
this.setState({
isShowMoreOn: !this.state.isShowMoreOn,
});
};
CardFooter.prototype.componentDidMount = function () {
this.updatePredicate();
window.addEventListener('resize', this.updatePredicate);
};
CardFooter.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.updatePredicate);
};
CardFooter.prototype.updatePredicate = function () {
this.setState({ isDesktop: window.innerWidth > 600 });
};
CardFooter.prototype.render = function () {
var _a;
var _b = this.props, values = _b.values, _c = _b.secondaryLabelLimit, secondaryLabelLimit = _c === void 0 ? 3 : _c;
var _d = this.state, isShowMoreOn = _d.isShowMoreOn, isDesktop = _d.isDesktop;
var valuesFiltered = values.filter(function (el) { return el[1]; });
var hasMoreValuesThanLimit = valuesFiltered.length > secondaryLabelLimit;
var limit = !hasMoreValuesThanLimit || isShowMoreOn ? Infinity : secondaryLabelLimit;
return (React.createElement("div", { className: "SRC-cardMetadata " + (this.props.isHeader ? 'SRC-card-footer-header' : '') + " " + ((_a = this.props.className) !== null && _a !== void 0 ? _a : '') },
React.createElement("table", null,
React.createElement("tbody", null,
this.renderRows(valuesFiltered, limit, isDesktop),
hasMoreValuesThanLimit && (React.createElement("tr", { className: "SRC-cardRow" },
React.createElement("td", null,
React.createElement("a", { style: { textAlign: 'left', margin: 0, padding: 0 }, onClick: this.toggleShowMore, className: "highlight-link" },
"Show ",
isShowMoreOn ? 'Less' : 'More',
React.createElement(IconSvg_1.default, { options: {
icon: isShowMoreOn
? 'expandLess'
: 'expandMore'
} })))))))));
};
return CardFooter;
}(React.Component));
exports.default = CardFooter;
//# sourceMappingURL=CardFooter.js.map