@applicaster/zapp-react-native-ui-components 16.0.0-rc.11 → 16.0.0-rc.111

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -0,0 +1,523 @@
+import {
+  BackgroundConfiguration as ItemBackgroundConfiguration,
+  ImageConfiguration as ItemImageConfiguration,
+  LabelConfiguration as ItemLabelConfiguration,
+  NowPlayingAssetConfiguration as ItemNowPlayingAssetConfiguration,
+  CheckboxAssetsConfiguration as ItemCheckboxAssetsConfiguration,
+  ActionButtonAssetsConfiguration as ItemActionButtonAssetsConfiguration,
+  ItemConfiguration,
+} from "../Components/Item";
+import {
+  TitleConfiguration as HeaderTitleConfiguration,
+  ActionButtonsStyleConfiguration as HeaderActionButtonsStyleConfiguration,
+  HeaderConfiguration,
+} from "../Components/Header";
+import {
+  BackgroundConfiguration as ButtonBackgroundConfiguration,
+  TitleConfiguration as ButtonTitleConfiguration,
+  ButtonConfiguration,
+} from "../Components/Button";
+
+// ---------------------------------------------------------------------------
+// Item Merging Helpers
+// ---------------------------------------------------------------------------
+
+function mergeItemBackground(
+  base: ItemBackgroundConfiguration,
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
+): ItemBackgroundConfiguration {
+  if (!defaultOverride && !focusedOverride) return base;
+
+  // Only take focused color from the focused/pressed bucket (or legacy
+  // mis-parsed focus* aliases). Never fall back to default background —
+  // that would overwrite base.focusedColor whenever Studio only sets default.
+  const focusedColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusColor ??
+    defaultOverride?.focusBackgroundColor;
+
+  return {
+    ...base,
+    ...(defaultOverride?.backgroundColor
+      ? { defaultColor: defaultOverride.backgroundColor }
+      : {}),
+    ...(focusedColor != null && focusedColor !== "" ? { focusedColor } : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+  };
+}
+
+function mergeItemImage(
+  base: ItemImageConfiguration,
+  override?: Record<string, any>
+): ItemImageConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.width !== undefined ? { width: override.width } : {}),
+    ...(override.height !== undefined ? { height: override.height } : {}),
+    ...(override.borderRadius !== undefined
+      ? { cornerRadius: override.borderRadius }
+      : {}),
+    ...(override.borderWidth !== undefined
+      ? { borderWidth: override.borderWidth }
+      : {}),
+    ...(override.borderColor ? { borderColor: override.borderColor } : {}),
+  };
+}
+
+function mergeItemLabel(
+  base: ItemLabelConfiguration,
+  override?: Record<string, any>
+): ItemLabelConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+    ...(typeof override.fontFamily === "string" && override.fontFamily
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
+  };
+}
+
+function mergeItemNowPlayingAsset(
+  base: ItemNowPlayingAssetConfiguration,
+  override?: Record<string, any>
+): ItemNowPlayingAssetConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.asset ? { asset: override.asset } : {}),
+  };
+}
+
+function mergeItemCheckboxAssets(
+  base: ItemCheckboxAssetsConfiguration,
+  override?: Record<string, any>
+): ItemCheckboxAssetsConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.asset ? { asset: override.asset } : {}),
+    ...(override.checkedAsset ? { checkedAsset: override.checkedAsset } : {}),
+  };
+}
+
+function mergeItemActionButtonAssets(
+  base: ItemActionButtonAssetsConfiguration,
+  override?: Record<string, any>
+): ItemActionButtonAssetsConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.removeAsset ? { removeAsset: override.removeAsset } : {}),
+    ...(override.dragAsset ? { dragAsset: override.dragAsset } : {}),
+    ...(override.playAsset ? { playAsset: override.playAsset } : {}),
+    ...(override.pauseAsset ? { pauseAsset: override.pauseAsset } : {}),
+  };
+}
+
+export function mergeItemConfiguration(
+  base: ItemConfiguration,
+  itemBlock?: Record<string, any>
+): ItemConfiguration {
+  if (!itemBlock) return base;
+
+  const bgDefault = itemBlock.background?.default || itemBlock.background;
+
+  const bgFocused =
+    itemBlock.background?.focused ||
+    itemBlock.background?.focus ||
+    itemBlock.background?.pressed;
+
+  const img = itemBlock.image?.default || itemBlock.image;
+  const label1 = itemBlock.textLabel1?.default || itemBlock.textLabel1;
+  const label2 = itemBlock.textLabel2?.default || itemBlock.textLabel2;
+
+  const npLabel =
+    itemBlock.nowPlayingLabel?.default || itemBlock.nowPlayingLabel;
+
+  const npAsset =
+    itemBlock.nowPlayingAsset?.default || itemBlock.nowPlayingAsset;
+
+  const checkbox = itemBlock.checkbox?.default || itemBlock.checkbox;
+
+  const actionButtons =
+    itemBlock.actionButtons?.default || itemBlock.actionButtons;
+
+  return {
+    ...base,
+    background: mergeItemBackground(base.background, bgDefault, bgFocused),
+    image: mergeItemImage(base.image, img),
+    textLabel1: mergeItemLabel(base.textLabel1, label1),
+    textLabel2: mergeItemLabel(base.textLabel2, label2),
+    nowPlayingLabel: mergeItemLabel(base.nowPlayingLabel, npLabel),
+    nowPlayingAsset: mergeItemNowPlayingAsset(base.nowPlayingAsset, npAsset),
+    checkboxAssets: mergeItemCheckboxAssets(
+      base.checkboxAssets || {},
+      checkbox
+    ),
+    actionButtonAssets: mergeItemActionButtonAssets(
+      base.actionButtonAssets || {},
+      actionButtons
+    ),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Header Merging Helpers
+// ---------------------------------------------------------------------------
+
+function mergeHeaderTitle(
+  base: HeaderTitleConfiguration,
+  override?: Record<string, any>
+): HeaderTitleConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+    ...(typeof override.fontFamily === "string"
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
+    ...(override.alignment ? { alignment: override.alignment } : {}),
+  };
+}
+
+function mergeHeaderActionButtons(
+  base: HeaderActionButtonsStyleConfiguration,
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
+): HeaderActionButtonsStyleConfiguration {
+  if (!defaultOverride && !focusedOverride) return base;
+
+  const focusedBackgroundColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusBackgroundColor ??
+    defaultOverride?.focusedBackgroundColor;
+
+  const focusedFontColor =
+    focusedOverride?.fontColor ??
+    defaultOverride?.focusFontColor ??
+    defaultOverride?.focusedFontColor;
+
+  return {
+    ...base,
+    ...(defaultOverride?.backgroundColor
+      ? { defaultBackgroundColor: defaultOverride.backgroundColor }
+      : {}),
+    ...(focusedBackgroundColor != null && focusedBackgroundColor !== ""
+      ? { focusedBackgroundColor }
+      : {}),
+    ...(defaultOverride?.fontColor
+      ? { fontColor: defaultOverride.fontColor }
+      : {}),
+    ...(focusedFontColor != null && focusedFontColor !== ""
+      ? { focusedFontColor }
+      : {}),
+    ...(defaultOverride?.fontSize !== undefined
+      ? { fontSize: defaultOverride.fontSize }
+      : {}),
+    ...(defaultOverride?.lineHeight !== undefined
+      ? { lineHeight: defaultOverride.lineHeight }
+      : {}),
+    ...(typeof defaultOverride?.fontFamily === "string"
+      ? {
+          iosFontFamily: defaultOverride.fontFamily,
+          androidFontFamily: defaultOverride.fontFamily,
+        }
+      : {}),
+    ...(defaultOverride?.iosFontFamily
+      ? { iosFontFamily: defaultOverride.iosFontFamily }
+      : {}),
+    ...(defaultOverride?.androidFontFamily
+      ? { androidFontFamily: defaultOverride.androidFontFamily }
+      : {}),
+    ...(defaultOverride?.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: defaultOverride.letterSpacing,
+          androidLetterSpacing: defaultOverride.letterSpacing,
+        }
+      : {}),
+    ...(defaultOverride?.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: defaultOverride.iosLetterSpacing }
+      : {}),
+    ...(defaultOverride?.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: defaultOverride.androidLetterSpacing }
+      : {}),
+    ...(defaultOverride?.textTransform
+      ? { textTransform: defaultOverride.textTransform }
+      : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+    ...(defaultOverride?.cornerRadius !== undefined
+      ? { cornerRadius: defaultOverride.cornerRadius }
+      : {}),
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
+      : {}),
+  };
+}
+
+export function mergeHeaderConfiguration(
+  base: HeaderConfiguration,
+  headerBlock?: Record<string, any>
+): HeaderConfiguration & { backgroundColor?: string } {
+  if (!headerBlock) return base;
+
+  const bgOverride = headerBlock.container?.default?.backgroundColor;
+
+  const actionButtonsDefault =
+    headerBlock.actionButtons?.default || headerBlock.actionButtons;
+
+  const actionButtonsFocused =
+    headerBlock.actionButtons?.focused || headerBlock.actionButtons?.focus;
+
+  // Parser shape is title.default.*; hydrate() returns a flat title object.
+  const titleDefault = headerBlock.title?.default;
+
+  const titleOverride =
+    titleDefault &&
+    (titleDefault.fontColor !== undefined ||
+      titleDefault.fontSize !== undefined ||
+      titleDefault.lineHeight !== undefined ||
+      titleDefault.fontFamily ||
+      titleDefault.iosFontFamily ||
+      titleDefault.androidFontFamily ||
+      titleDefault.letterSpacing !== undefined ||
+      titleDefault.iosLetterSpacing !== undefined ||
+      titleDefault.androidLetterSpacing !== undefined ||
+      titleDefault.textTransform ||
+      titleDefault.alignment)
+      ? titleDefault
+      : headerBlock.title;
+
+  return {
+    ...base,
+    title: mergeHeaderTitle(base.title, titleOverride),
+    actionButtons: mergeHeaderActionButtons(
+      base.actionButtons,
+      actionButtonsDefault,
+      actionButtonsFocused
+    ),
+    ...(bgOverride ? { backgroundColor: bgOverride } : {}),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Button Merging Helpers
+// ---------------------------------------------------------------------------
+
+function mergeButtonBackground(
+  base: ButtonBackgroundConfiguration,
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
+): ButtonBackgroundConfiguration {
+  if (!defaultOverride && !focusedOverride) return base;
+
+  // Same as mergeItemBackground: do not use default background as focusedColor.
+  const focusedColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusColor ??
+    defaultOverride?.focusBackgroundColor;
+
+  return {
+    ...base,
+    ...(defaultOverride?.backgroundColor
+      ? { defaultColor: defaultOverride.backgroundColor }
+      : {}),
+    ...(focusedColor != null && focusedColor !== "" ? { focusedColor } : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
+      : {}),
+  };
+}
+
+function mergeButtonTitle(
+  base: ButtonTitleConfiguration,
+  override?: Record<string, any>
+): ButtonTitleConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.fontColor ? { fontColor: override.fontColor } : {}),
+    ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+    ...(override.fontFamily
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
+  };
+}
+
+function mergeButtonIcons(
+  base: ButtonConfiguration["icons"],
+  iconsOverride?: Record<string, any>,
+  leadingOverride?: Record<string, any>
+): ButtonConfiguration["icons"] {
+  if (!iconsOverride && !leadingOverride) return base;
+
+  const iconsDefault = iconsOverride?.default || iconsOverride;
+  const leadingDefault = leadingOverride?.default || leadingOverride;
+
+  return {
+    ...base,
+    ...(iconsDefault?.width !== undefined ? { width: iconsDefault.width } : {}),
+    ...(iconsDefault?.height !== undefined
+      ? { height: iconsDefault.height }
+      : {}),
+    leadingIcon: {
+      ...base.leadingIcon,
+      ...(leadingDefault?.enabled !== undefined
+        ? { enabled: leadingDefault.enabled }
+        : {}),
+      ...(leadingDefault?.actionType
+        ? { actionType: leadingDefault.actionType }
+        : {}),
+      ...(leadingDefault?.asset ? { asset: leadingDefault.asset } : {}),
+    },
+  };
+}
+
+export function mergeButtonConfiguration(
+  base: ButtonConfiguration,
+  buttonBlock?: Record<string, any>,
+  actionBlock?: Record<string, any>
+): ButtonConfiguration {
+  if (!buttonBlock && !actionBlock) return base;
+
+  const bgDefault =
+    buttonBlock?.background?.default || actionBlock?.background?.default;
+
+  const bgFocused =
+    buttonBlock?.background?.focused ||
+    buttonBlock?.background?.focus ||
+    actionBlock?.background?.focused ||
+    actionBlock?.background?.focus ||
+    buttonBlock?.background?.pressed ||
+    actionBlock?.background?.pressed;
+
+  const titleOverride =
+    buttonBlock?.title?.default || actionBlock?.title?.default;
+
+  const iconsOverride = buttonBlock?.icons || actionBlock?.icons;
+  const leadingOverride = buttonBlock?.leadingIcon || actionBlock?.leadingIcon;
+
+  return {
+    ...base,
+    background: mergeButtonBackground(base.background, bgDefault, bgFocused),
+    title: mergeButtonTitle(base.title, titleOverride),
+    icons: mergeButtonIcons(base.icons, iconsOverride, leadingOverride),
+  };
+}

package/Components/ModalComponent/BottomSheetDragArea.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import { View } from "react-native";
+import { useBottomSheet } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+/**
+ * Turns its children into a drag zone for the enclosing DraggableBottomSheet:
+ * dragging here moves/dismisses the sheet (used for the modal header bar).
+ * Outside a sheet (no context) it renders children unchanged.
+ */
+export const BottomSheetDragArea = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => {
+  const sheet = useBottomSheet();
+
+  // Outside a sheet (no context) render children unchanged.
+  if (!sheet) return children;
+
+  return (
+    <PanGestureHandler
+      simultaneousHandlers={[sheet.masterDrawerRef]}
+      shouldCancelWhenOutside={false}
+      onGestureEvent={sheet.onDragGestureEvent}
+      onHandlerStateChange={sheet.onDragStateChange}
+    >
+      {/* Old-API PanGestureHandler needs a host-component child; children may
+          be a function component (e.g. ModalHeader), so wrap in a View. */}
+      <View>{children}</View>
+    </PanGestureHandler>
+  );
+};