chayns-api 1.0.11 → 1.1.0-0

package/dist/esm/hooks/useAddGeoLocationListener.js

@@ -0,0 +1,18 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsFunctionsContext } from '../components/ChaynsContext';
+import { useCallback } from 'react';
+export var useAddGeoLocationListener = function useAddGeoLocationListener() {
+  var addGeoLocationListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.addGeoLocationListener;
+  });
+  var removeGeoLocationListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.removeGeoLocationListener;
+  });
+  var promise;
+  return useCallback(function (value, callback) {
+    promise = addGeoLocationListener(value, callback);
+    return function () {
+      promise.then(removeGeoLocationListener);
+    };
+  }, []);
+};

package/dist/esm/hooks/useAddScrollListener.js

@@ -0,0 +1,18 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsFunctionsContext } from '../components/ChaynsContext';
+import { useCallback } from 'react';
+export var useAddScrollListener = function useAddScrollListener() {
+  var addScrollListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.addScrollListener;
+  });
+  var removeScrollListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.removeScrollListener;
+  });
+  var promise;
+  return useCallback(function (value, callback) {
+    promise = addScrollListener(value, callback);
+    return function () {
+      promise.then(removeScrollListener);
+    };
+  }, []);
+};

package/dist/esm/hooks/useAddWindowMetricsListener.js

@@ -0,0 +1,18 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsFunctionsContext } from '../components/ChaynsContext';
+import { useCallback } from 'react';
+export var useAddWindowMetricsListener = function useAddWindowMetricsListener() {
+  var addListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.addWindowMetricsListener;
+  });
+  var removeListener = useContextSelector(ChaynsFunctionsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.removeWindowMetricsListener;
+  });
+  var promise;
+  return useCallback(function (callback) {
+    promise = addListener(callback);
+    return function () {
+      promise.then(removeListener);
+    };
+  }, []);
+};

package/dist/esm/hooks/useCurrentPage.js

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

package/dist/esm/hooks/useCustomData.js

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

package/dist/esm/hooks/useDevice.js

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

package/dist/esm/hooks/useDialogState.js

@@ -0,0 +1,28 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext, ChaynsFunctionsContext } from '../components/ChaynsContext';
+
+/**
+ * @category Hooks
+ */
+export const useDialogState = () => {
+  const closeDialog = useContextSelector(ChaynsFunctionsContext, v => v === null || v === void 0 ? void 0 : v.closeDialog);
+  const isClosingRequested = useContextSelector(ChaynsContext, v => {
+    var _v$dialog;
+    return v === null || v === void 0 ? void 0 : (_v$dialog = v.dialog) === null || _v$dialog === void 0 ? void 0 : _v$dialog.isClosingRequested;
+  });
+  return {
+    closeDialog,
+    isClosingRequested
+  };
+};
+
+/**
+ * @category Hooks
+ */
+export const useDialogData = () => {
+  const inputData = useContextSelector(ChaynsContext, v => {
+    var _v$dialog2;
+    return v === null || v === void 0 ? void 0 : (_v$dialog2 = v.dialog) === null || _v$dialog2 === void 0 ? void 0 : _v$dialog2.dialogInput;
+  });
+  return inputData;
+};

package/dist/esm/hooks/useEnvironment.js

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

package/dist/esm/hooks/useFunction.js

@@ -0,0 +1,6 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsFunctionsContext } from '../components/ChaynsContext';
+export const useFunction = name => {
+  const t = useContextSelector(ChaynsFunctionsContext, f => f ? f[name] : null);
+  return t;
+};

package/dist/esm/hooks/useFunctions.js

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

package/dist/esm/hooks/useIsAdminMode.js

