diff --git a/README.md b/README.md index 7ab8b04..64ff3b3 100644 --- a/README.md +++ b/README.md @@ -96,19 +96,57 @@ All the SwipeableProps can be passed under SwipeableProps prop to SwipeableFlatl }} > ``` -### renderLeftActions +### renderLeftActions: ((item: any) => React.ReactNode) | undefined A function that returns the component to render as left swipe actions for each item. This is actually a SwipeableProp, but for the simplicity, as you will mostly using left/right actions, it can be passed directly to the SwipeableFlatList. -### renderRightActions +### renderRightActions: ((item: any) => React.ReactNode) | undefined Similarly to the one above, this is the function that returns the component to render as right swipe actions for each item. This is also a SwipeableProp, but for the simplicity, as you will mostly using left/right actions, it can be passed directly to the SwipeableFlatList. -### enableOpenMultipleRows +### enableOpenMultipleRows:boolean This is the prop to enable/disable multiple rows being opened. if enabled you can swipe multiple rows and they'll stay open, if disabled - only one row can be opened at a time and the previous one will be closed if you open the new one. Defaults to ```true```. (please note, that when you'll alter this prop, you'll need to reinitialize the list - simply refresh the js bundle and the changes will be applied) + +### ref: SwipeableFlatListRef +The ref is passed to the base ```Flatlist``` component and you can access all the native api available methods through this. Special interface ```SwipeableFlatListRef ``` will add a custom module related function to this ```ref ``` which is ```closeAnyOpenRows ``` - see the description below. + +## Methods + +### closeAnyOpenRows: () => void +SwipeableFlatList provides a method `closeAnyExistingRows()` accessible via a ref to the component. This method can be used to programmatically close any opened rows: + +- **When `enableOpenMultipleRows` is true**: The method closes all swipeable rows that are currently open. +- **When `enableOpenMultipleRows` is false**: The method closes the currently open swipeable row, if any. + +This method is particularly useful in scenarios where you need to ensure that all swipe actions are reset, such as when navigating away from the list or performing batch actions on the list data. + +example usage: + +```jsx + + const flatlistRef = useRef | null>(null); + + const closeAllOpenRows = () => { + flatListRef.current?.closeAnyOpenRows(); + }; + + return ( + item.id} + renderItem={renderItem} + renderLeftActions={renderLeftAction} + renderRightActions={renderRightAction} + /> +); + +``` + + ## Contributing Contributions are welcome! If you find any issues or would like to suggest improvements, please create a new issue or submit a pull request. diff --git a/gifs/demo_android.gif b/gifs/demo_android.gif index 961fb3d..03ac65b 100644 Binary files a/gifs/demo_android.gif and b/gifs/demo_android.gif differ diff --git a/gifs/demo_ios.gif b/gifs/demo_ios.gif index 0a3a1b4..5a880a7 100644 Binary files a/gifs/demo_ios.gif and b/gifs/demo_ios.gif differ diff --git a/index.d.ts b/index.d.ts index bb85388..93e37b5 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,5 @@ declare module 'rn-gesture-swipeable-flatlist' { - import { FlatListProps } from 'react-native'; + import { FlatListProps, FlatList } from 'react-native'; import {SwipeableProps} from 'react-native-gesture-handler/lib/typescript/components/Swipeable'; @@ -13,5 +13,10 @@ declare module 'rn-gesture-swipeable-flatlist' { export default function SwipeableFlatList( props: SwipeableFlatListProps, ): JSX.Element; + + export interface SwipeableFlatListRef extends FlatList { + closeAnyOpenRows: () => void; + } + } \ No newline at end of file diff --git a/package.json b/package.json index 285d93d..aa69661 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rn-gesture-swipeable-flatlist", - "version": "2.0.1", + "version": "2.3.0", "description": "Swipeable FlatList for React Native", "main": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/src/SwipeableFlatList.tsx b/src/SwipeableFlatList.tsx index 27c033d..499e67a 100644 --- a/src/SwipeableFlatList.tsx +++ b/src/SwipeableFlatList.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useCallback, useRef } from 'react'; +import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'; import { FlatList } from 'react-native'; import { Swipeable } from 'react-native-gesture-handler'; import { SwipeableFlatListProps, } from './types'; @@ -16,6 +16,35 @@ const SwipeableFlatList = forwardRef, SwipeableFlatListProps> const openedRowIndex = useRef(null); const swipeableRefs = useRef<(Swipeable | null)[]>([]); + const flatListRef = useRef(null); + + useImperativeHandle(ref, () => new Proxy({} as FlatList, { + get: (_, prop) => { + if (prop === 'closeAnyOpenRows') { + return () => { + // Close all open swipeables if multiple rows are enabled + if (enableOpenMultipleRows) { + swipeableRefs.current.forEach(swipeable => { + if (swipeable) swipeable.close(); + }); + } else { + // Close the currently open swipeable row + const currentIndex = swipeableRefs.current.findIndex(swipeable => swipeable === swipeableRefs.current[openedRowIndex.current as number]); + if (currentIndex !== -1) { + swipeableRefs.current[currentIndex]?.close(); + openedRowIndex.current = null; // Reset the index after closing + } + } + }; + } + // Safely delegate other property accesses to the FlatList ref + const property = flatListRef.current?.[prop as keyof FlatList]; + if (typeof property === 'function') { + return property.bind(flatListRef.current); + } + return property; + } + }), [enableOpenMultipleRows]); const onSwipeableOpen = useCallback((directions: "left" | "right", swipeable: Swipeable, index: number) => { @@ -63,7 +92,7 @@ const SwipeableFlatList = forwardRef, SwipeableFlatListProps> return ( extends FlatListProps { @@ -8,3 +8,8 @@ export interface SwipeableFlatListProps extends FlatListProps { swipeableProps?: SwipeableProps; enableOpenMultipleRows?: boolean; } + +export interface SwipeableFlatListRef extends FlatList { + closeAnyOpenRows: () => void; +} +