NumberInput - support theme and generify useThemeProps (#2370)

Author: M-i-k-e-l

src/commons/asBaseComponent.tsx

@@ -62,6 +62,7 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
         : Modifiers.generateModifiersStyle(options.modifiersOptions, themeProps);
       // TODO: omit original modifiers props (left, right, flex, etc..)
       // Because they throws an error when being passed to RNView on Android
+      // @ts-expect-error
       const {forwardedRef, ...others} = themeProps;
       return (
         (this.state.error && UIComponent.defaultProps?.renderError) || (

src/commons/modifiers.ts

@@ -333,7 +333,7 @@ export function extractComponentProps(component: any, props: Dictionary<any>, ig
 }
 
 //@ts-ignore
-export function getThemeProps(props = this.props, context = this.context, componentDisplayName = '') {
+export function getThemeProps<T extends object>(props: T = this.props, context = this.context, componentDisplayName = ''):T {
   const componentName =
     //@ts-ignore
     componentDisplayName || this.displayName || this.constructor.displayName || this.constructor.name;

src/components/avatar/index.tsx

@@ -301,9 +301,7 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
   }, [_baseContainerStyle, imageStyle]);
 
   const renderImage = () => {
-    const hasImage = !_.isUndefined(_source);
-
-    if (hasImage) {
+    if (_source !== undefined) {
       // Looks like reanimated does not support SVG
       const ImageContainer = animate && !isSvg(_source) ? AnimatedImage : Image;
       return (

src/components/numberInput/index.tsx

@@ -1,7 +1,7 @@
 import {isEmpty} from 'lodash';
 import React, {useMemo, useCallback, useState, useEffect} from 'react';
 import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
-import {useDidUpdate} from 'hooks';
+import {useDidUpdate, useThemeProps} from 'hooks';
 import TextField, {TextFieldProps} from '../../incubator/TextField';
 import Text from '../text';
 import {getInitialData, parseInput, generateOptions, Options, NumberInputData} from './Presenter';
@@ -47,6 +47,7 @@ export type NumberInputProps = React.PropsWithRef<
 };
 
 function NumberInput(props: NumberInputProps, ref: any) {
+  const themeProps = useThemeProps(props, 'NumberInput');
   const {
     onChangeNumber,
     initialNumber,
@@ -60,7 +61,7 @@ function NumberInput(props: NumberInputProps, ref: any) {
     trailingTextStyle,
     placeholder,
     ...others
-  } = props;
+  } = themeProps;
   const [options, setOptions] = useState<Options>(generateOptions(locale, fractionDigits));
   const [data, setData] = useState<NumberInputData>();
 

src/components/picker/index.tsx

@@ -279,6 +279,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         disabled={themeProps.editable === false}
       >
         {renderPicker ? (
+          // @ts-expect-error - hopefully will be solved after the picker migration ends
           renderPicker(value, label)
         ) : (
           <TextFieldMigrator

src/hooks/useThemeProps/index.ts

@@ -5,7 +5,7 @@ import {ThemeManager} from 'style';
 
 const EmptyContext = createContext({});
 
-const useThemeProps = (props: any, componentName: string) => {
+const useThemeProps = <T extends object>(props: T, componentName: string) => {
   // Note: This adds a dependency on current color scheme and update theme props accordingly
   useColorScheme();
   const themeContext = ThemeManager.getThemeContext();