@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-rc.1

package/Decorators/ZappPipesDataConnector/utils/useFilter.tsx

@@ -0,0 +1,157 @@
+import React, { useCallback, useEffect } from "react";
+
+import { filterObjects } from "./mongoFilter";
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+
+import {
+  extractAtValues,
+  resolveObjectValues,
+} from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/contextResolver";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
+
+const { log_debug, log_error } = createLogger({
+  subsystem: "General",
+  category: "UseFilter",
+});
+
+export const useFilter: (
+  zappPipesData: ZappPipesData,
+  _component // In future filter will come from the component
+) => (zappPipesData: ZappPipesData) => ZappPipesData = (
+  zappPipesData: ZappPipesData,
+  _component
+) => {
+  const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
+  const [filter, setFilter] = React.useState(null);
+  const [inflatedFilter, setInflatedFilter] = React.useState(null);
+  const screenResolvers = useScreenResolvers();
+
+  useEffect(() => {
+    if (!filter) {
+      setInflatedFilter(null);
+
+      return;
+    }
+
+    const atValues = extractAtValues(filter);
+
+    log_debug("Extracted @ values from filter", { atValues });
+
+    if (!atValues.length) {
+      // no dynamic values - can apply right now
+      setInflatedFilter(filter);
+    } else {
+      const rebuildFilter = () =>
+        resolveObjectValues(filter, screenResolvers)
+          .then((resolvedFilter) => {
+            log_debug("Resolved filter values", { resolvedFilter });
+            setInflatedFilter(resolvedFilter);
+          })
+          .catch((error) => {
+            log_error(`Error resolving filter values: ${error.message}`);
+            setInflatedFilter(null);
+          });
+
+      rebuildFilter(); // have dynamic values - need to resolve before applying
+
+      // subscribe for future changes of dynamic values
+      const screenSubscriptions: (() => void)[] = atValues
+        .filter((data) => data.startsWith("screen/"))
+        .map((data: string) => {
+          const keyName = data.replace("screen/", "");
+
+          const provider = ScreenSingleValueProvider.getProvider(
+            keyName,
+            pathname,
+            screenStateStore
+          );
+
+          const subscription = provider.getObservable().subscribe((value) => {
+            if (value !== undefined) {
+              rebuildFilter();
+            }
+          });
+
+          return () => subscription.unsubscribe();
+        });
+
+      const storageSubscriptions: (() => void)[] = atValues
+        .filter((data) => !data.startsWith("screen/"))
+        .flatMap((data: string) => {
+          const keyName = data.replace("ctx/", "");
+          const { namespace, key } = getNamespaceAndKey(keyName);
+
+          return [
+            localStorage.addListener({ key, namespace }, rebuildFilter),
+            sessionStorage.addListener({ key, namespace }, rebuildFilter),
+          ];
+        });
+
+      const subscriptions = [...screenSubscriptions, ...storageSubscriptions];
+
+      return () => subscriptions.forEach((listener) => listener());
+    }
+  }, [filter]);
+
+  const filterFunc = useCallback(
+    (zappPipesData: ZappPipesData) => {
+      const { data } = zappPipesData;
+
+      if (!data || !data.entry) {
+        return zappPipesData;
+      }
+
+      const noResultBehavior =
+        data?.extensions?.filter?.no_result_behavior || "show_nothing";
+
+      const filterExpression = data?.extensions?.filter?.expression;
+
+      if (filterExpression) {
+        setFilter(filterExpression);
+
+        // if there is a filter, but it is not inflated yet,
+        // and the behavior is "show_nothing" - return no results
+        if (noResultBehavior === "show_nothing" && !inflatedFilter) {
+          return {
+            ...zappPipesData,
+            data: { ...data, entry: [] },
+          } as ZappPipesData;
+        }
+      }
+
+      if (!inflatedFilter) {
+        return zappPipesData;
+      }
+
+      log_debug("Applying filter to data", { filter, inflatedFilter });
+
+      const filteredEntries = filterObjects(data.entry, inflatedFilter);
+
+      if (!filteredEntries.length && noResultBehavior === "show_all") {
+        return zappPipesData;
+      }
+
+      return {
+        ...zappPipesData,
+        data: {
+          ...data,
+          entry: filteredEntries,
+        },
+      } as ZappPipesData;
+    },
+    [inflatedFilter, setFilter]
+  );
+
+  if (!zappPipesData || !zappPipesData.data) {
+    return (zappPipesData) => zappPipesData;
+  }
+
+  return filterFunc;
+};

