Merge pull request #4912 from GeekyAnts/fix/platform-typing-3.3

Fix/platform typing 3.3

Author: surajahmed

example/storybook/stories/components/composites/Alert/knobEnabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Box, CloseIcon, IconButton } from 'native-base';
+import { Alert, Box, CloseIcon, IconButton, Text } from 'native-base';
 import { select } from '@storybook/addon-knobs';
 
 export const Example = () => {
@@ -21,8 +21,8 @@ export const Example = () => {
         actionProps={{ alignSelf: 'center' }}
       >
         <Alert.Icon />
-        <Alert.Title>Error Alert</Alert.Title>
-        <Alert.Description>Description </Alert.Description>
+        <Text>Error Alert</Text>
+        <Text>Description </Text>
       </Alert>
     </Box>
   );

src/components/basic/FlatList/types.ts

@@ -1,6 +1,7 @@
 import type { StyledProps } from '../../../theme/types';
 import type { FlatListProps } from 'react-native';
 import type { CustomProps, PlatformProps } from '../../types';
+import type { MutableRefObject } from 'react';
 
 export interface InterfaceFlatListProps<ItemT>
   extends FlatListProps<ItemT>,
@@ -10,6 +11,7 @@ export interface InterfaceFlatListProps<ItemT>
    * pass props to contentContainerStyle, and this also resolved NB tokens.
    */
   _contentContainerStyle?: Partial<IFlatListProps<ItemT>>;
+  ref?: MutableRefObject<any>;
 }
 
 export type IFlatListProps<ItemT> = InterfaceFlatListProps<ItemT> &

src/components/basic/SectionList/types.ts

@@ -1,14 +1,17 @@
 import type { StyledProps } from '../../../theme/types';
 import type { SectionListProps } from 'react-native';
 import type { CustomProps, PlatformProps } from '../../types';
+import type { MutableRefObject } from 'react';
 type DefaultSectionT = {
   [key: string]: any;
 };
 // TODO: any need to fixed
 export interface InterfaceSectionListProps<ItemT, sectionT = DefaultSectionT>
   extends SectionListProps<ItemT, sectionT>,
     StyledProps,
-    PlatformProps<ISectionListProps<ItemT, sectionT>> {}
+    PlatformProps<ISectionListProps<ItemT, sectionT>> {
+  ref?: MutableRefObject<any>;
+}
 
 export type ISectionListProps<
   ItemT,

src/components/composites/AlertDialog/AlertDialog.tsx

@@ -68,6 +68,7 @@ const AlertDialog = (
       onRequestClose={handleClose}
       isKeyboardDismissable={isKeyboardDismissable}
       useRNModalOnAndroid
+      unmountOnExit
     >
       <AlertDialogContext.Provider
         value={{

src/components/composites/AlertDialog/types.ts

@@ -1,9 +1,10 @@
-import type { IBoxProps } from '../../primitives/Box';
+import type { IBoxProps, InterfaceBoxProps } from '../../primitives/Box';
 import type { IIconButtonProps } from '../IconButton';
 import type { MutableRefObject } from 'react';
 import type { CustomProps } from '../../../components/types/utils';
 
-export interface InterfaceAlertDialogProps extends IBoxProps {
+export interface InterfaceAlertDialogProps
+  extends InterfaceBoxProps<IAlertDialogProps> {
   /**
    * If true, the AlertDialog will open. Useful for controllable state behaviour
    */

src/components/composites/IconButton/types.ts

@@ -2,9 +2,13 @@ import type { InterfacePressableProps } from '../../primitives/Pressable/types';
 import type { IIconProps } from '../../primitives/Icon';
 import type { CustomProps, ResponsiveValue, VariantType } from '../../types';
 import type { ISizes } from '../../../theme/base/sizes';
+import type { PlatformProps } from '../../../components/types';
 
 export interface InterfaceIconButtonProps
-  extends Omit<InterfacePressableProps, 'children' | 'color'>,
+  extends Omit<
+      InterfacePressableProps,
+      'children' | 'color' | '_light' | '_dark' | '_web' | '_android' | '_ios'
+    >,
     Omit<
       IIconProps,
       | 'delayLongPress'
@@ -21,7 +25,8 @@ export interface InterfaceIconButtonProps
       | '_web'
       | '_android'
       | '_ios'
-    > {
+    >,
+    PlatformProps<IIconButtonProps> {
   /**
    * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
    * @default 'primary'

src/components/primitives/Icon/types.ts

@@ -10,7 +10,7 @@ import type { CustomProps, ThemeComponentSizeType } from '../../types/utils';
 export interface InterfaceIconProps
   extends Omit<
       SvgProps,
-      'opacity' | 'fill' | 'stroke' | 'height' | 'width' | 'transform' | 'color'
+      'opacity' | 'stroke' | 'height' | 'width' | 'transform' | 'color'
     >,
     StyledProps,
     PlatformProps<IIconProps> {

src/components/primitives/Input/types.ts

@@ -5,14 +5,17 @@ import type { InterfaceBoxProps } from '../Box';
 import type { ResponsiveValue } from '../../../components/types';
 import type { ISizes } from '../../../theme/base/sizes';
 import type {
+  ColorType,
   CustomProps,
   ThemeComponentSizeType,
   VariantType,
 } from '../../../components/types/utils';
 // import type { MutableRefObject } from 'react';
+import type { IStackProps } from '../Stack/Stack';
+import type { MutableRefObject } from 'react';
 
 export interface InterfaceInputProps
-  extends PlatformProps<any>,
+  extends PlatformProps<IInputProps>,
     Omit<TextInputProps, 'textAlign'>,
     StyledProps {
   /**
@@ -98,9 +101,24 @@ export interface InterfaceInputProps
    * Passed props will be applied on invalid state.
    */
   _invalid?: Partial<IInputProps>;
-  // These porps are currently on hold
-  // label?: string;
-  // _label?: ITextProps;
+  /**
+   * props are passed to InputBase component
+   */
+  _input?: Partial<IInputProps>;
+  /**
+   * Props to be passed to the Stack used inside.
+   */
+  _stack?: Partial<IStackProps>;
+  /**
+   * This prop allow you to change outlineColor when input is in focused state
+   */
+  focusOutlineColor?: ColorType;
+  /**
+   *  This prop allow you to change outlineColor when input is in focused state
+   */
+  inValidOutlineColor?: ColorType;
+
+  ref?: MutableRefObject<any>;
 }
 
 export interface IInputGroupProps extends InterfaceBoxProps<IInputGroupProps> {

src/components/primitives/Radio/types.tsx

@@ -100,6 +100,8 @@ export interface InterfaceRadioProps extends InterfaceBoxProps<IRadioProps> {
    * You can style interaction box around the checkbox using this.
    */
   _interactionBox?: Omit<Partial<IRadioProps>, '_interactionBox'>;
+
+  ref?: MutableRefObject<any>;
 }
 export interface IRadioGroupProps extends IBoxProps<IRadioGroupProps> {
   /**

src/components/primitives/TextArea/index.tsx

@@ -3,7 +3,13 @@ import { Input } from '../Input';
 import type { InterfaceInputProps } from '../Input/types';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
-export interface ITextAreaProps extends InterfaceInputProps {
+import type { PlatformProps } from '../../../components/types';
+export interface ITextAreaProps
+  extends Omit<
+      InterfaceInputProps,
+      '_web' | '_android' | '_ios' | '_light' | '_dark'
+    >,
+    PlatformProps<ITextAreaProps> {
   /**
    * Maps to react-native TextInput's numberOfLines.
    */