feat: Added example using overridden flatListProps (#261)

* feat: Added example using overridden flatListProps * feat: Added example using overridden flatListProps * feat: Added example using overridden flatListProps --------- Co-authored-by: Dawid Gierdal <dawid.gierdal@mobilereality.pl>
MobileReality · Sep 27, 2024 · ec9904c · ec9904c
1 parent 531d18f
commit ec9904c
Show file tree

Hide file tree

Showing 8 changed files with 396 additions and 1 deletion.
diff --git a/.changeset/few-guests-smell.md b/.changeset/few-guests-smell.md
@@ -0,0 +1,5 @@
+---
+'@mobile-reality/react-native-select-pro': patch
+---
+
+Added example using overridden flatListProps
diff --git a/apps/expo/src/constants/routes.ts b/apps/expo/src/constants/routes.ts
@@ -14,6 +14,7 @@ import { MultiSelectWithSeparatedOptions } from '../examples/multiselect-with-se
 import { MultiSelectWithSeparatedOptionsStyled } from '../examples/multiselect-with-separated-options-styled';
 import { NoBackdrop } from '../examples/no-backdrop';
 import { Overflow } from '../examples/overflow';
+import { OverriddenFlatListProps } from '../examples/overridden-flat-list-props';
 import { RealExample } from '../examples/real-example';
 import { Ref } from '../examples/ref';
 import { RHF } from '../examples/rhf';
@@ -33,6 +34,10 @@ export const ROUTES = [
         name: 'Basic',
         screen: Basic,
     },
+    {
+        name: 'Overridden FlatList Props',
+        screen: OverriddenFlatListProps,
+    },
     {
         name: 'Overflow',
         screen: Overflow,

diff --git a/apps/expo/src/examples/overridden-flat-list-props.tsx b/apps/expo/src/examples/overridden-flat-list-props.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Select } from '@mobile-reality/react-native-select-pro';
+
+import { SafeAreaViewWrapper } from '../components/safe-area-view-wrapper';
+import { DATA } from '../constants/data';
+
+export const OverriddenFlatListProps = () => {
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const [isScrolling, setIsScrolling] = useState(false);
+
+    const handleRefresh = () => {
+        setIsRefreshing(true);
+        setTimeout(() => {
+            setIsRefreshing(false);
+        }, 2000);
+    };
+
+    const handleEndReached = () => {
+        setIsAtEnd(true);
+    };
+
+    const handleScroll = () => {
+        setIsScrolling(true);
+        setTimeout(() => {
+            setIsScrolling(false);
+        }, 500);
+    };
+
+    return (
+        <SafeAreaViewWrapper style={styles.container}>
+            <Select
+                options={DATA}
+                flatListProps={{
+                    horizontal: false,
+                    initialNumToRender: 10,
+                    maxToRenderPerBatch: 5,
+                    windowSize: 21,
+                    refreshing: isRefreshing,
+                    onRefresh: handleRefresh,
+                    ListEmptyComponent: () => <Text>No options available</Text>,
+                    ItemSeparatorComponent: () => <View style={styles.separator} />,
+                    ListFooterComponent: () => (
+                        <View style={styles.footer}>
+                            <Text>End of the list</Text>
+                        </View>
+                    ),
+                    ListHeaderComponent: () => (
+                        <View style={styles.header}>
+                            <Text>Start of the list</Text>
+                        </View>
+                    ),
+                    onEndReached: handleEndReached,
+                    onEndReachedThreshold: 0.5,
+                    onScroll: handleScroll,
+                    ListFooterComponentStyle: styles.footerBackground,
+                    scrollEnabled: true,
+                    bounces: true,
+                    persistentScrollbar: true,
+                    keyboardShouldPersistTaps: 'handled',
+                }}
+            />
+            <View>
+                {isScrolling && (
+                    <View style={styles.scrollIndicator}>
+                        <Text>The list is being scrolled...</Text>
+                    </View>
+                )}
+
+                {isAtEnd && (
+                    <View style={styles.endIndicator}>
+                        <Text>The end of the list has been reached</Text>
+                    </View>
+                )}
+            </View>
+        </SafeAreaViewWrapper>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'space-between',
+        paddingTop: 100,
+    },
+    scrollIndicator: {
+        padding: 10,
+        backgroundColor: 'lightyellow',
+    },
+    endIndicator: {
+        padding: 10,
+        backgroundColor: 'lightgreen',
+    },
+    separator: {
+        height: 1,
+        backgroundColor: 'gray',
+    },
+    footer: {
+        padding: 20,
+    },
+    header: {
+        padding: 20,
+    },
+    footerBackground: {
+        backgroundColor: 'lightgray',
+    },
+});
diff --git a/website/docs/api/select.mdx b/website/docs/api/select.mdx
@@ -7,6 +7,7 @@ hide_table_of_contents: true
 
 import {
     OptionsPropSnackLink,
+    OverriddenFlatListPropsSnackLink,
     Animation,
     Clearable,
     CloseOptionsListOnSelect,
@@ -133,7 +134,7 @@ The `Select` component has only one required prop, which is the `options` prop.
 | `backdropProps`            | `Omit<TouchableWithoutFeedbackProps, 'onPress'>`                                                                                                                            | Override the backdrop element props.       | To Do   |
 | `clearOptionButtonProps`   | `Omit<ViewProps, 'style'` \| `'onPress'>`                                                                                                                                   | Override the clear option button props.    | To Do   |
 | `clearOptionImageProps`    | `Omit<ImageProps, 'style'>`                                                                                                                                                 | Override the clear option image props.     | To Do   |
-| `flatListProps`            | `Omit<FlatListProps<OptionType>, 'ref'` \| `'data'` \| `'getItemLayout'` \| `'renderItem'` \| `'keyExtractor'>`                                                             | Override the options list props.           | To Do   |
+| `flatListProps`            | `Omit<FlatListProps<OptionType>, 'ref'` \| `'data'` \| `'getItemLayout'` \| `'renderItem'` \| `'keyExtractor'>`                                                              | Override the options list props.           |  <TableExample expo={<OverriddenFlatListPropsSnackLink />} />   |
 | `noOptionsProps`           | `Omit<ViewProps, 'style'>`                                                                                                                                                  | Override the no options element props.     | To Do   |
 | `noOptionsTextProps`       | `Omit<TextProps, 'style'>`                                                                                                                                                  | Override the no options text props.        | To Do   |
 | `optionButtonProps`        | `Omit<PressableProps, 'ref'` \| `'style'` \| `'onPress'` \| `'accessibilityRole'` \| `'accessibilityState'` \| `'disabled'>`                                                | Override the option button props.          | To Do   |

diff --git a/website/docs/usage.md b/website/docs/usage.md
@@ -1134,6 +1134,142 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
+### Overridden flatListProps
+
+```SnackPlayer name=Overridden flatListProps&dependencies=@mobile-reality/react-native-select-pro@2.0.0
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Select, SelectProvider } from '@mobile-reality/react-native-select-pro';
+
+const data = [
+    {
+        label: 'Option 1',
+        value: 'option1',
+    },
+    {
+        label: 'Option 2',
+        value: 'option2',
+    },
+    {
+        label: 'Option 3',
+        value: 'option3',
+    },
+    {
+        label: 'Option 4',
+        value: 'option4',
+    },
+];
+
+const App = () => {
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const [isScrolling, setIsScrolling] = useState(false);
+
+    const handleRefresh = () => {
+        setIsRefreshing(true);
+        setTimeout(() => {
+            setIsRefreshing(false);
+        }, 2000);
+    };
+
+    const handleEndReached = () => {
+        setIsAtEnd(true);
+    };
+
+    const handleScroll = () => {
+        setIsScrolling(true);
+        setTimeout(() => {
+            setIsScrolling(false);
+        }, 500);
+    };
+    
+    return (
+        <SelectProvider>
+            <View style={styles.container}>
+                <Select
+                     options={data}
+                     flatListProps={{
+                        horizontal: false,
+                        initialNumToRender: 10,
+                        maxToRenderPerBatch: 5,
+                        windowSize: 21,
+                        refreshing: isRefreshing,
+                        onRefresh: handleRefresh,
+                        ListEmptyComponent: () => <Text>No options available</Text>,
+                        ItemSeparatorComponent: () => <View style={styles.separator} />,
+                        ListFooterComponent: () => (
+                            <View style={styles.footer}>
+                                <Text>End of the list</Text>
+                            </View>
+                        ),
+                        ListHeaderComponent: () => (
+                            <View style={styles.header}>
+                                <Text>Start of the list</Text>
+                            </View>
+                        ),
+                        onEndReached: handleEndReached,
+                        onEndReachedThreshold: 0.5,
+                        onScroll: handleScroll,
+                        ListFooterComponentStyle: styles.footerBackground,
+                        scrollEnabled: true,
+                        bounces: true,
+                        persistentScrollbar: true,
+                        keyboardShouldPersistTaps: 'handled',
+                      }}
+                />
+                <View>
+                    {isScrolling && (
+                        <View style={styles.scrollIndicator}>
+                            <Text>The list is being scrolled...</Text>
+                        </View>
+                    )}
+    
+                    {isAtEnd && (
+                        <View style={styles.endIndicator}>
+                            <Text>The end of the list has been reached</Text>
+                        </View>
+                    )}
+                </View>
+            </View>
+        </SelectProvider>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center', 
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingBottom: 20,
+        paddingTop: 100,
+    },
+    scrollIndicator: {
+        padding: 10,
+        backgroundColor: 'lightyellow',
+    },
+    endIndicator: {
+        padding: 10,
+        backgroundColor: 'lightgreen',
+    },
+    separator: {
+        height: 1,
+        backgroundColor: 'gray',
+    },
+    footer: {
+        padding: 20,
+    },
+    header: {
+        padding: 20,
+    },
+    footerBackground: {
+        backgroundColor: 'lightgray',
+    },
+});
+
+export default App;
+```
+
 ### Real example
 
 ```SnackPlayer name=Real example&dependencies=@mobile-reality/react-native-select-pro@2.0.0,react-hook-form@7.43.0

diff --git a/website/docs/v2.mdx b/website/docs/v2.mdx
@@ -6,6 +6,8 @@ sidebar_label: React Native Select Pro v2
 
 ### Changes
 
+-   Added example using overridden `flatListProps`
+
 -   Added an option to hide already selected options from the list `hideSelectedOptions`
 
 -   Added option to show selected options below select input `separatedMultiple`

diff --git a/website/src/snack-examples/index.ts b/website/src/snack-examples/index.ts
@@ -1,4 +1,5 @@
 export * from './options'
+export * from './overridden-flat-list-props'
 export * from './animation'
 export * from './clearable'
 export * from './close-options-list-on-select'