@ibm/akora-renderer-react
Version:
React renderer tool for Cloud Pak for AIOps dashboard integration.
847 lines (817 loc) • 27.8 kB
JavaScript
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _assertThisInitialized(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function _callSuper(t, o, e) {
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: !1
}), e;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _getPrototypeOf(t) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
}, _getPrototypeOf(t);
}
function _inherits(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: !0,
configurable: !0
}
}), Object.defineProperty(t, "prototype", {
writable: !1
}), e && _setPrototypeOf(t, e);
}
function _isNativeReflectConstruct() {
try {
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (t) {}
return (_isNativeReflectConstruct = function () {
return !!t;
})();
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _possibleConstructorReturn(t, e) {
if (e && ("object" == typeof e || "function" == typeof e)) return e;
if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
return _assertThisInitialized(t);
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var _jsxFileName$4 = "/home/travis/build/IBM/akora-renderer-react/lib/LoadingSpinner.jsx";
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
var getLoadingSpinner = (function (React) {
return /*#__PURE__*/function (_React$Component) {
function LoadingSpinner() {
_classCallCheck(this, LoadingSpinner);
return _callSuper(this, LoadingSpinner);
}
_inherits(LoadingSpinner, _React$Component);
return _createClass(LoadingSpinner, [{
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement("div", {
style: {
top: 'calc(50% - 84px)',
left: 'calc(50% - 84px)',
position: 'absolute'
},
__self: this,
__source: {
fileName: _jsxFileName$4,
lineNumber: 13,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement("div", {
className: "bx--loading",
__self: this,
__source: {
fileName: _jsxFileName$4,
lineNumber: 18,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement("svg", {
className: "bx--loading__svg",
viewBox: "-75 -75 150 150",
__self: this,
__source: {
fileName: _jsxFileName$4,
lineNumber: 19,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement("circle", {
cx: "0",
cy: "0",
r: "37.5",
__self: this,
__source: {
fileName: _jsxFileName$4,
lineNumber: 20,
columnNumber: 13
}
}))));
}
}]);
}(React.Component);
});
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
var useAkoraState = (function (React, AkoraContext) {
return function () {
var _window$akoraConfig;
var akoraConfig = React.useContext(AkoraContext);
if ((_window$akoraConfig = window.akoraConfig) !== null && _window$akoraConfig !== void 0 && _window$akoraConfig.baseState) {
return _objectSpread2(_objectSpread2({}, akoraConfig), {}, {
state: _objectSpread2(_objectSpread2({}, window.akoraConfig.baseState), akoraConfig.state)
});
}
return akoraConfig;
};
});
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
var getUserRoles = function getUserRoles(user) {
return user.user && user.user.roles ? user.user.roles : user.roles;
};
var getUserPermissions = function getUserPermissions(user) {
if (user.user && user.user.zen && user.user.zen.permissions) {
return user.user.zen.permissions;
}
return user.zen && user.zen.permissions;
};
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
var HasOneOfRolesOrPermissions = (function (React, AkoraContext) {
return function HasOneOfRolesOrPermissions(_ref) {
var roles = _ref.roles,
permissions = _ref.permissions,
noRoleComponent = _ref.noRoleComponent,
children = _ref.children;
var akora = useAkoraState(React, AkoraContext)();
if (akora && akora.state && akora.state.user) {
if (permissions) {
var userPermissions = getUserPermissions(akora.state.user);
var userHasPermissions = permissions.some(function (perm) {
return userPermissions && userPermissions.includes(perm);
});
if (userHasPermissions) {
return children;
}
}
if (roles) {
var userRoles = getUserRoles(akora.state.user);
var userHasRoles = roles.some(function (role) {
return userRoles && userRoles.includes(role);
});
if (userHasRoles) {
return children;
}
}
}
return noRoleComponent || null;
};
});
var _excluded$1 = ["href", "replaceRoute", "linkTag", "children"];
var _jsxFileName$3 = "/home/travis/build/IBM/akora-renderer-react/lib/components/Link.jsx";
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable react/prop-types */
var Link = (function (React, AkoraContext) {
return function Link(_ref) {
var _this = this;
var href = _ref.href,
replaceRoute = _ref.replaceRoute,
linkTag = _ref.linkTag,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded$1);
var LinkTag = linkTag || 'a';
return /*#__PURE__*/React.createElement(AkoraContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName$3,
lineNumber: 17,
columnNumber: 5
}
}, function (_ref2) {
var app = _ref2.app;
var onLinkClick = function onLinkClick(evt) {
evt.preventDefault();
if (replaceRoute) {
app.replaceRoute(href);
} else {
app.setRoute(href);
}
};
return /*#__PURE__*/React.createElement(LinkTag, Object.assign({
href: href,
onClick: onLinkClick
}, rest, {
__self: _this,
__source: {
fileName: _jsxFileName$3,
lineNumber: 30,
columnNumber: 11
}
}), children);
});
};
});
var _excluded = ["regionComponent", "regionId", "defaultState"];
var _jsxFileName$2 = "/home/travis/build/IBM/akora-renderer-react/lib/components/Region.jsx";
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable react/prop-types */
var Region = (function (React, AkoraContext) {
var _Region;
return _Region = /*#__PURE__*/function (_React$Component) {
function Region() {
var _this;
_classCallCheck(this, Region);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Region, [].concat(args));
_defineProperty(_this, "regionRef", React.createRef());
return _this;
}
_inherits(Region, _React$Component);
return _createClass(Region, [{
key: "render",
value: function render() {
var _this$props = this.props,
regionComponent = _this$props.regionComponent;
_this$props.regionId;
_this$props.defaultState;
var rest = _objectWithoutProperties(_this$props, _excluded);
var RegionComponent = regionComponent || 'div';
return /*#__PURE__*/React.createElement(RegionComponent, Object.assign({
ref: this.regionRef
}, rest, {
__self: this,
__source: {
fileName: _jsxFileName$2,
lineNumber: 24,
columnNumber: 12
}
}));
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.createRegion();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (this.regionRef.current !== this.region.element || this.props.regionId !== this.region.id) {
this.destroyRegion();
this.createRegion();
}
if (this.props.defaultState && JSON.stringify(this.props.defaultState) !== JSON.stringify(prevProps.defaultState)) {
this.region.setDefaultState(this.props.defaultState);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.destroyRegion();
}
}, {
key: "createRegion",
value: function createRegion() {
var _this$props2 = this.props,
regionId = _this$props2.regionId,
defaultState = _this$props2.defaultState;
if (!regionId) {
throw new Error('A region ID must be provided');
}
this.region = this.context.app.createRegion(regionId, this.regionRef.current, defaultState);
}
}, {
key: "destroyRegion",
value: function destroyRegion() {
if (this.context.app.createdRegions.has(this.region.element)) {
this.context.app.destroyRegionByElement(this.region.element);
}
}
}]);
}(React.Component), _defineProperty(_Region, "contextType", AkoraContext), _Region;
});
var _jsxFileName$1 = "/home/travis/build/IBM/akora-renderer-react/lib/components/WithAkoraState.jsx";
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable react/prop-types */
var WithAkoraState = (function (React, AkoraContext) {
return function WithAkoraState(_ref) {
var children = _ref.children;
return /*#__PURE__*/React.createElement(AkoraContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName$1,
lineNumber: 9,
columnNumber: 5
}
}, children);
};
});
var _jsxFileName = "/home/travis/build/IBM/akora-renderer-react/lib/components/AkoraStateProvider.jsx";
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable react/prop-types */
var AkoraStateProvider = (function (React, AkoraContext) {
return function AkoraStateProvider(_ref) {
var children = _ref.children,
value = _ref.value;
return /*#__PURE__*/React.createElement(AkoraContext.Provider, {
value: value,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 5
}
}, children);
};
});
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
var useHasRolesOrPermissions = (function (React, AkoraContext) {
return function useHasRolesOrPermissions(_ref) {
var roles = _ref.roles,
permissions = _ref.permissions;
var akora = useAkoraState(React, AkoraContext)();
var userRoles = getUserRoles(akora.state.user);
var userPermissions = getUserPermissions(akora.state.user);
return React.useMemo(function () {
if (permissions && userPermissions) {
return permissions.some(function (perm) {
return userPermissions.includes(perm);
});
}
if (roles && userRoles) {
return roles.some(function (role) {
return userRoles.includes(role);
});
}
return false;
}, [roles, permissions, userRoles, userPermissions]);
};
});
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
/**
*
* @param {string} url The full URL to update.
* @param {object} parameters The parameter key value pairs to update. eg:
* {paramKey: newParamValue}
*
* @returns {string} The updated URL.
*/
function setUrlParameters(url, parameters) {
if (!url) {
console.warn('[setUrlParameters]: no url provided');
return;
}
if (!parameters) {
console.warn('[setUrlParameters]: no parameters provided');
return url;
}
var urlParts = url.split('?');
var params = new URLSearchParams(urlParts[1]);
for (var _i = 0, _Object$entries = Object.entries(parameters); _i < _Object$entries.length; _i++) {
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
key = _Object$entries$_i[0],
value = _Object$entries$_i[1];
if (typeof value !== 'undefined' && value !== null && value !== '') {
params.set(key, value);
} else {
params["delete"](key);
}
}
var paramsString = params.toString();
return paramsString ? "".concat(urlParts[0], "?").concat(paramsString) : urlParts[0];
}
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
// Warning not checking for zero or NAN
function isFalsy(value) {
return typeof value === 'undefined' || value === null || value === '';
}
var calculateRegionKey = function calculateRegionKey(_ref) {
var state = _ref.state,
key = _ref.key,
regionId = _ref.regionId;
var regionKey = null;
if (regionId) {
regionKey = "".concat(regionId, "_").concat(key);
} else if (state !== null && state !== void 0 && state.regionId) {
regionKey = "".concat(state.regionId, "_").concat(key);
}
return regionKey;
};
var getParameterValue = function getParameterValue(_ref2) {
var key = _ref2.key,
regionId = _ref2.regionId,
app = _ref2.app;
var latestState = app.getState();
if (key) {
var _app$getState;
var regionKey = calculateRegionKey({
state: latestState,
key: key,
regionId: regionId
});
var queryParameters = (_app$getState = app.getState()) === null || _app$getState === void 0 ? void 0 : _app$getState.query;
var newParameterValue = regionKey ? queryParameters[regionKey] : queryParameters[key];
return newParameterValue;
}
return;
};
var useQueryParameter = (function (React, AkoraContext) {
return function useQueryParameter(key, regionId) {
var _useAkoraState = useAkoraState(React, AkoraContext)(),
state = _useAkoraState.state,
app = _useAkoraState.app;
var _React$useState = React.useState(getParameterValue({
state: state,
key: key,
regionId: regionId,
app: app
})),
_React$useState2 = _slicedToArray(_React$useState, 2),
parameter = _React$useState2[0],
setInternalParameter = _React$useState2[1];
React.useEffect(function () {
var newParameterValue = getParameterValue({
state: state,
key: key,
regionId: regionId,
app: app
});
if (newParameterValue !== parameter) {
setInternalParameter(newParameterValue);
}
}, [app, key, parameter, regionId, state]);
var setParameter = React.useCallback(function (newValue) {
var latestState = app.getState();
var regionKey = calculateRegionKey({
state: latestState,
key: key,
regionId: regionId
});
var queryParameters = latestState === null || latestState === void 0 ? void 0 : latestState.query;
var currentQueryValue = queryParameters[regionKey || key];
if (isFalsy(newValue) && typeof currentQueryValue === 'undefined') {
// Skip setting because falsy value is treated as undefined in query
return;
}
if (currentQueryValue !== newValue) {
var newUrlRoute = setUrlParameters((latestState === null || latestState === void 0 ? void 0 : latestState.resolvedFullPath) || (latestState === null || latestState === void 0 ? void 0 : latestState.fullPath), _defineProperty({}, regionKey || key, newValue));
app.replaceRoute(newUrlRoute);
}
}, [app, key, regionId]);
if (!key) {
throw new Error('[useQueryParameter]: No key provided');
}
return [parameter, setParameter];
};
});
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
var useBrowserStorage = (function (React) {
return function (props) {
var key = props.key,
_props$initialValue = props.initialValue,
initialValue = _props$initialValue === void 0 ? null : _props$initialValue,
_props$storageType = props.storageType,
storageType = _props$storageType === void 0 ? 'local' : _props$storageType;
var storage = storageType === 'session' ? window.sessionStorage : window.localStorage;
var _React$useState = React.useState(function () {
return new Event("".concat(storageType, "-storage-").concat(key), {
bubbles: true
});
}),
_React$useState2 = _slicedToArray(_React$useState, 1),
tabStorageChangeEvent = _React$useState2[0];
var _React$useState3 = React.useState(function () {
var value = safelyParseJSON(storage.getItem(key));
if (value === null || typeof value === 'undefined') {
storage.setItem(key, JSON.stringify(initialValue));
return initialValue;
}
return value;
}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
storedValue = _React$useState4[0],
setStoredValue = _React$useState4[1];
var handleStorageChangeEvent = React.useCallback(function () {
var newValue = storage.getItem(key);
if (newValue !== null && typeof newValue !== 'undefined' && newValue !== JSON.stringify(storedValue)) {
setValue(JSON.parse(newValue));
} else if ((newValue === null || typeof newValue === 'undefined') && initialValue) {
setValue(initialValue);
}
}, [key, storedValue, initialValue, setValue, storage]);
React.useEffect(function () {
window.addEventListener("".concat(storageType, "-storage-").concat(key), handleStorageChangeEvent);
return function () {
window.removeEventListener("".concat(storageType, "-storage-").concat(key), handleStorageChangeEvent);
};
}, [handleStorageChangeEvent, key, storageType]);
var setValue = React.useCallback(function (newValue) {
try {
storage.setItem(key, JSON.stringify(newValue));
} catch (err) {
console.warn('Unable to set session storage value', err);
}
setStoredValue(newValue);
try {
document.dispatchEvent(tabStorageChangeEvent);
} catch (error) {
// ignore err
}
}, [tabStorageChangeEvent, key, storage]);
return [storedValue, setValue];
};
});
function safelyParseJSON(string) {
var parsedStringValue;
if (string) {
try {
parsedStringValue = JSON.parse(string);
} catch (_unused) {
parsedStringValue = string;
if (parsedStringValue === 'undefined') {
/* eslint-disable-next-line */
parsedStringValue = undefined;
}
}
}
return parsedStringValue;
}
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
var getHooks = (function (React, AkoraContext) {
return {
useHasRolesOrPermissions: useHasRolesOrPermissions(React, AkoraContext),
useAkoraState: useAkoraState(React, AkoraContext),
useQueryParameter: useQueryParameter(React, AkoraContext),
useBrowserStorage: useBrowserStorage(React)
};
});
function setQueryParameter(_ref) {
var state = _ref.state,
app = _ref.app,
key = _ref.key,
value = _ref.value,
regionId = _ref.regionId;
if (app && key && state) {
var regionKey = null;
if (regionId) {
regionKey = "".concat(regionId, "_").concat(key);
} else if (state !== null && state !== void 0 && state.regionId) {
regionKey = "".concat(state.regionId, "_").concat(key);
}
app.replaceRoute(setUrlParameters((state === null || state === void 0 ? void 0 : state.resolvedFullPath) || (state === null || state === void 0 ? void 0 : state.fullPath), _defineProperty({}, regionKey || key, value)));
}
}
var getComponents = (function (React) {
var AkoraContext = React.createContext({
app: null,
state: null
});
return _objectSpread2({
HasOneOfRolesOrPermissions: HasOneOfRolesOrPermissions(React, AkoraContext),
Link: Link(React, AkoraContext),
Region: Region(React, AkoraContext),
WithAkoraState: WithAkoraState(React, AkoraContext),
AkoraStateProvider: AkoraStateProvider(React, AkoraContext),
setQueryParameter: setQueryParameter,
setUrlParameters: setUrlParameters
}, getHooks(React, AkoraContext));
});
var renderers = new Map();
function getReactRenderer(React, _ref) {
var createRoot = _ref.createRoot;
var reactDomRenders = renderers.get(React);
var renderer = reactDomRenders && reactDomRenders.get(createRoot);
if (renderer) {
return renderer;
}
var LoadingSpinner = getLoadingSpinner(React);
var components = getComponents(React);
var ReactRenderer = /*#__PURE__*/function () {
function ReactRenderer(element, app) {
_classCallCheck(this, ReactRenderer);
this.element = element;
this.app = app;
this.root = createRoot(element);
this.isShown = false;
this.contextValue = {
state: null,
app: app
};
}
return _createClass(ReactRenderer, [{
key: "setState",
value: function setState(lastState, state) {
this.state = state;
this.stateToPropMapper = state.stateToPropMapper || function () {
return {};
};
this.contextValue = {
state: state,
app: this.app
};
}
}, {
key: "renderComponent",
value: function renderComponent(component, props) {
this.root.render(React.createElement(components.AkoraStateProvider, {
value: this.contextValue
}, React.createElement(component, props)));
}
}, {
key: "render",
value: function render() {
var _this = this;
var component = this.state.component;
this.isActive = true;
var loadingTimer = setTimeout(function () {
if (_this.isActive && _this.state.component === component) {
_this.renderComponent(LoadingSpinner);
}
}, 500);
this.getComponent().then(function (loadedComponent) {
clearTimeout(loadingTimer);
if (_this.isActive && _this.state.component === component) {
_this.renderComponent(loadedComponent["default"] || loadedComponent, _this.stateToPropMapper(_this.state, _this.app));
}
});
}
}, {
key: "getComponent",
value: function getComponent() {
var component = this.state.component();
if (component instanceof Promise) {
return component.then(function (x) {
return x["default"] || x;
});
}
return Promise.resolve(component);
}
}, {
key: "destroy",
value: function destroy() {
this.isActive = false;
this.root.unmount(this.element);
}
}]);
}();
if (!reactDomRenders) {
renderers.set(React, new Map());
}
ReactRenderer.components = components;
renderers.get(React).set(createRoot, ReactRenderer);
return ReactRenderer;
}
/**
* © Copyright IBM Corp. 2021, 2023
* SPDX-License-Identifier: Apache-2.0
*/
export { getReactRenderer as default };
//# sourceMappingURL=akora-renderer-react.esm.js.map