feat: add scroll to the selected option (#25)

* feat: selected option on the top * feat: add scrollToSelectedOption prop; add example * feat: add dynamically height value * fix: docs
MobileReality · Nov 30, 2021 · d145768 · d145768
1 parent 226c94f
commit d145768
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 7 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -11,6 +11,7 @@ import { ModalExample } from './examples/ModalExample';
 import { Overflow } from './examples/Overflow';
 import { Ref } from './examples/Ref';
 import { RHF } from './examples/RHF';
+import { ScrollToSelectedOption } from './examples/ScrollToSelectedOption';
 import { Selects } from './examples/Selects';
 
 export const DATA = [
@@ -50,6 +51,7 @@ const examples = [
     'Ref',
     'Callbacks',
     'Custom Component',
+    'Scroll To Selected Option',
 ];
 
 export default function App() {
@@ -84,6 +86,8 @@ export default function App() {
                 return <Callbacks />;
             case 'Custom Component':
                 return <CustomComponent />;
+            case 'Scroll To Selected Option':
+                return <ScrollToSelectedOption />;
             default:
                 return null;
         }

diff --git a/example/src/examples/CustomStyles.tsx b/example/src/examples/CustomStyles.tsx
@@ -9,7 +9,7 @@ export const CustomStyles = () => {
         <SafeAreaView style={{ margin: 20, marginTop: 500 }}>
             <Select
                 optionSelectedStyle={{ backgroundColor: 'lightgreen' }}
-                optionStyle={{ backgroundColor: 'lightcoral', borderBottomWidth: 1 }}
+                optionStyle={{ backgroundColor: 'lightcoral', borderBottomWidth: 1, height: 40 }}
                 optionTextStyle={{ fontSize: 20 }}
                 options={DATA}
                 optionsListStyle={{ maxHeight: 150 }}

diff --git a/example/src/examples/ScrollToSelectedOption.tsx b/example/src/examples/ScrollToSelectedOption.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { SafeAreaView, Text } from 'react-native';
+import { Select } from '@mobile-reality/react-native-select-pro';
+
+import { DATA } from '../App';
+
+export const ScrollToSelectedOption = () => {
+    return (
+        <SafeAreaView>
+            <Text>Scroll to selected option</Text>
+            <Select options={DATA} selectControlStyle={{ width: 150 }} />
+            <Text>Scroll to selected option with default option</Text>
+            <Select defaultOption={DATA[4]} options={DATA} selectControlStyle={{ width: 150 }} />
+            <Text>Scroll to selected option is disabled</Text>
+            <Select
+                options={DATA}
+                scrollToSelectedOption={false}
+                selectControlStyle={{ width: 150 }}
+            />
+            <Text>Scroll to selected option with changed height of the option</Text>
+            <Select
+                optionStyle={{
+                    height: 60,
+                }}
+                options={DATA}
+                selectControlStyle={{ width: 150 }}
+            />
+        </SafeAreaView>
+    );
+};
diff --git a/src/components/option/index.tsx b/src/components/option/index.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react';
 import { StyleSheet, Text, TextStyle, TouchableOpacity, ViewStyle } from 'react-native';
 
-import { COLORS, FONT_SIZE, PADDING } from '../../constants/styles';
+import { COLORS, FONT_SIZE, ITEM_HEIGHT, PADDING } from '../../constants/styles';
 import type { OptionalToRequired } from '../../helpers';
 import type { OptionType } from '../../index';
 import type { OptionsList } from '../options-list';
@@ -76,7 +76,9 @@ type Styles = {
 
 const styles = StyleSheet.create<Styles>({
     option: {
-        padding: PADDING,
+        height: ITEM_HEIGHT,
+        justifyContent: 'center',
+        paddingHorizontal: PADDING,
     },
     text: {
         fontSize: FONT_SIZE,

diff --git a/src/components/options-list/index.tsx b/src/components/options-list/index.tsx
@@ -1,9 +1,9 @@
-import React, { ComponentProps } from 'react';
+import React, { ComponentProps, useRef } from 'react';
 import { FlatList, StyleSheet, TouchableWithoutFeedback, View, ViewStyle } from 'react-native';
 import { Portal } from '@gorhom/portal';
 
 import { Portals } from '../../constants/portals';
-import { BORDER_WIDTH, COLORS, MAX_HEIGHT_LIST, SHAPE } from '../../constants/styles';
+import { BORDER_WIDTH, COLORS, ITEM_HEIGHT, MAX_HEIGHT_LIST, SHAPE } from '../../constants/styles';
 import type { OptionalToRequired } from '../../helpers';
 import type { Position, State } from '../../state/types';
 import type { OnOutsidePress, OnPressOptionType } from '../../types';
@@ -17,6 +17,7 @@ type FromSelectComponentProps = Pick<
     | 'optionSelectedStyle'
     | 'optionStyle'
     | 'optionTextStyle'
+    | 'scrollToSelectedOption'
     | 'noOptionsText'
     | 'onSelect'
     | 'optionsListStyle'
@@ -45,11 +46,13 @@ export const OptionsList = ({
     optionStyle,
     optionTextStyle,
     noOptionsText,
+    scrollToSelectedOption,
     onSelect,
     optionsListStyle,
     NoOptionsComponent,
     OptionComponent,
 }: OptionsListProps) => {
+    const ref = useRef<FlatList>(null);
     return (
         <>
             {isOpened && (
@@ -73,15 +76,36 @@ export const OptionsList = ({
                                 accessibilityLabel={'Options list'}
                                 bounces={false}
                                 data={optionsData}
+                                getItemLayout={(_data, index) => {
+                                    const height = StyleSheet.flatten(optionStyle)?.height;
+                                    const isNumber = typeof height === 'number';
+                                    return {
+                                        length: isNumber ? height : ITEM_HEIGHT,
+                                        offset: isNumber ? height * index : ITEM_HEIGHT * index,
+                                        index,
+                                    };
+                                }}
                                 keyExtractor={({ value }) => value}
                                 keyboardShouldPersistTaps="handled"
                                 persistentScrollbar={true}
-                                renderItem={({ item }) => {
+                                ref={ref}
+                                renderItem={({ item, index }) => {
                                     const { value } = item;
+                                    const isSelected = value === selectedOption?.value;
+                                    const isScrollToSelectedOption =
+                                        isSelected && ref.current && scrollToSelectedOption;
+
+                                    if (isScrollToSelectedOption) {
+                                        ref.current.scrollToIndex({
+                                            index,
+                                            animated: false,
+                                        });
+                                    }
+
                                     return (
                                         <Option
                                             OptionComponent={OptionComponent}
-                                            isSelected={value === selectedOption?.value}
+                                            isSelected={isSelected}
                                             key={value}
                                             onPressOption={onPressOption}
                                             onSelect={onSelect}

diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
@@ -39,6 +39,7 @@ export const Select = forwardRef((props: SelectProps, ref: ForwardedRef<SelectRe
         optionStyle,
         optionTextStyle,
         placeholderText = 'Select...',
+        scrollToSelectedOption = true,
         selectContainerStyle,
         selectControlButtonsContainerStyle,
         selectControlClearOptionButtonStyle,
@@ -201,6 +202,7 @@ export const Select = forwardRef((props: SelectProps, ref: ForwardedRef<SelectRe
                 optionTextStyle={optionTextStyle}
                 optionsData={optionsData}
                 optionsListStyle={optionsListStyle}
+                scrollToSelectedOption={scrollToSelectedOption}
                 selectedOption={selectedOption}
             />
         </View>

diff --git a/src/constants/styles.ts b/src/constants/styles.ts
@@ -3,6 +3,7 @@ export const FONT_SIZE = 12;
 export const BORDER_WIDTH = 1;
 export const PADDING = 12;
 export const MAX_HEIGHT_LIST = 120;
+export const ITEM_HEIGHT = 40;
 
 export const COLORS = {
     WHITE: '#ffffff',

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -165,6 +165,13 @@ export interface SelectProps {
      * @default "Select..."
      */
     placeholderText?: string;
+    /**
+     * If `true` options list is scrolled to the selected option
+     *
+     * @category Common
+     * @default true
+     */
+    scrollToSelectedOption?: boolean;
     /**
      * No options text
      *