@@ -1,7 +1,7 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useIsAdminMode = () => {
   var _useContextSelector;

package/dist/esm/hooks/useLanguage.js

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

package/dist/esm/hooks/usePages.js

@@ -1,8 +1,8 @@
 import { useContextSelector } from 'use-context-selector';
 import { ChaynsContext } from '../components/ChaynsContext';
 import { moduleWrapper } from "../components/ChaynsProvider";
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const usePages = function () {
   let {
@@ -16,8 +16,8 @@ export const usePages = function () {
   }
   return pages;
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const usePage = _ref => {
   let {

package/dist/esm/hooks/useParameters.js

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

package/dist/esm/hooks/useSite.js

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

package/dist/esm/hooks/useUser.js

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

package/dist/esm/hooks/useValues.js

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

package/dist/esm/hooks/windowMetricsListener.js

@@ -2,8 +2,8 @@ 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
+/**
+ * @category Hooks
  */
 export const useWindowMetricsListener = () => {
   const addListener = useContextSelector(ChaynsFunctionsContext, v => v.addWindowMetricsListener);
@@ -18,8 +18,8 @@ export const useWindowMetricsListener = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
-/**
- * @category Hooks
+/**
+ * @category Hooks
  */
 export const useWindowMetrics = function () {
   let {

package/dist/esm/host/ChaynsHost.js

@@ -22,7 +22,8 @@ const ChaynsHost = _ref => {
     parameters,
     customData,
     environment,
-    preventStagingReplacement
+    preventStagingReplacement,
+    dialog
   } = _ref;
   switch (type) {
     case 'client-iframe':
@@ -41,7 +42,8 @@ const ChaynsHost = _ref => {
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'client-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
@@ -58,7 +60,8 @@ const ChaynsHost = _ref => {
         parameters: parameters,
         customData: customData,
         environment: environment,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'server-iframe':
       return /*#__PURE__*/React.createElement(HostIframe, {
@@ -77,7 +80,8 @@ const ChaynsHost = _ref => {
         parameters: parameters,
         environment: environment,
         customData: customData,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       });
     case 'server-module':
       return /*#__PURE__*/React.createElement(ModuleHost, {
@@ -93,7 +97,8 @@ const ChaynsHost = _ref => {
         parameters: parameters,
         customData: customData,
         environment: environment,
-        preventStagingReplacement: preventStagingReplacement
+        preventStagingReplacement: preventStagingReplacement,
+        dialog: dialog
       }, children);
     default:
       return null;

package/dist/esm/host/HostIframe.js

@@ -0,0 +1,153 @@
+function _extends() { _extends = Object.assign || 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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React, { useEffect, useRef } from 'react';
+import * as comlink from 'comlink';
+import postIframeForm from '../util/postIframeForm';
+
+var HostIframe = function HostIframe(_ref) {
+  var iFrameProps = _ref.iFrameProps,
+      src = _ref.src,
+      _ref$postForm = _ref.postForm,
+      postForm = _ref$postForm === void 0 ? false : _ref$postForm,
+      iFrameRef = _ref.iFrameRef,
+      pages = _ref.pages,
+      isAdminModeActive = _ref.isAdminModeActive,
+      site = _ref.site,
+      user = _ref.user,
+      currentPage = _ref.currentPage,
+      functions = _ref.functions,
+      device = _ref.device;
+  var eventTarget = useRef();
+
+  var _ref2 = useRef();
+
+  var currentDataRef = useRef();
+
+  if (!eventTarget.current) {
+    eventTarget.current = global.EventTarget ? new EventTarget() : undefined;
+  }
+
+  var setHeight = function setHeight(value) {
+    if (_ref2.current) {
+      _ref2.current.height = "".concat(value, "px");
+    }
+  }; // region initialData
+
+
+  var initialData = {
+    site: site,
+    isAdminModeActive: isAdminModeActive,
+    pages: pages,
+    currentPage: currentPage,
+    device: device,
+    user: user
+  }; // endregion
+
+  currentDataRef.current = initialData; // region postIframeForm
+
+  useEffect(function () {
+    if (postForm) {
+      void postIframeForm(src, JSON.stringify(_objectSpread(_objectSpread({}, initialData), {}, {
+        pages: undefined
+      })), 'chayns', iFrameProps.name);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []); // endregion
+
+  console.debug('functions', functions); // region expose data and functions to iframe
+
+  useEffect(function () {
+    var _ref$current;
+
+    if ((_ref$current = _ref2.current) !== null && _ref$current !== void 0 && _ref$current.contentWindow) {
+      var obj = _defineProperty({}, iFrameProps.name, {
+        functions: _objectSpread(_objectSpread({}, functions), {}, {
+          setHeight: setHeight
+        }),
+        addDataListener: function addDataListener(cb) {
+          if (eventTarget.current) eventTarget.current.addEventListener('data_update', function (e) {
+            return e.detail && cb(e.detail);
+          });
+        },
+        getInitialData: function getInitialData() {
+          return currentDataRef.current;
+        }
+      });
+
+      comlink.expose(obj, comlink.windowEndpoint(_ref2.current.contentWindow));
+
+      _ref2.current.contentWindow.postMessage('chayns-api-host-ready', '*'); // https://github.com/GoogleChromeLabs/comlink/pull/469 might be better approach once released
+
+
+      return function () {
+        delete obj[iFrameProps.name];
+      };
+    }
+
+    return undefined; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // endregion
+  // region dispatch data update
+
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'isAdminModeActive',
+          value: isAdminModeActive
+        }
+      }));
+    }
+  }, [isAdminModeActive]);
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'user',
+          value: user
+        }
+      }));
+    }
+  }, [user]);
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'site',
+          value: site
+        }
+      }));
+    }
+  }, [site]);
+  useEffect(function () {
+    if (eventTarget.current) {
+      eventTarget.current.dispatchEvent(new CustomEvent('data_update', {
+        detail: {
+          type: 'pages',
+          value: pages
+        }
+      }));
+    }
+  }, [pages]); // endregion
+
+  return /*#__PURE__*/React.createElement("iframe", _extends({
+    ref: function ref(r) {
+      _ref2.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/HostIframe.js

@@ -22,7 +22,8 @@ const HostIframe = _ref => {
     parameters,
     environment,
     customData,
-    preventStagingReplacement
+    preventStagingReplacement,
+    dialog
   } = _ref;
   const eventTarget = useRef();
   const ref = useRef();
@@ -48,7 +49,8 @@ const HostIframe = _ref => {
     language,
     parameters,
     environment,
-    customData
+    customData,
+    dialog
   };
   // endregion
 
@@ -108,6 +110,7 @@ const HostIframe = _ref => {
   useUpdateData(eventTarget.current, 'parameters', parameters);
   useUpdateData(eventTarget.current, 'environment', environment);
   useUpdateData(eventTarget.current, 'customData', customData);
+  useUpdateData(eventTarget.current, 'dialog', dialog);
   // endregion
 
   return /*#__PURE__*/React.createElement("iframe", _extends({

package/dist/esm/host/module/ModuleHost.js

@@ -43,6 +43,7 @@ const ModuleHost = _ref2 => {
     language,
     parameters,
     customData,
+    dialog,
     environment,
     preventStagingReplacement
   } = _ref2;
@@ -61,6 +62,9 @@ const ModuleHost = _ref2 => {
   if (user) {
     initialData.user = user;
   }
+  if (dialog) {
+    initialData.dialog = dialog;
+  }
   // endregion
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/dist/esm/index.example.js

@@ -0,0 +1 @@
+import('./bootstrap');

package/dist/esm/index2.js

@@ -0,0 +1,5 @@
+export { default as RealChaynsProvider } from './components/ChaynsProvider';
+export { default as getDeviceInfo } from './util/deviceHelper';
+export { default as ChaynsHost } from './host/ChaynsHost';
+export * from './calls';
+export * from './hooks';

package/dist/esm/types/DynamicApiImport.d.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/DynamicImport.d.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/IChaynsReact.js

@@ -1,3 +1,9 @@
+export let DialogButtonType;
+(function (DialogButtonType) {
+  DialogButtonType[DialogButtonType["OK"] = 1] = "OK";
+  DialogButtonType[DialogButtonType["CANCEL"] = -1] = "CANCEL";
+  DialogButtonType[DialogButtonType["NEGATIVE"] = 0] = "NEGATIVE";
+})(DialogButtonType || (DialogButtonType = {}));
 export let ScreenSize;
 (function (ScreenSize) {
   ScreenSize[ScreenSize["XS"] = 0] = "XS";
@@ -235,4 +241,16 @@ var selectType;
 (function (selectType) {
   selectType[selectType["DEFAULT"] = 0] = "DEFAULT";
   selectType[selectType["ICON"] = 1] = "ICON";
-})(selectType || (selectType = {}));
+})(selectType || (selectType = {}));
+export let DialogType;
+(function (DialogType) {
+  DialogType["ALERT"] = "alert";
+  DialogType["CONFIRM"] = "confirm";
+  DialogType["DATE"] = "date";
+  DialogType["FILE_SELECT"] = "fileSelect";
+  DialogType["IFRAME"] = "iframe";
+  DialogType["MODULE"] = "module";
+  DialogType["INPUT"] = "input";
+  DialogType["SELECT"] = "select";
+  DialogType["TOAST"] = "toast";
+})(DialogType || (DialogType = {}));

package/dist/esm/util/deviceHelper.js

@@ -29,7 +29,7 @@ const getDeviceInfo = (userAgent, acceptHeader) => {
   result.accessToken = undefined; // TODO
   result.os = parsedUA === null || parsedUA === void 0 ? void 0 : parsedUA.os;
   if (typeof window !== 'undefined') {
-    result.screenSize = getScreenSize(window.innerWidth);
+    result.screenSize = getScreenSize(window.innerWidth, window.innerHeight);
   } else {
     // estimate size over user agent, very inaccurate, could be improved by setting a cookie with the screensize
     const screenSizeByUA = /mobi/i.test(userAgent) ? ScreenSize.SM : ScreenSize.XL;
@@ -42,15 +42,16 @@ const getDeviceInfo = (userAgent, acceptHeader) => {
 export const getClientDeviceInfo = () => ({
   isTouch: navigator.maxTouchPoints > 0 && window.matchMedia('(pointer: coarse)')
 });
-export const getScreenSize = width => {
+export const getScreenSize = (width, height) => {
+  const size = Math.max(width, height);
   let value;
-  if (width > 1200) {
+  if (size > 1200) {
     value = ScreenSize.XL;
-  } else if (width > 993) {
+  } else if (size > 993) {
     value = ScreenSize.LG;
-  } else if (width > 769) {
+  } else if (size > 769) {
     value = ScreenSize.MD;
-  } else if (width > 556) {
+  } else if (size > 556) {
     value = ScreenSize.SM;
   } else {
     value = ScreenSize.XS;

package/dist/esm/util/useIsAdminMode.js

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

package/dist/esm/util/useUser.js

@@ -0,0 +1,7 @@
+import { useContextSelector } from 'use-context-selector';
+import { ChaynsContext } from '../components/ChaynsContext';
+export var useUser = function useUser() {
+  return useContextSelector(ChaynsContext, function (v) {
+    return v === null || v === void 0 ? void 0 : v.user;
+  });
+};