package/events/index.ts

@@ -2,4 +2,7 @@ export enum QBUIComponentEvents {
   toggleGradient = "toggleGradient",
   topMenuBarTV_onFocus = "topMenuBarTV_onFocus",
   navigatorReplaceItem = "navigatorReplaceItem",
+  scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
+  focusOnSelectedTab = "focusOnSelectedTab",
+  focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-rc.9",
+  "version": "15.0.0-rc.1",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,14 +27,11 @@
     "url": "https://github.com/applicaster/quickbrick/issues"
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
-  "devDependencies": {
-    "redux-mock-store": "^1.5.3"
-  },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-redux": "14.0.0-rc.9",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.9",
+    "@applicaster/applicaster-types": "15.0.0-rc.1",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.1",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.1",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.1",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
@@ -42,10 +39,8 @@
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",
     "validate-color": "*",

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -1,202 +0,0 @@
-import React, { useRef } from "react";
-import { View, ImageBackground, Animated, ViewStyle } from "react-native";
-
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-import { Artwork } from "./Artwork";
-import { directionStyles } from "./helpers";
-
-type Props = {
-  artwork?: string;
-  config: {
-    titleColor: string;
-    summaryColor: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-    artworkBorderRadius: Option<number>;
-  };
-  children: React.ReactNode;
-  style: ViewStyle;
-};
-
-export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
-  const fadeAnimation = useRef(new Animated.Value(0)).current;
-
-  const fadeAudioPlayerIn = () => {
-    Animated.timing(fadeAnimation, {
-      toValue: 1,
-      duration: 3000,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  const { isRTL, backgroundColor, backgroundImage } = config;
-
-  const backgroundImageSource = { uri: backgroundImage };
-
-  const backgroundColorStyle = backgroundImage
-    ? "transparent"
-    : backgroundColor;
-
-  const mainContainerStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    web: {
-      width: 1920,
-      height: 1080,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    native: {
-      backgroundColor: backgroundColorStyle,
-      overflow: "hidden",
-      ...style,
-    },
-    samsung_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    lg_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-  });
-
-  const backgroundImgStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    web: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100%",
-      height: "100%",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    native: {
-      flex: 1,
-    },
-  });
-
-  const textContainerStyles = platformSelect({
-    tvos: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    android_tv: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    web: {
-      margin: 10,
-      height: "100vh",
-      alignItems: directionStyles(isRTL).justifyContent,
-      justifyContent: "center",
-    },
-  });
-
-  const audioPlayerLayoutTV = backgroundImageSource?.uri ? (
-    <ImageBackground
-      source={backgroundImageSource}
-      style={backgroundImgStyles}
-      resizeMode="cover"
-    >
-      <View style={mainContainerStyles}>
-        {!!artwork && <Artwork srcImage={artwork} config={config} />}
-        <View style={textContainerStyles}>{children}</View>
-      </View>
-    </ImageBackground>
-  ) : (
-    <View style={mainContainerStyles}>
-      {!!artwork && <Artwork srcImage={artwork} config={config} />}
-      <View style={textContainerStyles}>{children}</View>
-    </View>
-  );
-
-  const audioPlayerLayoutMobile = () => {
-    fadeAudioPlayerIn();
-
-    return (
-      <View style={mainContainerStyles} pointerEvents="none">
-        <Animated.View
-          style={[
-            mainContainerStyles,
-            {
-              opacity: fadeAnimation,
-            },
-          ]}
-        >
-          <ImageBackground
-            source={backgroundImageSource}
-            style={backgroundImgStyles}
-            resizeMode="cover"
-          >
-            <View style={mainContainerStyles} />
-          </ImageBackground>
-        </Animated.View>
-      </View>
-    );
-  };
-
-  const audioPlayerLayout = platformSelect({
-    tvos: audioPlayerLayoutTV,
-    android_tv: audioPlayerLayoutTV,
-    web: audioPlayerLayoutTV,
-    samsung_tv: audioPlayerLayoutTV,
-    lg_tv: audioPlayerLayoutTV,
-    ios: audioPlayerLayoutMobile(),
-    android: audioPlayerLayoutMobile(),
-  });
-
-  return audioPlayerLayout;
-}

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AudioPlayerLayout /> renders correctly 1`] = `
-<View
-  pointerEvents="none"
-  style={
-    {
-      "backgroundColor": "transparent",
-      "overflow": "hidden",
-    }
-  }
->
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "opacity": 0,
-        "overflow": "hidden",
-      }
-    }
-  >
-    <View
-      accessibilityIgnoresInvertColors={true}
-      style={
-        {
-          "flex": 1,
-        }
-      }
-    >
-      <Image
-        resizeMode="cover"
-        source={
-          {
-            "uri": "https://example.com",
-          }
-        }
-        style={
-          [
-            {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "height": undefined,
-              "width": undefined,
-            },
-            undefined,
-          ]
-        }
-      />
-      <View
-        style={
-          {
-            "backgroundColor": "transparent",
-            "overflow": "hidden",
-          }
-        }
-      />
-    </View>
-  </View>
-</View>
-`;

package/Components/AudioPlayer/__tests__/__snapshots__/channel.test.js.snap

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Channel /> renders correctly 1`] = `
-<View
-  style={
-    {
-      "height": 72,
-      "marginBottom": 30,
-      "width": 128,
-    }
-  }
->
-  <Image
-    fadeDuration={0}
-    source={
-      {
-        "uri": "https://example.com",
-      }
-    }
-    style={
-      {
-        "height": 72,
-        "width": 128,
-      }
-    }
-  />
-</View>
-`;

