UNPKG

synapse-react-client

Version:

[![Build Status](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client.svg?branch=main)](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [![npm version](https://badge.fury.io/js/synapse-react-client.svg)](https://badge.fury.io/js/synaps

51 lines 2.59 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.ImageFileHandle = void 0; var tslib_1 = require("tslib"); var synapseTypes_1 = require("../../utils/synapseTypes"); var react_1 = (0, tslib_1.__importStar)(require("react")); var utils_1 = require("../../utils"); var react_intersection_observer_1 = require("react-intersection-observer"); var SynapseContext_1 = require("../../utils/SynapseContext"); var ImageFileHandle = function (props) { var fileHandleId = props.fileHandleId, tableEntityConcreteType = props.tableEntityConcreteType, rowId = props.rowId, tableId = props.tableId; var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken; var _a = (0, react_1.useState)(), url = _a[0], setUrl = _a[1]; var _b = (0, react_intersection_observer_1.useInView)({ triggerOnce: true, rootMargin: '500px 0px', }), ref = _b.ref, inView = _b.inView; (0, react_1.useEffect)(function () { var getData = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () { var isFileView, fileAssociateType, fileAssociateId; return (0, tslib_1.__generator)(this, function (_a) { isFileView = tableEntityConcreteType === null || tableEntityConcreteType === void 0 ? void 0 : tableEntityConcreteType.includes('EntityView'); fileAssociateType = isFileView ? synapseTypes_1.FileHandleAssociateType.FileEntity : synapseTypes_1.FileHandleAssociateType.TableEntity; fileAssociateId = isFileView ? rowId : tableId; if (fileAssociateId && inView) { utils_1.SynapseClient.getActualFileHandleByIdURL(fileHandleId, accessToken, fileAssociateType, fileAssociateId, false) .then(function (url) { setUrl(url); }) .catch(function (err) { console.error('Error on retrieving file handle url ', err); }); } return [2 /*return*/]; }); }); }; getData(); }, [ inView, fileHandleId, rowId, tableId, tableEntityConcreteType, accessToken, ]); return (react_1.default.createElement("span", { ref: ref }, url && (react_1.default.createElement("img", { src: url, alt: "", className: "ImageFileHandle", loading: "lazy" })))); }; exports.ImageFileHandle = ImageFileHandle; //# sourceMappingURL=ImageFileHandle.js.map