@beinformed/ui 1.27.5 → 1.28.0

package/src/react-client/client.js

@@ -1,12 +1,5 @@
 // @flow
-/* polyfills needed for ie11 */
-import elementClosest from "element-closest";
-elementClosest(window);
-
-/* polyfill for focus-visible */
-import "focus-visible";
-
-import { hydrate, render as reactRender } from "react-dom";
+import { hydrate, render } from "react-dom";
 
 import { has } from "../utils/helpers/objects";
 import setImmediate from "setimmediate";
@@ -36,12 +29,17 @@ import Init from "./Init";
 
 import { handleBeforeRenderHooks } from "../redux/store/beforeRenderHooks";
 
-import type { ComponentType } from "react";
+import type {
+  ComponentType,
+  Element as ReactElement,
+  ElementType,
+} from "react";
 import type { Theme } from "../react-theme/types";
 import type { CustomReducers, ReduxStore } from "../redux/types";
 import type { RouterHistory } from "react-router";
 import type { BeforeRenderHook } from "../redux/store/beforeRenderHooks";
 import type { Props as FallbackProps } from "../react/ErrorBoundaryFallback";
+
 export type Props = {
   customReducers?: CustomReducers,
   theme?: Theme | Array<Theme>,
@@ -53,8 +51,6 @@ export type Props = {
 /*
  * deserialize serialized data from the server to provide a smooth dehydration.
  */
-/**
- */
 const parseDataToJSON = (data: string) => {
   try {
     return JSON.parse(data);
@@ -63,24 +59,48 @@ const parseDataToJSON = (data: string) => {
   }
 };
 
-/**
- * Mount the webapplication to the DOM, used client side when JavaScript is enabled.
- */
-const client = (props: Props) => {
-  if (typeof window.contextPath === "undefined") {
-    throw new Error("Missing contextPath on window object");
-  }
-
+const getDataFromServer = () => {
   const dataElement = document.querySelector(
     'script[type="application/json"][data-app-state="app-json"]'
   );
+
   if (!dataElement) {
     throw new Error("Error loading state, json not found");
   } else if (dataElement.textContent.trim() === "") {
-    return;
+    return {};
   }
 
-  const data = parseDataToJSON(dataElement.textContent);
+  return parseDataToJSON(dataElement.textContent);
+};
+
+/**
+ */
+export const setUnhandledRejectionEvent = (store: ReduxStore) => {
+  window.onunhandledrejection = (event) => {
+    if (event.detail) {
+      return setImmediate(() => {
+        const errorMessage = event.detail.reason.message.toString();
+
+        store.dispatch(showXHRErrorNotification(errorMessage));
+        throw event.detail.reason;
+      });
+    }
+
+    return event;
+  };
+};
+
+/**
+ */
+export const setupClient = (
+  customReducers: CustomReducers = {},
+  beforeRenderHooks: ?Array<BeforeRenderHook>
+): { store: ReduxStore, routerHistory: RouterHistory } => {
+  if (typeof window.contextPath === "undefined") {
+    throw new Error("Missing contextPath on window object");
+  }
+
+  const data = getDataFromServer();
 
   // remove all resources from cache
   Cache.clear("^res:");
@@ -89,9 +109,9 @@ const client = (props: Props) => {
   const browserHistory: RouterHistory = createBrowserHistory({
     basename: getBasePath(),
   });
-  const { history, store } = configureStore(
+  const { routerHistory, store } = configureStore(
     browserHistory,
-    props.customReducers ?? {},
+    customReducers,
     rehydrate(data)
   );
 
@@ -106,7 +126,7 @@ const client = (props: Props) => {
   });
 
   if (has(data, "error.name")) {
-    const error = new FetchException(data.error.response);
+    const error = new FetchException(data?.error?.response);
     store.dispatch(handleError(error));
   }
 
@@ -115,74 +135,93 @@ const client = (props: Props) => {
   }
 
   // listen to history change and update the redux router store
-  history.listen((location, action) => {
+  routerHistory.listen((location, action) => {
     store.dispatch(locationChange(location, action));
   });
 
-  /**
-   */
-  window.onunhandledrejection = (event) => {
-    if (event.detail) {
-      return setImmediate(() => {
-        const errorMessage = event.detail.reason.message.toString();
-
-        store.dispatch(showXHRErrorNotification(errorMessage));
-        throw event.detail.reason;
-      });
-    }
-
-    return event;
-  };
+  setUnhandledRejectionEvent(store);
 
   if (document.body) {
     document.body.className = "js";
   }
 
-  if (props.beforeRenderHooks) {
-    handleBeforeRenderHooks(props.beforeRenderHooks, { store });
+  if (beforeRenderHooks) {
+    handleBeforeRenderHooks(beforeRenderHooks, { store });
   }
 
-  addContentLoadedEvent(
-    store,
-    history,
-    props.theme,
-    props.render,
-    props.ErrorFallbackComponent
-  );
+  return { store, routerHistory };
 };
 
 /**
  */
-const addContentLoadedEvent = (
+export const addContentLoadedEvent = (
   store: ReduxStore,
-  history: RouterHistory,
+  routerHistory: RouterHistory,
   theme?: Theme | Array<Theme>,
   render: Function,
-  ErrorFallbackComponent?: ComponentType<FallbackProps>
+  ErrorFallbackComponent?: ComponentType<FallbackProps>,
+  mount: Function
 ) => {
   window.addEventListener("DOMContentLoaded", () => {
     const applicationNode = document.querySelector("#application");
-    if (applicationNode) {
-      const isSSR = applicationNode.querySelector(".application");
-      const mount = isSSR ? hydrate : reactRender;
-      mount(
-        <Init
-          store={store}
-          history={history}
-          contextPath={window.contextPath}
-          theme={theme}
-          ErrorFallbackComponent={ErrorFallbackComponent}
-        >
-          {render()}
-        </Init>,
-        applicationNode
-      );
-    } else {
+    if (!applicationNode) {
       throw new Error(
         "No DOM element with id application found to attach client to"
       );
     }
+
+    mount(
+      applicationNode,
+      <Init
+        store={store}
+        routerHistory={routerHistory}
+        contextPath={window.contextPath}
+        theme={theme}
+        ErrorFallbackComponent={ErrorFallbackComponent}
+      >
+        {render()}
+      </Init>
+    );
   });
 };
 
+/**
+ */
+const mountClient = (
+  applicationNode: Element,
+  initComponent: ReactElement<ElementType>
+) => {
+  const isSSR = applicationNode.querySelector(".application");
+  if (isSSR) {
+    hydrate(initComponent, applicationNode);
+  } else {
+    render(initComponent, applicationNode);
+  }
+};
+
+/**
+ * Mount the webapplication to the DOM, setup redux store and caches, add unhandledRejectionEvent, used client side when JavaScript is enabled.
+ */
+const client = ({
+  customReducers,
+  theme,
+  render,
+  beforeRenderHooks,
+  ErrorFallbackComponent,
+}: Props) => {
+  const { store, routerHistory } = setupClient(
+    customReducers,
+    beforeRenderHooks
+  );
+
+  addContentLoadedEvent(
+    store,
+    routerHistory,
+    theme,
+    render,
+    ErrorFallbackComponent,
+    mountClient
+  );
+};
+
 export default client;

package/src/redux/_modularui/ModularUIActions.js

@@ -12,6 +12,7 @@ import type {
   SetModelAction,
   InitModelAction,
   UpdateModelAction,
+  UpdateFormAction,
   RemoveModelByKeyAction,
   ResetModularUIAction,
   UpdateStatusAction,
@@ -51,6 +52,13 @@ export const updateModel = (model: ModularUIModel): UpdateModelAction => ({
   payload: model,
 });
 
+/**
+ */
+export const updateForm = (model: ModularUIModel): UpdateFormAction => ({
+  type: "MODULARUI/UPDATE_FORM",
+  payload: model,
+});
+
 /**
  */
 export const removeModelByKey = (key: string): RemoveModelByKeyAction => ({

package/src/redux/_modularui/ModularUIReducer.js

@@ -144,6 +144,7 @@ export const ModularUIReducer: Reducer<ModularUIState, ReduxAction> = (
       return setModel(state, action.payload);
 
     case "MODULARUI/UPDATE":
+    case "MODULARUI/UPDATE_FORM":
       return updateModel(state, action.payload);
 
     case "MODULARUI/REMOVE_KEY":

package/src/redux/_modularui/types.js

@@ -49,6 +49,11 @@ export type UpdateModelAction = {
   payload: ModularUIModel,
 };
 
+export type UpdateFormAction = {
+  type: "MODULARUI/UPDATE_FORM",
+  payload: ModularUIModel,
+};
+
 export type SuccessAction = (
   model: ModularUIModel
 ) => UpdateModelAction | SetModelAction;

package/src/redux/actions/Form.js

@@ -1,6 +1,6 @@
 // @flow
 import { goBack } from "../_router/RouterActions";
-import { updateModel } from "../_modularui/ModularUIActions";
+import { updateForm } from "../_modularui/ModularUIActions";
 import { logoutSuccess } from "./SignOut";
 import { reloadApplication } from "./Application";
 import { startProgress, finishProgress } from "./ProgressIndicator";
@@ -9,17 +9,17 @@ import Authenticate from "../../modularui/Authenticate";
 
 import type { Dispatch, GetState, ThunkAction } from "../types";
 import type FormModel from "../../models/form/FormModel";
-import type { UpdateModelAction } from "../_modularui/types";
+import type { UpdateFormAction } from "../_modularui/types";
 
 /**
  * Go back to previous object (back button on form)
  */
-export const previousObject = (form: FormModel): UpdateModelAction => {
+export const previousObject = (form: FormModel): UpdateFormAction => {
   const newForm = form.clone();
 
   newForm.setPreviousObject();
 
-  return updateModel(newForm);
+  return updateForm(newForm);
 };
 
 /**

package/src/redux/actions/FormAttributeSet.js

@@ -1,5 +1,5 @@
 // @flow
-import { updateModel } from "../_modularui/ModularUIActions";
+import { updateForm } from "../_modularui/ModularUIActions";
 
 import { getSetting } from "../../constants/Settings";
 
@@ -68,5 +68,6 @@ export const updateFormAttribute =
       // server form validations happens async, don't wait for the form to return
       dispatch(validateFormObject(newForm));
     }
-    return dispatch(updateModel(newForm));
+
+    return dispatch(updateForm(newForm));
   };

package/src/redux/actions/FormAttributeSetRepeatable.js

@@ -1,20 +1,20 @@
 // @flow
-import { updateModel } from "../_modularui/ModularUIActions";
+import { updateForm } from "../_modularui/ModularUIActions";
 
 import type FormModel from "../../models/form/FormModel";
 import type FormObjectModel from "../../models/form/FormObjectModel";
-import type { UpdateModelAction } from "../_modularui/types";
+import type { UpdateFormAction } from "../_modularui/types";
 
 /**
  */
 export const addRepeatableAttributeSet = (
   form: FormModel
-): UpdateModelAction => {
+): UpdateFormAction => {
   const newForm = form.clone();
 
   newForm.addEmptyFormObject();
 
-  return updateModel(newForm);
+  return updateForm(newForm);
 };
 
 /**
@@ -22,13 +22,13 @@ export const addRepeatableAttributeSet = (
 export const cancelRepeatableAttributeSet = (
   form: FormModel,
   formObject: FormObjectModel
-): UpdateModelAction => {
+): UpdateFormAction => {
   const newForm = form.clone();
 
   newForm.addEmptyFormObject();
   newForm.removeFormObject(formObject);
 
-  return updateModel(newForm);
+  return updateForm(newForm);
 };
 
 /**
@@ -36,10 +36,10 @@ export const cancelRepeatableAttributeSet = (
 export const removeRepeatableAttributeSet = (
   form: FormModel,
   formObject: FormObjectModel
-): UpdateModelAction => {
+): UpdateFormAction => {
   const newForm = form.clone();
 
   newForm.removeFormObject(formObject);
 
-  return updateModel(newForm);
+  return updateForm(newForm);
 };

package/src/redux/actions/FormAutosave.js

@@ -10,7 +10,7 @@ import {
   AUTOSAVE_STATUS,
 } from "../../constants/Constants";
 
-import { updateModel } from "../_modularui/ModularUIActions";
+import { updateForm } from "../_modularui/ModularUIActions";
 
 import type { UpdateAutosaveAction, ThunkAction, Dispatch } from "../types";
 
@@ -49,7 +49,7 @@ const autosave = (dispatch: Dispatch, form: FormModel) => {
         // send the existing form to prevent updates in the ui based on autosave results
         form.lastServerUpdate = savedForm.lastServerUpdate;
 
-        dispatch(updateModel(form));
+        dispatch(updateForm(form));
         dispatch(updateAutosave(AUTOSAVE_STATUS.FINISHED, savedForm));
       }
     });

package/src/redux/actions/FormValidations.js

@@ -1,7 +1,7 @@
 // @flow
 import debounce from "lodash/debounce";
 
-import { updateModel } from "../_modularui/ModularUIActions";
+import { updateForm } from "../_modularui/ModularUIActions";
 
 import ModularUIRequest from "../../modularui/ModularUIRequest";
 
@@ -30,7 +30,7 @@ const updateValidations =
         validatedForm.updateValidations(formWithValidations.data);
       }
 
-      dispatch(updateModel(validatedForm));
+      dispatch(updateForm(validatedForm));
     }
   };
 

package/src/redux/actions/__tests__/Form.spec.js

@@ -15,7 +15,7 @@ describe("form actions", () => {
 
     expect(store.getActions()).toStrictEqual([
       {
-        type: "MODULARUI/UPDATE",
+        type: "MODULARUI/UPDATE_FORM",
         payload: expect.objectContaining({
           _contributions: expect.objectContaining({
             label: "Create person",

package/src/redux/connectors/Form.js

@@ -16,10 +16,7 @@ import type { AbstractComponent } from "react";
 import type FormModel from "../../models/form/FormModel";
 import type { ContextRouter } from "react-router";
 import type { ReduxState, ThunkAction } from "../types";
-import type {
-  ModularUIConnector,
-  UpdateModelAction,
-} from "../_modularui/types";
+import type { ModularUIConnector, UpdateFormAction } from "../_modularui/types";
 
 type OwnProps = {
   ...?ContextRouter,
@@ -33,7 +30,7 @@ type StateProps = {
 };
 
 type DispatchProps = {
-  onPrevious: (form: FormModel) => UpdateModelAction,
+  onPrevious: (form: FormModel) => UpdateFormAction,
   onCancel: (form: FormModel) => ThunkAction,
   showFormNotification: (form: FormModel) => ThunkAction,
 };

package/src/redux/connectors/FormAttributeSet.js

@@ -9,14 +9,14 @@ import {
 } from "../actions/FormAttributeSetRepeatable";
 
 import type { ThunkAction, UpdateFormOptions } from "../types";
-import type { UpdateModelAction } from "../_modularui/types";
+import type { UpdateFormAction } from "../_modularui/types";
 import type { AttributeType } from "../../models/types";
 import type FormModel from "../../models/form/FormModel";
 import type FormObjectModel from "../../models/form/FormObjectModel";
 import type { DispatchAPI } from "redux";
 import type { ComponentType } from "react";
 
-type Dispatch = DispatchAPI<UpdateModelAction> & DispatchAPI<ThunkAction>;
+type Dispatch = DispatchAPI<UpdateFormAction> & DispatchAPI<ThunkAction>;
 
 type OwnProps = {
   form: FormModel,
@@ -32,9 +32,9 @@ type DispatchProps = {
     value: string,
     options: UpdateFormOptions
   ) => ThunkAction,
-  onAddAttributeSetClick: () => UpdateModelAction,
-  onCancelAttributeSetClick: (formObject: FormObjectModel) => UpdateModelAction,
-  onRemoveAttributeSetClick: (formObject: FormObjectModel) => UpdateModelAction,
+  onAddAttributeSetClick: () => UpdateFormAction,
+  onCancelAttributeSetClick: (formObject: FormObjectModel) => UpdateFormAction,
+  onRemoveAttributeSetClick: (formObject: FormObjectModel) => UpdateFormAction,
 };
 
 type Props = {

package/src/redux/store/configureStore.js

@@ -20,10 +20,10 @@ import type { Reducer } from "redux";
 /**
  */
 const configureStore = (
-  history: RouterHistory,
+  routerHistory: RouterHistory,
   customReducers?: Object,
   initialState?: $Shape<ReduxState>
-): { history: RouterHistory, store: ReduxStore } => {
+): { routerHistory: RouterHistory, store: ReduxStore } => {
   let composeEnhancers = compose;
 
   if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
@@ -37,7 +37,7 @@ const configureStore = (
 
   const middleware = applyMiddleware(
     modularUIMiddleware,
-    routerMiddleware(history),
+    routerMiddleware(routerHistory),
     thunk
   );
 
@@ -50,9 +50,9 @@ const configureStore = (
   );
 
   if (!initialState?.router) {
-    store.dispatch(locationChange(history.location, "PUSH"));
+    store.dispatch(locationChange(routerHistory.location, "PUSH"));
   }
-  return { history, store };
+  return { routerHistory, store };
 };
 
 export default configureStore;

package/src/redux/types.js

@@ -21,6 +21,7 @@ import type {
   UpdateStatusAction,
   SetModelAction,
   UpdateModelAction,
+  UpdateFormAction,
   RemoveModelByKeyAction,
   ResetModularUIAction,
   InitModelAction,
@@ -138,6 +139,7 @@ export type ReduxAction =
   | SetModelAction
   | InitModelAction
   | UpdateModelAction
+  | UpdateFormAction
   | RemoveModelByKeyAction
   | ResetModularUIAction
   | SaveErrorAction

package/types/constants/LayoutHintConfig.d.ts

@@ -143,7 +143,7 @@ export namespace LayoutHintConfiguration {
         const component_9: string[];
         export { component_9 as component };
     }
-    namespace IGNORE_FORMAT_SETTING {
+    namespace CREATE_ACTION {
         const hint_10: string;
         export { hint_10 as hint };
         export namespace description_10 {
@@ -153,12 +153,10 @@ export namespace LayoutHintConfiguration {
             export { EN_10 as EN };
         }
         export { description_10 as description };
-        const link_10: string;
-        export { link_10 as link };
         const component_10: string[];
         export { component_10 as component };
     }
-    namespace CREATE_ACTION {
+    namespace UPDATE_ACTION {
         const hint_11: string;
         export { hint_11 as hint };
         export namespace description_11 {
@@ -171,7 +169,7 @@ export namespace LayoutHintConfiguration {
         const component_11: string[];
         export { component_11 as component };
     }
-    namespace UPDATE_ACTION {
+    namespace DELETE_ACTION {
         const hint_12: string;
         export { hint_12 as hint };
         export namespace description_12 {
@@ -184,7 +182,7 @@ export namespace LayoutHintConfiguration {
         const component_12: string[];
         export { component_12 as component };
     }
-    namespace DELETE_ACTION {
+    namespace SORT_OPTIONS {
         const hint_13: string;
         export { hint_13 as hint };
         export namespace description_13 {
@@ -197,7 +195,7 @@ export namespace LayoutHintConfiguration {
         const component_13: string[];
         export { component_13 as component };
     }
-    namespace SORT_OPTIONS {
+    namespace CASEVIEW_LINK {
         const hint_14: string;
         export { hint_14 as hint };
         export namespace description_14 {
@@ -210,7 +208,7 @@ export namespace LayoutHintConfiguration {
         const component_14: string[];
         export { component_14 as component };
     }
-    namespace CASEVIEW_LINK {
+    namespace DISABLED {
         const hint_15: string;
         export { hint_15 as hint };
         export namespace description_15 {
@@ -220,22 +218,9 @@ export namespace LayoutHintConfiguration {
             export { EN_15 as EN };
         }
         export { description_15 as description };
+        const link_10: string;
+        export { link_10 as link };
         const component_15: string[];
         export { component_15 as component };
     }
-    namespace DISABLED {
-        const hint_16: string;
-        export { hint_16 as hint };
-        export namespace description_16 {
-            const NL_16: string;
-            export { NL_16 as NL };
-            const EN_16: string;
-            export { EN_16 as EN };
-        }
-        export { description_16 as description };
-        const link_11: string;
-        export { link_11 as link };
-        const component_16: string[];
-        export { component_16 as component };
-    }
 }

package/types/constants/LayoutHints.d.ts

@@ -26,10 +26,6 @@ export const SORT_OPTIONS: string;
  * Layout-hint: Marks an attribute as a title attribute
  */
 export const TITLE: string;
-/**
- * Layout-hint: Ignore the global input format for specific attribute
- */
-export const IGNORE_FORMAT_SETTING: string;
 /**
  * Layout-hint: Mark task as delete task
  */

package/types/models/actions/ActionCollection.d.ts

@@ -3,7 +3,7 @@
  */
 export default class ActionCollection extends BaseCollection<ActionModel> {
     constructor(actions?: Object, actionsContributions?: Object);
-    collection: any;
+    collection: any[];
     /**
      * Retrieve action by key
      */

package/types/models/attributes/DatetimeAttributeModel.d.ts

@@ -5,7 +5,8 @@ declare class DatetimeAttributeModel extends StringAttributeModel {
     /**
      */
     get formatUtil(): {
-        _isoFormat: string;
+        _isoFormat: string; /**
+         */
         getLocale(): Locale;
         getOptions(): {
             weekStartsOn: 0 | 2 | 1 | 3 | 4 | 5 | 6;
@@ -26,7 +27,9 @@ declare class DatetimeAttributeModel extends StringAttributeModel {
         isSameDay(inputDate: string, compareDate: string, inputFormat?: string): boolean;
         isOther(inputDate: string, compareDate: string, inputFormat?: string): boolean;
         isWeekend(inputDate: string): boolean;
-        addSeconds(date: string, amount: number): string;
+        addSeconds(date: string, amount: number): string; /**
+         * Set placeholder text
+         */
         addMinutes(date: string, amount: number): string;
         addHours(date: string, amount: number): string;
         addDays(date: string, amount: number): string;
@@ -51,6 +54,9 @@ declare class DatetimeAttributeModel extends StringAttributeModel {
         setHour(date: string, hour: number): string;
         setMinute(date: string, minute: number): string;
         setSecond(date: string, second: number): string;
+        /**
+         * Add Date constraints for attribute
+         */
         setMilliseconds(date: string, milliseconds: number): string;
         setTime(date: string, hours: number, minutes: number, seconds: number, milliseconds: number): string;
     };