package/Components/AudioPlayer/__tests__/audioPlayerLayout.test.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react-native";
-
-import { AudioPlayerLayout } from "../AudioPlayerLayout";
-
-const audioPlayerLayoutProps = {
-  artwork: "string",
-  config: {
-    titleColor: "white",
-    summaryColor: "white",
-    backgroundColor: "black",
-    backgroundImage: "https://example.com",
-    isRTL: true,
-  },
-  children: [],
-};
-
-describe("<AudioPlayerLayout />", () => {
-  it("renders correctly", () => {
-    const { toJSON } = render(
-      <AudioPlayerLayout {...audioPlayerLayoutProps} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

package/Components/AudioPlayer/index.ts

@@ -1 +0,0 @@
-export { AudioPlayer } from "./AudioPlayer";

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

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`When River has a general_content type renders River component correctly 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    {
-      "flex": 1,
-    }
-  }
-  testID="on-layout-view"
->
-  <View
-    style={
-      {
-        "display": "none",
-        "flex": 1,
-      }
-    }
-  >
-    <View
-      screenId="A1234"
-      testID="general-content-screen"
-    />
-  </View>
-</View>
-`;

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -1,10 +0,0 @@
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useConfiguration } from "../utils";
-
-export const useBackgroundColor = (): string => {
-  const { modal_background_color: modalBackgroundColor } = useConfiguration();
-
-  const theme = useTheme<BaseThemePropertiesMobile>();
-
-  return modalBackgroundColor || theme?.status_background_color;
-};