Removed ts-ignore from various components (react-native-elements#2905)

* Fixed ts-ignore issue resulted from theme prop * Changed import/export and a small fix * Added theme prop to index.ts
tt0mmy · Mar 24, 2021 · 661a3c8 · 661a3c8
1 parent 6eaaf79
commit 661a3c8
Show file tree

Hide file tree

Showing 17 changed files with 68 additions and 55 deletions.
diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
@@ -9,7 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { withTheme } from '../config';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 import { renderNode } from '../helpers';
 
 export type BadgeProps = {
@@ -20,11 +20,12 @@ export type BadgeProps = {
   value?: React.ReactNode;
   onPress?: (...args: any[]) => any;
   Component?: typeof React.Component;
-  theme?: Theme;
   status?: 'primary' | 'success' | 'warning' | 'error';
 };
 
-const Badge: React.FunctionComponent<BadgeProps> = (props) => {
+const Badge: React.FunctionComponent<BadgeProps & ThemeProps<BadgeProps>> = (
+  props
+) => {
   const {
     containerStyle,
     textStyle,

diff --git a/src/buttons/Button.tsx b/src/buttons/Button.tsx
@@ -20,6 +20,7 @@ import { renderNode, color } from '../helpers';
 import Icon, { IconNode } from '../icons/Icon';
 import { Theme } from '../config/theme';
 import { TextProps } from '../text/Text';
+import { ThemeProps } from '../config';
 
 const defaultLoadingProps = (
   type: 'solid' | 'clear' | 'outline',
@@ -50,10 +51,11 @@ export type ButtonProps = TouchableOpacityProps &
     disabledStyle?: StyleProp<ViewStyle>;
     disabledTitleStyle?: StyleProp<TextStyle>;
     raised?: boolean;
-    theme?: Theme;
   };
 
-const Button: React.FunctionComponent<ButtonProps> = (props: ButtonProps) => {
+const Button: React.FunctionComponent<ButtonProps & ThemeProps<ButtonProps>> = (
+  props: ButtonProps & ThemeProps<ButtonProps>
+) => {
   useEffect(() => {
     if (props.linearGradientProps && !props.ViewComponent) {
       console.error(

diff --git a/src/buttons/ButtonGroup.tsx b/src/buttons/ButtonGroup.tsx
@@ -10,7 +10,7 @@ import {
   TextStyle,
 } from 'react-native';
 import { withTheme } from '../config';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 import { normalizeText, color } from '../helpers';
 import Text from '../text/Text';
 
@@ -37,7 +37,6 @@ export type ButtonGroupProps = {
   buttonStyle?: StyleProp<ViewStyle>;
   buttonContainerStyle?: StyleProp<ViewStyle>;
   selectMultiple?: boolean;
-  theme?: Theme;
   disabled?: boolean | number[];
   disabledStyle?: StyleProp<ViewStyle>;
   disabledTextStyle?: StyleProp<TextStyle>;
@@ -46,7 +45,9 @@ export type ButtonGroupProps = {
   vertical?: boolean;
 };
 
-const ButtonGroup: React.FunctionComponent<ButtonGroupProps> = (props) => {
+const ButtonGroup: React.FunctionComponent<
+  ButtonGroupProps & ThemeProps<ButtonGroupProps>
+> = (props) => {
   const { theme, ...rest } = props;
   const {
     Component = Platform.select<typeof React.Component>({

diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -6,15 +6,15 @@ import CardDivider from './CardDivider';
 import CardImage from './CardImage';
 import CardFeaturedTitle from './CardFeaturedTitle';
 import CardFeaturedSubtitle from './CardFeaturedSubtitle';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 
 export type CardProps = {
   containerStyle?: StyleProp<ViewStyle>;
   wrapperStyle?: StyleProp<ViewStyle>;
-  theme?: Theme;
 };
 
-interface Card extends React.FunctionComponent<CardProps> {}
+interface Card
+  extends React.FunctionComponent<CardProps & ThemeProps<CardProps>> {}
 
 const Card: Card = (props) => {
   const {

diff --git a/src/checkbox/CheckBoxIcon.tsx b/src/checkbox/CheckBoxIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 import getIconType from '../helpers/getIconType';
 import { IconType } from '../icons/Icon';
 
@@ -13,10 +13,11 @@ export type CheckBoxIconProps = {
   iconType?: IconType;
   checkedColor?: string;
   uncheckedColor?: string;
-  theme?: Theme;
 };
 
-const CheckBoxIcon: React.FunctionComponent<CheckBoxIconProps> = ({
+const CheckBoxIcon: React.FunctionComponent<
+  CheckBoxIconProps & ThemeProps<CheckBoxIconProps>
+> = ({
   checked,
   onIconPress,
   onLongIconPress,

diff --git a/src/config/index.tsx b/src/config/index.tsx
@@ -2,7 +2,11 @@ import BackgroundImage from './BackgroundImage';
 import colors from './colors';
 import colorsDark from './colorsDark';
 import fonts from './fonts';
-import ThemeProvider, { ThemeConsumer, ThemeContext } from './ThemeProvider';
+import ThemeProvider, {
+  ThemeConsumer,
+  ThemeContext,
+  ThemeProps,
+} from './ThemeProvider';
 import withTheme from './withTheme';
 import { makeStyles, useTheme } from './makeStyles';
 import { Theme, FullTheme, UpdateTheme, ReplaceTheme } from './theme';
@@ -20,4 +24,4 @@ export {
   makeStyles,
 };
 
-export type { Theme, FullTheme, UpdateTheme, ReplaceTheme };
+export type { Theme, FullTheme, UpdateTheme, ReplaceTheme, ThemeProps };
diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx
@@ -1,18 +1,15 @@
 import React from 'react';
 import { View, StyleSheet, ViewProps } from 'react-native';
 import { withTheme } from '../config';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 
 export type DividerProps = ViewProps & {
   style?: object | any[];
-  theme?: Theme;
 };
 
-const Divider: React.FunctionComponent<DividerProps> = ({
-  style,
-  theme,
-  ...rest
-}) => (
+const Divider: React.FunctionComponent<
+  DividerProps & ThemeProps<DividerProps>
+> = ({ style, theme, ...rest }) => (
   <View
     style={StyleSheet.flatten([
       {

diff --git a/src/header/Header.tsx b/src/header/Header.tsx
@@ -22,7 +22,7 @@ import { renderNode } from '../helpers';
 
 import Text from '../text/Text';
 import Icon, { IconObject } from '../icons/Icon';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 
 type Placement = 'left' | 'center' | 'right';
 
@@ -84,12 +84,13 @@ export type HeaderProps = ViewProps & {
   centerContainerStyle?: StyleProp<ViewStyle>;
   leftContainerStyle?: StyleProp<ViewStyle>;
   rightContainerStyle?: StyleProp<ViewStyle>;
-  theme?: Theme;
   children?: JSX.Element[];
   elevated: boolean;
 };
 
-const Header: React.FunctionComponent<HeaderProps> = (props: HeaderProps) => {
+const Header: React.FunctionComponent<HeaderProps & ThemeProps<HeaderProps>> = (
+  props: HeaderProps & ThemeProps<HeaderProps>
+) => {
   React.useEffect(() => {
     const { linearGradientProps, ViewComponent } = props;
     if (linearGradientProps && !ViewComponent) {

diff --git a/src/icons/Icon.tsx b/src/icons/Icon.tsx
@@ -18,7 +18,7 @@ import Color from 'color';
 import getIconType from '../helpers/getIconType';
 import getIconStyle from '../helpers/getIconStyle';
 import { withTheme } from '../config';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 
 export type IconType =
   | 'material'
@@ -57,10 +57,11 @@ export type IconProps = IconButtonProps & {
   disabledStyle?: StyleProp<ViewStyle>;
   solid?: boolean;
   brand?: boolean;
-  theme?: Theme;
 };
 
-const Icon: React.FunctionComponent<IconProps> = (props) => {
+const Icon: React.FunctionComponent<IconProps & ThemeProps<IconProps>> = (
+  props
+) => {
   const {
     type = 'material',
     name,

diff --git a/src/image/Image.tsx b/src/image/Image.tsx
@@ -10,6 +10,7 @@ import {
   StyleProp,
 } from 'react-native';
 import { withTheme } from '../config';
+import { ThemeProps } from '../config';
 
 export type ImageProps = RNImageProps & {
   Component?: typeof React.Component;
@@ -27,7 +28,10 @@ type ImageState = {
   placeholderOpacity: Animated.Value;
 };
 
-class Image extends React.Component<ImageProps, ImageState> {
+class Image extends React.Component<
+  ImageProps & ThemeProps<ImageProps>,
+  ImageState
+> {
   static getSize = ImageNative.getSize;
   static getSizeWithHeaders = ImageNative.getSizeWithHeaders;
   static prefetch = ImageNative.prefetch;
@@ -143,5 +147,4 @@ const styles = StyleSheet.create({
 });
 
 export { Image };
-//@ts-ignore
 export default withTheme(Image, 'Image');
diff --git a/src/index.ts b/src/index.ts
@@ -54,13 +54,12 @@ import {
   ReplaceTheme,
   FullTheme,
   Theme,
+  ThemeProps,
 } from './config';
 import getIconType, { registerCustomIconType } from './helpers/getIconType';
 import normalize from './helpers/normalizeText';
 
-//@ts-ignore
 const AirbnbRating = withTheme(BaseAirbnbRating, 'AirbnbRating');
-//@ts-ignore
 const Rating = withTheme(BaseRating, 'Rating');
 
 export {
@@ -138,4 +137,5 @@ export type {
   Theme,
   LinearProgressProps,
   FABProps,
+  ThemeProps,
 };
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -15,8 +15,7 @@ import {
 import { renderNode, patchWebProps } from '../helpers';
 import { fonts, withTheme } from '../config';
 import Icon from '../icons/Icon';
-import { Theme } from '../config/theme';
-
+import { ThemeProps } from '../config';
 const renderText = (content, defaultProps, style) =>
   renderNode(Text, content, {
     ...defaultProps,
@@ -40,11 +39,10 @@ export type InputProps = TextInputProps & {
   label?: React.ReactNode;
   labelStyle?: object | any[];
   labelProps?: object;
-  theme?: Theme;
   renderErrorMessage?: boolean;
 };
 
-class Input extends React.Component<InputProps> {
+class Input extends React.Component<InputProps & ThemeProps<InputProps>> {
   input: any;
   shakeAnimationValue = new Animated.Value(0);
 
@@ -231,5 +229,4 @@ const styles = StyleSheet.create({
 });
 
 export { Input };
-//@ts-ignore
 export default withTheme(Input, 'Input');
diff --git a/src/list/ListItem.tsx b/src/list/ListItem.tsx
@@ -18,7 +18,7 @@ import ListItemCheckBox from './ListItemCheckBox';
 import ListItemButtonGroup from './ListItemButtonGroup';
 import ListItemTitle from './ListItemTitle';
 import ListItemSubtitle from './ListItemSubtitle';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 
 export type ListItemProps = TouchableHighlightProps & {
   containerStyle?: StyleProp<ViewStyle>;
@@ -29,11 +29,11 @@ export type ListItemProps = TouchableHighlightProps & {
   Component?: typeof React.Component;
   ViewComponent?: typeof React.Component;
   linearGradientProps?: any;
-  theme?: Theme;
   children?: any;
 };
 
-interface ListItem extends React.FunctionComponent<ListItemProps> {
+interface ListItem
+  extends React.FunctionComponent<ListItemProps & ThemeProps<ListItemProps>> {
   Chevron: typeof ListItemChevron;
   Content: typeof ListItemContent;
   Input: typeof ListItemInput;

diff --git a/src/pricing/PricingCard.tsx b/src/pricing/PricingCard.tsx
@@ -12,7 +12,7 @@ import { fonts, withTheme } from '../config';
 import Text from '../text/Text';
 import Button from '../buttons/Button';
 import Icon from '../icons/Icon';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 
 type ButtonInformation = {
   title: string;
@@ -33,10 +33,11 @@ export type PricingCardProps = {
   titleStyle?: StyleProp<TextStyle>;
   pricingStyle?: StyleProp<TextStyle>;
   infoStyle?: StyleProp<TextStyle>;
-  theme?: Theme;
 };
 
-const PricingCard: React.FunctionComponent<PricingCardProps> = (props) => {
+const PricingCard: React.FunctionComponent<
+  PricingCardProps & ThemeProps<PricingCardProps>
+> = (props) => {
   const { theme, ...rest } = props;
   const {
     containerStyle,

diff --git a/src/searchbar/SearchBar.tsx b/src/searchbar/SearchBar.tsx
@@ -10,7 +10,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import { IconNode } from '../icons/Icon';
-import { Theme } from '../config/theme';
+import { ThemeProps } from '../config';
 
 const SEARCHBAR_COMPONENTS = {
   ios: IOSSearchBar,
@@ -34,18 +34,19 @@ export type SearchBarBaseProps = {
   onBlur?(): void;
   onChangeText?(text: string): void;
   onCancel?(): void;
-  theme?: Theme;
 };
 
 export type SearchBarProps = SearchBarBaseProps &
   SearchBarDefaultProps &
   SearchBarAndroidProps &
   SearchBarIosProps;
 
-class SearchBar extends React.Component<SearchBarBaseProps> {
+class SearchBar extends React.Component<
+  SearchBarBaseProps & ThemeProps<SearchBarBaseProps>
+> {
   searchbar!: IOSSearchBar;
   static defaultProps = {
-    platform: 'default',
+    platform: 'default' as const,
   };
 
   focus = () => {
@@ -81,5 +82,4 @@ class SearchBar extends React.Component<SearchBarBaseProps> {
 }
 
 export { SearchBar };
-//@ts-ignore
 export default withTheme(SearchBar, 'SearchBar');
diff --git a/src/text/Text.tsx b/src/text/Text.tsx
@@ -8,9 +8,9 @@ import {
   StyleProp,
 } from 'react-native';
 import { fonts, withTheme } from '../config';
-import { Theme } from '../config/theme';
 import { patchWebProps } from '../helpers';
 import normalize from '../helpers/normalizeText';
+import { ThemeProps } from '../config';
 
 export type TextProps = TextProperties & {
   style?: StyleProp<TextStyle>;
@@ -22,10 +22,11 @@ export type TextProps = TextProperties & {
   h2Style?: StyleProp<TextStyle>;
   h3Style?: StyleProp<TextStyle>;
   h4Style?: StyleProp<TextStyle>;
-  theme?: Theme;
 };
 
-const TextElement: React.FunctionComponent<TextProps> = (props) => {
+const TextElement: React.FunctionComponent<
+  TextProps & ThemeProps<TextProps & ThemeProps<TextProps>>
+> = (props) => {
   const {
     style,
     theme,