@applicaster/zapp-react-native-ui-components 16.0.0-rc.64 → 16.0.0-rc.66

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -16,10 +16,19 @@ type Props = {
 export const Toggle = (props: Props) => {
   const { style, item, action, cellState } = props;
 
-  const { trackColor, trackColorActive, thumbColor, thumbColorActive } = style;
+  const {
+    trackColor,
+    trackColorActive,
+    thumbColor,
+    thumbColorActive,
+    iosBackgroundColor,
+  } = style;
 
+  // `focused_selected` is the selected state with a finger on the row, so the
+  // switch has to read as on for both. Leaving it out reads a pressed selected
+  // row as off, which flips the thumb for the duration of the press.
   const isSelected = React.useMemo(
-    () => cellState === "selected",
+    () => cellState === "selected" || cellState === "focused_selected",
     [item?.id, cellState]
   );
 
@@ -30,13 +39,16 @@ export const Toggle = (props: Props) => {
   // selection state and writes through the entry's tap actions, the same path a
   // tap on the row takes.
   //
-  // The identifier alone cannot tell that case apart from a real action plugin.
-  // The cell manifest declares an initial_value for `toggle_action_identifier`,
-  // and `castOrDefault` substitutes that default whenever the configured value
-  // is empty - and an empty string counts as empty. Clearing the field in the
-  // app configuration therefore cannot produce an empty identifier here. What
-  // does distinguish the two is whether the identifier resolves to an installed
-  // action plugin, so that is what the route is decided on.
+  // An empty identifier is the way to ask for that, which is why the cell
+  // manifest declares no initial_value for `toggle_action_identifier`:
+  // `castOrDefault` substitutes the default whenever the configured value is
+  // empty - and an empty string counts as empty - so any default there would be
+  // uncleanable and would force every toggle onto that plugin.
+  //
+  // The route is still decided on whether the identifier resolves to an
+  // installed action plugin rather than on the string being non-empty. App
+  // configurations saved while the old default was in the manifest still carry
+  // it, and a mistyped plugin id has to fall back the same way.
   const hasActionPlugin = Boolean(
     action?.identifier && actionContext?.invokeAction
   );
@@ -61,6 +73,7 @@ export const Toggle = (props: Props) => {
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
       thumbColor={isSelected ? thumbColorActive : thumbColor}
+      ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
       value={isSelected}
     />

package/Components/MasterCell/DefaultComponents/__tests__/Toggle.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
+import { Switch } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import { Toggle } from "../Toggle";
@@ -56,6 +57,21 @@ describe("Toggle with an empty action identifier", () => {
     expect(getByRole("switch").props.value).toBe(false);
   });
 
+  // A finger on a selected row resolves the cell to focused_selected. Reading
+  // that as unselected flipped the thumb for the duration of the press and let
+  // it jump back on release, which reads as a second tap.
+  it("stays on while a selected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused_selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off while an unselected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused");
+
+    expect(getByRole("switch").props.value).toBe(false);
+  });
+
   it("routes a change through the cell click path", () => {
     const { getByRole } = renderToggle("", "default");
 
@@ -70,6 +86,23 @@ describe("Toggle with an empty action identifier", () => {
 
     expect(mockInitialEntryState).not.toHaveBeenCalled();
   });
+
+  // ios_backgroundColor paints behind the track, so trackColor does not cover
+  // it and it has to be forwarded on its own. It was dropped once while the
+  // destructure feeding it was being reformatted, and nothing caught that.
+  //
+  // Asserted on the Switch element rather than the rendered host component:
+  // what Toggle owns is the props it hands to Switch, and React Native rewrites
+  // them into platform-specific ones (tintColor, a style entry) underneath.
+  it("forwards every configured color to the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props).toMatchObject({
+      trackColor: { false: style.trackColor, true: style.trackColorActive },
+      thumbColor: style.thumbColor,
+      ios_backgroundColor: style.iosBackgroundColor,
+    });
+  });
 });
 
 describe("Toggle with an action plugin identifier", () => {
@@ -92,11 +125,11 @@ describe("Toggle with an action plugin identifier", () => {
 });
 
 describe("Toggle with an identifier whose action plugin is not installed", () => {
-  // The cell manifest declares initial_value "firebase-push-topic-action" for
-  // toggle_action_identifier, and castOrDefault replaces an empty configured
-  // value with that default. A form toggle therefore always arrives with a
-  // non-empty identifier it never asked for - the presence of a real action
-  // context, not the identifier string, is what decides the route.
+  // The cell manifest no longer defaults toggle_action_identifier, but app
+  // configurations saved while it did still carry "firebase-push-topic-action",
+  // and a mistyped id is always possible. A toggle can therefore still arrive
+  // with a non-empty identifier it never asked for - the presence of a real
+  // action context, not the identifier string, is what decides the route.
   beforeEach(() => {
     jest.clearAllMocks();
 

package/package.json

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