@applicaster/zapp-react-native-ui-components 15.1.14 → 15.1.15-rc.0

package/Components/ModalComponent/utils.ts

@@ -1,4 +1,8 @@
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { PluginConfiguration } from "./";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemLabelProps } from "./Button/ItemLabel";
@@ -6,7 +10,8 @@ import { ItemProps } from "./Button/Item";
 
 export function defaultItemProps(
   config: PluginConfiguration,
-  maxWidth: number
+  maxWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemProps {
   const {
     modal_bottom_sheet_item_background_color,
@@ -24,19 +29,36 @@ export function defaultItemProps(
     modal_bottom_sheet_item_padding_top,
   } = config;
 
+  const bgDefault = blockItemStyle?.background?.default;
+
+  const bgFocused =
+    blockItemStyle?.background?.focused || blockItemStyle?.background?.focus;
+
   return {
-    backgroundColor: modal_bottom_sheet_item_background_color,
-    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
+    backgroundColor:
+      bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor:
+      bgFocused?.backgroundColor ||
+      modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
     focusedSelectedBackgroundColor:
       modal_bottom_sheet_item_focused_selected_background_color,
-    borderRadius: modal_bottom_sheet_item_corner_radius,
+    borderRadius: toNumberWithDefault(
+      modal_bottom_sheet_item_corner_radius,
+      bgDefault?.borderRadius
+    ),
     marginBottom: modal_bottom_sheet_item_margin_bottom,
     marginTop: modal_bottom_sheet_item_margin_top,
     marginLeft: modal_bottom_sheet_item_margin_left,
     marginRight: modal_bottom_sheet_item_margin_right,
-    paddingTop: modal_bottom_sheet_item_padding_top,
-    paddingBottom: modal_bottom_sheet_item_padding_bottom,
+    paddingTop: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_top,
+      bgDefault?.paddingTop
+    ),
+    paddingBottom: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_bottom,
+      bgDefault?.paddingBottom
+    ),
     paddingRight: modal_bottom_sheet_item_padding_right,
     paddingLeft: modal_bottom_sheet_item_padding_left,
     maxWidth,
@@ -45,7 +67,8 @@ export function defaultItemProps(
 
 export function defaultItemLabelProps(
   config: PluginConfiguration,
-  sheetWidth: number
+  sheetWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemLabelProps {
   const {
     modal_bottom_sheet_item_label_android_letter_spacing,
@@ -72,15 +95,48 @@ export function defaultItemLabelProps(
     modal_bottom_sheet_item_padding_right,
   } = config;
 
-  const maxWidth =
+  const iconWidth = toNumberWithDefaultZero(modal_bottom_sheet_item_icon_width);
+
+  const iconMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_left
+  );
+
+  const iconMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_right
+  );
+
+  const itemMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_left
+  );
+
+  const itemMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_right
+  );
+
+  const itemPaddingLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_left
+  );
+
+  const itemPaddingRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_right
+  );
+
+  const calculatedMaxWidth =
     sheetWidth -
