@applicaster/zapp-react-native-ui-components 15.1.13-alpha.1034774223 → 15.1.13

package/Components/ModalComponent/Header/index.tsx

@@ -4,7 +4,6 @@ import { Title, TitleProps } from "./Title";
 import { CloseButton, CloseButtonProps } from "./CloseButton";
 import { getCloseButtonProps, getTitleProps } from "./utils";
 import { PluginConfiguration } from "../index";
-import { useModalBlocksStyle } from "../ModalBlocksStyleContext";
 
 type Props = {
   dismiss: () => void;
@@ -29,14 +28,6 @@ const styles = StyleSheet.create({
 
 export function ModalHeader(props: Props) {
   const { configuration, dismiss, onLayout, summary, title } = props;
-  const modalBlocksStyle = useModalBlocksStyle();
-  const headerBlock = modalBlocksStyle?.header;
-
-  const containerStyle = useMemo(() => {
-    const bg = headerBlock?.container?.default?.backgroundColor;
-
-    return [styles.container, bg ? { backgroundColor: bg } : null];
-  }, [headerBlock?.container?.default?.backgroundColor]);
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -46,17 +37,13 @@ export function ModalHeader(props: Props) {
     [configuration, dismiss]
   );
 
-  const titleProps = useMemo<TitleProps>(() => {
-    const baseProps = getTitleProps(configuration, "title");
-    const titleOverride = headerBlock?.title?.default;
-
-    return {
-      ...baseProps,
+  const titleProps = useMemo<TitleProps>(
+    () => ({
+      ...getTitleProps(configuration, "title"),
       text: title,
-      ...(titleOverride?.fontColor ? { color: titleOverride.fontColor } : {}),
-      ...(titleOverride?.fontSize ? { fontSize: titleOverride.fontSize } : {}),
-    };
-  }, [configuration, title, headerBlock?.title?.default]);
+    }),
+    [configuration, title]
+  );
 
   const summaryProps = useMemo<TitleProps>(
     () => ({
@@ -72,7 +59,7 @@ export function ModalHeader(props: Props) {
     configuration.modal_bottom_sheet_close_margin_right;
 
   return (
-    <View onLayout={onLayout} style={containerStyle}>
+    <View onLayout={onLayout} style={styles.container}>
       <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}

package/Components/ModalComponent/Header/utils.ts

@@ -18,7 +18,7 @@ export function getCloseButtonProps(config: PluginConfiguration) {
   return {
     asset: modal_bottom_sheet_close_asset,
     assetFocused: modal_bottom_sheet_close_focus_asset,
-    enabled: modal_bottom_sheet_close_switch !== false,
+    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,

package/Components/ModalComponent/index.tsx

@@ -1,18 +1,7 @@
 import React, { useCallback, useState } from "react";
-import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
 
 import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
 import { BottomSheetModalContent } from "./BottomSheetModalContent";
-import { showTextInputAction } from "./showTextInput";
-
-actionExecutor.registerAction("showTextInput", showTextInputAction);
-
-export { SortableList, type SortableListProps } from "./SortableList";
-
-export {
-  TextInputContent,
-  type TextInputContentProps,
-} from "./TextInputContent";
 
 export type PluginConfiguration = {
   [key: string]: any;

package/Components/ModalComponent/utils.ts

@@ -1,8 +1,4 @@
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import {
-  toNumberWithDefault,
-  toNumberWithDefaultZero,
-} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { PluginConfiguration } from "./";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemLabelProps } from "./Button/ItemLabel";
@@ -10,8 +6,7 @@ import { ItemProps } from "./Button/Item";
 
 export function defaultItemProps(
   config: PluginConfiguration,
-  maxWidth: number,
-  blockItemStyle?: Record<string, any>
+  maxWidth: number
 ): ItemProps {
   const {
     modal_bottom_sheet_item_background_color,
@@ -29,36 +24,19 @@ export function defaultItemProps(
     modal_bottom_sheet_item_padding_top,
   } = config;
 
-  const bgDefault = blockItemStyle?.background?.default;
-
-  const bgFocused =
-    blockItemStyle?.background?.focused || blockItemStyle?.background?.focus;
-
   return {
-    backgroundColor:
-      bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
-    focusedBackgroundColor:
-      bgFocused?.backgroundColor ||
-      modal_bottom_sheet_item_focus_background_color,
+    backgroundColor: modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
     focusedSelectedBackgroundColor:
       modal_bottom_sheet_item_focused_selected_background_color,
-    borderRadius: toNumberWithDefault(
-      modal_bottom_sheet_item_corner_radius,
-      bgDefault?.borderRadius
-    ),
+    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: toNumberWithDefault(
-      modal_bottom_sheet_item_padding_top,
-      bgDefault?.paddingTop
-    ),
-    paddingBottom: toNumberWithDefault(
-      modal_bottom_sheet_item_padding_bottom,
-      bgDefault?.paddingBottom
-    ),
+    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,
@@ -67,8 +45,7 @@ export function defaultItemProps(
 
 export function defaultItemLabelProps(
   config: PluginConfiguration,
-  sheetWidth: number,
-  blockItemStyle?: Record<string, any>
+  sheetWidth: number
 ): ItemLabelProps {
   const {
     modal_bottom_sheet_item_label_android_letter_spacing,
@@ -95,48 +72,15 @@ export function defaultItemLabelProps(
     modal_bottom_sheet_item_padding_right,
   } = config;
 
-  const iconWidth = toNumberWithDefaultZero(modal_bottom_sheet_item_icon_width);
-
-  const iconMarginLeft = toNumberWithDefaultZero(
-    modal_bottom_sheet_item_icon_margin_left
-  );
-
-  const iconMarginRight = toNumberWithDefaultZero(
-    modal_bottom_sheet_item_icon_margin_right
-  );
-
-  const itemMarginLeft = toNumberWithDefaultZero(
-    modal_bottom_sheet_item_margin_left
-  );
-
-  const itemMarginRight = toNumberWithDefaultZero(
-    modal_bottom_sheet_item_margin_right
-  );
-
-  const itemPaddingLeft = toNumberWithDefaultZero(
-    modal_bottom_sheet_item_padding_left
-  );
-
-  const itemPaddingRight = toNumberWithDefaultZero(
-    modal_bottom_sheet_item_padding_right
-  );
-
-  const calculatedMaxWidth =
-    sheetWidth -
-    (iconWidth +
-      iconMarginLeft +
-      iconMarginRight +
-      itemMarginLeft +
-      itemMarginRight +
-      itemPaddingLeft +
-      itemPaddingRight);
-
   const maxWidth =
-    Number.isNaN(calculatedMaxWidth) || calculatedMaxWidth <= 0
-      ? sheetWidth
-      : calculatedMaxWidth;
-
-  const label1Default = blockItemStyle?.textLabel1?.default;
+    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({
@@ -147,11 +91,8 @@ export function defaultItemLabelProps(
       ios: modal_bottom_sheet_item_label_ios_letter_spacing,
       android: modal_bottom_sheet_item_label_android_letter_spacing,
     }),
-    fontSize: toNumberWithDefault(
-      modal_bottom_sheet_item_label_font_size,
-      label1Default?.fontSize
-    ),
-    color: label1Default?.fontColor || modal_bottom_sheet_item_label_font_color,
+    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,
@@ -205,8 +146,7 @@ export function getItemLabelProps(
   width: number,
   labelProps?:
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
-    | ItemLabelProps,
-  blockItemStyle?: Record<string, any>
+    | ItemLabelProps
 ) {
   if (labelProps) {
     return typeof labelProps === "function"
@@ -214,7 +154,7 @@ export function getItemLabelProps(
       : labelProps;
   }
 
-  return defaultItemLabelProps(theme, width, blockItemStyle);
+  return defaultItemLabelProps(theme, width);
 }
 
 export function getItemProps(
@@ -222,8 +162,7 @@ export function getItemProps(
   width: number,
   itemProps?:
     | ((theme: PluginConfiguration, width: number) => ItemProps)
-    | ItemProps,
-  blockItemStyle?: Record<string, any>
+    | ItemProps
 ) {
   if (itemProps) {
     return typeof itemProps === "function"
@@ -231,5 +170,5 @@ export function getItemProps(
       : itemProps;
   }
 
-  return defaultItemProps(theme, width, blockItemStyle);
+  return defaultItemProps(theme, width);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.1.13-alpha.1034774223",
+  "version": "15.1.13",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,12 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.13-alpha.1034774223",
-    "@applicaster/zapp-react-native-bridge": "15.1.13-alpha.1034774223",
-    "@applicaster/zapp-react-native-redux": "15.1.13-alpha.1034774223",
-    "@applicaster/zapp-react-native-utils": "15.1.13-alpha.1034774223",
+    "@applicaster/applicaster-types": "15.1.13",
+    "@applicaster/zapp-react-native-bridge": "15.1.13",
+    "@applicaster/zapp-react-native-redux": "15.1.13",
+    "@applicaster/zapp-react-native-utils": "15.1.13",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
-    "react-native-sortables": "1.7.1",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
   },

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { useEntryActionState } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import {
-  isActionAvailableFor,
-  RegisteredAction,
-} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
-
-import { Button } from "../Button";
-
-export type ActionButtonProps = {
-  entry: ZappEntry;
-  item: RegisteredAction;
-  configuration: any;
-  width: number;
-};
-
-type Props = ActionButtonProps & {
-  onPress?: (item: any) => void;
-};
-
-/**
- * Unified action button for the modal bottom sheet.
- *
- * Every item is a `RegisteredAction` resolved from the registry (entry actions,
- * registry actions and legacy context-provider actions alike), so the button
- * simply reads `item.action` and drives it through `useEntryActionState`
- * (backed by the action's observable / `addListener`).
- */
-export function ActionButton(props: Props) {
-  const { item, entry, onPress: onItemPress } = props;
-
-  const action = item?.action;
-
-  const { state, invokeAction } = useEntryActionState(action, entry);
-
-  const onPress = React.useCallback(
-    (_item) => {
-      invokeAction({
-        context: "toast",
-        dismiss: () => onItemPress?.(item),
-      });
-    },
-    [invokeAction, item, onItemPress]
-  );
-
-  if (!isActionAvailableFor(action, entry as ZappEntry)) return null;
-
-  return (
-    <Button {...props} item={state} onPress={onPress} label={state?.label} />
-  );
-}
-
-// Explicitly set display name for the component
-ActionButton.displayName = "ActionButton";

package/Components/ModalComponent/ActionsBottomSheet/boundActionButton.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { ActionButton, ActionButtonProps } from "./ActionButton";
-
-/**
- * Binds an entry to the sheet's row button.
- *
- * `BottomSheetModalContent` renders `buttonComponent` per item and does not
- * know about entries, so the entry is closed over here instead.
- */
-export const boundActionButton = (entry: ZappEntry | ZappFeed) => {
-  const ActionButtonWithEntry = (props: ActionButtonProps) => (
-    <ActionButton {...props} entry={entry as ZappEntry} />
-  );
-
-  ActionButtonWithEntry.displayName = "ActionButtonWithEntry";
-
-  return ActionButtonWithEntry;
-};
-
-boundActionButton.displayName = "boundActionButton";

package/Components/ModalComponent/ActionsBottomSheet/index.ts

@@ -1,9 +0,0 @@
-export { ActionButton } from "./ActionButton";
-
-export type { ActionButtonProps } from "./ActionButton";
-
-export { boundActionButton } from "./boundActionButton";
-
-export { openActionsBottomSheet } from "./openActionsBottomSheet";
-
-export type { OpenActionsBottomSheetArgs } from "./openActionsBottomSheet";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -1,58 +0,0 @@
-import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
-
-import { boundActionButton } from "./boundActionButton";
-
-const { log_warning } = createLogger({
-  subsystem: "ActionsBottomSheet",
-  category: "Presentation",
-});
-
-export type OpenActionsBottomSheetArgs = {
-  /** Entry the actions act on; bound into every row button. */
-  entry: ZappEntry | ZappFeed;
-  /** Already resolved and merged actions, in the order they should appear. */
-  actions: RegisteredAction[];
-  title?: string;
-  summary?: string;
-};
-
-/**
- * Presents a list of resolved actions in the shared bottom sheet.
- *
- * This is the core entry point for "show these actions in a sheet": the
- * open-modal-bottom-sheet plugin uses it for its configured list, and the
- * player overflow uses it for the actions that did not fit on the overlay.
- * Neither has to know about the other, and neither needs the plugin installed.
- */
-export function openActionsBottomSheet({
-  entry,
-  actions,
-  title,
-  summary,
-}: OpenActionsBottomSheetArgs): void {
-  if (!actions?.length) {
-    // Every action resolved away - unavailable for this entry, or not
-    // invokable. An empty sheet looks broken, so say why and stay put.
-    log_warning(
-      "openActionsBottomSheet: nothing to present - not opening the sheet",
-      { entryId: (entry as ZappEntry)?.id }
-    );
-
-    return;
-  }
-
-  openBottomSheetModal({
-    modalBottomSheetContentProps: {
-      // TODO: should be optional - the button handles its own tap, but
-      //  BottomSheetModalContent still requires an onPress.
-      onPress: noop,
-      items: actions,
-      buttonComponent: boundActionButton(entry),
-      title,
-      summary,
-    },
-  });
-}