Refs for Input components (#677)

* Forward ref for number input

* Forward ref when injecting icon

Author: YoussefHenna

packages/core/src/components/NumberInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { TextInput } from "react-native";
 import { isString, isNumber, isNaN } from "lodash";
 
@@ -8,68 +8,67 @@ interface Props {
   onChangeText?: (value?: number) => void;
 }
 
-const NumberInput: FC<Props> = ({
-  onChangeText,
-  value,
-  defaultValue,
-  ...props
-}) => {
-  const [currentStringNumberValue, setCurrentStringNumberValue] = useState("");
+const NumberInput = React.forwardRef<TextInput, Props>(
+  ({ onChangeText, value, defaultValue, ...props }, ref) => {
+    const [currentStringNumberValue, setCurrentStringNumberValue] =
+      useState("");
 
-  const formatValueToStringNumber = (valueToFormat?: number | string) => {
-    if (valueToFormat != null) {
-      if (isString(valueToFormat) && valueToFormat !== "") {
-        if (/^0[1-9]$/.test(valueToFormat)) {
-          return valueToFormat.slice(1);
-        } else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
-          return valueToFormat;
-        } else {
-          return currentStringNumberValue;
+    const formatValueToStringNumber = (valueToFormat?: number | string) => {
+      if (valueToFormat != null) {
+        if (isString(valueToFormat) && valueToFormat !== "") {
+          if (/^0[1-9]$/.test(valueToFormat)) {
+            return valueToFormat.slice(1);
+          } else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
+            return valueToFormat;
+          } else {
+            return currentStringNumberValue;
+          }
+        } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
+          return valueToFormat.toString();
         }
-      } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
-        return valueToFormat.toString();
       }
-    }
 
-    return "";
-  };
+      return "";
+    };
 
-  const handleChangeText = (newValue: string) => {
-    const newStringNumberValue = formatValueToStringNumber(newValue);
-    const number = parseFloat(newStringNumberValue);
+    const handleChangeText = (newValue: string) => {
+      const newStringNumberValue = formatValueToStringNumber(newValue);
+      const number = parseFloat(newStringNumberValue);
 
-    setCurrentStringNumberValue(newStringNumberValue);
-    onChangeText?.(number);
-  };
+      setCurrentStringNumberValue(newStringNumberValue);
+      onChangeText?.(number);
+    };
 
-  // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
-  useEffect(() => {
-    const nextStringNumberValue = formatValueToStringNumber(value);
+    // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
+    useEffect(() => {
+      const nextStringNumberValue = formatValueToStringNumber(value);
 
-    if (currentStringNumberValue !== nextStringNumberValue) {
-      handleChangeText(nextStringNumberValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+      if (currentStringNumberValue !== nextStringNumberValue) {
+        handleChangeText(nextStringNumberValue);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
 
-  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-  useEffect(() => {
-    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+    useEffect(() => {
+      const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
 
-    if (currentStringNumberValue !== defaultStringNumberValue) {
-      setCurrentStringNumberValue(defaultStringNumberValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      if (currentStringNumberValue !== defaultStringNumberValue) {
+        setCurrentStringNumberValue(defaultStringNumberValue);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-  return (
-    <TextInput
-      keyboardType="numeric"
-      value={currentStringNumberValue}
-      onChangeText={handleChangeText}
-      {...props}
-    />
-  );
-};
+    return (
+      <TextInput
+        ref={ref}
+        keyboardType="numeric"
+        value={currentStringNumberValue}
+        onChangeText={handleChangeText}
+        {...props}
+      />
+    );
+  }
+);
 
 export default NumberInput;

packages/core/src/interfaces/Icon.ts

@@ -22,10 +22,10 @@ export interface IconSlot {
 
 type $Without<T, K> = Pick<T, Exclude<keyof T, K>>;
 
-export const injectIcon =
-  <P extends IconSlot>(
-    Component: React.ComponentType<P>,
-    Icon: IconI
-  ): React.FC<$Without<P, "Icon">> =>
-  (props) =>
-    React.createElement(Component, { ...(props as P), Icon });
+export const injectIcon = <P extends IconSlot>(
+  Component: React.ComponentType<P>,
+  Icon: IconI
+) =>
+  React.forwardRef<any, $Without<P, "Icon">>((props, ref) =>
+    React.createElement(Component, { ...(props as P), Icon, ref })
+  );

packages/ui/src/index.tsx

@@ -42,7 +42,6 @@ export {
   TableCell,
   SwipeableItemButton,
   SwipeableList,
-  /* Deprecated, needs fixing */
   ProgressBar,
   ProgressCircle,
   RowHeadlineImageCaption,