@applicaster/zapp-react-native-ui-components 12.0.0-alpha.6602834797 → 12.0.0-alpha.7101461483

package/Components/ModalComponent/Header/Title.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils/";
+
+export type TitleProps = {
+  text: string;
+  letterSpacing: number;
+  lineHeight: number;
+  fontFamily: string;
+  fontSize: number;
+  color: string;
+  marginTop: number;
+  marginLeft: number;
+  marginRight: number;
+  marginBottom: number;
+  transform: string;
+  numberOfLines: number;
+};
+
+export function Title(props: TitleProps) {
+  const {
+    text,
+    letterSpacing,
+    lineHeight,
+    fontFamily,
+    fontSize,
+    color,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    numberOfLines,
+    transform,
+  } = props;
+
+  const isRTL = useIsRTL();
+  const writingDirection = isRTL ? "rtl" : "ltr";
+
+  if (!text) return null;
+
+  return (
+    <View
+      style={{
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+      }}
+    >
+      {!!text?.length && (
+        <Text
+          style={{
+            letterSpacing,
+            fontFamily,
+            fontSize,
+            lineHeight,
+            color,
+            writingDirection,
+          }}
+          numberOfLines={numberOfLines}
+          ellipsizeMode="tail"
+        >
+          {textTransform(transform, text)}
+        </Text>
+      )}
+    </View>
+  );
+}

package/Components/ModalComponent/Header/assets.ts

@@ -0,0 +1,4 @@
+/* eslint-disable max-len */
+
+export const defaultCloseAsset: string =
+  "data:image/png;base64,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";

