fix: remove deprecated use of defaultProps for Button, Card, Input, text (#83)

Co-authored-by: verestra <[email protected]>

Author: Verestra

src/Button.js

@@ -15,54 +15,49 @@ export const ButtonInstance = ({
   ...props
 }) => <Touchable {...props}>{children}</Touchable>;
 
-const Button = (props) => {
-  const {
-    disabled,
-    opacity,
-    outlined,
-    flex,
-    height,
-    width,
-    borderWidth,
-    // colors
-    color,
-    transparent,
-    primary,
-    secondary,
-    tertiary,
-    black,
-    white,
-    gray,
-    error,
-    warning,
-    success,
-    info,
-    borderColor,
-    // support for touchables
-    highlight,
-    nativeFeedback,
-    withoutFeedback,
-    theme,
-    style,
-    children,
-    // sizing props
-    margin,
-    marginHorizontal,
-    marginVertical,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    padding,
-    paddingHorizontal,
-    paddingVertical,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    ...rest
-  } = props;
-
+const Button = ({
+  disabled = false,
+  opacity = 0.8,
+  outlined = false,
+  flex = 0,
+  height,
+  width,
+  borderWidth,
+  color = null,
+  transparent = false,
+  primary = false,
+  secondary = false,
+  tertiary = false,
+  black = false,
+  white = false,
+  gray = false,
+  error = false,
+  warning = false,
+  success = false,
+  info = false,
+  borderColor,
+  highlight,
+  nativeFeedback,
+  withoutFeedback,
+  theme = {},
+  style = {},
+  children,
+  margin = null,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  padding = null,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  ...rest
+}) => {
   const { SIZES, COLORS } = mergeTheme({ ...expoTheme }, theme);
 
   const marginSpacing = getMargins({
@@ -147,27 +142,4 @@ const Button = (props) => {
   );
 };
 
-Button.defaultProps = {
-  color: null,
-  disabled: false,
-  opacity: 0.8,
-  outlined: false,
-  margin: null,
-  padding: null,
-  flex: 0,
-  transparent: false,
-  primary: false,
-  secondary: false,
-  tertiary: false,
-  black: false,
-  white: false,
-  gray: false,
-  error: false,
-  warning: false,
-  success: false,
-  info: false,
-  theme: {},
-  style: {}
-};
-
 export default Button;

src/Card.js

@@ -1,24 +1,21 @@
 import React from "react";
 import { StyleSheet } from "react-native";
-
 import Block from "./Block";
 import expoTheme from "./theme";
 import { mergeTheme, rgba } from "./utils/index";
 
-const Card = (props) => {
-  const {
-    color,
-    radius,
-    padding,
-    shadow,
-    elevation,
-    outlined,
-    theme,
-    style,
-    children,
-    ...rest
-  } = props;
-
+const Card = ({
+  color = null,
+  radius = null,
+  padding = null,
+  shadow = false,
+  elevation = 3,
+  outlined = false,
+  theme = {},
+  style = {},
+  children,
+  ...rest
+}) => {
   const { SIZES, COLORS } = mergeTheme({ ...expoTheme }, theme);
 
   const cardStyles = StyleSheet.flatten([
@@ -27,13 +24,13 @@ const Card = (props) => {
       shadowColor: COLORS.black,
       shadowOffset: { width: 0, height: elevation - 1 },
       shadowOpacity: 0.1,
-      shadowRadius: elevation
+      shadowRadius: elevation,
     },
     outlined && {
       borderWidth: 1,
-      borderColor: rgba(COLORS.black, 0.16)
+      borderColor: rgba(COLORS.black, 0.16),
     },
-    style
+    style,
   ]);
 
   return (
@@ -42,21 +39,11 @@ const Card = (props) => {
       color={color || COLORS.white}
       radius={radius || SIZES.radius}
       padding={padding || SIZES.base}
-      style={cardStyles}>
+      style={cardStyles}
+    >
       {children}
     </Block>
   );
 };
 
-Card.defaultProps = {
-  color: null,
-  radius: null,
-  padding: null,
-  shadow: false,
-  elevation: 3,
-  outlined: false,
-  theme: {},
-  style: {}
-};
-
 export default Card;

src/Input.js

@@ -33,11 +33,27 @@ export const reducer = (state, action) => {
   }
 };
 
-const Input = (props) => {
+const Input = ({
+  pattern = null,
+  onFocus = null,
+  onBlur = null,
+  onChangeText = null,
+  onValidation = null,
+  placeholder = null,
+  autoCorrect = false,
+  autoCapitalize = "none",
+  internalRef = null,
+  theme = {},
+  style = {},
+  children,
+  borderWidth,
+  borderColor,
+  type,
+  ...rest
+}) => {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
 
   const handleValidation = (value) => {
-    const { pattern } = props;
     if (!pattern) return true;
 
     // string pattern, one validation rule
@@ -54,21 +70,18 @@ const Input = (props) => {
   };
 
   const handleChange = (value) => {
-    const { onChangeText, onValidation } = props;
     const isValid = handleValidation(value);
     dispatch(change(value));
     onValidation && onValidation(isValid);
     onChangeText && onChangeText(value);
   };
 
   const handleFocus = (event) => {
-    const { onFocus } = props;
     dispatch(focus());
     onFocus && onFocus(event);
   };
 
   const handleBlur = (event) => {
-    const { onBlur } = props;
     dispatch(blur());
     onBlur && onBlur(event);
   };
@@ -81,22 +94,6 @@ const Input = (props) => {
       : type;
   };
 
-  const {
-    autoCorrect,
-    autoCapitalize,
-    placeholder,
-    children,
-    borderWidth,
-    borderColor,
-    type,
-    style,
-    theme,
-    internalRef,
-    onFocus,
-    onBlur,
-    onChangeText,
-    ...rest
-  } = props;
   const { SIZES, COLORS } = mergeTheme({ ...expoTheme }, theme);
 
   const textStyles = StyleSheet.flatten([
@@ -129,26 +126,12 @@ const Input = (props) => {
   return (
     <TextInput
       ref={internalRef}
-      {...props}
+      {...rest}
       {...internalProps}
       testID="text-input">
       {children}
     </TextInput>
   );
 };
 
-Input.defaultProps = {
-  pattern: null,
-  onFocus: null,
-  onBlur: null,
-  onChangeText: null,
-  onValidation: null,
-  placeholder: null,
-  autoCorrect: false,
-  autoCapitalize: "none",
-  internalRef: null,
-  theme: {},
-  style: {}
-};
-
 export default Input;