@applicaster/zapp-react-native-ui-components 12.0.0-rc.8 → 12.0.0-rc.80

package/Components/ModalComponent/Button/index.tsx

@@ -0,0 +1,111 @@
+import React, { useMemo, useState } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { Item, ItemProps } from "./Item";
+import { ItemIcon, ItemIconProps } from "./ItemIcon";
+import { ItemLabel, ItemLabelProps } from "./ItemLabel";
+import { defaultSelectedAsset } from "./assets";
+import * as assets from "./assets";
+
+type ButtonProps = {
+  configuration: any;
+  width: number;
+  selectedItem?: any;
+  item: any; // Adjust type as needed
+  onPress: (item: any) => void; // Adjust type as needed
+  iconBaseProps?: ItemIconProps;
+  itemBaseProps?: ItemProps;
+  labelBaseProps?: ItemLabelProps;
+  disabled?: boolean;
+  label?: string | Record<string, string>;
+};
+
+const styles = StyleSheet.create({
+  label_icon_container: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+export function Button({
+  selectedItem,
+  item,
+  onPress,
+  configuration,
+  width,
+  iconBaseProps,
+  itemBaseProps,
+  labelBaseProps,
+  label,
+  disabled = false,
+}: ButtonProps) {
+  const [focused, setFocused] = useState(false);
+
+  const selected = useMemo(
+    () => selectedItem && item.value === selectedItem?.value,
+    [selectedItem, selectedItem]
+  );
+
+  const itemProps = useMemo<ItemProps>(
+    () => ({
+      ...itemBaseProps,
+      width,
+    }),
+    [configuration, width]
+  );
+
+  const itemIconProps = useMemo<ItemIconProps>(
+    () => ({
+      ...iconBaseProps,
+      asset: configuration[item.asset] ?? assets[item.asset] ?? item.asset,
+    }),
+    [configuration, item.asset]
+  );
+
+  const selectedItemIconProps = useMemo<ItemIconProps>(
+    () => ({
+      ...iconBaseProps,
+      asset:
+        configuration["modal_bottom_sheet_item_selected_icon"] ||
+        defaultSelectedAsset,
+      marginRight: 10,
+    }),
+    [configuration]
+  );
+
+  const itemLabelProps = useMemo<ItemLabelProps>(
+    () => ({
+      ...labelBaseProps,
+      label: label ?? configuration[item?.label] ?? item?.label ?? null,
+    }),
+    [configuration, item?.label]
+  );
+
+  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}>
+            {itemIconProps.asset && itemIconProps.asset.length > 0 && (
+              <ItemIcon {...itemIconProps} />
+            )}
+            {itemLabelProps.label && (
+              <ItemLabel
+                {...itemLabelProps}
+                focused={focused}
+                selected={selected}
+              />
+            )}
+          </View>
+          {selected && <ItemIcon {...selectedItemIconProps} />}
+        </Item>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/Components/ModalComponent/Header/CloseButton.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+import { TouchableOpacity } from "react-native";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
+// @ts-ignore
+import { defaultCloseAsset } from "./assets";
+
+export type CloseButtonProps = {
+  enabled: boolean;
+  close: () => void;
+  asset: string | undefined;
+  assetFocused: string | undefined;
+  height: number;
+  width: number;
+  marginTop: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+};
+
+export function CloseButton(props: CloseButtonProps) {
+  const {
+    enabled,
+    width,
+    height,
+    marginBottom,
+    marginTop,
+    marginLeft,
+    marginRight,
+    asset,
+    assetFocused,
+    close,
+  } = props;
+
+  const [focused, setFocus] = React.useState(null);
+
+  const uri = useMemo(
+    () => (focused ? assetFocused : asset) || defaultCloseAsset,
+    [asset, assetFocused, focused]
+  );
+
+  if (!enabled) return null;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      style={{
+        marginBottom,
+        marginTop,
+        marginLeft,
+        marginRight,
+      }}
+      onPress={close}
+      onPressIn={() => setFocus(true)}
+      onPressOut={() => setFocus(false)}
+    >
+      <QBImage fadeDuration={0} source={{ uri }} style={{ width, height }} />
+    </TouchableOpacity>
+  );
+}

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/Navigator/StackNavigator.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { isEmpty } from "ramda";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+
+import { Screen } from "../Screen/TV/index.web";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+export const StackNavigator = ({ Components }: Props) => {
+  const { mainStack, currentRoute } = useNavigation();
+
+  const renderScreen = ({ route, state }) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    return (
+      <FocusableGroup
+        id={route}
+        preferredFocus={route === currentRoute}
+        excludeFromFocusSearching
+        key={route}
+      >
+        <ScreenDataContext.Provider value={state}>
+          <PathnameContext.Provider value={route}>
+            <Screen route={route} Components={Components} />
+          </PathnameContext.Provider>
+        </ScreenDataContext.Provider>
+      </FocusableGroup>
+    );
+  };
+
+  return <>{mainStack.map(renderScreen)}</>;
+};

package/Components/Navigator/index.ts

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