-    (modal_bottom_sheet_item_icon_width +
-      modal_bottom_sheet_item_icon_margin_left +
-      modal_bottom_sheet_item_icon_margin_right +
-      modal_bottom_sheet_item_margin_left +
-      modal_bottom_sheet_item_margin_right +
-      modal_bottom_sheet_item_padding_left +
-      modal_bottom_sheet_item_padding_right);
+    (iconWidth +
+      iconMarginLeft +
+      iconMarginRight +
+      itemMarginLeft +
+      itemMarginRight +
+      itemPaddingLeft +
+      itemPaddingRight);
+
+  const maxWidth =
+    Number.isNaN(calculatedMaxWidth) || calculatedMaxWidth <= 0
+      ? sheetWidth
+      : calculatedMaxWidth;
+
+  const label1Default = blockItemStyle?.textLabel1?.default;
 
   return {
     fontFamily: platformSelect({
@@ -91,8 +147,11 @@ export function defaultItemLabelProps(
       ios: modal_bottom_sheet_item_label_ios_letter_spacing,
       android: modal_bottom_sheet_item_label_android_letter_spacing,
     }),
-    fontSize: modal_bottom_sheet_item_label_font_size,
-    color: modal_bottom_sheet_item_label_font_color,
+    fontSize: toNumberWithDefault(
+      modal_bottom_sheet_item_label_font_size,
+      label1Default?.fontSize
+    ),
+    color: label1Default?.fontColor || modal_bottom_sheet_item_label_font_color,
     focusColor: modal_bottom_sheet_item_label_focus_font_color,
     hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
     selectedColor: modal_bottom_sheet_item_label_selected_font_color,
@@ -146,7 +205,8 @@ export function getItemLabelProps(
   width: number,
   labelProps?:
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
-    | ItemLabelProps
+    | ItemLabelProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (labelProps) {
     return typeof labelProps === "function"
@@ -154,7 +214,7 @@ export function getItemLabelProps(
       : labelProps;
   }
 
-  return defaultItemLabelProps(theme, width);
+  return defaultItemLabelProps(theme, width, blockItemStyle);
 }
 
 export function getItemProps(
@@ -162,7 +222,8 @@ export function getItemProps(
   width: number,
   itemProps?:
     | ((theme: PluginConfiguration, width: number) => ItemProps)
-    | ItemProps
+    | ItemProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (itemProps) {
     return typeof itemProps === "function"
@@ -170,5 +231,5 @@ export function getItemProps(
       : itemProps;
   }
 
-  return defaultItemProps(theme, width);
+  return defaultItemProps(theme, width, blockItemStyle);
 }

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import * as R from "ramda";
 import { FlatList, StyleSheet, View } from "react-native";
+import { SafeAreaView, EdgeMode, Edge } from "react-native-safe-area-context";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -42,6 +42,12 @@ type Props = {
   pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
   refreshingPipesV1?: boolean;
   stickyHeaderIndices?: number[];
+  safeArea?:
+    | {
+        edges: Record<Edge, EdgeMode>;
+        mode: "padding" | "margin" | undefined;
+      }
+    | undefined;
 };
 
 const styles = StyleSheet.create({
@@ -54,7 +60,7 @@ const getNearestValue = (value, optionA, optionB) =>
   Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
 const scrollIndicatorInsets = { right: 1 };
-const keyExtractor = R.compose(String, R.prop("id"));
+const keyExtractor = (item) => item.id.toString();
 
 function ComponentsMapComponent(props: Props) {
   const {
@@ -70,6 +76,7 @@ function ComponentsMapComponent(props: Props) {
     pullToRefreshPipesV1RefreshingStateUpdater,
     refreshingPipesV1,
     stickyHeaderIndices,
+    safeArea,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -83,7 +90,7 @@ function ComponentsMapComponent(props: Props) {
 
   const riverComponents = React.useMemo(() => {
     if (feed?.entry?.length < components.length) {
-      return R.slice(0, feed?.entry?.length, components);
+      return components.slice(0, feed?.entry?.length);
     }
 
     return components;
@@ -98,7 +105,7 @@ function ComponentsMapComponent(props: Props) {
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
 
-  const theme = useTheme();
+  const theme = useTheme<BaseThemePropertiesMobile>();
 
   const renderRiverItem = React.useCallback(
     ({ item, index }) => {
@@ -127,21 +134,13 @@ function ComponentsMapComponent(props: Props) {
 
   const screenStyle = React.useMemo(
     () => ({
-      paddingTop: ifEmptyUseFallback(
-        screenConfig.paddingTop,
-        R.prop("screen_padding_top")(theme)
-      ),
-      paddingBottom: ifEmptyUseFallback(
-        screenConfig.paddingBottom,
-        R.prop("screen_padding_bottom")(theme)
-      ),
       paddingLeft: ifEmptyUseFallback(
         screenConfig.paddingLeft,
-        R.prop("screen_padding_left")(theme)
+        theme.screen_padding_left
       ),
       paddingRight: ifEmptyUseFallback(
         screenConfig.paddingRight,
-        R.prop("screen_padding_right")(theme)
+        theme.screen_padding_right
       ),
     }),
     [riverId]
@@ -280,50 +279,79 @@ function ComponentsMapComponent(props: Props) {
             numberOfComponents={riverComponents.length}
           >
             <ViewportTracker>
-              <FlatList
-                ref={(ref) => {
-                  flatListRef.current = ref;
-                }}
-                // Fix for WebView rerender crashes on Android API 28+
-                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-                overScrollMode={isAndroid ? "never" : "auto"}
-                scrollIndicatorInsets={scrollIndicatorInsets}
-                extraData={feed}
-                stickyHeaderIndices={stickyHeaderIndices}
-                removeClippedSubviews={isAndroid}
-                onLayout={handleOnLayout}
-                initialNumToRender={3}
-                maxToRenderPerBatch={10}
-                windowSize={12}
-                keyExtractor={keyExtractor}
-                renderItem={renderRiverItem}
-                data={riverComponents}
-                contentContainerStyle={contentContainerStyle}
-                ListFooterComponent={
-                  <RiverFooter
-                    flatListHeight={flatListHeight}
-                    loadingState={loadingState}
-                  />
-                }
-                refreshControl={refreshControl}
-                onScrollBeginDrag={onScrollBeginDrag}
-                onScroll={onScroll}
-                onMomentumScrollEnd={_onMomentumScrollEnd}
-                onScrollEndDrag={_onScrollEndDrag}
-                scrollEventThrottle={16}
-                {...scrollViewExtraProps}
-                /* When wrapped in a parent ScrollView (e.g. tabs),
-                this FlatList doesn't scroll so onEndReached can fire repeatedly;
-                skip it here and let the parent ScrollView emit scroll-end instead. */
-                onEndReached={
-                  isScreenWrappedInContainer
-                    ? undefined
-                    : () => {
-                        if (!hasUserScrolledRef.current) return;
-                        emitScrollEndReached();
-                      }
-                }
-              />
+              <>
+                <FlatList
+                  ListHeaderComponent={
+                    <SafeAreaView
+                      mode={safeArea?.mode ?? "margin"}
+                      style={{
+                        paddingTop: ifEmptyUseFallback(
+                          screenConfig.paddingTop,
+                          theme.screen_padding_top
+                        ),
+                        height: StyleSheet.hairlineWidth,
+                      }}
+                      edges={{ top: safeArea?.edges?.top ?? "off" }}
+                    />
+                  }
+                  testID="components-map-flat-list"
+                  ref={(ref) => {
+                    flatListRef.current = ref;
+                  }}
+                  // Fix for WebView rerender crashes on Android API 28+
+                  // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                  overScrollMode={isAndroid ? "never" : "auto"}
+                  scrollIndicatorInsets={scrollIndicatorInsets}
+                  extraData={feed}
+                  stickyHeaderIndices={stickyHeaderIndices}
+                  removeClippedSubviews={isAndroid}
+                  onLayout={handleOnLayout}
+                  initialNumToRender={3}
+                  maxToRenderPerBatch={10}
+                  windowSize={12}
+                  keyExtractor={keyExtractor}
+                  renderItem={renderRiverItem}
+                  data={riverComponents}
+                  contentContainerStyle={contentContainerStyle}
+                  ListFooterComponent={
+                    <>
+                      <RiverFooter
+                        flatListHeight={flatListHeight}
+                        loadingState={loadingState}
+                      />
+                      <SafeAreaView
+                        mode={safeArea?.mode ?? "margin"}
+                        style={{
+                          paddingBottom: ifEmptyUseFallback(
+                            screenConfig.paddingBottom,
+                            theme.screen_padding_bottom
+                          ),
+                          height: StyleSheet.hairlineWidth,
+                        }}
+                        edges={{ bottom: safeArea?.edges?.bottom ?? "off" }}
+                      />
+                    </>
+                  }
+                  refreshControl={refreshControl}
+                  onScrollBeginDrag={onScrollBeginDrag}
+                  onScroll={onScroll}
+                  onMomentumScrollEnd={_onMomentumScrollEnd}
+                  onScrollEndDrag={_onScrollEndDrag}
+                  scrollEventThrottle={16}
+                  {...scrollViewExtraProps}
+                  onEndReached={
+                    /* When wrapped in a parent ScrollView (e.g. tabs),
+                  this FlatList doesn't scroll so onEndReached can fire repeatedly;
+                  skip it here and let the parent ScrollView emit scroll-end instead. */
+                    isScreenWrappedInContainer
+                      ? undefined
+                      : () => {
+                          if (!hasUserScrolledRef.current) return;
+                          emitScrollEndReached();
+                        }
+                  }
+                />
+              </>
             </ViewportTracker>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>
@@ -333,6 +361,5 @@ function ComponentsMapComponent(props: Props) {
 }
 
 export const ComponentsMap = React.memo(
-  withComponentsMapProvider(ComponentsMapComponent),
-  R.equals
+  withComponentsMapProvider(ComponentsMapComponent)
 );

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -13,95 +13,125 @@ exports[`componentsMap renders renders components map correctly 1`] = `
   >
     <RCTScrollView
       ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_value": {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "currentObservers": null,
-              "hasError": false,
-              "isStopped": false,
-              "observers": [
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
+        <React.Fragment>
+          <Memo(RiverFooterComponent)
+            flatListHeight={null}
+            loadingState={
+              BehaviorSubject {
+                "_value": {
+                  "done": false,
+                  "index": -1,
+                  "waitForAllComponents": false,
                 },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                "closed": false,
+                "currentObservers": null,
+                "hasError": false,
+                "isStopped": false,
+                "observers": [
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                    "initialTeardown": undefined,
+                    "isStopped": false,
+                  },
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-              ],
-              "thrownError": null,
+                ],
+                "thrownError": null,
+              }
+            }
+          />
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      ListHeaderComponent={
+        <View
+          edges={
+            {
+              "top": "off",
+            }
+          }
+          mode="margin"
+          style={
+            {
+              "height": 0.5,
+              "paddingTop": undefined,
             }
           }
         />
       }
       contentContainerStyle={
         {
-          "paddingBottom": undefined,
           "paddingLeft": undefined,
           "paddingRight": undefined,
-          "paddingTop": undefined,
         }
       }
       data={
@@ -150,10 +180,30 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       stickyHeaderIndices={[]}
+      testID="components-map-flat-list"
       viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >
       <View>
+        <View
+          collapsable={false}
+          onLayout={[Function]}
+        >
+          <View
+            edges={
+              {
+                "top": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingTop": undefined,
+              }
+            }
+          />
+        </View>
         <View
           onFocusCapture={[Function]}
           onLayout={[Function]}
@@ -196,6 +246,20 @@ exports[`componentsMap renders renders components map correctly 1`] = `
               size="large"
             />
           </View>
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
         </View>
       </View>
     </RCTScrollView>

package/Components/River/__tests__/componentsMap.test.js

@@ -11,9 +11,14 @@ jest.mock(
   () => () => null
 );
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+jest.mock("react-native-safe-area-context", () => {
+  const { View } = jest.requireActual("react-native");
+
+  return {
+    SafeAreaView: View,
+    useSafeAreaInsets: () => ({ top: 50 }),
+  };
+});
 
 jest.mock("react-native", () => {
   const RN = jest.genMockFromModule("react-native");