refactor: removed deprecated defaultProps

darleikroth · Jun 18, 2024 · 9e30cea · 9e30cea
1 parent 4c4d830
commit 9e30cea
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 79 deletions.
diff --git a/src/ListItem/Divider.tsx b/src/ListItem/Divider.tsx
@@ -6,17 +6,12 @@ type Props = {
   height?: number;
 };
 
-export const Divider: React.FC<Props> = (props) => {
+export const Divider = (props: Props) => {
   const style: ViewStyle = {
-    backgroundColor: props.color,
-    height: props.height,
+    backgroundColor: props.color || "#bbb",
+    height: props.height || StyleSheet.hairlineWidth,
   };
   return <View style={style} />;
 };
 
-Divider.defaultProps = {
-  color: "#bbb",
-  height: StyleSheet.hairlineWidth,
-};
-
 export default Divider;
diff --git a/src/ListItem/Item.tsx b/src/ListItem/Item.tsx
@@ -89,7 +89,18 @@ type Props = {
   onLongPress?(): void;
 };
 
-export const Item: React.FC<Props> = (props) => {
+export const Item = (props: Props) => {
+  const computedProps = React.useMemo(() => {
+    return {
+      ...props,
+      activeOpacity: props.activeOpacity ?? 0.4,
+      titleNumberOfLines: props.titleNumberOfLines ?? 1,
+      subtitleNumberOfLines: props.subtitleNumberOfLines ?? 1,
+      touchDisabled: props.touchDisabled ?? false,
+      divider: props.divider ?? false,
+    };
+  }, [props]);
+
   const {
     activeOpacity,
     containerStyle,
@@ -108,7 +119,8 @@ export const Item: React.FC<Props> = (props) => {
     titleStyle,
     onPress,
     onLongPress,
-  } = props;
+  } = computedProps;
+
   const titleContainerStyle: ViewStyle = {
     marginRight: !iconRight ? 16 : 54,
     marginLeft: !iconLeft ? 16 : 72,
@@ -121,7 +133,7 @@ export const Item: React.FC<Props> = (props) => {
         <Pressable
           android_disableSound
           onPress={onPress}
-          disabled={props.touchDisabled}
+          disabled={computedProps.touchDisabled}
           onLongPress={onLongPress}
           style={({ pressed }) => [
             styles.content,
@@ -185,14 +197,6 @@ export const Item: React.FC<Props> = (props) => {
   );
 };
 
-Item.defaultProps = {
-  activeOpacity: 0.4,
-  divider: false,
-  subtitleNumberOfLines: 1,
-  titleNumberOfLines: 1,
-  touchDisabled: false,
-};
-
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",

diff --git a/src/ListItem/SimpleItem.tsx b/src/ListItem/SimpleItem.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import {
   Pressable,
-  type StyleProp,
   StyleSheet,
   Text,
-  type TextStyle,
   View,
+  type StyleProp,
+  type TextStyle,
   type ViewStyle,
 } from "react-native";
 
@@ -28,12 +28,17 @@ type Props = {
   right?(): JSX.Element | undefined;
 };
 
-export const SimpleItem: React.FC<Props> = (props) => {
+export const SimpleItem = (props: Props) => {
+
+  const activeOpacity = props.activeOpacity ?? 0.4;
+  const titleNumberOfLines = props.titleNumberOfLines ?? 1;
+  const touchDisabled = props.touchDisabled ?? false;
+
   const renderContent = () => (
     <>
       <View style={styles.flexContent}>
         <Text
-          numberOfLines={props.titleNumberOfLines}
+          numberOfLines={titleNumberOfLines}
           style={[styles.title, props.titleStyle]}
         >
           {props.title}
@@ -58,13 +63,13 @@ export const SimpleItem: React.FC<Props> = (props) => {
   return (
     <Pressable
       android_disableSound
-      disabled={props.touchDisabled}
+      disabled={touchDisabled}
       onPress={props.onPress}
       onLongPress={props.onLongPress}
       style={({ pressed }) => [
         styles.container,
         props.containerStyle,
-        { opacity: pressed ? props.activeOpacity : 1 },
+        { opacity: pressed ? activeOpacity : 1 },
       ]}
     >
       <View style={[styles.content, props.contentStyle]}>
@@ -74,12 +79,6 @@ export const SimpleItem: React.FC<Props> = (props) => {
   );
 };
 
-SimpleItem.defaultProps = {
-  activeOpacity: 0.4,
-  titleNumberOfLines: 1,
-  touchDisabled: false,
-};
-
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",

diff --git a/src/Toolbar/Button.tsx b/src/Toolbar/Button.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type PropsWithChildren } from "react";
 import {
   Pressable,
   type StyleProp,
@@ -7,7 +7,7 @@ import {
   type ViewStyle,
 } from "react-native";
 
-interface Props {
+type Props = {
   /**
    * Background color ripple for Android
    */
@@ -20,19 +20,15 @@ interface Props {
    * Define de container style
    */
   style?: StyleProp<ViewStyle>;
-  /**
-   * An image or icon element
-   */
-  children: JSX.Element;
   /**
    * Called when the touch is released
    */
   onPress?(): void;
 }
 
-export const Button: React.FC<Props> = (props) => (
+export const Button = (props: PropsWithChildren<Props>) => (
   <Pressable
-    disabled={props.touchDisabled}
+    disabled={props.touchDisabled ?? false}
     onPress={props.onPress}
     style={({ pressed }) => [
       styles.iconButtonHeader,
@@ -46,10 +42,6 @@ export const Button: React.FC<Props> = (props) => (
   </Pressable>
 );
 
-Button.defaultProps = {
-  touchDisabled: false,
-};
-
 const styles = StyleSheet.create({
   iconButtonHeader: {
     width: 40,

diff --git a/src/Toolbar/SearchViewAndroid.tsx b/src/Toolbar/SearchViewAndroid.tsx
@@ -60,18 +60,30 @@ interface Props extends SearchAndroidProps {
   toggleSearchable(): void;
 }
 
-export const SearchAndroid: React.FC<Props> = (props) => {
+export const SearchAndroid = (props: Props) => {
+  const computedProps = React.useMemo(() => {
+    return {
+      ...props,
+      tintColor: props.tintColor || "white",
+      iconColor: props.iconColor || "white",
+      underlayColor: props.underlayColor || "rgba(0, 0, 0, 0.1)",
+      hasHeaderLeft: props.hasHeaderLeft ?? true,
+      hasHeaderRight: props.hasHeaderRight ?? true,
+      title: props.title || "Title",
+    };
+  }, [props]);
+
   const actionButtonStyle = React.useMemo<ViewStyle>(() => ({
     position: "absolute",
     right: 0,
-    marginRight: props.hasHeaderRight ? -22 : -18,
-  }), [props.hasHeaderRight]);
+    marginRight: computedProps.hasHeaderRight ? -22 : -18,
+  }), [computedProps.hasHeaderRight]);
 
   const renderTitle = () => {
-    const { title, tintColor, titleStyle, placeholder } = props;
+    const { title, tintColor, titleStyle, placeholder } = computedProps;
     const inputStyle: TextStyle = { color: tintColor, width: "100%" };
 
-    if (!props.isSearchable) {
+    if (!computedProps.isSearchable) {
       return (
         <Text style={[styles.title, { color: tintColor }, titleStyle]}>
           {title}
@@ -89,34 +101,34 @@ export const SearchAndroid: React.FC<Props> = (props) => {
         autoCorrect={false}
         autoFocus
         maxLength={100}
-        onChangeText={props.onChangeText}
+        onChangeText={computedProps.onChangeText}
         placeholder={hint}
         placeholderTextColor={`${Color(tintColor).fade(0.46)}`}
         returnKeyType="done"
         selectTextOnFocus
         style={[styles.input, inputStyle]}
         underlineColorAndroid="transparent"
-        value={props.text}
+        value={computedProps.text}
       />
     );
   };
 
   const renderSearchButton = () => {
-    const search = props.isSearchable;
-    const iconColor = props.iconColor;
+    const search = computedProps.isSearchable;
+    const iconColor = computedProps.iconColor;
 
     return (
       <ActionButton
-        background={props.underlayColor}
-        onPress={props.toggleSearchable}
+        background={computedProps.underlayColor}
+        onPress={computedProps.toggleSearchable}
         style={actionButtonStyle}
       >
         <Icon name={search ? "close" : "magnify"} color={iconColor} size={24} />
       </ActionButton>
     );
   };
 
-  const style = props.hasHeaderRight ? { marginRight: 48 } : undefined;
+  const style = computedProps.hasHeaderRight ? { marginRight: 48 } : undefined;
 
   return (
     <View style={[styles.container, style]}>
@@ -126,14 +138,6 @@ export const SearchAndroid: React.FC<Props> = (props) => {
   );
 };
 
-SearchAndroid.defaultProps = {
-  title: "Title",
-  tintColor: "white",
-  iconColor: "white",
-  hasHeaderLeft: false,
-  hasHeaderRight: false,
-};
-
 const styles = StyleSheet.create({
   container: {
     alignItems: "center",

diff --git a/src/Toolbar/SearchViewIOS.tsx b/src/Toolbar/SearchViewIOS.tsx
@@ -51,15 +51,19 @@ interface Props extends SearchIOSProps {
   toggleSearchable(): void;
 }
 
-export const SearchIOS: React.FC<Props> = (props) => {
+export const SearchIOS = (props: Props) => {
+  const computedTitle = props.title || "Title";
+  const computedTintColor = props.tintColor || "white";
+  const computedIconColor = props.iconColor || "white";
+
   const screen = useWindowDimensions();
   const searchWidth = screen.width - 90;
   const translateX = [{
     translateX: props.hasHeaderRight ? 0 : -35,
   }];
 
-  const placeholder = props.placeholder || props.title
-    ? `Buscar ${props.title.toLowerCase()}`
+  const placeholder = props.placeholder || computedTitle
+    ? `Buscar ${computedTitle.toLowerCase()}`
     : "pesquisar";
 
   const renderCloseButton = () => {
@@ -71,14 +75,14 @@ export const SearchIOS: React.FC<Props> = (props) => {
       <View style={[styles.iconButtonHeader]}>
         <Pressable onPress={props.toggleSearchable}>
           <View style={styles.iconHeader}>
-            <Icon name="close-outline" color={props.iconColor} size={24} />
+            <Icon name="close-outline" color={computedIconColor} size={24} />
           </View>
         </Pressable>
       </View>
     );
   };
 
-  const backgroundColor = `${Color(props.tintColor).fade(0.88)}`;
+  const backgroundColor = `${Color(computedTintColor).fade(0.88)}`;
 
   if (!props.isSearchable) {
     return (
@@ -93,11 +97,11 @@ export const SearchIOS: React.FC<Props> = (props) => {
             },
           ]}
         >
-          <Icon name="search-outline" color={props.tintColor} size={19} />
+          <Icon name="search-outline" color={computedTintColor} size={19} />
           <Text
-            style={[styles.title, { color: props.tintColor }, props.titleStyle]}
+            style={[styles.title, { color: computedTintColor }, props.titleStyle]}
           >
-            {`Buscar ${props.title.toLowerCase()}`}
+            {`Buscar ${computedTitle.toLowerCase()}`}
           </Text>
         </View>
       </Pressable>
@@ -122,14 +126,14 @@ export const SearchIOS: React.FC<Props> = (props) => {
         maxLength={100}
         onChangeText={props.onChangeText}
         placeholder={placeholder}
-        placeholderTextColor={`${Color(props.tintColor).fade(0.46)}`}
+        placeholderTextColor={`${Color(computedTintColor).fade(0.46)}`}
         returnKeyType="done"
         selectTextOnFocus
         underlineColorAndroid="transparent"
         value={props.text}
         style={[
           styles.input,
-          { color: props.tintColor, width: screen.width - 110 },
+          { color: computedTintColor, width: screen.width - 110 },
         ]}
       />
 
@@ -138,12 +142,6 @@ export const SearchIOS: React.FC<Props> = (props) => {
   );
 };
 
-SearchIOS.defaultProps = {
-  title: "Title",
-  tintColor: "white",
-  iconColor: "white",
-};
-
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",