@delacour/react-native-ui 0.1.0-alpha.4 → 0.2.0-alpha.20261010061731

package/src/components/swipe/swipe-action.tsx

@@ -0,0 +1,99 @@
+import { type ReactElement, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { Icon, type IconComponent } from "../icon/icon";
+import { IconDefaultsProvider } from "../icon/icon.context";
+import { Pressable } from "../pressable/pressable";
+import { Text } from "../text/text";
+import { useSwipePart, useSwipeTilePart } from "./swipe.context";
+import {
+	resolveSwipeActionForegroundToken,
+	SWIPE_TILE_WIDTH,
+	type SwipeActionColor,
+	swipeVariants,
+} from "./swipe.variants";
+
+export type SwipeActionProps = {
+	/** The tile's caption, and the name a screen reader offers the action under. Required. */
+	label: string;
+	/** A Central Icon component, drawn above the label at the tile's size and ink. */
+	icon?: IconComponent;
+	color?: SwipeActionColor;
+	onPress: () => void;
+	/** Leave the row open after the action runs — for a toggle such as a bookmark. */
+	isKeptOpen?: boolean;
+	className?: string;
+	labelClassName?: string;
+	/** Forwarded to the tile's pressable, for an end-to-end test or a capture flow to find it. */
+	testID?: string;
+};
+
+/**
+ * One tile behind the row.
+ *
+ * Positioned by its own animated style off the row's offset: short of fully
+ * open it is overlapped by the tile outside it, so the set emerges from under
+ * the row; past fully open the outermost tile grows into the overshoot. The
+ * worklet restates `resolveTileLayout`, which the tests pin.
+ *
+ * Takes the icon as a **component** rather than composed children, because the
+ * tile has to size and tint the glyph itself; it renders it through
+ * `IconDefaultsProvider`, the same inheritance a `Button` uses.
+ */
+export function SwipeAction({
+	label,
+	icon,
+	color = "default",
+	onPress,
+	isKeptOpen = false,
+	className,
+	labelClassName,
+	testID,
+}: SwipeActionProps): ReactElement {
+	const swipe = useSwipePart("Swipe.Action");
+	const { side, index, count } = useSwipeTilePart("Swipe.Action");
+	const { offset, runAction } = swipe;
+	const slots = swipeVariants({ color, side });
+	const order = side === "end" ? index : count - 1 - index;
+
+	const tileStyle = useAnimatedStyle(() => {
+		const tileWidth = SWIPE_TILE_WIDTH;
+		const reveal = Math.max(0, side === "start" ? offset.value : -offset.value);
+		const total = count * tileWidth;
+		const isPacked = reveal <= total;
+		const x = isPacked ? (count > 0 ? (order * reveal) / count : 0) : order * tileWidth;
+		const width = !isPacked && order === count - 1 ? reveal - order * tileWidth : tileWidth;
+		return side === "end" ? { start: x, width } : { end: x, width };
+	});
+
+	const handlePress = useCallback(() => runAction(onPress, isKeptOpen), [isKeptOpen, onPress, runAction]);
+	const iconDefaults = useMemo(
+		() => ({ className: "size-icon-md", color: resolveSwipeActionForegroundToken(color) }),
+		[color]
+	);
+
+	return (
+		<Animated.View className={slots.tile({ className })} style={[{ zIndex: order }, tileStyle]}>
+			<Pressable
+				accessibilityLabel={label}
+				accessibilityRole="button"
+				className={slots.tilePressable()}
+				feedback="fade"
+				onPress={handlePress}
+				testID={testID}
+			>
+				<View className={slots.tileContent()}>
+					{icon ? (
+						<IconDefaultsProvider value={iconDefaults}>
+							<Icon icon={icon} />
+						</IconDefaultsProvider>
+					) : null}
+					<Text className={slots.tileLabel({ className: labelClassName })} numberOfLines={1}>
+						{label}
+					</Text>
+				</View>
+			</Pressable>
+		</Animated.View>
+	);
+}
+SwipeAction.displayName = "DelacourUI.Swipe.Action";

package/src/components/swipe/swipe-end.tsx

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import type { SwipePanelProps } from "./swipe.types";
+
+/**
+ * Marks the tiles behind the row's end edge — the edge text runs toward —
+ * revealed by sliding the row toward `start`.
+ *
+ * A marker, never rendered: the root lifts its children out by element type and
+ * lays them out itself. On its own it renders nothing.
+ */
+export function SwipeEnd(_props: SwipePanelProps): ReactElement | null {
+	return null;
+}
+SwipeEnd.displayName = "DelacourUI.Swipe.End";

package/src/components/swipe/swipe-group.tsx

@@ -0,0 +1,55 @@
+import { type ReactElement, useCallback, useMemo, useRef } from "react";
+import { View, type ViewProps } from "react-native";
+import { cn } from "../../lib/cn";
+import { type SwipeGroupContextValue, SwipeGroupProvider } from "./swipe.context";
+
+export type SwipeGroupProps = ViewProps & {
+	className?: string;
+	/** One row open at a time: opening one closes the rest. Default `true`. */
+	isExclusive?: boolean;
+};
+
+/**
+ * Coordinates the rows beneath it. Renders a plain `View`.
+ *
+ * **Rows register themselves through context**, rather than the group walking
+ * its children, so a row nested in a `ListGroup`, a `.map()` or a custom
+ * component still belongs. The registry is a ref — joining or leaving it
+ * re-renders nothing.
+ */
+export function SwipeGroup({ className, isExclusive = true, children, ...props }: SwipeGroupProps): ReactElement {
+	const rows = useRef(new Map<string, () => void>());
+
+	const register = useCallback((id: string, close: () => void) => {
+		rows.current.set(id, close);
+		return () => {
+			if (rows.current.get(id) === close) rows.current.delete(id);
+		};
+	}, []);
+
+	const notifyOpen = useCallback(
+		(id: string) => {
+			if (!isExclusive) return;
+			for (const [other, close] of rows.current) if (other !== id) close();
+		},
+		[isExclusive]
+	);
+
+	const closeAll = useCallback(() => {
+		for (const close of rows.current.values()) close();
+	}, []);
+
+	const value = useMemo<SwipeGroupContextValue>(
+		() => ({ closeAll, notifyOpen, register }),
+		[closeAll, notifyOpen, register]
+	);
+
+	return (
+		<SwipeGroupProvider value={value}>
+			<View className={cn(className)} {...props}>
+				{children}
+			</View>
+		</SwipeGroupProvider>
+	);
+}
+SwipeGroup.displayName = "DelacourUI.Swipe.Group";

package/src/components/swipe/swipe-panel.tsx

@@ -0,0 +1,55 @@
+import type { ReactElement } from "react";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { SwipeTileProvider, useSwipePart } from "./swipe.context";
+import { resolveOutermostIndex, type SwipeSide, type SwipeTileProps, swipeVariants } from "./swipe.variants";
+
+type SwipePanelLayerProps = {
+	side: SwipeSide;
+	/** The `Swipe.Action` elements lifted out of the side's marker. */
+	tiles: ReactElement<SwipeTileProps>[];
+	/** Hidden from assistive technology while the row is shut. */
+	isHidden: boolean;
+};
+
+const START_EDGE = { start: 0 } as const;
+const END_EDGE = { end: 0 } as const;
+
+/**
+ * The layer behind one edge of the row. Internal: the root renders one per side
+ * that has tiles.
+ *
+ * **Exactly as wide as the gap the row has left**, animated off the same offset
+ * the row moves on — never wider, so it cannot paint over a row that has no
+ * background of its own, and never narrower, so there is no hole. Its own
+ * colour is the outermost tile's, so the overshoot that tile grows into reads
+ * as the same action.
+ *
+ * Pinned by logical `start` / `end` rather than `left` / `right`, so the layout
+ * mirrors under right to left with no sign of its own; only the row's
+ * translation has to flip.
+ */
+export function SwipePanelLayer({ side, tiles, isHidden }: SwipePanelLayerProps): ReactElement {
+	const { offset } = useSwipePart("Swipe.Panel");
+	const outermost = tiles[resolveOutermostIndex(side, tiles.length)];
+	const slots = swipeVariants({ color: outermost?.props.color ?? "default", side });
+
+	const panelStyle = useAnimatedStyle(() => ({
+		width: Math.max(0, side === "start" ? offset.value : -offset.value),
+	}));
+
+	return (
+		<Animated.View
+			accessibilityElementsHidden={isHidden}
+			className={slots.panel()}
+			importantForAccessibility={isHidden ? "no-hide-descendants" : "auto"}
+			style={[side === "start" ? START_EDGE : END_EDGE, panelStyle]}
+		>
+			{tiles.map((tile, index) => (
+				<SwipeTileProvider key={tile.key ?? index} value={{ count: tiles.length, index, side }}>
+					{tile}
+				</SwipeTileProvider>
+			))}
+		</Animated.View>
+	);
+}
+SwipePanelLayer.displayName = "DelacourUI.Swipe.Panel";

package/src/components/swipe/swipe-start.tsx

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import type { SwipePanelProps } from "./swipe.types";
+
+/**
+ * Marks the tiles behind the row's start edge — revealed by sliding the row
+ * toward `end`.
+ *
+ * A marker, never rendered: the root lifts its children out by element type and
+ * lays them out itself, because only the root knows how wide the gap is. On its
+ * own it renders nothing.
+ */
+export function SwipeStart(_props: SwipePanelProps): ReactElement | null {
+	return null;
+}
+SwipeStart.displayName = "DelacourUI.Swipe.Start";

package/src/components/swipe/swipe.context.tsx

@@ -0,0 +1,135 @@
+import { createContext, type ReactElement, type ReactNode, use } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import type { SwipeOpenSide, SwipeSide } from "./swipe.variants";
+
+export type SwipeContextValue = {
+	/** The side that is settled open, or null. Changes on a settle, never during a drag. */
+	openSide: SwipeOpenSide;
+	/** Slides the row aside to reveal `side`. A side with no panel stays shut. */
+	open: (side: SwipeSide) => void;
+	/** Slides the row back over its panels. */
+	close: () => void;
+	/** The row's logical offset — positive reveals `start`. Internal to the parts. */
+	offset: SharedValue<number>;
+	/** Whether the layout runs right to left, read once from `I18nManager`. */
+	isRTL: boolean;
+	/** Runs a tile's action, then closes the row unless it asks to stay open. */
+	runAction: (onPress: () => void, isKeptOpen: boolean) => void;
+};
+
+const SwipeContext = createContext<SwipeContextValue | null>(null);
+
+/**
+ * Supplies a row's state to its tiles.
+ *
+ * In a leaf of its own, importing nothing but types, so a part can read it
+ * without importing `./swipe` and closing a cycle (package AGENTS.md rule 3).
+ */
+export function SwipeProvider({ value, children }: { value: SwipeContextValue; children: ReactNode }): ReactElement {
+	return <SwipeContext value={value}>{children}</SwipeContext>;
+}
+SwipeProvider.displayName = "DelacourUI.Swipe.Provider";
+
+/** The enclosing row, or null outside a `<Swipe>`. */
+export function useSwipeContext(): SwipeContextValue | null {
+	return use(SwipeContext);
+}
+
+/**
+ * Reads the enclosing row: which side is open, and `open` / `close`.
+ *
+ * For a custom child of the row that has to close it — a button inside the row
+ * that acts and then tucks the actions away. Throws outside a `<Swipe>`.
+ */
+export function useSwipe(): SwipeContextValue {
+	const context = useSwipeContext();
+	if (!context) throw new Error("useSwipe must be called inside a <Swipe>.");
+	return context;
+}
+
+/**
+ * The enclosing row, for a part that cannot work without it.
+ *
+ * Internal: deliberately not re-exported from `index.ts`.
+ */
+export function useSwipePart(component: string): SwipeContextValue {
+	const context = useSwipeContext();
+	if (!context) throw new Error(`${component} must be rendered inside a <Swipe>.`);
+	return context;
+}
+
+export type SwipeTileContextValue = {
+	side: SwipeSide;
+	/** Source order within its panel. */
+	index: number;
+	/** How many tiles share the panel. */
+	count: number;
+};
+
+const SwipeTileContext = createContext<SwipeTileContextValue | null>(null);
+
+/** Where a tile sits in its panel. The root wraps every tile it lifts out in one. */
+export function SwipeTileProvider({
+	value,
+	children,
+}: {
+	value: SwipeTileContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <SwipeTileContext value={value}>{children}</SwipeTileContext>;
+}
+SwipeTileProvider.displayName = "DelacourUI.Swipe.TileProvider";
+
+/**
+ * A tile's place in its panel. Internal.
+ *
+ * Throws when a `Swipe.Action` was rendered anywhere but inside `Swipe.Start`
+ * or `Swipe.End` — the root lifts tiles out of those two markers only.
+ */
+export function useSwipeTilePart(component: string): SwipeTileContextValue {
+	const context = use(SwipeTileContext);
+	if (!context) throw new Error(`${component} must be written inside <Swipe.Start> or <Swipe.End>.`);
+	return context;
+}
+
+export type SwipeGroupContextValue = {
+	/** Adds a row's close to the group. Returns the matching unregister. */
+	register: (id: string, close: () => void) => () => void;
+	/** Tells the group `id` has opened, so an exclusive group closes the rest. */
+	notifyOpen: (id: string) => void;
+	/** Closes every row in the group. */
+	closeAll: () => void;
+};
+
+const SwipeGroupContext = createContext<SwipeGroupContextValue | null>(null);
+
+/** Supplies a group's registry to the rows beneath it, however deeply they are nested. */
+export function SwipeGroupProvider({
+	value,
+	children,
+}: {
+	value: SwipeGroupContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <SwipeGroupContext value={value}>{children}</SwipeGroupContext>;
+}
+SwipeGroupProvider.displayName = "DelacourUI.Swipe.Group.Provider";
+
+/** The enclosing group, or null for a row standing on its own. */
+export function useSwipeGroupContext(): SwipeGroupContextValue | null {
+	return use(SwipeGroupContext);
+}
+
+const NO_GROUP = { closeAll: () => {} } as const;
+
+/**
+ * Closes every row in the enclosing `Swipe.Group` — before a list scrolls away,
+ * or when a screen loses focus.
+ *
+ * Outside a group it returns a no-op rather than throwing, so a screen can call
+ * it whether or not its rows are grouped.
+ */
+export function useSwipeGroup(): { closeAll: () => void } {
+	const group = useSwipeGroupContext();
+	return group ? { closeAll: group.closeAll } : NO_GROUP;
+}