fix: refactor getStyles callbacks

Author: minheq

src/components/Alert/Alert.styles.ts

@@ -11,7 +11,10 @@ export interface AlertStyles {
   descriptionStyle: TextStyle;
 }
 
-export type GetAlertStyles = (props: AlertProps, theme: Theme) => AlertStyles;
+export type GetAlertStyles = (
+  props: AlertProps,
+  theme: Theme,
+) => Partial<AlertStyles>;
 
 export const getAlertStyles: GetAlertStyles = ({ intent = 'info' }, theme) => {
   return {

src/components/Alert/Alert.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
-import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import { mergeStyles } from '../../utils/mergeStyles';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { Text } from '../Typography';
-import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
+import { GetAlertStyles, getAlertStyles } from './Alert.styles';
 
 export type Intent = 'danger' | 'info' | 'success' | 'warning';
 
@@ -37,7 +36,7 @@ export interface AlertProps {
   actionNode?: React.ReactNode;
 
   /** Callback to get element styles. */
-  getStyles?: ReplaceReturnType<GetAlertStyles, DeepPartial<AlertStyles>>;
+  getStyles?: GetAlertStyles;
 
   /** Used to locate this view in end-to-end tests. */
   testID?: string;

src/components/Avatar/Avatar.styles.ts

@@ -54,7 +54,7 @@ const getAvatarProps = (
 export type GetAvatarStyles = (
   props: AvatarProps,
   theme: Theme,
-) => AvatarStyles;
+) => Partial<AvatarStyles>;
 
 const avatarScale: { [size in ControlSize]: number } = {
   large: 2,

src/components/Avatar/Avatar.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import { Image, ImageSourcePropType, View } from 'react-native';
-import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
 import { ControlSize, FillColor } from '../../theme/Theme';
-import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import { mergeStyles } from '../../utils/mergeStyles';
 import { Text } from '../Typography';
-import {
-  AvatarStyles,
-  GetAvatarStyles,
-  getAvatarStyles,
-} from './Avatar.styles';
+import { GetAvatarStyles, getAvatarStyles } from './Avatar.styles';
 
 // https://github.com/segmentio/evergreen/blob/master/source/avatar/README.md
 export type GetInitialsType = (name?: string, fallback?: string) => string;
@@ -60,7 +55,7 @@ export interface AvatarProps {
   accessibilityLabel?: string;
 
   /** Callback to get element styles. */
-  getStyles?: ReplaceReturnType<GetAvatarStyles, DeepPartial<AvatarStyles>>;
+  getStyles?: GetAvatarStyles;
 
   /** Used to locate this view in end-to-end tests. */
   testID?: string;

src/components/Badge/Badge.styles.ts

@@ -9,7 +9,10 @@ export interface BadgeStyles {
   containerStyle: ViewStyle;
 }
 
-export type GetBadgeStyles = (props: BadgeProps, theme: Theme) => BadgeStyles;
+export type GetBadgeStyles = (
+  props: BadgeProps,
+  theme: Theme,
+) => Partial<BadgeStyles>;
 
 export const getBadgeStyles: GetBadgeStyles = (
   { size = 'medium', color = 'neutral', isSolid = false, shape = 'rounded' },

src/components/Badge/Badge.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
 import { ContainerShape, ControlSize, FillColor } from '../../theme/Theme';
-import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import { mergeStyles } from '../../utils/mergeStyles';
 import { Text } from '../Typography';
-import { BadgeStyles, GetBadgeStyles, getBadgeStyles } from './Badge.styles';
+import { GetBadgeStyles, getBadgeStyles } from './Badge.styles';
 
 export interface BadgeProps {
   /** Title of the badge */
@@ -37,7 +36,7 @@ export interface BadgeProps {
   isSolid?: boolean;
 
   /** Callback to get element styles. */
-  getStyles?: ReplaceReturnType<GetBadgeStyles, DeepPartial<BadgeStyles>>;
+  getStyles?: GetBadgeStyles;
 
   /** Used to locate this view in end-to-end tests. */
   testID?: string;

src/components/Button/Button.styles.ts

@@ -113,7 +113,7 @@ export interface ButtonStyles {
 export type GetButtonStyles = (
   props: ButtonProps,
   theme: Theme,
-) => ButtonStyles;
+) => Partial<ButtonStyles>;
 
 export const getButtonStyles: GetButtonStyles = (props, theme) => {
   const {

src/components/Button/Button.tsx

@@ -5,15 +5,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { DeepPartial } from 'ts-essentials';
 
 import { ButtonColor, ControlSize, useTheme } from '../../theme';
-import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import { mergeStyles } from '../../utils/mergeStyles';
 import { Dots } from '../LoadingIndicators';
 import { Text } from '../Typography';
 import {
   ButtonAppearance,
-  ButtonStyles,
   GetButtonStyles,
   getButtonStyles,
 } from './Button.styles';
@@ -86,7 +84,7 @@ export interface ButtonProps {
   accessible?: boolean;
 
   /** Callback to get element styles. */
-  getStyles?: ReplaceReturnType<GetButtonStyles, DeepPartial<ButtonStyles>>;
+  getStyles?: GetButtonStyles;
 
   /** Used to locate this view in end-to-end tests. */
   testID?: string;
@@ -144,14 +142,21 @@ export const Button = (props: ButtonProps) => {
 };
 
 export interface ButtonContentProps extends ButtonProps {
-  textStyle: TextStyle;
+  textStyle?: TextStyle;
 }
 
 const ButtonContent = (props: ButtonContentProps) => {
   const { isLoading, iconLoading, icon, title, textStyle } = props;
+  const theme = useTheme();
 
   if (isLoading) {
-    return <>{iconLoading || <Dots color={textStyle.color} />}</>;
+    return (
+      <>
+        {iconLoading || (
+          <Dots color={textStyle ? textStyle.color : theme.colors.text.white} />
+        )}
+      </>
+    );
   }
   if (icon) return <>{icon}</>;
   if (title) {

src/components/Checkbox/Checkbox.styles.ts

@@ -13,7 +13,7 @@ export interface CheckboxStyles {
 export type GetCheckboxStyles = (
   props: CheckboxProps,
   theme: Theme,
-) => CheckboxStyles;
+) => Partial<CheckboxStyles>;
 
 export const getCheckboxStyles: GetCheckboxStyles = (
   { value, isDisabled, shape = 'rounded', size = 'medium' },

src/components/Checkbox/Checkbox.tsx

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import { GestureResponderEvent, TouchableOpacity, View } from 'react-native';
-import { DeepPartial } from 'ts-essentials';
 
 import { ContainerShape, ControlSize, useTheme } from '../../theme';
-import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import { mergeStyles } from '../../utils/mergeStyles';
 import { Icon } from '../Icon';
-import {
-  CheckboxStyles,
-  GetCheckboxStyles,
-  getCheckboxStyles,
-} from './Checkbox.styles';
+import { GetCheckboxStyles, getCheckboxStyles } from './Checkbox.styles';
 
 export interface CheckboxProps {
   /**
@@ -51,7 +46,7 @@ export interface CheckboxProps {
   onPress?: (e: GestureResponderEvent) => void;
 
   /** Callback to get element styles. */
-  getStyles?: ReplaceReturnType<GetCheckboxStyles, DeepPartial<CheckboxStyles>>;
+  getStyles?: GetCheckboxStyles;
 
   /** Used to locate this view in end-to-end tests. */
   testID?: string;