diff --git a/packages/react-native-sortables/src/providers/SharedProvider.tsx b/packages/react-native-sortables/src/providers/SharedProvider.tsx index 5552b750..37b217e4 100644 --- a/packages/react-native-sortables/src/providers/SharedProvider.tsx +++ b/packages/react-native-sortables/src/providers/SharedProvider.tsx @@ -19,6 +19,7 @@ import type { SortableCallbacks } from '../types'; import { + ActiveItemValuesProvider, AutoScrollProvider, CommonValuesProvider, CustomHandleProvider, @@ -75,6 +76,8 @@ export default function SharedProvider({ , // Provider used for layout debugging (can be used only in dev mode) __DEV__ && debug && , + // Provider used for active item values + , // Provider used for shared values between all providers below (() => { + // POSITIONS + const touchPosition = useSharedValue(null); + const activeItemPosition = useSharedValue(null); + + // DIMENSIONS + const activeItemDimensions = useSharedValue(null); + + // DRAG STATE + const activeItemKey = useSharedValue(null); + const prevActiveItemKey = useSharedValue(null); + const activationState = useSharedValue(DragActivationState.INACTIVE); + const activeAnimationProgress = useSharedValue(0); + const inactiveAnimationProgress = useSharedValue(0); + const activeItemDropped = useSharedValue(true); + + return { + value: { + activationState, + activeAnimationProgress, + activeItemDimensions, + activeItemDropped, + activeItemKey, + activeItemPosition, + inactiveAnimationProgress, + prevActiveItemKey, + touchPosition + } + }; +}); + +export { ActiveItemValuesProvider, useActiveItemValuesContext }; diff --git a/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts b/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts index 17460f18..c4efb8ab 100644 --- a/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts +++ b/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts @@ -21,9 +21,10 @@ import type { Maybe, Vector } from '../../types'; -import { AbsoluteLayoutState, DragActivationState } from '../../types'; +import { AbsoluteLayoutState } from '../../types'; import { areArraysDifferent } from '../../utils'; import { createProvider } from '../utils'; +import { useActiveItemValuesContext } from './ActiveItemValuesProvider'; let nextId = 0; @@ -75,8 +76,6 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } = // POSITIONS const itemPositions = useSharedValue>({}); - const touchPosition = useSharedValue(null); - const activeItemPosition = useSharedValue(null); // DIMENSIONS // measured dimensions via onLayout used to calculate containerWidth and containerHeight @@ -88,20 +87,11 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } = // (containerWidth and containerHeight should be used in most cases) const containerWidth = useSharedValue(null); const containerHeight = useSharedValue(null); - const activeItemDimensions = useSharedValue(null); const itemDimensions = useSharedValue>({}); const itemsStyleOverride = useSharedValue>( initialItemsStyleOverride ); - // DRAG STATE - const activeItemKey = useSharedValue(null); - const prevActiveItemKey = useSharedValue(null); - const activationState = useSharedValue(DragActivationState.INACTIVE); - const activeAnimationProgress = useSharedValue(0); - const inactiveAnimationProgress = useSharedValue(0); - const activeItemDropped = useSharedValue(true); - // ITEM ACTIVATION SETTINGS const dragActivationDelay = useAnimatableValue(_dragActivationDelay); const activationAnimationDuration = useAnimatableValue( @@ -149,15 +139,10 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } = return { value: { + ...useActiveItemValuesContext(), absoluteLayoutState, activationAnimationDuration, - activationState, - activeAnimationProgress, - activeItemDimensions, - activeItemDropped, - activeItemKey, activeItemOpacity, - activeItemPosition, activeItemScale, activeItemShadowOpacity, animateLayoutOnReorderOnly, @@ -171,7 +156,6 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } = dragActivationFailOffset, dropAnimationDuration, enableActiveItemSnap, - inactiveAnimationProgress, inactiveItemOpacity, inactiveItemScale, indexToKey, @@ -183,12 +167,10 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } = keyToIndex, measuredContainerHeight, measuredContainerWidth, - prevActiveItemKey, shouldAnimateLayout, snapOffsetX, snapOffsetY, - sortEnabled, - touchPosition + sortEnabled } }; }); diff --git a/packages/react-native-sortables/src/providers/shared/index.ts b/packages/react-native-sortables/src/providers/shared/index.ts index 6fa652ac..f5184254 100644 --- a/packages/react-native-sortables/src/providers/shared/index.ts +++ b/packages/react-native-sortables/src/providers/shared/index.ts @@ -1,3 +1,4 @@ +export { ActiveItemValuesProvider } from './ActiveItemValuesProvider'; export { AutoScrollProvider, useAutoScrollContext } from './AutoScrollProvider'; export { CommonValuesContext, diff --git a/packages/react-native-sortables/src/providers/utils/createProvider.tsx b/packages/react-native-sortables/src/providers/utils/createProvider.tsx index 3f7145fc..edad98ef 100644 --- a/packages/react-native-sortables/src/providers/utils/createProvider.tsx +++ b/packages/react-native-sortables/src/providers/utils/createProvider.tsx @@ -3,6 +3,7 @@ import { createContext, type PropsWithChildren, + type ReactNode, useContext, useMemo } from 'react'; @@ -20,7 +21,7 @@ export default function createProvider< factory: (props: ProviderProps) => { value?: ContextValue; enabled?: boolean; - children?: React.ReactNode; + children?: ReactNode; } ) { const { guarded = true } = options ?? {}; diff --git a/packages/react-native-sortables/src/types/providers/shared.ts b/packages/react-native-sortables/src/types/providers/shared.ts index ca044210..dc191d8a 100644 --- a/packages/react-native-sortables/src/types/providers/shared.ts +++ b/packages/react-native-sortables/src/types/providers/shared.ts @@ -31,6 +31,27 @@ import type { AnimatedValues, AnyRecord, Maybe } from '../utils'; export type ControlledContainerDimensions = { width: boolean; height: boolean }; +// ACTIVE ITEM VALUES + +export type ActiveItemValuesContextType = { + // POSITIONS + touchPosition: SharedValue; + activeItemPosition: SharedValue; + + // DIMENSIONS + activeItemDimensions: SharedValue; + + // DRAG STATE + prevActiveItemKey: SharedValue; + activeItemKey: SharedValue; + activationState: SharedValue; + activeAnimationProgress: SharedValue; + inactiveAnimationProgress: SharedValue; + activeItemDropped: SharedValue; +}; + +// COMMON VALUES + /** * Context values shared between all providers. * (they are stored in a single context to make the access to them easier @@ -45,8 +66,6 @@ export type CommonValuesContextType = { // POSITIONS itemPositions: SharedValue>; - touchPosition: SharedValue; - activeItemPosition: SharedValue; // DIMENSIONS controlledContainerDimensions: SharedValue; @@ -54,18 +73,9 @@ export type CommonValuesContextType = { measuredContainerHeight: SharedValue; containerWidth: SharedValue; containerHeight: SharedValue; - activeItemDimensions: SharedValue; itemDimensions: SharedValue>; itemsStyleOverride: SharedValue>; - // DRAG STATE - prevActiveItemKey: SharedValue; - activeItemKey: SharedValue; - activationState: SharedValue; - activeAnimationProgress: SharedValue; - inactiveAnimationProgress: SharedValue; - activeItemDropped: SharedValue; - // OTHER containerRef: AnimatedRef; sortEnabled: SharedValue; @@ -75,7 +85,8 @@ export type CommonValuesContextType = { customHandle: boolean; itemsOverridesStyle: AnimatedStyle; -} & AnimatedValues & +} & ActiveItemValuesContextType & + AnimatedValues & AnimatedValues & AnimatedValues>;