fix(carbon-components-react) Added ref for inputs and textareas (Defi…

…nitelyTyped#42187) * Added support of ref for TextArea and Input * removed old code * Reused the old forwardingcomponent + added number * removed forward ref from NumberInput * lint fix
AlexHayton · Feb 7, 2020 · abcf09c · abcf09c
1 parent 2422a0f
commit abcf09c
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 10 deletions.
diff --git a/types/carbon-components-react/carbon-components-react-tests.tsx b/types/carbon-components-react/carbon-components-react-tests.tsx
@@ -5,13 +5,16 @@ import {
     DataTableCustomRenderProps,
     DataTableHeader,
     DataTableRow,
+    NumberInput,
     Slider,
     Tab,
     Table,
     TableBatchActions,
     TableHeader,
     TableRow,
     TooltipDefinition,
+    TextArea,
+    TextInput,
 } from 'carbon-components-react';
 import Link from 'carbon-components-react/lib/components/UIShell/Link';
 
@@ -267,7 +270,7 @@ const uisLinkT5 = (
 
 // TooltipDefinition
 const tooltipDefHasAlign = (
-  <TooltipDefinition tooltipText="my text" align="end" />
+    <TooltipDefinition tooltipText="my text" align="end" />
 );
 
 const tooltipDefHasTriggerClassName = (
@@ -295,3 +298,71 @@ const SliderHasOnChange = (
         onChange={(newValue) => newValue.value}
     />
 );
+
+// TextArea
+const textAreaWithDefaultRef = (
+    <TextArea labelText=""/>
+);
+
+const HtmlTextAreaRef = React.createRef<HTMLTextAreaElement>();
+const textAreaWithRef = (
+    <TextArea
+        ref={HtmlTextAreaRef}
+        labelText=""
+    />
+);
+
+// TextInput
+const inputWithoutRef = (
+    <TextInput
+        id="my-id"
+        labelText=""
+    />
+);
+
+const passwordInputWithoutRef = (
+    <TextInput.PasswordInput
+        id="my-id"
+        labelText=""
+    />
+);
+
+const controlledPasswordInputWithoutRef = (
+    <TextInput.ControlledPasswordInput
+        id="my-id"
+        labelText=""
+    />
+);
+
+const inputRef = React.createRef<HTMLInputElement>();
+const inputWithRef = (
+    <TextInput
+        id="my-id"
+        ref={inputRef}
+        labelText=""
+    />
+);
+
+const passwordInputWithRef = (
+    <TextInput.PasswordInput
+        id="my-id"
+        ref={inputRef}
+        labelText=""
+    />
+);
+
+const controlledPasswordInputWithRef = (
+    <TextInput.ControlledPasswordInput
+        id="my-id"
+        ref={inputRef}
+        labelText=""
+    />
+);
+
+// NumberInput
+const numberInput = (
+    <NumberInput
+        id="my-id"
+        value={12}
+    />
+);
diff --git a/types/carbon-components-react/lib/components/NumberInput/NumberInput.d.ts b/types/carbon-components-react/lib/components/NumberInput/NumberInput.d.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { EmbeddedIconProps, InternationalProps, ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps } from "../../../typings/shared";
+import { EmbeddedIconProps, InternationalProps, ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps, RefForwardingProps } from "../../../typings/shared";
 
 type ExcludedAttributes = "aria-label" | "id" | "ref";
 export type NumberInputTranslationKey = "decrement.number" | "increment.number";
@@ -9,7 +9,8 @@ interface InheritedProps extends
     InternationalProps<NumberInputTranslationKey>,
     RequiresIdProps,
     ThemeProps,
-    ValidityProps
+    ValidityProps,
+    RefForwardingProps<HTMLInputElement>
 {
     value: number,
 }
@@ -22,6 +23,6 @@ export interface NumberInputProps extends InheritedProps {
     isMobile?: boolean,
 }
 
-declare const NumberInput: React.RefForwardingComponent<HTMLInputElement, NumberInputProps>;
+declare class NumberInput extends React.Component<NumberInputProps> { }
 
 export default NumberInput;
diff --git a/types/carbon-components-react/lib/components/TextArea/TextArea.d.ts b/types/carbon-components-react/lib/components/TextArea/TextArea.d.ts
@@ -1,11 +1,12 @@
 import * as React from "react";
-import { ThemeProps, ValidityProps } from "../../../typings/shared";
+import { RefForwardingProps, ThemeProps, ValidityProps } from "../../../typings/shared";
 
 type ExcludedAttributes = "aria-invalid" | "aria-describedby" | "defaultValue" | "value";
 interface InheritedProps extends
     Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, ExcludedAttributes>,
     ThemeProps,
-    ValidityProps
+    ValidityProps,
+    RefForwardingProps<HTMLTextAreaElement>
 { }
 
 export interface TextAreaProps extends InheritedProps {

diff --git a/types/carbon-components-react/lib/components/TextInput/ControlledPasswordInput.d.ts b/types/carbon-components-react/lib/components/TextInput/ControlledPasswordInput.d.ts
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { EmbeddedTooltipProps } from "../../../typings/shared";
+import { EmbeddedTooltipProps, RefForwardingProps } from "../../../typings/shared";
 import { TextInputInheritedProps } from "./props";
 
 interface InheritedProps extends TextInputInheritedProps, EmbeddedTooltipProps { }

diff --git a/types/carbon-components-react/lib/components/TextInput/PasswordInput.d.ts b/types/carbon-components-react/lib/components/TextInput/PasswordInput.d.ts
@@ -6,6 +6,6 @@ interface InheritedProps extends TextInputInheritedProps, EmbeddedTooltipProps {
 
 export interface PasswordInputProps extends InheritedProps { }
 
-declare const PasswordInput: React.FC<PasswordInputProps>;
+declare const PasswordInput: React.RefForwardingComponent<HTMLInputElement, PasswordInputProps>;
 
 export default PasswordInput;
diff --git a/types/carbon-components-react/lib/components/TextInput/props.d.ts b/types/carbon-components-react/lib/components/TextInput/props.d.ts
@@ -1,12 +1,13 @@
 import * as React from "react";
-import { ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps } from "../../../typings/shared";
+import { ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps, RefForwardingProps } from "../../../typings/shared";
 
 type ExcludedAttributes = "aria-describedby" | "aria-invalid" | "defaultValue" | "id" | "value";
 export interface TextInputInheritedProps extends
     Omit<ReactInputAttr, ExcludedAttributes>,
     RequiresIdProps,
     ThemeProps,
-    ValidityProps
+    ValidityProps,
+    RefForwardingProps<HTMLInputElement>
 {
     defaultValue?: TextInputInheritedProps["value"],
     helperText?: React.ReactNode,

diff --git a/types/carbon-components-react/typings/shared.d.ts b/types/carbon-components-react/typings/shared.d.ts
@@ -71,3 +71,7 @@ export interface SideNavSharedProps {
 export interface SideNavSizingProps {
     large?: boolean;
 }
+
+export interface RefForwardingProps<T = HTMLElement> {
+    ref?: React.RefObject<T>;
+}