react-native-screen-transitions 4.1.0-alpha.0 → 4.1.0-beta.0

package/src/providers/screen/styles/helpers/resolve-slot-styles/slot-state.ts

@@ -1,122 +0,0 @@
-import type { NormalizedTransitionSlotStyle } from "../../../../../types/animation.types";
-import { getPropResetValue, getStyleResetValue } from "./reset-values";
-import type { ResettableStyleState } from "./types";
-
-const isDefinedStyleValue = (value: unknown) => {
-	"worklet";
-	return value !== undefined && value !== null;
-};
-
-// fallow-ignore-next-line complexity
-const collectDefinedKeys = ({
-	source,
-	getResetValue,
-}: {
-	source: Record<string, unknown> | undefined;
-	getResetValue: (key: string, value: unknown) => unknown;
-}) => {
-	"worklet";
-	const sourceValues = source ?? {};
-	const keys: Record<string, true> = {};
-	const resetValues: Record<string, unknown> = {};
-	let hasKeys = false;
-	let hasResetValues = false;
-
-	for (const key in sourceValues) {
-		const value = sourceValues[key];
-
-		if (!isDefinedStyleValue(value)) {
-			continue;
-		}
-
-		keys[key] = true;
-		hasKeys = true;
-
-		const resetValue = getResetValue(key, value);
-
-		if (resetValue !== undefined) {
-			resetValues[key] = resetValue;
-			hasResetValues = true;
-		}
-	}
-
-	return {
-		keys: hasKeys ? keys : undefined,
-		resetValues: hasResetValues ? resetValues : undefined,
-		hasKeys,
-	};
-};
-
-const hasEitherKeySet = (
-	styleKeys: Record<string, true> | undefined,
-	propKeys: Record<string, true> | undefined,
-) => {
-	"worklet";
-	return styleKeys !== undefined || propKeys !== undefined;
-};
-
-const getNextStyleState = ({
-	styleKeys,
-	styleResetValues,
-	propKeys,
-	propResetValues,
-}: {
-	styleKeys: Record<string, true> | undefined;
-	styleResetValues: Record<string, unknown> | undefined;
-	propKeys: Record<string, true> | undefined;
-	propResetValues: Record<string, unknown> | undefined;
-}): ResettableStyleState | undefined => {
-	"worklet";
-
-	if (!hasEitherKeySet(styleKeys, propKeys)) {
-		return undefined;
-	}
-
-	return {
-		styleKeys,
-		styleResetValues,
-		propKeys,
-		propResetValues,
-	};
-};
-
-export const getResolvedSlotState = (
-	slot: NormalizedTransitionSlotStyle | undefined,
-) => {
-	"worklet";
-	const baseStyle = slot?.style as Record<string, unknown> | undefined;
-	const baseProps = slot?.props as Record<string, unknown> | undefined;
-
-	const {
-		keys: styleKeys,
-		resetValues: styleResetValues,
-		hasKeys: hasAnyStyleKeys,
-	} = collectDefinedKeys({
-		source: baseStyle,
-		getResetValue: getStyleResetValue,
-	});
-	const {
-		keys: propKeys,
-		resetValues: propResetValues,
-		hasKeys: hasAnyPropKeys,
-	} = collectDefinedKeys({
-		source: baseProps,
-		getResetValue: getPropResetValue,
-	});
-
-	return {
-		baseStyle,
-		baseProps,
-		styleKeys,
-		propKeys,
-		hasAnyStyleKeys,
-		hasAnyPropKeys,
-		hasAnyKeys: hasAnyStyleKeys || hasAnyPropKeys,
-		nextState: getNextStyleState({
-			styleKeys,
-			styleResetValues,
-			propKeys,
-			propResetValues,
-		}),
-	};
-};

package/src/providers/screen/styles/helpers/resolve-slot-styles/types.ts

@@ -1,12 +0,0 @@
-import type { NormalizedTransitionInterpolatedStyle } from "../../../../../types/animation.types";
-
-export type LocalStyleLayers = NormalizedTransitionInterpolatedStyle[];
-
-export type ResettableStyleState = {
-	styleKeys?: Record<string, true>;
-	styleResetValues?: Record<string, unknown>;
-	propKeys?: Record<string, true>;
-	propResetValues?: Record<string, unknown>;
-};
-
-export type ResettableStyleStatesBySlot = Record<string, ResettableStyleState>;

package/src/providers/screen/styles/helpers/select-interpolator-frame.ts

