@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5643066061 → 12.0.0-alpha.5786305091

package/Components/MeasurmentsPortal/MeasurementsPortal.tsx

@@ -1,17 +1,43 @@
-/* eslint react/prop-types: off */
+import React, { useEffect, useCallback, ReactNode, useReducer } from "react";
+import { View, StyleSheet, LayoutChangeEvent } from "react-native";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import * as R from "ramda";
-import { v4 } from "uuid";
+const { log_debug } = createLogger({
+  subsystem: "MeasurementsPortal",
+  category: "UIComponents",
+});
+
+type LayoutDimensions = {
+  width: number;
+  height: number;
+};
 
-type Props = {
+type MeasurementResult = {
+  width: number;
+  height: number;
+  index?: number;
+};
+
+type MeasurementsPortalProps = {
   Component: React.ElementType;
-  onLayout: (LayoutChangeEvent) => void;
-  componentProps?: Record<any, any>;
+  onLayout: (event: LayoutChangeEvent) => void;
+  componentProps?: Record<string, any>;
+  onLoadFinished?: () => void;
 };
 
-const isError = (possibleError): boolean => possibleError instanceof Error;
+type MeasurementPortalContextValue = {
+  measureComponent: (
+    comp: React.ElementType,
+    props: Record<string, any>
+  ) => Promise<MeasurementResult>;
+  measuringInProgress: boolean;
+};
+
+type MeasurementsPortalContextProviderProps = {
+  children: ReactNode;
+};
+
+const isError = (possibleError: any): boolean => possibleError instanceof Error;
 
 const styles = StyleSheet.create({
   container: {
@@ -25,100 +51,245 @@ const styles = StyleSheet.create({
   wrapper: {},
 });
 
-const MeasurementsPortal = ({ Component, onLayout, componentProps }: Props) => {
+type State = {
+  component: React.ElementType;
+  componentProps: Record<string, any> | null;
+  measureComponentCallback: ((result: MeasurementResult) => void) | null;
+  onLoadFinishedIsCalled: boolean;
+  measuringInProgress: boolean;
+  layout: LayoutDimensions;
+};
+
+type Action =
+  | { type: "SET_COMPONENT"; payload: React.ElementType }
+  | { type: "SET_COMPONENT_PROPS"; payload: Record<string, any> | null }
+  | {
+      type: "SET_MEASURE_CALLBACK";
+      payload: ((result: MeasurementResult) => void) | null;
+    }
+  | { type: "SET_ON_LOAD_FINISHED"; payload: boolean }
+  | { type: "SET_MEASURING_PROGRESS"; payload: boolean }
+  | { type: "SET_LAYOUT"; payload: LayoutDimensions };
+
+const MEASUREMENT_ACTIONS = {
+  setComponent: "SET_COMPONENT",
+  setComponentProps: "SET_COMPONENT_PROPS",
+  setMeasureCallback: "SET_MEASURE_CALLBACK",
+  setOnLoadFinished: "SET_ON_LOAD_FINISHED",
+  setMeasuringProgress: "SET_MEASURING_PROGRESS",
+  setLayout: "SET_LAYOUT",
+} as const;
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case MEASUREMENT_ACTIONS.setComponent:
+      return { ...state, component: action.payload };
+    case MEASUREMENT_ACTIONS.setComponentProps:
+      return { ...state, componentProps: action.payload };
+    case MEASUREMENT_ACTIONS.setMeasureCallback:
+      return { ...state, measureComponentCallback: action.payload };
+    case MEASUREMENT_ACTIONS.setOnLoadFinished:
+      return { ...state, onLoadFinishedIsCalled: action.payload };
+    case MEASUREMENT_ACTIONS.setMeasuringProgress:
+      return { ...state, measuringInProgress: action.payload };
+    case MEASUREMENT_ACTIONS.setLayout:
+      return { ...state, layout: action.payload };
+    default:
+      return state;
+  }
+};
+
+const initialState: State = {
+  component: null,
+  componentProps: null,
+  measureComponentCallback: null,
+  onLoadFinishedIsCalled: false,
+  measuringInProgress: false,
+  layout: { width: 0, height: 0 },
+};
+
+/**
+ * Handles layout changes for the MeasurementsPortal component
+ */
+const onLayout =
+  (dispatch) =>
+  ({ nativeEvent: { layout: newLayout } }: LayoutChangeEvent) => {
+    log_debug("Rendered measurement layout", { newLayout });
+    dispatch({ type: MEASUREMENT_ACTIONS.setLayout, payload: newLayout });
+  };
+
+/**
+ * MeasurementsPortal is a component that is used to measure the size of a component
+ * It is not rendered to the main tree, but it actually uses a component and its props to measure the size of the component.
+ * The <Component> comes from the measureComponent method of the MeasurementPortalContext.
+ */
+const MeasurementsPortal = ({
+  Component,
+  onLayout,
+  componentProps,
+}: MeasurementsPortalProps) => {
+  if (!Component) {
+    return null;
+  }
+
   return (
     <View style={styles.container} testID="MeasurementsPortal">
-      <View style={styles.wrapper} onLayout={onLayout} key={v4()}>
+      <View style={styles.wrapper} onLayout={onLayout}>
         <Component {...componentProps} />
       </View>
     </View>
   );
 };
 
-const MeasurementPortalContext = React.createContext(null);
+const MeasurementPortalContext =
+  React.createContext<MeasurementPortalContextValue | null>(null);
 
-const MeasurementsPortalContextProvider = ({ children }) => {
-  const Component = React.useRef(View);
-  const [measuringInProgress, setMeasuringInProgress] = React.useState(false);
+/**
+ * The MeasurementsPortalContextProvider provides a measureComponent method, and a measuringInProgress flag
+ * With these we can pre-render a component and measure its size before rendering it to the main tree to avoid layout shifts
+ */
+const MeasurementsPortalContextProvider = ({
+  children,
+}: MeasurementsPortalContextProviderProps) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
 
-  const measureComponentCallback = React.useRef(null);
-  const componentProps = React.useRef(null);
-  const onLoadFinishedIsCalled = React.useRef(null);
+  const onLoadFinishedRef =
+    React.useRef<MeasurementsPortalProps["onLoadFinished"]>(null);
 
-  const setComponent = (comp) => {
-    Component.current = comp;
-  };
+  /**
+   * Finalize resolves the promise created by measureComponent and finalizes the measurement process
+   * It resolves with the measurement result (width/height/index) to the measureComponentCallback
+   */
+  const finalize = useCallback(() => {
+    if (state.measureComponentCallback) {
+      log_debug("Finalize measurement process", {
+        layout: state.layout,
+        componentProps: state.componentProps,
+      });
 
-  const setMeasureComponentCallback = (cb) => {
-    measureComponentCallback.current = cb;
-  };
+      state.measureComponentCallback({
+        width: state.layout.width,
+        height: state.layout.height,
+        index: state.componentProps?.index,
+      });
+    }
 
-  const finalize = ({ width, height }) => {
-    measureComponentCallback?.current?.({
-      width,
-      height,
-      index: componentProps.current.index,
+    dispatch({ type: MEASUREMENT_ACTIONS.setMeasureCallback, payload: null });
+
+    dispatch({
+      type: MEASUREMENT_ACTIONS.setMeasuringProgress,
+      payload: false,
     });
 
-    setMeasureComponentCallback(null);
-    setMeasuringInProgress(false);
-    onLoadFinishedIsCalled.current = false;
-  };
+    dispatch({ type: MEASUREMENT_ACTIONS.setOnLoadFinished, payload: false });
+  }, [state.layout, state.componentProps, state.measureComponentCallback]);
 
-  const setComponentProps = (props) => {
-    const handleOnLoadFinish = (...args) => {
-      const error = R.path([0, "error"], args);
-
-      if (isError(error)) {
-        finalize({ width: 0, height: 0 });
-      } else {
-        onLoadFinishedIsCalled.current = true;
-        props.onLoadFinished(...args);
-      }
-    };
-
-    componentProps.current = {
-      ...props,
-      onLoadFinished: handleOnLoadFinish,
-    };
-  };
+  useEffect(() => {
+    log_debug("Measurement portal updated", {
+      measureComponentCallback: state.measureComponentCallback,
+      onLoadFinishedIsCalled: state.onLoadFinishedIsCalled,
+      layout: state.layout,
+    });
 
-  const measureComponent = React.useCallback(async (comp, props) => {
-    return new Promise((resolve) => {
-      setMeasureComponentCallback(resolve);
-      setMeasuringInProgress(true);
+    if (
+      state.measureComponentCallback &&
+      state.layout.width > 0 &&
+      state.layout.height > 0 &&
+      onLoadFinishedRef.current
+    ) {
+      finalize();
+    }
+  }, [state.measureComponentCallback, state.layout, finalize]);
 
-      setComponentProps(props);
-      setComponent(comp);
-    });
-  }, []);
+  /**
+   * Utility function that takes, a component and its props, measures the rendered size of the component
+   * and creates a promise that does not get resolved with the measurement result (width/height/index)
+   * until the onLoadFinished callback is called
+   */
+  const measureComponent = useCallback(
+    (
+      comp: React.ElementType,
+      props: { onLoadFinished: () => void; [key: string]: any }
+    ): Promise<MeasurementResult> => {
+      return new Promise((resolve) => {
+        log_debug("Measuring process started", { comp, props });
 
-  const onLayout = ({
-    nativeEvent: {
-      layout: { width, height },
-    },
-  }) => {
-    if (measureComponentCallback.current && onLoadFinishedIsCalled.current) {
-      finalize({
-        width,
-        height,
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setMeasureCallback,
+          payload: resolve,
+        });
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setMeasuringProgress,
+          payload: true,
+        });
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setOnLoadFinished,
+          payload: false,
+        });
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setLayout,
+          payload: { width: 0, height: 0 },
+        });
+
+        onLoadFinishedRef.current =
+          // eslint-disable-next-line react/prop-types
+          props.onLoadFinished as MeasurementsPortalProps["onLoadFinished"];
+
+        const handleOnLoadFinish = (...args: any[]) => {
+          if (args?.[0]?.error && isError(args[0].error)) {
+            log_debug(
+              "Component called onLoadFinish with an error, completing measurement process",
+              { args }
+            );
+
+            finalize();
+
+            return;
+          }
+
+          log_debug(
+            "Component called onLoadFinish, completing measurement process",
+            { args }
+          );
+
+          dispatch({
+            type: MEASUREMENT_ACTIONS.setOnLoadFinished,
+            payload: true,
+          });
+
+          onLoadFinishedRef.current?.apply(null, args);
+        };
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setComponentProps,
+          payload: { ...props, onLoadFinished: handleOnLoadFinish },
+        });
+
+        dispatch({ type: MEASUREMENT_ACTIONS.setComponent, payload: comp });
       });
-    }
-  };
+    },
+    []
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      measureComponent,
+      measuringInProgress: state.measuringInProgress,
+    }),
+    [measureComponent, state.measuringInProgress]
+  );
 
   return (
     <>
       <MeasurementsPortal
-        Component={Component.current}
-        componentProps={componentProps.current}
-        onLayout={onLayout}
+        Component={state.component}
+        componentProps={state.componentProps}
+        onLayout={onLayout(dispatch)}
       />
-      <MeasurementPortalContext.Provider
-        value={{
-          measureComponent,
-          measuringInProgress,
-        }}
-      >
+      <MeasurementPortalContext.Provider value={contextValue}>
         {children}
       </MeasurementPortalContext.Provider>
     </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.5643066061",
+  "version": "12.0.0-alpha.5786305091",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -35,10 +35,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5643066061",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5643066061",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5643066061",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5643066061",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5786305091",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5786305091",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5786305091",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5786305091",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",