Merge pull request #69 from mcabs3/picker-ref

added ref support for picker/datepicker components
thodubois · Oct 25, 2021 · 6e2bb09 · 6e2bb09
2 parents 5e9e26d + c35fe55
commit 6e2bb09
Show file tree

Hide file tree

Showing 9 changed files with 469 additions and 351 deletions.
diff --git a/example/ExampleApp/App.tsx b/example/ExampleApp/App.tsx
@@ -3,7 +3,12 @@ import type {PickerItem} from 'react-native-woodpicker';
 import React, {useState} from 'react';
 import {Platform, StyleSheet, Text, View, Button} from 'react-native';
 
-import {DatePicker, Picker} from 'react-native-woodpicker';
+import {
+  DatePicker,
+  Picker,
+  PickerInstance,
+  DatePickerInstance,
+} from 'react-native-woodpicker';
 
 const data: Array<PickerItem> = [
   {label: 'DataCat', value: 1},
@@ -17,6 +22,8 @@ const App = (): JSX.Element => {
   const [pickedDate, setPickedDate] = useState<Date | null>(null);
   const [pickedData, setPickedData] = useState<PickerItem>();
 
+  const pickerRef = React.useRef<PickerInstance | null>(null);
+  const datePickerRef = React.useRef<DatePickerInstance | null>(null);
   const handleDateChange = (date: Date | null) => setPickedDate(date);
 
   const resetDate = () => setPickedDate(new Date());
@@ -29,13 +36,16 @@ const App = (): JSX.Element => {
   });
 
   const handleText = () => pickedDate?.toDateString?.() ?? 'No value Selected';
+  const openPickerWidthRef = () => pickerRef.current?.open();
+  const openDatePickerWithRef = () => datePickerRef.current?.open();
 
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>Welcome to React Native!</Text>
       <Text style={styles.instructions}>To get started, edit App.js</Text>
       <Text style={styles.instructions}>{instructions}</Text>
       <Picker
+        ref={pickerRef}
         item={pickedData}
         items={data}
         onItemChange={setPickedData}
@@ -46,6 +56,7 @@ const App = (): JSX.Element => {
         //androidPickerMode="dropdown"
       />
       <Button title="Set Value" onPress={resetPicker} />
+      <Button title="Open Picker (Ref)" onPress={openPickerWidthRef} />
       <DatePicker
         value={pickedDate}
         onDateChange={handleDateChange}
@@ -62,6 +73,7 @@ const App = (): JSX.Element => {
         //locale="fr"
       />
       <Button title="Set Today" onPress={resetDate} />
+      <Button title="Open DatePicker (Ref)" onPress={openDatePickerWithRef} />
     </View>
   );
 };

diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
   "scripts": {
     "build": "tsc",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint ./src"
+    "lint": "eslint ./src",
+    "postinstall": "npm run build"
   },
   "devDependencies": {
     "@react-native-community/datetimepicker": "3.5.0",

diff --git a/src/components/AndroidPicker.tsx b/src/components/AndroidPicker.tsx
@@ -1,8 +1,9 @@
-import React from "react";
+import React, { forwardRef, Ref } from "react";
 import { View, ViewStyle } from "react-native";
 import { Picker as RNPicker } from "@react-native-picker/picker";
 import { styles } from "../helpers/stylesHelper";
 import { PickerItem } from "../types";
+import { AndroidPickerInstance } from "../types/picker";
 
 export type Props = {
   selectedItem: any;
@@ -18,34 +19,40 @@ export type Props = {
   customProps: { [key: string]: any };
 };
 
-const AndroidPicker = ({
-  selectedItem,
-  disabled,
-  title,
-  mode,
-  renderInput,
-  renderPickerItems,
-  onItemChange,
-  containerStyle,
-  customProps,
-}: Props): JSX.Element => {
-  return (
-    <View style={containerStyle}>
-      {renderInput()}
-      <RNPicker
-        style={styles.androidPickerContainer}
-        prompt={title}
-        // @ts-ignore
-        onValueChange={onItemChange}
-        selectedValue={selectedItem.value}
-        mode={mode || "dialog"}
-        enabled={!disabled}
-        {...customProps}
-      >
-        {renderPickerItems()}
-      </RNPicker>
-    </View>
-  );
-};
+const AndroidPicker = forwardRef(
+  (
+    {
+      selectedItem,
+      disabled,
+      title,
+      mode,
+      renderInput,
+      renderPickerItems,
+      onItemChange,
+      containerStyle,
+      customProps,
+    }: Props,
+    ref: Ref<AndroidPickerInstance>
+  ): JSX.Element => {
+    return (
+      <View style={containerStyle}>
+        {renderInput()}
+        <RNPicker
+          ref={ref}
+          style={styles.androidPickerContainer}
+          prompt={title}
+          // @ts-ignore
+          onValueChange={onItemChange}
+          selectedValue={selectedItem.value}
+          mode={mode || "dialog"}
+          enabled={!disabled}
+          {...customProps}
+        >
+          {renderPickerItems()}
+        </RNPicker>
+      </View>
+    );
+  }
+);
 
 export default AndroidPicker;