@applicaster/zapp-react-native-utils 14.0.0-rc.9 → 15.0.0-rc.1

package/focusManager/aux/index.ts

@@ -0,0 +1,98 @@
+import { isNil, pathOr } from "@applicaster/zapp-react-native-utils/utils";
+
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_NAVBAR_SECTIONS,
+} from "@applicaster/quick-brick-core/const";
+
+const isNavBar = (node) => QUICK_BRICK_NAVBAR === node?.id;
+const isContent = (node) => QUICK_BRICK_CONTENT === node?.id;
+
+// SCREEN_PICKER_SELECTOR_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerSelectorContainerId;
+
+export const onRegisterScreenPickerSelectorContainer = (id) => {
+  screenPickerSelectorContainerId = id;
+};
+
+export const onUnregisterScreenPickerSelectorContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerSelectorContainerId === id) {
+    screenPickerSelectorContainerId = undefined;
+  }
+};
+// SCREEN_PICKER_SELECTOR_CONTAINER
+
+// SCREEN_PICKER_CONTENT_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerContentContainerId;
+
+export const onRegisterScreenPickerContentContainer = (id) => {
+  screenPickerContentContainerId = id;
+};
+
+export const onUnregisterScreenPickerContentContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerContentContainerId === id) {
+    screenPickerContentContainerId = undefined;
+  }
+};
+
+const isScreenPickerContentContainer = (node) =>
+  screenPickerContentContainerId === node?.id;
+
+// SCREEN_PICKER_CONTENT_CONTAINER
+
+export const findSelectedMenuId = (
+  focusableTree,
+  { index, sectionKey }: { index: number; sectionKey: string }
+) => {
+  const sectionName = QUICK_BRICK_NAVBAR_SECTIONS[sectionKey];
+
+  return pathOr(
+    undefined,
+    ["children", index, "id"],
+    focusableTree.find(sectionName)
+  );
+};
+
+export const findSelectedTabId = (focusableTree, index: number): string => {
+  const screenSelectorContainerNode = focusableTree.find(
+    screenPickerSelectorContainerId
+  );
+
+  const selectedTabId = screenSelectorContainerNode.children[index]?.id;
+
+  return selectedTabId;
+};
+
+export const isTabsScreenContentFocused = (focusableTree, id) => {
+  const node = focusableTree.find(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScreenPickerContentContainer(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(focusableTree, node.parentId);
+};
+
+export const contextWithoutScrolling = (
+  source: FocusManager.FocusContext["source"]
+): FocusManager.FocusContext => {
+  return {
+    source,
+    preserveScroll: true,
+  };
+};

package/focusManager/utils.ts

@@ -4,11 +4,11 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 export const getFocusableId = (ref) => ref?.current?.props.id;
 
-type Direction = "up" | "down" | "left" | "right";
-
 const normalizeDirection = (direction) => direction.toLowerCase();
 
-const checkDirection = (direction: Direction) => {
+const checkDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   invariant(!isNilOrEmpty(direction), "direction should not be empty");
 
   invariant(
@@ -17,19 +17,25 @@ const checkDirection = (direction: Direction) => {
   );
 };
 
-export const toFocusDirection = (direction: Direction) => {
+export const toFocusDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return `nextFocus${capitalize(normalizeDirection(direction))}`;
 };
 
-export const isHorizontalDirection = (direction: Direction) => {
+export const isHorizontalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["left", "right"].includes(normalizeDirection(direction));
 };
 
-export const isVerticalDirection = (direction: Direction) => {
+export const isVerticalDirection = (
+  direction: FocusManager.Android.FocusNavigationDirections
+) => {
   checkDirection(direction);
 
   return ["up", "down"].includes(normalizeDirection(direction));

package/index.d.ts

@@ -69,7 +69,7 @@ declare type ExtraProps = ZappUIComponentProps & {
 };
 
 declare type WebConfirmationDialog = {
-  message: string;
+  message?: string;
   confirmCompletion?: () => void;
   cancelCompletion?: () => void;
 };
@@ -137,12 +137,3 @@ declare type AccessibilityState = {
   reduceMotionEnabled: boolean;
   boldTextEnabled: boolean;
 };
-
-declare type AccessibilityProps = {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  "aria-label"?: string;
-  "aria-description"?: string;
-  accessibilityRole?: string;
-  "aria-role"?: string;
-};

package/manifestUtils/_internals/getDefaultConfiguration.js

@@ -0,0 +1,28 @@
+const R = require("ramda");
+const { defaultConfigurations } = require("../defaultManifestConfigurations");
+
+/**
+ * returns default configuration keys for provided plugin type
+ * @param {('general-content'|'player')} pluginType
+ * @param options manifest generator information
+ * @param {string} options.version manifest version
+ * @param {string} options.platform qb platform value
+ */
+function getDefaultConfiguration(pluginType, options) {
+  const defConfig = R.compose(
+    R.unless(R.isNil, (fn) => fn(options)),
+    R.propOr(null, pluginType)
+  )(defaultConfigurations);
+
+  if (!defConfig) {
+    const availableKeys = R.keys(defaultConfigurations);
+
+    const message = `Requested key "${pluginType}" doesn't exist in the default configuration\nAvailable keys: ${availableKeys}`;
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }
+
+  return defConfig;
+}
+
+module.exports = { getDefaultConfiguration };

package/manifestUtils/{_internals.js → _internals/index.js}

@@ -1,6 +1,7 @@
 const R = require("ramda");
 const camelize = require("camelize");
-const { defaultConfigurations } = require("./defaultManifestConfigurations");
+
+const { getDefaultConfiguration } = require("./getDefaultConfiguration");
 
 const toSnakeCase = R.compose(R.replace(/\s/g, "_"), R.toLower, R.trim);
 
@@ -173,30 +174,6 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
   )(fields);
 }
 
-/**
- * returns default configuration keys for provided plugin type
- * @param {('general-content'|'player')} pluginType
- * @param options manifest generator information
- * @param {string} options.version manifest version
- * @param {string} options.platform qb platform value
- */
-function getDefaultConfiguration(pluginType, options) {
-  const defConfig = R.compose(
-    R.unless(R.isNil, (fn) => fn(options)),
-    R.propOr(null, pluginType)
-  )(defaultConfigurations);
-
-  if (!defConfig) {
-    const availableKeys = R.keys(defaultConfigurations);
-
-    const message = `Requested key "${pluginType}" doesn't exist in the default configuration\nAvailable keys: ${availableKeys}`;
-    // eslint-disable-next-line no-console
-    console.warn(message);
-  }
-
-  return defConfig;
-}
-
 module.exports = {
   toSnakeCase,
   toCamelCase,

package/manifestUtils/createConfig.js

@@ -1,5 +1,8 @@
 const R = require("ramda");
-const { getDefaultConfiguration } = require("./_internals");
+
+const {
+  getDefaultConfiguration,
+} = require("./_internals/getDefaultConfiguration");
 
 const indexByKey = R.indexBy((obj) => R.prop(obj.group ? "label" : "key", obj));
 const propIfExist = R.curry((prop) => R.when(R.prop(prop), R.prop(prop)));