synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
110 lines • 4.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var SynapseClient_1 = require("../../utils/SynapseClient");
var SynapseContext_1 = require("../../utils/SynapseContext");
var synapseTypes_1 = require("../../utils/synapseTypes/");
var SynapseImage = /** @class */ (function (_super) {
(0, tslib_1.__extends)(SynapseImage, _super);
function SynapseImage(props) {
var _this = _super.call(this, props) || this;
_this.getEntity = _this.getEntity.bind(_this);
_this.getSynapseFiles = _this.getSynapseFiles.bind(_this);
_this.state = {
preSignedURL: '',
};
return _this;
}
SynapseImage.prototype.getEntity = function () {
var _this = this;
var synapseId = this.props.synapseId;
if (synapseId) {
(0, SynapseClient_1.getEntity)(this.context.accessToken, synapseId).then(
// https://rest-docs.synapse.org/rest/org/sagebionetworks/repo/model/FileEntity.html
function (data) {
var fileHandleAssociationList = [
{
associateObjectId: synapseId,
associateObjectType: synapseTypes_1.FileHandleAssociateType.FileEntity,
fileHandleId: data.dataFileHandleId,
},
];
_this.getSynapseFiles(fileHandleAssociationList, data.dataFileHandleId);
});
}
};
SynapseImage.prototype.getSynapseFiles = function (fileHandleAssociationList, id) {
var _this = this;
// overload the method for two different use cases, one where
// the image is attached to an entity and creates a list on the spot,
// the other where list is passed in from componentDidMount in MarkdownSynapse
var request = {
includeFileHandles: false,
includePreSignedURLs: true,
includePreviewPreSignedURLs: false,
requestedFiles: fileHandleAssociationList,
};
(0, SynapseClient_1.getFiles)(request, this.context.accessToken)
.then(function (data) {
var preSignedURL = data.requestedFiles.filter(function (el) { return el.fileHandleId === id; })[0].preSignedURL;
_this.setState({
preSignedURL: preSignedURL,
});
})
.catch(function (err) {
console.error('Error on getting image ', err);
});
};
SynapseImage.prototype.componentDidMount = function () {
if (!this.props.wikiId) {
// Get file handle as external attachment
this.getEntity();
}
else {
// Can get presigned url right away from wiki association
var _a = this.props, fileName_1 = _a.fileName, _b = _a.fileResults, fileResults = _b === void 0 ? [] : _b;
var id = fileResults.filter(function (el) { return el.fileName === fileName_1; })[0].id;
var fileHandleAssociationList = [
{
associateObjectId: this.props.wikiId,
associateObjectType: synapseTypes_1.FileHandleAssociateType.WikiAttachment,
fileHandleId: id,
},
];
this.getSynapseFiles(fileHandleAssociationList, id);
}
};
SynapseImage.prototype.render = function () {
var params = this.props.params;
var _a = params.align, align = _a === void 0 ? '' : _a, _b = params.altText, altText = _b === void 0 ? 'synapse image' : _b;
var scale = 'auto';
if (params.scale && params.scale !== '100') {
scale = Number(params.scale) + "%";
}
var alignLowerCase = align.toLowerCase();
var className = '';
if (alignLowerCase === 'left') {
className = 'floatLeft';
}
if (alignLowerCase === 'right') {
className = 'floatright';
}
if (alignLowerCase === 'center') {
className = 'align-center';
}
var style = {
width: scale,
height: scale,
};
if (!this.state.preSignedURL) {
return null;
}
return (React.createElement(React.Fragment, null,
React.createElement("img", { alt: altText, className: 'img-fluid ' + className, src: this.state.preSignedURL, style: style })));
};
SynapseImage.contextType = SynapseContext_1.SynapseContext;
return SynapseImage;
}(React.Component));
exports.default = SynapseImage;
//# sourceMappingURL=SynapseImage.js.map