@looker/extension-sdk-react
Version:
Looker Extension SDK for React
116 lines • 4.54 kB
JavaScript
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
import isEqual from 'lodash/isEqual';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { MemoryRouter } from 'react-router-dom';
import { connectExtensionHost } from '@looker/extension-sdk';
import { ErrorMessage } from '../ErrorMessage';
import { RouteChangeListener } from '../RouteChangeListener';
import { getInitialRouteEntries } from '../utils/get_initial_route_entries';
import { setupClosePopoversListener } from '../utils/setup_close_popovers';
export var ExtensionConnector = _ref => {
var {
contextData,
updateContextData,
connectedCallback,
unloadedCallback,
onPathnameChange,
onRouteChange,
hostTracksRoute = true,
loadingComponent,
requiredLookerVersion,
chattyTimeout,
children
} = _ref;
var contextDataRef = useRef(contextData);
var [initialRouteData, setInitialRouteData] = useState();
var [hostRouteData, setHostRouteData] = useState({
route: ''
});
var [initializing, setInitializing] = useState(true);
var [initializeError, setInitializeError] = useState();
useEffect(() => {
contextDataRef.current = contextData;
}, [contextData]);
var setInitialRouteAndRouteState = useCallback((route, routeState) => {
if (hostTracksRoute) {
setInitialRouteData({
route,
routeState
});
}
}, [hostTracksRoute, setInitialRouteData]);
var hostChangedRoute = useCallback((_route, routeState) => {
var route = _route.startsWith('/') ? _route : '/' + _route;
if (route !== hostRouteData.route || !isEqual(routeState, hostRouteData.routeState)) {
setHostRouteData({
route,
routeState
});
updateContextData({
route,
routeState
});
}
}, [setHostRouteData, updateContextData]);
var visualizationDataReceivedCallback = useCallback(visualizationData => {
updateContextData({
visualizationData
});
}, [updateContextData]);
var tileHostDataChangedCallback = useCallback(partialHostData => {
if (contextDataRef.current.tileSDK) {
var {
tileSDK
} = contextDataRef.current;
tileSDK.tileHostDataChanged(partialHostData);
updateContextData({
tileHostData: tileSDK.tileHostData
});
}
}, [updateContextData]);
useEffect(() => {
var initialize = function () {
var _ref2 = _asyncToGenerator(function* () {
try {
var extensionHost = yield connectExtensionHost({
setInitialRoute: setInitialRouteAndRouteState,
requiredLookerVersion,
hostChangedRoute,
chattyTimeout,
visualizationDataReceivedCallback,
tileHostDataChangedCallback
});
connectedCallback(extensionHost);
setInitializing(false);
} catch (error) {
console.error(error);
setInitializeError(error.message || 'Extension failed to initialize.');
setInitializing(false);
}
});
return function initialize() {
return _ref2.apply(this, arguments);
};
}();
initialize();
return () => {
unloadedCallback();
};
}, []);
useEffect(() => {
return initializing ? undefined : setupClosePopoversListener(contextData.extensionSDK);
}, [initializing]);
return React.createElement(React.Fragment, null, initializing ? loadingComponent : React.createElement(React.Fragment, null, initializeError ? React.createElement(ErrorMessage, {
errorMessage: initializeError
}) : React.createElement(React.Fragment, null, hostTracksRoute ? React.createElement(MemoryRouter, {
initialEntries: getInitialRouteEntries(initialRouteData)
}, React.createElement(RouteChangeListener, {
onRouteChange: onRouteChange,
onPathnameChange: onPathnameChange,
extensionHost: contextData.extensionSDK,
hostRoute: hostRouteData.route,
hostRouteState: hostRouteData.routeState
}), children) : React.createElement(React.Fragment, null, children))));
};
//# sourceMappingURL=ExtensionConnector.js.map