chayns-api 1.0.0

package/dist/esm/helper/apiListenerHelper.js

@@ -0,0 +1,25 @@
+const listenerMapping = {};
+let counter = 0;
+export const addApiListener = (key, callback) => {
+  const id = ++counter;
+  if (!listenerMapping[key]) {
+    listenerMapping[key] = {};
+  }
+  const shouldInitialize = Object.keys(listenerMapping[key]).length === 0;
+  listenerMapping[key][counter] = callback;
+  return {
+    id,
+    shouldInitialize
+  };
+};
+export const removeApiListener = (key, id) => {
+  if (listenerMapping[key]) {
+    delete listenerMapping[key][id];
+  }
+  return Object.keys(listenerMapping[key]).length === 0;
+};
+export const dispatchApiEvent = (key, value) => {
+  if (listenerMapping[key]) {
+    Object.values(listenerMapping[key]).forEach(l => l(value));
+  }
+};

package/dist/esm/hooks/geoLocationListener.js

@@ -0,0 +1,43 @@
+import { useContextSelector } from 'use-context-selector';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChaynsFunctionsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useGeoLocationListener = () => {
+  const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addGeoLocationListener);
+  const removeListener = useContextSelector(ChaynsFunctionsContext, v => v.removeGeoLocationListener);
+  const promiseRef = useRef();
+  return useCallback((value, callback) => {
+    promiseRef.current = addListener(value, callback);
+    return () => {
+      var _promiseRef$current;
+      void ((_promiseRef$current = promiseRef.current) === null || _promiseRef$current === void 0 ? void 0 : _promiseRef$current.then(removeListener));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+/**
+ * @category Hooks
+ */
+export const useGeoLocation = function () {
+  let {
+    enabled = true,
+    timeout = 0,
+    silent = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [value, setValue] = useState(null);
+  const addListener = useGeoLocationListener();
+  useEffect(() => {
+    if (enabled) {
+      return addListener({
+        timeout,
+        silent
+      }, setValue);
+    }
+    return undefined;
+  }, [enabled, timeout, addListener, silent]);
+  return {
+    value
+  };
+};

package/dist/esm/hooks/index.js

@@ -0,0 +1,16 @@
+export { useGeoLocation, useGeoLocationListener } from './geoLocationListener';
+export { useScrollPosition, useScrollListener, useScrollOffsetBottom, useScrollOffsetTop } from './scrollListener';
+export { useIsAdminMode } from './useIsAdminMode';
+export { useUser } from './useUser';
+export { useAccessToken } from './useAccessToken';
+export { useWindowMetrics, useWindowMetricsListener } from './windowMetricsListener';
+export { useDevice } from './useDevice';
+export { useSite } from './useSite';
+export { useParameters } from './useParameters';
+export { usePages, usePage } from './usePages';
+export { useEnvironment } from './useEnvironment';
+export { useLanguage } from './useLanguage';
+export { useValues } from './useValues';
+export { useFunctions } from './useFunctions';
+export { useCurrentPage } from './useCurrentPage';
+export { useCustomData } from './useCustomData';

package/dist/esm/hooks/scrollListener.js

@@ -0,0 +1,95 @@
+import { useContextSelector } from 'use-context-selector';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChaynsFunctionsContext } from '../components/ChaynsContext';
+import { useWindowMetrics } from './windowMetricsListener';
+/**
+ * @category Hooks
+ */
+export const useScrollListener = () => {
+  const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addScrollListener);
+  const removeListener = useContextSelector(ChaynsFunctionsContext, v => v.removeScrollListener);
+  const promiseRef = useRef();
+  return useCallback((value, callback) => {
+    promiseRef.current = addListener(value, callback);
+    return () => {
+      var _promiseRef$current;
+      void ((_promiseRef$current = promiseRef.current) === null || _promiseRef$current === void 0 ? void 0 : _promiseRef$current.then(removeListener));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+/**
+ * @category Hooks
+ */
+export const useScrollPosition = function () {
+  let {
+    enabled = true,
+    throttle = 200
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [value, setValue] = useState({
+    scrollY: null,
+    scrollX: null
+  });
+  const addListener = useScrollListener();
+  const getScrollPosition = useContextSelector(ChaynsFunctionsContext, v => v.getScrollPosition);
+  useEffect(() => {
+    if (enabled) {
+      return addListener({
+        throttle
+      }, setValue);
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, throttle, addListener]);
+  useEffect(() => {
+    void getScrollPosition().then(setValue);
+  }, [getScrollPosition]);
+  return value;
+};
+/**
+ * @category Hooks
+ */
+export const useScrollOffsetTop = function () {
+  let {
+    enabled = true,
+    throttle = 200
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const scrollPosition = useScrollPosition({
+    enabled,
+    throttle
+  });
+  const {
+    offsetTop,
+    topBarHeight
+  } = useWindowMetrics({
+    enabled
+  });
+  if (typeof (scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollY) === 'number') {
+    return Math.max(0, scrollPosition.scrollY - (offsetTop - topBarHeight));
+  }
+  return 0;
+};
+/**
+ * @category Hooks
+ */
+export const useScrollOffsetBottom = function () {
+  let {
+    enabled = true,
+    throttle = 200
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const scrollPosition = useScrollPosition({
+    enabled,
+    throttle
+  });
+  const {
+    offsetTop,
+    windowHeight,
+    bottomBarHeight
+  } = useWindowMetrics({
+    enabled
+  });
+  if (typeof (scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollY) === 'number') {
+    return windowHeight - Math.max(0, offsetTop - scrollPosition.scrollY + bottomBarHeight);
+  }
+  return 0;
+};

package/dist/esm/hooks/useAccessToken.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { useContextSelector } from "use-context-selector";
+import { ChaynsFunctionsContext } from "../components/ChaynsContext";
+
+/**
+ * @category Hooks
+ */
+export const useAccessToken = accessToken => {
+  const [token, setToken] = useState(null);
+  const [externalToken, setExternalToken] = useState(null);
+  const getAccessToken = useContextSelector(ChaynsFunctionsContext, s => s.getAccessToken);
+  useEffect(() => {
+    if (accessToken !== null && accessToken !== void 0 && accessToken.external) {
+      void getAccessToken({
+        external: true
+      }).then(setExternalToken);
+    } else {
+      void getAccessToken().then(setToken);
+    }
+  }, [accessToken === null || accessToken === void 0 ? void 0 : accessToken.external, getAccessToken]);
+  return accessToken !== null && accessToken !== void 0 && accessToken.external ? externalToken === null || externalToken === void 0 ? void 0 : externalToken.accessToken : token === null || token === void 0 ? void 0 : token.accessToken;
+};

package/dist/esm/hooks/useCurrentPage.js

@@ -0,0 +1,7 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+
+/**
+ * @category Hooks
+ */
+export const useCurrentPage = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.currentPage);

package/dist/esm/hooks/useCustomData.js

@@ -0,0 +1,7 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+
+/**
+ * @category Hooks
+ */
+export const useCustomData = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.customData);

package/dist/esm/hooks/useDevice.js

@@ -0,0 +1,6 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useDevice = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.device);

package/dist/esm/hooks/useEnvironment.js

@@ -0,0 +1,6 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useEnvironment = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.environment);

package/dist/esm/hooks/useFunctions.js

@@ -0,0 +1,9 @@
+import { useContextSelector } from "use-context-selector";
+import { ChaynsFunctionsContext } from "../components/ChaynsContext";
+/**
+ * @category Hooks
+ */
+export const useFunctions = () => {
+  const t = useContextSelector(ChaynsFunctionsContext, f => f || {});
+  return t;
+};

package/dist/esm/hooks/useIsAdminMode.js

@@ -0,0 +1,9 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useIsAdminMode = () => {
+  var _useContextSelector;
+  return (_useContextSelector = useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.isAdminModeActive)) !== null && _useContextSelector !== void 0 ? _useContextSelector : false;
+};

package/dist/esm/hooks/useLanguage.js

@@ -0,0 +1,6 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useLanguage = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.language);

package/dist/esm/hooks/usePages.js

@@ -0,0 +1,32 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const usePages = function () {
+  let {
+    siteId
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    siteId: undefined
+  };
+  const pages = useContextSelector(ChaynsContext, v => v.pages);
+  if (siteId) {
+    pages.filter(tapp => tapp.siteId === siteId);
+  }
+  return pages;
+};
+/**
+ * @category Hooks
+ */
+export const usePage = _ref => {
+  let {
+    id,
+    siteId
+  } = _ref;
+  const pages = useContextSelector(ChaynsContext, v => v.pages);
+  if (id) {
+    var _pages$find;
+    return (_pages$find = pages.find(x => x.id === id && (!siteId || x.siteId === siteId))) !== null && _pages$find !== void 0 ? _pages$find : null;
+  }
+  return null;
+};

package/dist/esm/hooks/useParameters.js

@@ -0,0 +1,6 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useParameters = () => useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.parameters) || []);

package/dist/esm/hooks/useSite.js

@@ -0,0 +1,6 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useSite = () => useContextSelector(ChaynsContext, v => v === null || v === void 0 ? void 0 : v.site);

package/dist/esm/hooks/useUser.js

@@ -0,0 +1,7 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+// @ts-ignore
+export const useUser = () => useContextSelector(ChaynsContext, v => (v === null || v === void 0 ? void 0 : v.user) || {});

package/dist/esm/hooks/useValues.js

@@ -0,0 +1,9 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+/**
+ * @category Hooks
+ */
+export const useValues = () => {
+  const t = useContextSelector(ChaynsContext, v => v || {});
+  return t;
+};

package/dist/esm/hooks/windowMetricsListener.js

@@ -0,0 +1,51 @@
+import { useContextSelector } from 'use-context-selector';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChaynsFunctionsContext } from '../components/ChaynsContext';
+import { ScreenSize } from '../types/IChaynsReact';
+/**
+ * @category Hooks
+ */
+export const useWindowMetricsListener = () => {
+  const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addWindowMetricsListener);
+  const removeListener = useContextSelector(ChaynsFunctionsContext, v => v.removeWindowMetricsListener);
+  const promiseRef = useRef();
+  return useCallback(callback => {
+    promiseRef.current = addListener(callback);
+    return () => {
+      var _promiseRef$current;
+      void ((_promiseRef$current = promiseRef.current) === null || _promiseRef$current === void 0 ? void 0 : _promiseRef$current.then(removeListener));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};
+/**
+ * @category Hooks
+ */
+export const useWindowMetrics = function () {
+  let {
+    enabled = true
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [value, setValue] = useState({
+    bottomBarHeight: 0,
+    offsetTop: 0,
+    pageHeight: 0,
+    pageWidth: 0,
+    topBarHeight: 0,
+    windowHeight: 0,
+    pageSize: ScreenSize.XS
+  });
+  const addListener = useWindowMetricsListener();
+  const getWindowMetrics = useContextSelector(ChaynsFunctionsContext, v => v.getWindowMetrics);
+  useEffect(() => {
+    if (enabled) {
+      return addListener(v => {
+        setValue(v);
+      });
+    }
+    return undefined;
+  }, [enabled, addListener]);
+  useEffect(() => {
+    void getWindowMetrics().then(setValue);
+  }, [getWindowMetrics]);
+  return value;
+};

package/dist/esm/host/ChaynsHost.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import HostIframe from './iframe/HostIframe';
+import ModuleHost from './module/ModuleHost';
+const ChaynsHost = _ref => {
+  let {
+    type,
+    iFrameProps,
+    functions,
+    src,
+    iFrameRef = undefined,
+    children = undefined,
+    system,
+    // shallow data
+    pages,
+    language,
+    isAdminModeActive,
+    site,
+    user,
+    currentPage,
+    device,
+    parameters,
+    customData,
+    environment
+  } = _ref;
+  switch (type) {
+    case 'client-iframe':
+      return /*#__PURE__*/React.createElement(HostIframe, {
+        iFrameRef: iFrameRef,
+        iFrameProps: iFrameProps,
+        pages: pages,
+        isAdminModeActive: isAdminModeActive,
+        site: site,
+        user: user,
+        device: device,
+        currentPage: currentPage,
+        functions: functions,
+        src: src,
+        language: language,
+        parameters: parameters,
+        environment: environment,
+        customData: customData
+      });
+    case 'client-module':
+      return /*#__PURE__*/React.createElement(ModuleHost, {
+        system: system,
+        pages: pages,
+        isAdminModeActive: isAdminModeActive,
+        site: site,
+        user: user,
+        device: device,
+        currentPage: currentPage,
+        functions: functions,
+        language: language,
+        parameters: parameters,
+        customData: customData,
+        environment: environment
+      });
+    case 'server-iframe':
+      return /*#__PURE__*/React.createElement(HostIframe, {
+        iFrameRef: iFrameRef,
+        iFrameProps: iFrameProps,
+        pages: pages,
+        isAdminModeActive: isAdminModeActive,
+        site: site,
+        user: user,
+        device: device,
+        currentPage: currentPage,
+        functions: functions,
+        src: src,
+        postForm: true,
+        language: language,
+        parameters: parameters,
+        environment: environment,
+        customData: customData
+      });
+    case 'server-module':
+      return /*#__PURE__*/React.createElement(ModuleHost, {
+        system: system,
+        pages: pages,
+        isAdminModeActive: isAdminModeActive,
+        site: site,
+        user: user,
+        device: device,
+        currentPage: currentPage,
+        functions: functions,
+        language: language,
+        parameters: parameters,
+        customData: customData,
+        environment: environment
+      }, children);
+    default:
+      return null;
+  }
+};
+export default ChaynsHost;

package/dist/esm/host/iframe/HostIframe.js

@@ -0,0 +1,124 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useEffect, useRef } from 'react';
+import * as comlink from 'comlink';
+import postIframeForm from '../../util/postIframeForm';
+import useUpdateData from './utils/useUpdateData';
+const HostIframe = _ref => {
+  let {
+    iFrameProps,
+    src,
+    postForm = false,
+    iFrameRef,
+    // shallow data
+    pages,
+    isAdminModeActive,
+    site,
+    user,
+    currentPage,
+    functions,
+    device,
+    language,
+    parameters,
+    environment,
+    customData
+  } = _ref;
+  const eventTarget = useRef();
+  const ref = useRef();
+  const currentDataRef = useRef();
+  if (!eventTarget.current) {
+    eventTarget.current = global.document ? document.createElement('div') : undefined; // global.EventTarget ? new EventTarget() : undefined
+  }
+
+  const setHeight = value => {
+    if (ref.current) {
+      ref.current.height = `${value}px`;
+    }
+  };
+
+  // region initialData
+  const initialData = {
+    site,
+    isAdminModeActive,
+    pages,
+    currentPage,
+    device,
+    user,
+    language,
+    parameters,
+    environment,
+    customData
+  };
+  // endregion
+
+  currentDataRef.current = initialData;
+
+  // region postIframeForm
+  useEffect(() => {
+    (async () => {
+      if (postForm) {
+        var _await$functions$getA;
+        const accessToken = (_await$functions$getA = await functions.getAccessToken()) !== null && _await$functions$getA !== void 0 ? _await$functions$getA : {};
+        void postIframeForm(src, JSON.stringify({
+          ...initialData,
+          pages: undefined,
+          ...accessToken
+        }), 'chayns', iFrameProps.name);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // endregion
+
+  // region expose data and functions to iframe
+  useEffect(() => {
+    var _ref$current;
+    if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contentWindow) {
+      const obj = {
+        [iFrameProps.name]: {
+          functions: {
+            ...functions,
+            setHeight
+          },
+          addDataListener: cb => {
+            if (eventTarget.current) eventTarget.current.addEventListener('data_update', e => e.detail && cb(e.detail));
+          },
+          getInitialData: () => currentDataRef.current
+        }
+      };
+      comlink.expose(obj, comlink.windowEndpoint(ref.current.contentWindow));
+      ref.current.contentWindow.postMessage('chayns-api-host-ready', '*');
+      // https://github.com/GoogleChromeLabs/comlink/pull/469 might be better approach once released
+      return () => {
+        delete obj[iFrameProps.name];
+      };
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // endregion
+
+  // region dispatch data update
+  useUpdateData(eventTarget.current, 'isAdminModeActive', isAdminModeActive);
+  useUpdateData(eventTarget.current, 'user', user);
+  useUpdateData(eventTarget.current, 'site', site);
+  useUpdateData(eventTarget.current, 'pages', pages);
+  useUpdateData(eventTarget.current, 'language', language);
+  useUpdateData(eventTarget.current, 'parameters', parameters);
+  useUpdateData(eventTarget.current, 'environment', environment);
+  useUpdateData(eventTarget.current, 'customData', customData);
+  // endregion
+
+  return /*#__PURE__*/React.createElement("iframe", _extends({
+    ref: r => {
+      ref.current = r;
+      if (iFrameRef) {
+        // eslint-disable-next-line no-param-reassign
+        iFrameRef.current = r;
+      }
+    },
+    title: " "
+  }, iFrameProps, {
+    src: postForm ? undefined : src
+  }));
+};
+export default HostIframe;

package/dist/esm/host/iframe/utils/useUpdateData.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+const useUpdateData = (target, type, value) => {
+  useEffect(() => {
+    if (target) {
+      target.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type,
+          value
+        }
+      }));
+    }
+  }, [target, type, value]);
+};
+export default useUpdateData;