@applicaster/zapp-react-native-ui-components 13.0.0-alpha.3332871333 → 13.0.0-alpha.3390783725

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -11,6 +11,7 @@ import { allSettled } from "promise";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
+import { useEventAlerts } from "./utils/useEventAlerts";
 
 const { log_info } = createLogger({
   category: "ScreenContainer",
@@ -103,6 +104,8 @@ export const GeneralContentScreen = ({
     [typeof cellTapAction === "function" ? cellTapAction : onCellTapAction]
   );
 
+  useEventAlerts(screenData);
+
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (

package/Components/GeneralContentScreen/utils/useEventAlerts.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "@applicaster/zapp-react-native-utils/actionsExecutor/consts";
+import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+export const useEventAlerts = (screenData: ZappRiver) => {
+  const localizations = useLocalizedStrings({
+    localizations: screenData?.localizations || {},
+  });
+
+  const isActive = useIsScreenActive();
+
+  const onMaxTagsReached = React.useCallback(() => {
+    // We can't skip subscribe hook call, so we have to check.
+    if (!isActive || !localizations?.msg_maximum_selection_reached_message) {
+      return;
+    }
+
+    showAlertDialog({
+      title: "",
+      message: localizations.msg_maximum_selection_reached_message,
+      okButtonText:
+        localizations.msg_maximum_selection_reached_message_ok_button || "OK",
+    });
+  }, [localizations, isActive]);
+
+  useSubscriberFor(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, onMaxTagsReached);
+};

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,11 +1,5 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { View, LayoutChangeEvent, ScrollView } from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { View, ScrollView, StyleSheet, Platform } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -16,6 +10,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import type { PluginConfiguration } from "./";
 
 import { ModalHeader } from "./Header";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type ModalComponentProps = {
   items: any[];
@@ -44,11 +39,16 @@ type ModalComponentProps = {
   iconPlacement?: "left" | "right";
 };
 
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: "100%",
+  },
+});
+
 export function BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
     currentRoute,
-    maxHeight,
     current_selection = null,
     onPress,
     dismiss,
@@ -61,20 +61,11 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     iconPlacement,
   } = props;
 
-  const [headerHeight, setHeaderHeight] = useState(0);
   const route = useRef(currentRoute);
   const theme = useTheme<BaseThemePropertiesMobile>();
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
-  const maxContentHeight = maxHeight
-    ? maxHeight - headerHeight - paddingTop
-    : undefined;
-
-  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
-    setHeaderHeight(event.nativeEvent.layout.height);
-  }, []);
-
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -101,33 +92,32 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [onPress, dismiss]
   );
 
+  const bottomInset = useSafeAreaInsets().bottom;
+
   return (
     <View
-      style={{
-        maxWidth: props.width,
-        paddingTop,
-      }}
+      style={[
+        styles.container,
+        {
+          paddingTop: paddingTop,
+        },
+      ]}
     >
       <ModalHeader
-        width={props.width}
         dismiss={dismiss}
         configuration={theme}
-        onLayout={onHeaderLayout}
         summary={summary}
         title={title}
       />
       <ScrollView
-        bounces={false}
-        style={{ maxHeight: maxContentHeight }}
         contentContainerStyle={{
-          paddingBottom,
-          paddingTop,
+          paddingBottom:
+            Platform.OS === "ios" ? paddingBottom + bottomInset : paddingBottom,
         }}
       >
         {items.map((item, index) => (
           <ButtonComponent
             key={index}
-            width={props.width}
             configuration={theme}
             selectedItem={current_selection}
             item={item}

package/Components/ModalComponent/Button/index.tsx

@@ -7,7 +7,6 @@ import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
-  width: number;
   selectedItem?: any;
   item: any; // Adjust type as needed
   onPress: (item: any) => void; // Adjust type as needed
@@ -33,7 +32,6 @@ export function Button({
   item,
   onPress,
   configuration,
-  width,
   iconBaseProps,
   itemBaseProps: itemProps,
   labelBaseProps,
@@ -65,34 +63,32 @@ export function Button({
   if (disabled) return null;
 
   return (
-    <View style={{ maxWidth: width }}>
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={() => onPress(item)}
-        onPressIn={() => setFocused(true)}
-        onPressOut={() => setFocused(false)}
-      >
-        <Item {...itemProps} focused={focused} selected={selected}>
-          <View style={styles.label_icon_container}>
-            {iconPlacement === "left" && renderItemIcon}
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={() => onPress(item)}
+      onPressIn={() => setFocused(true)}
+      onPressOut={() => setFocused(false)}
+    >
+      <Item {...itemProps} focused={focused} selected={selected}>
+        <View style={styles.label_icon_container}>
+          {iconPlacement === "left" && renderItemIcon}
 
-            {label ? (
-              <ItemLabel
-                {...labelBaseProps}
-                label={label ?? null}
-                focused={focused}
-                selected={selected}
-              />
-            ) : null}
-          </View>
+          {label ? (
+            <ItemLabel
+              {...labelBaseProps}
+              label={label ?? null}
+              focused={focused}
+              selected={selected}
+            />
+          ) : null}
+        </View>
 
-          {selected ? (
-            <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
-          ) : (
-            iconPlacement === "right" && renderItemIcon
-          )}
-        </Item>
-      </TouchableOpacity>
-    </View>
+        {selected ? (
+          <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
+        ) : (
+          iconPlacement === "right" && renderItemIcon
+        )}
+      </Item>
+    </TouchableOpacity>
   );
 }

package/Components/ModalComponent/Header/index.tsx

@@ -8,13 +8,18 @@ import { PluginConfiguration } from "../index";
 type Props = {
   dismiss: () => void;
   configuration: PluginConfiguration;
-  width: number;
   onLayout?: (event: LayoutChangeEvent) => void;
   summary?: string;
   title?: string;
 };
 
 const styles = StyleSheet.create({
+  noFlex: {
+    flex: 0,
+  },
+  flex: {
+    flex: 1,
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -22,7 +27,7 @@ const styles = StyleSheet.create({
 });
 
 export function ModalHeader(props: Props) {
-  const { configuration, dismiss, width, onLayout, summary, title } = props;
+  const { configuration, dismiss, onLayout, summary, title } = props;
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -55,15 +60,11 @@ export function ModalHeader(props: Props) {
 
   return (
     <View onLayout={onLayout} style={styles.container}>
-      <View
-        style={{
-          width: width - buttonsContainerWidth,
-        }}
-      >
+      <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}
       </View>
-      <View style={{ width: buttonsContainerWidth }}>
+      <View style={[styles.noFlex, { width: buttonsContainerWidth }]}>
         <CloseButton {...closeButtonProps} />
       </View>
     </View>

package/package.json

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