@applicaster/zapp-react-native-ui-components 16.0.0-rc.65 → 16.0.0-rc.67

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -18,8 +18,11 @@ export const Toggle = (props: Props) => {
 
   const { trackColor, trackColorActive, thumbColor, thumbColorActive } = 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 +33,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
   );

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";
@@ -24,7 +25,6 @@ const style = {
   trackColorActive: "rgba(4,207,153,1)",
   thumbColor: "rgba(255,255,255,1)",
   thumbColorActive: "rgba(255,255,255,1)",
-  iosBackgroundColor: "rgba(0,0,0,1)",
 } as any;
 
 const item = { id: "true", title: "I agree" } as any;
@@ -56,6 +56,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 +85,28 @@ describe("Toggle with an empty action identifier", () => {
 
     expect(mockInitialEntryState).not.toHaveBeenCalled();
   });
+
+  // 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 paints an opaque layer behind the track that the track
+  // color cannot cover, which on iOS reads as a halo around the switch. The
+  // switch is left on its platform default instead, so the prop must stay
+  // unset even if a style happens to carry a color for it.
+  it("does not set an iOS background color on the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props.ios_backgroundColor).toBeUndefined();
+  });
 });
 
 describe("Toggle with an action plugin identifier", () => {
@@ -92,11 +129,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.65",
+  "version": "16.0.0-rc.67",
   "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.65",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.65",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.65",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.65",
+    "@applicaster/applicaster-types": "16.0.0-rc.67",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.67",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.67",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.67",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",