package/Components/ModalComponent/Header/index.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from "react";
+import { View, StyleSheet, LayoutChangeEvent } from "react-native";
+import { Title, TitleProps } from "./Title";
+import { CloseButton, CloseButtonProps } from "./CloseButton";
+import { getCloseButtonProps, getTitleProps } from "./utils";
+import { PluginConfiguration } from "../index";
+
+type Props = {
+  dismiss: () => void;
+  configuration: PluginConfiguration;
+  width: number;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  summary?: string;
+  title?: string;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+export function ModalHeader(props: Props) {
+  const { configuration, dismiss, width, onLayout, summary, title } = props;
+
+  const closeButtonProps = useMemo<CloseButtonProps>(
+    () => ({
+      ...getCloseButtonProps(configuration),
+      close: dismiss,
+    }),
+    [configuration, dismiss]
+  );
+
+  const titleProps = useMemo<TitleProps>(
+    () => ({
+      ...getTitleProps(configuration, "title"),
+      text: title,
+    }),
+    [configuration, title]
+  );
+
+  const summaryProps = useMemo<TitleProps>(
+    () => ({
+      ...getTitleProps(configuration, "summary"),
+      text: summary,
+    }),
+    [configuration, summary]
+  );
+
+  const buttonsContainerWidth =
+    configuration.modal_bottom_sheet_close_width +
+    configuration.modal_bottom_sheet_close_margin_left +
+    configuration.modal_bottom_sheet_close_margin_right;
+
+  return (
+    <View onLayout={onLayout} style={styles.container}>
+      <View
+        style={{
+          width: width - buttonsContainerWidth,
+        }}
+      >
+        {title && <Title {...titleProps} />}
+        {summary && <Title {...summaryProps} />}
+      </View>
+      <View style={{ width: buttonsContainerWidth }}>
+        <CloseButton {...closeButtonProps} />
+      </View>
+    </View>
+  );
+}

package/Components/ModalComponent/Header/utils.ts

@@ -0,0 +1,79 @@
+import * as R from "ramda";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { PluginConfiguration } from "../index";
+
+export function getCloseButtonProps(config: PluginConfiguration) {
+  const {
+    modal_bottom_sheet_close_asset,
+    modal_bottom_sheet_close_focus_asset,
+    modal_bottom_sheet_close_height,
+    modal_bottom_sheet_close_width,
+    modal_bottom_sheet_close_switch,
+    modal_bottom_sheet_close_margin_bottom,
+    modal_bottom_sheet_close_margin_left,
+    modal_bottom_sheet_close_margin_right,
+    modal_bottom_sheet_close_margin_top,
+  } = config;
+
+  return {
+    asset: modal_bottom_sheet_close_asset,
+    assetFocused: modal_bottom_sheet_close_focus_asset,
+    enabled: modal_bottom_sheet_close_switch,
+    width: modal_bottom_sheet_close_width,
+    height: modal_bottom_sheet_close_height,
+    marginTop: modal_bottom_sheet_close_margin_top,
+    marginBottom: modal_bottom_sheet_close_margin_bottom,
+    marginLeft: modal_bottom_sheet_close_margin_left,
+    marginRight: modal_bottom_sheet_close_margin_right,
+  };
+}
+
+export function getTextValue(
+  config: PluginConfiguration,
+  entry: ZappEntry,
+  key: string
+): string {
+  const keyValue = config[key];
+
+  if (entry) {
+    const keyPath = R.split(".", keyValue);
+
+    return R.path(keyPath, entry);
+  } else {
+    return keyValue;
+  }
+}
+
+function getConfigKey(
+  config: PluginConfiguration,
+  suffix: string,
+  key: "title" | "summary"
+) {
+  return config?.[`modal_bottom_sheet_${key}_${suffix}`];
+}
+
+export function getTitleProps(
+  config: PluginConfiguration,
+  key: "title" | "summary"
+) {
+  return {
+    enabled: getConfigKey(config, "switch", key),
+    letterSpacing: platformSelect({
+      ios: getConfigKey(config, "ios_letter_spacing", key),
+      android: getConfigKey(config, "android_letter_spacing", key),
+    }),
+    fontFamily: platformSelect({
+      ios: getConfigKey(config, "family_ios_font_selector", key),
+      android: getConfigKey(config, "family_android_font_selector", key),
+    }),
+    lineHeight: getConfigKey(config, "line_height", key),
+    fontSize: getConfigKey(config, "font_size", key),
+    color: getConfigKey(config, "font_color", key),
+    marginTop: getConfigKey(config, "margin_top", key),
+    marginBottom: getConfigKey(config, "margin_bottom", key),
+    marginLeft: getConfigKey(config, "margin_left", key),
+    marginRight: getConfigKey(config, "margin_right", key),
+    numberOfLines: getConfigKey(config, "number_of_lines", key),
+    transform: getConfigKey(config, "transform", key),
+  };
+}

package/Components/ModalComponent/index.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from "react";
+
+import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
+import { BottomSheetModalContent } from "./BottomSheetModalContent";
+
+export type PluginConfiguration = {
+  [key: string]: any;
+};
+
+type Props = {
+  actionPlugins?: [QuickBrickPlugin];
+  configuration?: PluginConfiguration;
+};
+
+export function ModalComponent(props: ModalBottomSheetContentProps & Props) {
+  const [height, setHeight] = useState(0);
+
+  const onLayout = useCallback(
+    ({ nativeEvent }) => {
+      if (height === 0) {
+        setHeight(nativeEvent.layout.height);
+      }
+    },
+    [height]
+  );
+
+  if (height === 0) {
+    return (
+      <MeasurementsPortal
+        Component={BottomSheetModalContent}
+        componentProps={props}
+        onLayout={onLayout}
+      />
+    );
+  }
+
+  return <BottomSheetModalContent {...props} />;
+}

package/Components/ModalComponent/utils.ts

@@ -0,0 +1,126 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { PluginConfiguration } from "./index";
+
+export function defaultItemProps(
+  config: PluginConfiguration,
+  maxWidth: number
+) {
+  const {
+    modal_bottom_sheet_item_background_color,
+    modal_bottom_sheet_item_focus_background_color,
+    modal_bottom_sheet_item_selected_background_color,
+    modal_bottom_sheet_item_focusected_background_color,
+    modal_bottom_sheet_item_corner_radius,
+    modal_bottom_sheet_item_margin_bottom,
+    modal_bottom_sheet_item_margin_left,
+    modal_bottom_sheet_item_margin_right,
+    modal_bottom_sheet_item_margin_top,
+    modal_bottom_sheet_item_padding_bottom,
+    modal_bottom_sheet_item_padding_left,
+    modal_bottom_sheet_item_padding_right,
+    modal_bottom_sheet_item_padding_top,
+  } = config;
+
+  return {
+    backgroundColor: modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
+    selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
+    focusectedBackgroundColor:
+      modal_bottom_sheet_item_focusected_background_color,
+    borderRadius: modal_bottom_sheet_item_corner_radius,
+    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,
+    paddingRight: modal_bottom_sheet_item_padding_right,
+    paddingLeft: modal_bottom_sheet_item_padding_left,
+    maxWidth,
+  };
+}
+
+export function defaultItemLabelProps(
+  config: PluginConfiguration,
+  sheetWidth: number
+) {
+  const {
+    modal_bottom_sheet_item_label_android_letter_spacing,
+    modal_bottom_sheet_item_label_ios_letter_spacing,
+    modal_bottom_sheet_item_label_family_ios_font_selector,
+    modal_bottom_sheet_item_label_family_android_font_selector,
+    modal_bottom_sheet_item_label_focus_font_color,
+    modal_bottom_sheet_item_label_font_color,
+    modal_bottom_sheet_item_label_selected_font_color,
+    modal_bottom_sheet_item_label_hover_selected_font_color,
+    modal_bottom_sheet_item_label_font_size,
+    modal_bottom_sheet_item_label_line_height,
+    modal_bottom_sheet_item_label_margin_bottom,
+    modal_bottom_sheet_item_label_margin_top,
+    modal_bottom_sheet_item_label_margin_left,
+    modal_bottom_sheet_item_label_margin_right,
+    modal_bottom_sheet_item_label_transform,
+    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,
+  } = config;
+
+  const maxWidth =
+    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);
+
+  return {
+    fontFamily: platformSelect({
+      ios: modal_bottom_sheet_item_label_family_ios_font_selector,
+      android: modal_bottom_sheet_item_label_family_android_font_selector,
+    }),
+    letterSpacing: platformSelect({
+      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,
+    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,
+    lineHeight: modal_bottom_sheet_item_label_line_height,
+    marginBottom: modal_bottom_sheet_item_label_margin_bottom,
+    marginTop: modal_bottom_sheet_item_label_margin_top,
+    marginLeft: modal_bottom_sheet_item_label_margin_left,
+    marginRight: modal_bottom_sheet_item_label_margin_right,
+    transform: modal_bottom_sheet_item_label_transform,
+    maxWidth,
+  };
+}
+
+export function defaultItemIconProps(config: PluginConfiguration) {
+  const {
+    modal_bottom_sheet_item_icon_height,
+    modal_bottom_sheet_item_icon_width,
+    modal_bottom_sheet_item_icon_margin_bottom,
+    modal_bottom_sheet_item_icon_margin_left,
+    modal_bottom_sheet_item_icon_margin_right,
+    modal_bottom_sheet_item_icon_margin_top,
+    modal_bottom_sheet_item_icon_flavour,
+  } = config;
+
+  return {
+    width: modal_bottom_sheet_item_icon_width,
+    height: modal_bottom_sheet_item_icon_height,
+    flavour: modal_bottom_sheet_item_icon_flavour,
+    marginTop: modal_bottom_sheet_item_icon_margin_top,
+    marginBottom: modal_bottom_sheet_item_icon_margin_bottom,
+    marginLeft: modal_bottom_sheet_item_icon_margin_left,
+    marginRight: modal_bottom_sheet_item_icon_margin_right,
+  };
+}

package/Components/River/River.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
 import * as R from "ramda";
+import { GeneralContentScreen } from "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen";
 
 import { FeedLoader } from "../FeedLoader";
 import { ScreenResolver } from "../ScreenResolver";
 
-import type { ZappScreenProps } from "@applicaster/zapp-react-native-flow-types";
-
-import { GeneralContentScreen } from "../GeneralContentScreen";
-
 type Props = ZappScreenProps & {
   feedUrl?: string;
   isInsideContainer?: boolean;
@@ -18,6 +15,12 @@ type Props = ZappScreenProps & {
     | import("react-native").FlatListProps<any>
   ) &
     Record<string, any>;
+  appData: AppDataKeys;
+  screenTitle: string;
+  screenSummary: string;
+  setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
+  screenContext: ZappRiver;
+  river: ZappRiver;
 };
 
 type State = {
@@ -27,7 +30,7 @@ type State = {
 export class RiverComponent extends React.Component<Props, State> {
   private currentScreenTitle: string;
   private currentScreenSummary: string;
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {

package/Components/River/useScreenConfiguration.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { toCamelCase } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { useMemo } from "react";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
@@ -47,7 +47,7 @@ const stylingKeys = [
 
 export function useScreenConfiguration(screenId: string): ScreenConfiguration {
   const { rivers } = usePickFromState(["rivers"]);
-  const { deviceInfo } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   return useMemo(() => {
     const config = {} as ScreenConfiguration;
@@ -56,8 +56,7 @@ export function useScreenConfiguration(screenId: string): ScreenConfiguration {
     if (screenData) {
       const { styles } = screenData;
 
-      const keyPrefix =
-        deviceInfo?.isTablet && styles?.tablet_theme ? "tablet_" : "";
+      const keyPrefix = isTablet && styles?.tablet_theme ? "tablet_" : "";
 
       stylingKeys.forEach(([key, castFn]) => {
         const styleKey = `${keyPrefix}${key}`;

package/Components/Screen/__tests__/Screen.test.tsx

@@ -2,8 +2,6 @@ import * as React from "react";
 import { View } from "react-native";
 import { create, act } from "react-test-renderer";
 
-import { ORIENTATIONS } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
-
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
@@ -58,10 +56,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
   })),
 }));
 
-const {
-  useCurrentScreenData,
-} = require("@applicaster/zapp-react-native-utils/reactHooks/screen");
-
 const { isNavBarVisible } = require("../navigationHandler");
 
 const NavBar = jest.fn((props) => <View testID="navBar" {...props} />);
@@ -144,44 +138,44 @@ describe("<Screen Component />", () => {
     });
   });
 
-  it("invokes the orientation hook when the route changes", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
-    // @ts-ignore
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-      plugin_type: "player",
-    });
-
-    act(() => {
-      wrapper.update(
-        <Screen
-          {...screenProps}
-          pathname="/playable"
-          screenData={{
-            id: "player-testId",
-            general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-            plugin_type: "player",
-          }}
-        />
-      );
-    });
-
-    useCurrentScreenData.mockReturnValue({
-      id: "player-testId",
-      general: { screen_orientation: ORIENTATIONS.landscapeSensor },
-    });
-
-    act(() => {
-      wrapper.update(<Screen {...screenProps} />);
-    });
-
-    expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
-      1,
-      ORIENTATIONS.landscapeSensor
-    );
-  });
+  // it("invokes the orientation hook when the route changes", () => {
+  //   act(() => {
+  //     wrapper = create(<Screen {...screenProps} />);
+  //   });
+
+  //   // @ts-ignore
+  //   useCurrentScreenData.mockReturnValue({
+  //     id: "player-testId",
+  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //     plugin_type: "player",
+  //   });
+
+  //   act(() => {
+  //     wrapper.update(
+  //       <Screen
+  //         {...screenProps}
+  //         pathname="/playable"
+  //         screenData={{
+  //           id: "player-testId",
+  //           general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //           plugin_type: "player",
+  //         }}
+  //       />
+  //     );
+  //   });
+
+  //   useCurrentScreenData.mockReturnValue({
+  //     id: "player-testId",
+  //     general: { screen_orientation: ORIENTATIONS.landscapeSensor },
+  //   });
+
+  //   act(() => {
+  //     wrapper.update(<Screen {...screenProps} />);
+  //   });
+
+  //   expect(allowedOrientationsForScreen).toHaveBeenNthCalledWith(
+  //     1,
+  //     ORIENTATIONS.landscapeSensor
+  //   );
+  // });
 });

package/Components/Screen/index.tsx

@@ -7,7 +7,6 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenOrientationHandler } from "./orientationHandler";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
-import type { ZappNavigationProps } from "@applicaster/zapp-react-native-flow-types/index";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 

package/Components/Screen/orientationHandler.ts

@@ -8,7 +8,7 @@ import {
 
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 

package/Components/TrackedView/index.tsx

@@ -17,9 +17,12 @@ type TrackedViewProps = {
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {
   const children = props.children;
 
-  const onPositionUpdated = useCallback((event: TrackedViewNativeProps) => {
-    props?.onPositionUpdated(event.nativeEvent);
-  }, []);
+  const onPositionUpdated = useCallback(
+    (event: TrackedViewNativeProps) => {
+      props.onPositionUpdated(event.nativeEvent);
+    },
+    [props.onPositionUpdated]
+  );
 
   if (isTV()) {
     return <View {...(props as any)}>{children}</View>;