@@ -1,33 +0,0 @@
-import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
-
-export type SelectedInterpolatorFrame = Pick<
-	ScreenInterpolatorFrame,
-	"progress" | "transitionProgress" | "next" | "focused" | "active" | "inactive"
->;
-
-export const selectInterpolatorFrame = (
-	frame: ScreenInterpolatorFrame,
-	useCurrentOnly: boolean,
-): SelectedInterpolatorFrame => {
-	"worklet";
-
-	if (!useCurrentOnly) {
-		return {
-			progress: frame.progress,
-			transitionProgress: frame.transitionProgress,
-			next: frame.next,
-			focused: frame.focused,
-			active: frame.active,
-			inactive: frame.inactive,
-		};
-	}
-
-	return {
-		progress: frame.current.progress,
-		transitionProgress: frame.current.transitionProgress,
-		next: undefined,
-		focused: true,
-		active: frame.current,
-		inactive: frame.previous,
-	};
-};

package/src/providers/screen/styles/helpers/transition-visual-state.ts

@@ -1,70 +0,0 @@
-/**
- * Visual lifecycle boundaries use the internal directional clock rather than
- * physical transition progress, which may overshoot or revisit an endpoint.
- */
-export const hasOpenTransitionStarted = ({
-	pendingLifecycleStartBlockCount,
-	animationProgress,
-}: {
-	pendingLifecycleStartBlockCount: number;
-	animationProgress: number;
-}) => {
-	"worklet";
-	return pendingLifecycleStartBlockCount === 0 && animationProgress > 0;
-};
-
-export const isOpenTransitionBlocked = ({
-	opening,
-	pendingLifecycleStartBlockCount,
-	animationProgress,
-}: {
-	opening: boolean;
-	pendingLifecycleStartBlockCount: number;
-	animationProgress: number;
-}) => {
-	"worklet";
-	return (
-		opening &&
-		!hasOpenTransitionStarted({
-			pendingLifecycleStartBlockCount,
-			animationProgress,
-		})
-	);
-};
-
-export const hasCloseTransitionFinished = ({
-	closing,
-	animationProgress,
-}: {
-	closing: number;
-	animationProgress: number;
-}) => {
-	"worklet";
-	return !!closing && animationProgress === 0;
-};
-
-export const isScreenInterpolatorReady = ({
-	hasInterpolator,
-	opening,
-	closing,
-	pendingLifecycleStartBlockCount,
-	animationProgress,
-}: {
-	hasInterpolator: boolean;
-	opening: boolean;
-	closing: number;
-	pendingLifecycleStartBlockCount: number;
-	animationProgress: number;
-}) => {
-	"worklet";
-
-	return (
-		hasInterpolator &&
-		!isOpenTransitionBlocked({
-			opening,
-			pendingLifecycleStartBlockCount,
-			animationProgress,
-		}) &&
-		!hasCloseTransitionFinished({ closing, animationProgress })
-	);
-};

package/src/providers/screen/styles/helpers/visibility-block-ownership.ts

@@ -1,16 +0,0 @@
-type VisibilityBlockOwnershipParams = {
-	localBlocked: boolean;
-	ancestorBlocked: boolean;
-};
-
-export const resolveVisibilityBlockOwnership = ({
-	localBlocked,
-	ancestorBlocked,
-}: VisibilityBlockOwnershipParams) => {
-	"worklet";
-
-	return {
-		appliesOffset: localBlocked && !ancestorBlocked,
-		effectiveBlocked: localBlocked || ancestorBlocked,
-	};
-};

package/src/providers/screen/styles/helpers/visibility-gate.ts

@@ -1,80 +0,0 @@
-import { LifecycleTransitionRequestKind } from "../../../../stores/system.store";
-import {
-	hasOpenTransitionStarted,
-	isOpenTransitionBlocked,
-} from "./transition-visual-state";
-
-type ScreenVisibilityGateState = {
-	isFloatingOverlay?: boolean;
-	hasVisibilityGateOpened: boolean;
-	pendingLifecycleStartBlockCount: number;
-	pendingLifecycleRequestKind: LifecycleTransitionRequestKind;
-	animationProgress: number;
-	entering: number;
-};
-
-type ScreenVisibilityGateDecision = {
-	shouldBlock: boolean;
-	shouldOpenGate: boolean;
-};
-
-type InitialDestinationStyleGateState = {
-	shouldPrepareStyles: boolean;
-	isVisibilityBlocked: boolean;
-	stylesReady: boolean;
-};
-
-type InitialDestinationStyleGateDecision = {
-	shouldMarkStylesReady: boolean;
-	shouldWithholdStyles: boolean;
-};
-
-export const resolveInitialDestinationStyleGate = ({
-	shouldPrepareStyles,
-	isVisibilityBlocked,
-	stylesReady,
-}: InitialDestinationStyleGateState): InitialDestinationStyleGateDecision => {
-	"worklet";
-
-	return {
-		shouldMarkStylesReady:
-			shouldPrepareStyles && isVisibilityBlocked && !stylesReady,
-		shouldWithholdStyles: shouldPrepareStyles && !stylesReady,
-	};
-};
-
-export const resolveScreenVisibilityGate = ({
-	isFloatingOverlay,
-	hasVisibilityGateOpened,
-	pendingLifecycleStartBlockCount,
-	pendingLifecycleRequestKind,
-	animationProgress,
-	entering,
-}: ScreenVisibilityGateState): ScreenVisibilityGateDecision => {
-	"worklet";
-	if (isFloatingOverlay || hasVisibilityGateOpened) {
-		return {
-			shouldBlock: false,
-			shouldOpenGate: false,
-		};
-	}
-
-	const isPendingOpen =
-		pendingLifecycleRequestKind === LifecycleTransitionRequestKind.Open;
-	const isOpening = isPendingOpen || !!entering;
-	const shouldBlock = isOpenTransitionBlocked({
-		opening: isOpening,
-		pendingLifecycleStartBlockCount,
-		animationProgress,
-	});
-
-	return {
-		shouldBlock,
-		shouldOpenGate:
-			!shouldBlock &&
-			hasOpenTransitionStarted({
-				pendingLifecycleStartBlockCount,
-				animationProgress,
-			}),
-	};
-};

