@applicaster/zapp-react-native-utils 15.1.0 → 15.1.1

package/actionsExecutor/ActionExecutorContext.tsx

@@ -25,6 +25,10 @@ import {
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
 import { useNavigation } from "../reactHooks";
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "../reactHooks/feed/useInflatedUrl";
 
 import {
   useContentTypes,
@@ -128,12 +132,42 @@ const prepareDefaultActions = (actionExecutor) => {
     async (_action, context) => {
       const dispatch = appStore.getDispatch();
 
-      const dataSource =
-        context?.component?.data?.source ||
-        findParentComponent(context?.component.id, context?.screenData)?.data
-          ?.source;
+      const parentComponent = findParentComponent(
+        context?.component?.id,
+        context?.screenData
+      );
+
+      const componentSource = context?.component?.data?.source;
+
+      const componentData = componentSource
+        ? context.component.data
+        : parentComponent?.data;
+
+      const source = componentData?.source;
+      const mapping = componentData?.mapping;
 
-      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`);
+      let dataSource = source;
+
+      if (source && mapping) {
+        dataSource =
+          getInflatedDataSourceUrl({
+            source,
+            contexts: {
+              entry: context?.entryContext,
+              screen: context?.screenData,
+              search: getSearchContext(null, mapping),
+            },
+            mapping,
+          }) || source;
+      }
+
+      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`, {
+        source,
+        inflatedUrl: dataSource,
+        mapping,
+        entryContextId: context?.entryContext?.id,
+        entryId: context?.entry?.id,
+      });
 
       // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
       // TODO: handle focused item removal

package/manifestUtils/_internals/index.js

@@ -157,6 +157,10 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
 
         if (conditions) {
           generatedField.conditional_fields = conditions.map((condition) => {
+            if (condition.section === null) {
+              return { key: condition.key, condition_value: condition.value };
+            }
+
             const section = condition.section ? `${condition.section}/` : "";
 
             return {
@@ -164,6 +168,8 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
               condition_value: condition.value,
             };
           });
+
+          generatedField.rules = "all_conditions";
         }
 
         return generatedField;

package/manifestUtils/fieldUtils/__tests__/fieldUtils.test.js

@@ -0,0 +1,133 @@
+const {
+  parseShorthand,
+  margin,
+  padding,
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+} = require("..");
+
+describe("parseShorthand", () => {
+  it("1 value → all four sides equal", () => {
+    expect(parseShorthand("8")).toEqual([8, 8, 8, 8]);
+  });
+
+  it("2 values → top/bottom, right/left", () => {
+    expect(parseShorthand("0 20")).toEqual([0, 20, 0, 20]);
+  });
+
+  it("3 values → top, right/left, bottom", () => {
+    expect(parseShorthand("0 0 20")).toEqual([0, 0, 20, 0]);
+  });
+
+  it("4 values → top right bottom left", () => {
+    expect(parseShorthand("1 2 3 4")).toEqual([1, 2, 3, 4]);
+  });
+
+  it("throws on invalid count", () => {
+    expect(() => parseShorthand("1 2 3 4 5")).toThrow();
+  });
+});
+
+describe("margin", () => {
+  it("returns 4 field descriptors with correct suffixes", () => {
+    const fields = margin("margin", { mobile: "0" });
+
+    expect(fields.map((f) => f.suffix)).toEqual([
+      "margin top",
+      "margin right",
+      "margin bottom",
+      "margin left",
+    ]);
+  });
+
+  it("sets type to number_input", () => {
+    margin("margin", { mobile: "0" }).forEach((f) => {
+      expect(f.type).toBe("number_input");
+    });
+  });
+
+  it("expands shorthand per platform", () => {
+    const fields = margin("margin", { mobile: "0 0 20", tv: "0 0 90" });
+    const byKey = Object.fromEntries(fields.map((f) => [f.suffix, f]));
+    expect(byKey["margin top"].initialValue).toEqual({ mobile: 0, tv: 0 });
+    expect(byKey["margin bottom"].initialValue).toEqual({ mobile: 20, tv: 90 });
+    expect(byKey["margin left"].initialValue).toEqual({ mobile: 0, tv: 0 });
+  });
+
+  it("supports a custom suffix prefix", () => {
+    const fields = margin("input margin", { mobile: "4" });
+    expect(fields[0].suffix).toBe("input margin top");
+  });
+});
+
+describe("padding", () => {
+  it("returns 4 field descriptors with correct suffixes", () => {
+    const fields = padding("padding", { mobile: "0" });
+
+    expect(fields.map((f) => f.suffix)).toEqual([
+      "padding top",
+      "padding right",
+      "padding bottom",
+      "padding left",
+    ]);
+  });
+
+  it("expands 2-value shorthand symmetrically", () => {
+    const fields = padding("padding", { mobile: "0 20", tv: "0 124" });
+    const byKey = Object.fromEntries(fields.map((f) => [f.suffix, f]));
+
+    expect(byKey["padding right"].initialValue).toEqual({
+      mobile: 20,
+      tv: 124,
+    });
+
+    expect(byKey["padding left"].initialValue).toEqual({ mobile: 20, tv: 124 });
+    expect(byKey["padding top"].initialValue).toEqual({ mobile: 0, tv: 0 });
+    expect(byKey["padding bottom"].initialValue).toEqual({ mobile: 0, tv: 0 });
+  });
+});
+
+describe("manifestUtils/fieldUtils", () => {
+  it("appends conditions and adds all_conditions when there is more than one condition", () => {
+    const config = {
+      key: "mobile_button_1_width",
+      conditional_fields: [
+        { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      ],
+    };
+
+    const result = withConditional([
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ])(config);
+
+    expect(result.conditional_fields).toEqual([
+      { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ]);
+
+    expect(result.rules).toBe("all_conditions");
+  });
+
+  it("creates category-prefixed conditional key", () => {
+    expect(
+      getConditionalKey("mobile_buttons_container_position", "styles")
+    ).toBe("styles/mobile_buttons_container_position");
+  });
+
+  it("creates conditional fields with default category and with raw key", () => {
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true)
+    ).toEqual({
+      key: "styles/mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true, null)
+    ).toEqual({
+      key: "mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+  });
+});

package/manifestUtils/fieldUtils/index.js

@@ -0,0 +1,179 @@
+const { ZAPPIFEST_FIELDS } = require("../keys");
+const { toCamelCase } = require("../_internals");
+
+const SIDES = ["top", "right", "bottom", "left"];
+
+/**
+ * Parses a CSS margin/padding shorthand string into [top, right, bottom, left].
+ *
+ * 1 value  → all four sides
+ * 2 values → top/bottom, right/left
+ * 3 values → top, right/left, bottom
+ * 4 values → top, right, bottom, left
+ *
+ * @param {string} str
+ * @returns {[number, number, number, number]}
+ */
+function parseShorthand(str) {
+  const parts = String(str).trim().split(/\s+/).map(Number);
+
+  switch (parts.length) {
+    case 1:
+      return [parts[0], parts[0], parts[0], parts[0]];
+    case 2:
+      return [parts[0], parts[1], parts[0], parts[1]];
+    case 3:
+      return [parts[0], parts[1], parts[2], parts[1]];
+    case 4:
+      return parts;
+    default:
+      throw new Error(
+        `Shorthand expects 1–4 space-separated values, got ${parts.length}: "${str}"`
+      );
+  }
+}
+
+function spacingFields(prefix, initialValues) {
+  const platforms = Object.keys(initialValues);
+
+  const parsed = Object.fromEntries(
+    platforms.map((p) => [p, parseShorthand(initialValues[p])])
+  );
+
+  return SIDES.map((side, i) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+    initialValue: Object.fromEntries(platforms.map((p) => [p, parsed[p][i]])),
+  }));
+}
+
+/**
+ * Generates four margin field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "margin"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 0 20", tv: "0 0 90" }
+ * @returns {object[]}
+ */
+function margin(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Generates four padding field descriptors (top/right/bottom/left) from a
+ * per-platform CSS shorthand string.
+ *
+ * @param {string} suffix - prefix word for generated field names, e.g. "padding"
+ * @param {Record<string, string>} initialValues - e.g. { mobile: "0 20", tv: "0 124" }
+ * @returns {object[]}
+ */
+function padding(suffix, initialValues) {
+  return spacingFields(suffix, initialValues);
+}
+
+/**
+ * Returns a flat camelCase defaults object for a spacing shorthand.
+ * e.g. marginDefaults("margin", "0 0 20") → { marginTop: 0, marginRight: 0, marginBottom: 20, marginLeft: 0 }
+ *
+ * @param {string} suffix - e.g. "margin" or "padding"
+ * @param {string} shorthand - CSS-like shorthand string
+ * @returns {Record<string, number>}
+ */
+function spacingDefaults(suffix, shorthand) {
+  const values = parseShorthand(shorthand);
+
+  return Object.fromEntries(
+    SIDES.map((side, i) => [toCamelCase(`${suffix} ${side}`), values[i]])
+  );
+}
+
+function marginDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+function paddingDefaults(suffix, shorthand) {
+  return spacingDefaults(suffix, shorthand);
+}
+
+/**
+ * Returns four field descriptors (top/right/bottom/left) with only suffix and type — no initialValue.
+ * Used when defaults are stored separately in the subgroup spec.
+ *
+ * @param {string} prefix - e.g. "margin" or "padding"
+ * @returns {object[]}
+ */
+function marginFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
+function paddingFields(prefix) {
+  return SIDES.map((side) => ({
+    suffix: `${prefix} ${side}`,
+    type: ZAPPIFEST_FIELDS.number_input,
+  }));
+}
+
+/**
+ * Appends new conditional_fields from conditions array
+ * to config.conditional_fields
+ * if there are more than 1 condition, sets rules to "all_conditions"
+ *
+ * @param {Array<{key: string, condition_value: unknown}>} conditions
+ * @returns {(config: object) => object}
+ */
+const withConditional = (conditions) => (config) => {
+  const conditional_fields = [
+    ...(config.conditional_fields || []),
+    ...conditions,
+  ];
+
+  const next = { ...config, conditional_fields };
+
+  if (conditional_fields.length > 1) {
+    return { ...next, rules: "all_conditions" };
+  }
+
+  return next;
+};
+
+/**
+ * Builds key for conditional fields prepending category, e.g. "styles/mobile_buttons_container_position"
+ *
+ * @param {string} key
+ * @param {string} category
+ * @returns {string}
+ */
+function getConditionalKey(key, category) {
+  return `${category}/${key}`;
+}
+
+/**
+ * Returns a conditional field object for manifest visibility rules.
+ *
+ * @param {string} key
+ * @param {unknown} condition_value
+ * @param {string|null} [category="styles"] Pass `null` to use the key as-is.
+ * @returns {{key: string, condition_value: unknown}}
+ */
+function createConditionalField(key, condition_value, category = "styles") {
+  return {
+    key: category ? getConditionalKey(key, category) : key,
+    condition_value,
+  };
+}
+
+module.exports = {
+  parseShorthand,
+  margin,
+  padding,
+  marginDefaults,
+  paddingDefaults,
+  marginFields,
+  paddingFields,
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.0",
+    "@applicaster/applicaster-types": "15.1.1",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/cell-click/index.ts

@@ -54,7 +54,7 @@ export const useCellClick = ({
     component?.rules?.component_cells_selectable
   );
 
-  const [__, setEntryContext] =
+  const [entryContext, setEntryContext] =
     ZappPipesEntryContext.useZappPipesContext(pathname);
 
   const logTimestamp = useProfilerLogging();
@@ -89,6 +89,7 @@ export const useCellClick = ({
           screenState,
           screenRoute: pathname,
           screenStateStore,
+          entryContext,
         });
       }