Picker - export RenderCustomModalProps and PickerItemsListProps (#2961)

Author: M-i-k-e-l

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -13,6 +13,7 @@ import {
   PanningProvider,
   Typography,
   PickerProps,
+  RenderCustomModalProps,
   PickerMethods,
   Button
 } from 'react-native-ui-lib'; //eslint-disable-line
@@ -73,15 +74,15 @@ export default class PickerScreen extends Component {
     contact: 0
   };
 
-  renderDialog: PickerProps['renderCustomModal'] = modalProps => {
+  renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
       <Incubator.Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
-          toggleModal(false);
+          toggleModal();
         }}
         width="100%"
         height="45%"

src/components/picker/index.tsx

@@ -32,6 +32,8 @@ import {
   PickerModes,
   PickerFieldTypes,
   PickerSearchStyle,
+  RenderCustomModalProps,
+  PickerItemsListProps,
   PickerMethods
 } from './types';
 
@@ -344,6 +346,16 @@ Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
 
-export {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, PickerMethods};
+export {
+  PickerProps,
+  PickerItemProps,
+  PickerValue,
+  PickerModes,
+  PickerFieldTypes,
+  PickerSearchStyle,
+  RenderCustomModalProps,
+  PickerItemsListProps,
+  PickerMethods
+};
 export {Picker}; // For tests
 export default Picker as typeof Picker & PickerStatics;

src/components/picker/types.tsx

@@ -31,9 +31,9 @@ type RenderPickerOverloads<ValueType> = ValueType extends PickerValue
   : never;
 type RenderPicker = RenderPickerOverloads<PickerValue>;
 
-type RenderCustomModalProps = {
+export type RenderCustomModalProps = {
   visible: boolean;
-  toggleModal: (show: boolean) => void;
+  toggleModal: () => void;
   onSearchChange: (searchValue: string) => void;
   children: ReactNode;
   // onDone is relevant to multi mode only

src/index.ts

@@ -118,6 +118,8 @@ export {
   PickerModes,
   PickerFieldTypes,
   PickerSearchStyle,
+  RenderCustomModalProps,
+  PickerItemsListProps,
   PickerMethods
 } from './components/picker';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';

webDemo/src/examples/Picker.tsx

@@ -1,6 +1,15 @@
 import React, {useState} from 'react';
 import {ScrollView} from 'react-native-gesture-handler';
-import {Picker, Colors, View, Text, Incubator, PickerProps, PanningProvider} from 'react-native-ui-lib';
+import {
+  Picker,
+  Colors,
+  View,
+  Text,
+  Incubator,
+  PickerProps,
+  RenderCustomModalProps,
+  PanningProvider
+} from 'react-native-ui-lib';
 
 const options = [
   {label: 'JavaScript', value: 'js'},
@@ -29,15 +38,15 @@ const PickerWrapper = () => {
   const [language, setLanguage] = useState(undefined);
   const [filter, setFilter] = useState(undefined);
   const [customModalValues, setCustomModalValues] = useState(undefined);
-  const renderDialog: PickerProps['renderCustomModal'] = (modalProps: any) => {
+  const renderDialog: PickerProps['renderCustomModal'] = (modalProps: RenderCustomModalProps) => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
       <Incubator.Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
-          toggleModal(false);
+          toggleModal();
         }}
         width="40%"
         height="45%"