Picker support showLoader, customLoaderElement props (#3234)

* Picker support showLoader, customLoaderElement props

* removed loader exmaple from picker screen

* customLoaderElement type change

---------

Co-authored-by: M-i-k-e-l <[email protected]>

Author: adids1221

src/components/picker/PickerItemsList.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useCallback, useContext, useState, useMemo} from 'react';
-import {StyleSheet, FlatList, TextInput, ListRenderItemInfo} from 'react-native';
+import {StyleSheet, FlatList, TextInput, ListRenderItemInfo, ActivityIndicator} from 'react-native';
 import {Typography, Colors} from '../../style';
 import Assets from '../../assets';
 import Modal from '../modal';
@@ -32,7 +32,9 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     useSafeArea,
     useDialog,
     mode,
-    testID
+    testID,
+    showLoader,
+    customLoaderElement
   } = props;
   const context = useContext(PickerContext);
 
@@ -156,6 +158,16 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
+  const renderLoader = () => {
+    return (
+      customLoaderElement || (
+        <View flex centerV useSafeArea>
+          <ActivityIndicator/>
+        </View>
+      )
+    );
+  };
+
   const renderContent = () => {
     return useWheelPicker ? (
       renderWheel()
@@ -170,7 +182,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   return (
     <View style={wrapperContainerStyle} useSafeArea={useSafeArea}>
       {renderPickerHeader()}
-      {renderContent()}
+      {showLoader ? renderLoader() : renderContent()}
     </View>
   );
 };

src/components/picker/api/picker.api.json

@@ -92,7 +92,9 @@
     },
     {"name": "pickerModalProps", "type": "ModalProps", "description": "Pass props to the picker modal"},
     {"name": "useSafeArea", "type": "boolean", "description": "Add safe area in the Picker modal view"},
-    {"name": "items", "type": "{label: string, value: string | number}[]", "description": "Data source for Picker"}
+    {"name": "items", "type": "{label: string, value: string | number}[]", "description": "Data source for Picker"},
+    {"name": "showLoader", "type": "boolean", "description": "Show a loader (while items are loading/fetching)"},
+    {"name": "customLoaderElement", "type": "ReactNode", "description": "Custom loader element"}
   ],
   "snippet": [
     "<Picker",

src/components/picker/index.tsx

@@ -76,6 +76,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     accessibilityLabel,
     accessibilityHint,
     items: propItems,
+    showLoader,
+    customLoaderElement,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -242,6 +244,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         renderHeader={renderHeader}
         listProps={listProps}
         useSafeArea={useSafeArea}
+        showLoader={showLoader}
+        customLoaderElement={customLoaderElement}
       >
         {filteredChildren}
       </PickerItemsList>
@@ -265,7 +269,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     filteredChildren,
     useSafeArea,
     useWheelPicker,
-    items
+    items,
+    showLoader
   ]);
 
   return (

src/components/picker/types.ts

@@ -225,6 +225,14 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      * Component test id
      */
     testID?: string;
+    /**
+     * Show a loader (while items are loading/fetching)
+     */
+    showLoader?: boolean;
+    /**
+     * Custom loader element
+     */
+    customLoaderElement?: JSX.Element;
   };
 
 export type PickerPropsWithSingle = PickerBaseProps & {
@@ -304,6 +312,8 @@ export type PickerItemsListProps = Pick<
   | 'listProps'
   | 'renderHeader'
   | 'useSafeArea'
+  | 'showLoader'
+  | 'customLoaderElement'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'