fix: remove redundant theme prop

Roqay · Sep 4, 2022 · e3133f7 · e3133f7
1 parent 5033fe5
commit e3133f7
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 22 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -174,7 +174,6 @@ const Button = (props: PropsWithTheme): React.ReactElement => {
         disabled={disabled}
         rippleColor={rippleColor}
         underlayColor={rippleColor}
-        theme={theme}
       >
         <View
           style={[

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
@@ -107,7 +107,6 @@ const Checkbox = (props: PropsWithTheme): React.ReactElement => {
         disabled={disabled}
         rippleColor={rippleColor}
         underlayColor={rippleColor}
-        theme={theme}
       >
         <View
           style={[
@@ -131,7 +130,6 @@ const Checkbox = (props: PropsWithTheme): React.ReactElement => {
             color={notNullCheckedColor}
             uncheckedColor={uncheckedColor}
             disabled={disabled}
-            theme={theme}
           />
           {Boolean(text) && Boolean(text?.length) && (
             <Text style={[styles.text, textStyle]} {...rest}>

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -151,7 +151,7 @@ class Dialog extends React.PureComponent<PropsWithTheme, State> {
       ];
 
       return (
-        <Portal theme={theme}>
+        <Portal>
           <Pressable
             style={overlayStyle}
             onPress={isDialogDismissable ? onDismiss : null}

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -158,7 +158,6 @@ const IconButton = (props: PropsWithTheme): React.ReactElement => {
         disabled={disabled}
         rippleColor={rippleColor}
         underlayColor={rippleColor}
-        theme={theme}
       >
         <View style={[styles.ripple, styles.rippleView]}>
           {getIcon({

diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
@@ -107,7 +107,6 @@ const RadioButton = (props: PropsWithTheme): React.ReactElement => {
         disabled={disabled}
         rippleColor={rippleColor}
         underlayColor={rippleColor}
-        theme={theme}
       >
         <View
           style={[
@@ -132,7 +131,6 @@ const RadioButton = (props: PropsWithTheme): React.ReactElement => {
             color={notNullCheckedColor}
             uncheckedColor={uncheckedColor}
             disabled={disabled}
-            theme={theme}
           />
           {Boolean(text) && Boolean(text?.length) && (
             <Text style={[styles.text, textStyle]} {...rest}>

diff --git a/src/components/SelectDialog.tsx b/src/components/SelectDialog.tsx
@@ -219,7 +219,6 @@ class SelectDialog extends React.PureComponent<PropsWithTheme, State> {
         value={searchText}
         onChangeText={this._onChangeTextSearchText}
         style={{ backgroundColor: theme.colors.surface }}
-        theme={theme}
       />
     );
   };

diff --git a/src/components/Text.tsx b/src/components/Text.tsx
@@ -71,7 +71,7 @@ const Text = (props: PropsWithTheme): React.ReactElement => {
 
     default:
       return (
-        <PaperText style={textStyle} theme={theme} {...other}>
+        <PaperText style={textStyle} {...other}>
           {children}
         </PaperText>
       );

diff --git a/src/components/TextInput/Props.tsx b/src/components/TextInput/Props.tsx
@@ -2,6 +2,7 @@
 import type { TextInputProps } from 'react-native-paper/lib/typescript/components/TextInput/TextInput';
 import type { Props as TextProps } from '../Text';
 import type SelectItem from '../../types/SelectItem';
+import type { Theme } from 'react-native-paper/lib/typescript/types';
 
 export interface SelectProps {
   mode?: 'dialog' | 'dropdown';
@@ -24,7 +25,7 @@ export interface TopLabelProps {
   textProps?: TextProps;
 }
 
-export default interface Props extends TextInputProps {
+export default interface Props extends Omit<TextInputProps, 'theme'> {
   style?: TextInputProps['style'] & { [key: string]: any };
   isRequired?: boolean;
   topLabelProps?: TopLabelProps;
@@ -33,3 +34,7 @@ export default interface Props extends TextInputProps {
   ref?: any;
   positiveNumbersOnly?: boolean;
 }
+
+export interface PropsWithTheme extends Props {
+  theme: Theme;
+}
diff --git a/src/components/TextInput/SelectInput.tsx b/src/components/TextInput/SelectInput.tsx
@@ -1,11 +1,16 @@
 // External imports.
 import React from 'react';
-import { TouchableRipple, Menu, TextInput } from 'react-native-paper';
+import {
+  withTheme,
+  TouchableRipple,
+  Menu,
+  TextInput,
+} from 'react-native-paper';
 import { View } from 'react-native';
 import { omit } from 'lodash';
 
 // Types imports.
-import type Props from './Props';
+import type { PropsWithTheme } from './Props';
 import type SelectItem from '../../types/SelectItem';
 
 // Internal imports.
@@ -22,11 +27,11 @@ interface State {
 }
 // #endregion
 
-export default class SelectInput extends React.PureComponent<Props, State> {
+class SelectInput extends React.PureComponent<PropsWithTheme, State> {
   // Variable for mount state.
   isComponentMounted: boolean = false;
 
-  constructor(props: Props) {
+  constructor(props: PropsWithTheme) {
     super(props);
 
     this.state = {
@@ -37,7 +42,7 @@ export default class SelectInput extends React.PureComponent<Props, State> {
   }
 
   // #region Lifecycle
-  static getDerivedStateFromProps(props: Props, state: State): State {
+  static getDerivedStateFromProps(props: PropsWithTheme, state: State): State {
     const selectedItems = props.selectProps?.selectedItems || [];
     let value = '';
 
@@ -169,16 +174,22 @@ export default class SelectInput extends React.PureComponent<Props, State> {
 
   _getInput = (): React.ReactElement => {
     const { value } = this.state;
-    const { right, theme, style, ...other } = this.props;
-    const inputProps = omit(other, ['selectProps', 'editable', 'value']);
+    const { right, style, ...other } = this.props;
+
+    const inputProps = omit(other, [
+      'selectProps',
+      'editable',
+      'value',
+      'theme',
+    ]);
 
     return (
       <DefaultInput
         editable={false}
         value={value}
         right={
           right == null || right === undefined ? (
-            <TextInput.Icon name="menu-down" theme={theme} />
+            <TextInput.Icon name="menu-down" />
           ) : (
             right
           )
@@ -192,7 +203,6 @@ export default class SelectInput extends React.PureComponent<Props, State> {
             'width',
           ]),
         ]}
-        theme={theme}
         {...inputProps}
       />
     );
@@ -216,7 +226,7 @@ export default class SelectInput extends React.PureComponent<Props, State> {
   };
 
   render(): React.ReactElement {
-    const { selectProps, editable, style, theme } = this.props;
+    const { selectProps, editable, style } = this.props;
     const { isSelectVisible } = this.state;
 
     const {
@@ -262,7 +272,6 @@ export default class SelectInput extends React.PureComponent<Props, State> {
                 visible={isSelectVisible}
                 onDismiss={this._dismissSelect}
                 anchor={this._getInput()}
-                theme={theme}
                 style={[
                   styles.noVerticalMargin,
                   {
@@ -296,3 +305,5 @@ export default class SelectInput extends React.PureComponent<Props, State> {
     );
   }
 }
+
+export default withTheme(SelectInput);
diff --git a/src/components/TextInput/index.tsx b/src/components/TextInput/index.tsx
@@ -5,6 +5,7 @@ import { set, omit } from 'lodash';
 
 // Types imports.
 import type Props from './Props';
+import type { PropsWithTheme } from './Props';
 
 // Internal imports.
 import Text from '../Text';
@@ -22,7 +23,7 @@ const getInput = (props: Props): React.ReactElement => {
   return <DefaultInput {...other} />;
 };
 
-const TextInput = (props: Props): React.ReactElement => {
+const TextInput = (props: PropsWithTheme): React.ReactElement => {
   const { topLabelProps, errorProps, theme } = props;
 
   const {