fix(Picker): add ref to PickerComponentProps (#2261)

rsuite · Dec 30, 2021 · 6e3e6c5 · 6e3e6c5
1 parent a5a05fb
commit 6e3e6c5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/src/CheckPicker/CheckPicker.tsx b/src/CheckPicker/CheckPicker.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback, Ref } from 'react';
 import PropTypes from 'prop-types';
 import clone from 'lodash/clone';
 import isUndefined from 'lodash/isUndefined';
@@ -58,12 +58,16 @@ export interface CheckPickerProps<T>
 const emptyArray = [];
 
 export interface CheckPickerComponent {
-  <T>(props: CheckPickerProps<T>): JSX.Element | null;
+  <T>(
+    props: CheckPickerProps<T> & {
+      ref?: Ref<PickerInstance>;
+    }
+  ): JSX.Element | null;
   displayName?: string;
   propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
 }
 
-const CheckPicker: CheckPickerComponent = React.forwardRef(
+const CheckPicker = React.forwardRef(
   <T extends number | string>(props: CheckPickerProps<T>, ref: React.Ref<PickerInstance>) => {
     const {
       as: Component = 'div',

diff --git a/src/CheckPicker/test/CheckPicker.test.tsx b/src/CheckPicker/test/CheckPicker.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { expectType } from 'ts-expect';
+import { PickerInstance } from '../../Picker';
 import CheckPicker from '../CheckPicker';
 
 // Infer value and onChange types from data
@@ -30,3 +31,7 @@ const stringValuedData = [{ label: 'One', value: 'One' }];
     expectType<string[]>(newValue);
   }}
 />;
+
+const pickerRef = React.createRef<PickerInstance>();
+
+<CheckPicker ref={pickerRef} data={[]} />;
diff --git a/src/SelectPicker/SelectPicker.tsx b/src/SelectPicker/SelectPicker.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useState, useCallback, useEffect, Ref } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import isUndefined from 'lodash/isUndefined';
@@ -105,7 +105,11 @@ export interface SelectPickerProps<T>
 const emptyArray = [];
 
 export interface SelectPickerComponent {
-  <T>(props: SelectPickerProps<T>): JSX.Element | null;
+  <T>(
+    props: SelectPickerProps<T> & {
+      ref?: Ref<PickerInstance>;
+    }
+  ): JSX.Element | null;
   displayName?: string;
   propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;
 }

diff --git a/src/SelectPicker/test/SelectPicker.test.tsx b/src/SelectPicker/test/SelectPicker.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { expectType } from 'ts-expect';
+import { PickerInstance } from '../../Picker';
 import SelectPicker from '../SelectPicker';
 
 // Infer value and onChange types from data
@@ -26,3 +27,7 @@ const stringValuedData = [{ label: 'One', value: 'One' }];
     expectType<string>(newValue);
   }}
 />;
+
+const pickerRef = React.createRef<PickerInstance>();
+
+<SelectPicker ref={pickerRef} data={[]} />;