package/src/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -1,115 +0,0 @@
-import { useMemo } from "react";
-import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
-import { NO_PROPS, NO_STYLES } from "../../../../constants";
-import {
-	composeSlotStyleWithLocalTransform,
-	getLocalTransformForSlotComposition,
-} from "../helpers/compose-slot-style";
-import { useScreenSlotStore } from "../slot.provider";
-
-const useCurrentScreenSlotsMap = () => {
-	return useScreenSlotStore((store) => store.slotsMap);
-};
-
-export const useSlotStyles = (slotId: string | undefined) => {
-	const slotsMap = useCurrentScreenSlotsMap();
-
-	return useAnimatedStyle(() => {
-		const slot = slotId ? slotsMap.get()[slotId] : undefined;
-		const slotStyle = slot?.style ?? NO_STYLES;
-
-		return composeSlotStyleWithLocalTransform(
-			slotStyle,
-			undefined,
-			slot?.boundsLocalTransform,
-		);
-	});
-};
-
-export const useComposedSlotStyles = (
-	slotId: string | undefined,
-	style: unknown,
-) => {
-	const slotsMap = useCurrentScreenSlotsMap();
-	const localTransform = useMemo(
-		() => getLocalTransformForSlotComposition(style),
-		[style],
-	);
-
-	return useAnimatedStyle(() => {
-		const slot = slotId ? slotsMap.get()[slotId] : undefined;
-		const slotStyle = slot?.style ?? NO_STYLES;
-
-		return composeSlotStyleWithLocalTransform(
-			slotStyle,
-			localTransform,
-			slot?.boundsLocalTransform,
-		);
-	});
-};
-
-/**
- * Stacking-only slice (`zIndex`/`elevation`) of a slot's style. Returned
- * separately so an owner can keep just its stacking context while a nested
- * target takes the full associated style. Yields `NO_STYLES` when neither is set.
- */
-export const useSlotStackingStyles = (slotId: string | undefined) => {
-	const slotsMap = useCurrentScreenSlotsMap();
-
-	return useAnimatedStyle(() => {
-		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
-		const zIndex = baseStyle?.zIndex ?? 0;
-		const elevation = baseStyle?.elevation ?? 0;
-
-		if (zIndex === 0 && elevation === 0) {
-			return NO_STYLES;
-		}
-
-		return { zIndex, elevation };
-	});
-};
-
-export const useSlotLayoutStyles = (slotId: string | undefined) => {
-	const slotsMap = useCurrentScreenSlotsMap();
-
-	return useAnimatedStyle(() => {
-		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
-		const width = baseStyle?.width;
-		const height = baseStyle?.height;
-		const minWidth = baseStyle?.minWidth;
-		const minHeight = baseStyle?.minHeight;
-		const maxWidth = baseStyle?.maxWidth;
-		const maxHeight = baseStyle?.maxHeight;
-		const aspectRatio = baseStyle?.aspectRatio;
-
-		if (
-			width === undefined &&
-			height === undefined &&
-			minWidth === undefined &&
-			minHeight === undefined &&
-			maxWidth === undefined &&
-			maxHeight === undefined &&
-			aspectRatio === undefined
-		) {
-			return NO_STYLES;
-		}
-
-		return {
-			width,
-			height,
-			minWidth,
-			minHeight,
-			maxWidth,
-			maxHeight,
-			aspectRatio,
-		};
-	});
-};
-
-export const useSlotProps = (slotId: string | undefined) => {
-	const slotsMap = useCurrentScreenSlotsMap();
-
-	return useAnimatedProps(() => {
-		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;
-	});
-};