chore(buttons): improved typization

computools-anastasiia-nahaiska · computools-anastasiia-nahaiska · commit 56f9eb9b5843 · 2024-11-01T17:49:26.000+02:00
diff --git a/src/buttons/common-buttons/common-button/CommonButton.component.tsx b/src/buttons/common-buttons/common-button/CommonButton.component.tsx
@@ -5,18 +5,26 @@ import {styles} from './common-button.styles';
 import {type IconProps} from '../../../icons/icon-props';
 import {useTypography} from '../../../typography/useTypography.component';
 
-export interface CommonButtonProps extends TouchableOpacityProps {
+export interface CommonButtonProps<T extends IconProps> extends TouchableOpacityProps {
   title: string;
 
   titleStyle?: StyleProp<TextStyle>;
-  StartIcon?: React.FC<IconProps>;
-  EndIcon?: React.FC<IconProps>;
-  iconProps?: IconProps;
+  StartIcon?: React.FC<T>;
+  EndIcon?: React.FC<T>;
+  iconProps?: T;
 }
 
 const DEFAULT_ICON_SIZE = 18;
 
-export const CommonButton: React.FC<CommonButtonProps> = ({title, StartIcon, EndIcon, titleStyle, iconProps, style, ...props}) => {
+export const CommonButton = <T extends IconProps>({
+  title,
+  StartIcon,
+  EndIcon,
+  titleStyle,
+  iconProps = {} as T,
+  style,
+  ...props
+}: CommonButtonProps<T>) => {
   const {labelLarge} = useTypography();
 
   const containerPaddingStart = StartIcon || EndIcon ? 16 : 24;
diff --git a/src/buttons/common-buttons/elevated-button/ElevatedButton.component.tsx b/src/buttons/common-buttons/elevated-button/ElevatedButton.component.tsx
@@ -3,10 +3,11 @@ import {StyleSheet} from 'react-native';
 
 import {styles} from './elevated-button.styles';
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
-export const ElevatedButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...props}) => {
+export const ElevatedButton = <T extends IconProps>({titleStyle, style, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
   const {primary, surface, shadow, surfaceContainer} = useTheme();
 
   const colorStyles = useMemo(
@@ -26,7 +27,7 @@ export const ElevatedButton: React.FC<CommonButtonProps> = ({titleStyle, style,
     <CommonButton
       style={[colorStyles.container, styles.container, style]}
       titleStyle={[colorStyles.title, titleStyle]}
-      iconProps={{color: colorStyles.title.color}}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
       {...props}
     />
   );
diff --git a/src/buttons/common-buttons/filled-button/FilledButton.component.tsx b/src/buttons/common-buttons/filled-button/FilledButton.component.tsx
@@ -2,10 +2,11 @@ import React, {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
-export const FilledButton: React.FC<CommonButtonProps> = ({style, titleStyle, ...props}) => {
+export const FilledButton = <T extends IconProps>({style, titleStyle, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
   const {primary, surface} = useTheme();
 
   const colorStyles = useMemo(
@@ -25,7 +26,7 @@ export const FilledButton: React.FC<CommonButtonProps> = ({style, titleStyle, ..
     <CommonButton
       style={[colorStyles.container, style]}
       titleStyle={[colorStyles.title, titleStyle]}
-      iconProps={{color: colorStyles.title.color}}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
       {...props}
     />
   );
diff --git a/src/buttons/common-buttons/outlined-button/OutlinedButton.component.tsx b/src/buttons/common-buttons/outlined-button/OutlinedButton.component.tsx
@@ -3,10 +3,11 @@ import {StyleSheet} from 'react-native';
 
 import {styles} from './outlined-button.styles';
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
-export const OutlinedButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...props}) => {
+export const OutlinedButton = <T extends IconProps>({titleStyle, style, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
   const {primary, outline, surface} = useTheme();
 
   const colorStyles = useMemo(
@@ -21,9 +22,9 @@ export const OutlinedButton: React.FC<CommonButtonProps> = ({titleStyle, style,
 
   return (
     <CommonButton
-      iconProps={{color: colorStyles.title.color}}
       titleStyle={[colorStyles.title, titleStyle]}
       style={[styles.container, colorStyles.container, style]}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
       {...props}
     />
   );
diff --git a/src/buttons/common-buttons/text-button/TextButton.component.tsx b/src/buttons/common-buttons/text-button/TextButton.component.tsx
@@ -2,10 +2,11 @@ import React, {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
 
-export const TextButton: React.FC<CommonButtonProps> = ({titleStyle, ...props}) => {
+export const TextButton = <T extends IconProps>({titleStyle, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
   const {primary, surface} = useTheme();
 
   const colorStyles = useMemo(
@@ -16,5 +17,5 @@ export const TextButton: React.FC<CommonButtonProps> = ({titleStyle, ...props})
     [props.disabled]
   );
 
-  return <CommonButton titleStyle={[colorStyles.title, titleStyle]} iconProps={{color: colorStyles.title.color}} {...props} />;
+  return <CommonButton titleStyle={[colorStyles.title, titleStyle]} iconProps={{color: colorStyles.title.color, ...iconProps}} {...props} />;
 };
diff --git a/src/buttons/common-buttons/tonal-button/TonalButton.component.tsx b/src/buttons/common-buttons/tonal-button/TonalButton.component.tsx
@@ -4,8 +4,9 @@ import {StyleSheet} from 'react-native';
 import {useTheme} from '../../../theme/useTheme.hook';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {CommonButton, type CommonButtonProps} from '../common-button/CommonButton.component';
+import {type IconProps} from '../../../icons/icon-props';
 
-export const TonalButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...props}) => {
+export const TonalButton = <T extends IconProps>({titleStyle, style, iconProps = {} as T, ...props}: CommonButtonProps<T>) => {
   const {secondaryContainer, surface} = useTheme();
 
   const colorStyles = useMemo(
@@ -25,7 +26,7 @@ export const TonalButton: React.FC<CommonButtonProps> = ({titleStyle, style, ...
     <CommonButton
       style={[colorStyles.container, style]}
       titleStyle={[colorStyles.title, titleStyle]}
-      iconProps={{color: colorStyles.title.color}}
+      iconProps={{color: colorStyles.title.color, ...iconProps}}
       {...props}
     />
   );
diff --git a/src/buttons/floating-action-button/FloatingActionButton.component.tsx b/src/buttons/floating-action-button/FloatingActionButton.component.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, type ReactElement} from 'react';
 import Animated, {FadeInRight, LinearTransition, FadeOutRight} from 'react-native-reanimated';
 import {TouchableOpacity, type StyleProp, type TextStyle, type TouchableOpacityProps} from 'react-native';
 
@@ -20,27 +20,27 @@ export enum FloatingActionButtonType {
   TERTIARY = 'TERTIARY',
 }
 
-export interface FloatingActionButtonProps extends TouchableOpacityProps {
+export interface FloatingActionButtonProps<T extends IconProps> extends TouchableOpacityProps {
   type?: FloatingActionButtonType;
   label?: string;
   extended?: boolean;
-  Icon?: React.FC<IconProps>;
-  iconProps?: IconProps;
+  Icon?: React.FC<T>;
+  iconProps?: T;
   size?: FloatingActionButtonSize;
   labelStyle?: StyleProp<TextStyle>;
 }
 
-export const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
+export const FloatingActionButton = <T extends IconProps>({
   label,
-  iconProps,
+  iconProps = {} as T,
   labelStyle,
   Icon = EditIcon,
   extended = true,
   size = FloatingActionButtonSize.SMALL,
   type = FloatingActionButtonType.PRIMARY,
   style,
   ...props
-}) => {
+}: FloatingActionButtonProps<T>): ReactElement => {
   const {labelLarge} = useTypography();
   const {shadow, primaryContainer, surfaceContainer, secondaryContainer, tertiaryContainer, primary} = useTheme();
 
diff --git a/src/buttons/icon-buttons/base-icon-button/BaseIconButton.component.tsx b/src/buttons/icon-buttons/base-icon-button/BaseIconButton.component.tsx
@@ -4,17 +4,17 @@ import {TouchableOpacity, type TouchableOpacityProps} from 'react-native';
 import {type IconProps} from '../../../types/icon-props.type';
 import {getIconButtonFrameStyles, styles} from './base-icon-button.styles';
 
-export interface BaseIconButtonProps extends TouchableOpacityProps {
-  Icon: React.FC<IconProps>;
+export interface BaseIconButtonProps<T extends IconProps> extends TouchableOpacityProps {
+  Icon: React.FC<T>;
+  iconProps: T;
 
   size?: number;
-  iconProps?: IconProps;
 }
 
 const DEFAULT_SIZE = 40;
 const ICON_SIZE_COEFF = 0.6;
 
-export const BaseIconButton: React.FC<BaseIconButtonProps> = ({Icon, size = DEFAULT_SIZE, iconProps, style, ...props}) => (
+export const BaseIconButton = <T extends IconProps>({Icon, size = DEFAULT_SIZE, iconProps, style, ...props}: BaseIconButtonProps<T>) => (
   <TouchableOpacity style={[styles.container, getIconButtonFrameStyles(size), style]} hitSlop={8} {...props}>
     <Icon size={size * ICON_SIZE_COEFF} {...iconProps} />
   </TouchableOpacity>
diff --git a/src/buttons/icon-buttons/filled-icon-button/FilledIconButton.component.tsx b/src/buttons/icon-buttons/filled-icon-button/FilledIconButton.component.tsx
@@ -1,11 +1,12 @@
 import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {type IconButtonProps} from '../icon-button.types';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 
-export const FilledIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, style, ...props}) => {
+export const FilledIconButton = <T extends IconProps>({selected, Icon, selectedIcon, iconProps = {} as T, style, ...props}: IconButtonProps<T>) => {
   const {primary, surface, surfaceContainer} = useTheme();
 
   const [disabledIconColor, disabledContainerColor] = useMemo(
@@ -21,6 +22,11 @@ export const FilledIconButton: React.FC<IconButtonProps> = ({selected, Icon, sel
     : [activeContainerColor, activeIconColor];
 
   return (
-    <BaseIconButton style={[{backgroundColor: appliedContainerColor}, style]} Icon={IconComponent} iconProps={{color: appliedIconColor}} {...props} />
+    <BaseIconButton
+      Icon={IconComponent}
+      iconProps={{color: appliedIconColor, ...iconProps}}
+      style={[{backgroundColor: appliedContainerColor}, style]}
+      {...props}
+    />
   );
 };
diff --git a/src/buttons/icon-buttons/icon-button.types.ts b/src/buttons/icon-buttons/icon-button.types.ts
@@ -1,7 +1,7 @@
-import type {IconProps} from '../../icons/icon-props';
-import type {BaseIconButtonProps} from './base-icon-button/BaseIconButton.component';
+import {type IconProps} from '../../icons/icon-props';
+import {type BaseIconButtonProps} from './base-icon-button/BaseIconButton.component';
 
-export interface IconButtonProps extends BaseIconButtonProps {
+export interface IconButtonProps<T extends IconProps> extends BaseIconButtonProps<T> {
   selected?: boolean;
-  selectedIcon?: React.FC<IconProps>;
+  selectedIcon?: React.FC<T>;
 }
diff --git a/src/buttons/icon-buttons/outlined-icon-button/OutlinedIconButton.component.tsx b/src/buttons/icon-buttons/outlined-icon-button/OutlinedIconButton.component.tsx
@@ -1,11 +1,12 @@
 import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {type IconButtonProps} from '../icon-button.types';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 
-export const OutlinedIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, style, ...props}) => {
+export const OutlinedIconButton = <T extends IconProps>({selected, Icon, selectedIcon, iconProps = {} as T, style, ...props}: IconButtonProps<T>) => {
   const {surface, outline} = useTheme();
 
   const [disabledIconColor, disabledContainerColor] = useMemo(
@@ -23,9 +24,9 @@ export const OutlinedIconButton: React.FC<IconButtonProps> = ({selected, Icon, s
 
   return (
     <BaseIconButton
-      style={[{backgroundColor: appliedContainerColor, borderColor: appliedBorderColor, borderWidth: Number(!selected)}, style]}
       Icon={IconComponent}
-      iconProps={{color: appliedIconColor}}
+      iconProps={{color: appliedIconColor, ...iconProps}}
+      style={[{backgroundColor: appliedContainerColor, borderColor: appliedBorderColor, borderWidth: Number(!selected)}, style]}
       {...props}
     />
   );
diff --git a/src/buttons/icon-buttons/standart-icon-button/StandardIconButton.component.tsx b/src/buttons/icon-buttons/standart-icon-button/StandardIconButton.component.tsx
@@ -1,16 +1,17 @@
 import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {type IconButtonProps} from '../icon-button.types';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 
-export const StandartIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, ...props}) => {
+export const StandartIconButton = <T extends IconProps>({selected, Icon, selectedIcon, iconProps = {} as T, ...props}: IconButtonProps<T>) => {
   const {primary, surface} = useTheme();
 
   const disabledIconColor = useMemo(() => convertToRGBA(surface.text as string, 0.38), [surface.text]);
 
   const [iconColor, IconComponent] = selected ? [primary.background, selectedIcon ?? Icon] : [surface.textVariant, Icon];
 
-  return <BaseIconButton Icon={IconComponent} iconProps={{color: props.disabled ? disabledIconColor : iconColor}} {...props} />;
+  return <BaseIconButton Icon={IconComponent} iconProps={{color: props.disabled ? disabledIconColor : iconColor, ...iconProps}} {...props} />;
 };
diff --git a/src/buttons/icon-buttons/tonal-icon-button/TonalIconButton.component.tsx b/src/buttons/icon-buttons/tonal-icon-button/TonalIconButton.component.tsx
@@ -1,11 +1,12 @@
 import React, {useMemo} from 'react';
 
 import {useTheme} from '../../../theme/useTheme.hook';
+import {type IconProps} from '../../../icons/icon-props';
 import {type IconButtonProps} from '../icon-button.types';
 import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {BaseIconButton} from '../base-icon-button/BaseIconButton.component';
 
-export const TonalIconButton: React.FC<IconButtonProps> = ({selected, Icon, selectedIcon, style, ...props}) => {
+export const TonalIconButton = <T extends IconProps>({selected, Icon, selectedIcon, iconProps = {} as T, style, ...props}: IconButtonProps<T>) => {
   const {surfaceContainer, surface, secondaryContainer} = useTheme();
 
   const [disabledIconColor, disabledContainerColor] = useMemo(
@@ -21,6 +22,11 @@ export const TonalIconButton: React.FC<IconButtonProps> = ({selected, Icon, sele
     : [activeContainerColor, activeIconColor];
 
   return (
-    <BaseIconButton style={[{backgroundColor: appliedContainerColor}, style]} Icon={IconComponent} iconProps={{color: appliedIconColor}} {...props} />
+    <BaseIconButton
+      Icon={IconComponent}
+      iconProps={{color: appliedIconColor, ...iconProps}}
+      style={[{backgroundColor: appliedContainerColor}, style]}
+      {...props}
+    />
   );
 };
diff --git a/src/buttons/segmented-button/SegmentedButton.component.tsx b/src/buttons/segmented-button/SegmentedButton.component.tsx
@@ -7,15 +7,15 @@ import {type IconProps} from '../../icons/icon-props';
 import {convertToRGBA} from '../../utils/convert-to-rgba';
 import {ButtonSegment as ButtonSegmentComponent} from './button-segment/ButtonSegment.component';
 
-export interface ButtonSegment<T> {
+export interface ButtonSegment<T, U> {
   value: T;
 
   label?: string;
-  Icon?: React.FC<IconProps>;
+  Icon?: React.FC<U>;
 }
 
-export interface SegmentedButtonProps<T> extends ViewProps {
-  segments: ButtonSegment<T>[];
+export interface SegmentedButtonProps<T, U> extends ViewProps {
+  segments: ButtonSegment<T, U>[];
   selected: T[];
 
   disabled?: boolean;
@@ -29,7 +29,7 @@ export interface SegmentedButtonProps<T> extends ViewProps {
   onSegmentPress: (value: T[] | ((currValues: T[]) => T[])) => void;
 }
 
-export const SegmentedButton: <T extends any>(props: SegmentedButtonProps<T>) => ReactElement = ({
+export const SegmentedButton: <T extends any, U extends IconProps>(props: SegmentedButtonProps<T, U>) => ReactElement = ({
   segments,
   selected,
   disabled = false,
diff --git a/src/buttons/segmented-button/button-segment/ButtonSegment.component.tsx b/src/buttons/segmented-button/button-segment/ButtonSegment.component.tsx
@@ -18,15 +18,15 @@ import {convertToRGBA} from '../../../utils/convert-to-rgba';
 import {useTypography} from '../../../typography/useTypography.component';
 import {AnimatedSelectedIcon} from './animated-selected-icon/AnimatedSelectedIcon.component';
 
-interface ButtonSegmentProps<T> extends Omit<PressableProps, 'onPress'> {
+interface ButtonSegmentProps<T, U extends IconProps> extends Omit<PressableProps, 'onPress'> {
   value: T;
   selected: boolean;
   disabled: boolean;
   multiSelectionEnabled: boolean;
 
   label?: string;
   withCheckmark?: boolean;
-  Icon?: React.FC<IconProps>;
+  Icon?: React.FC<U>;
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
   iconSize?: number;
@@ -39,7 +39,7 @@ interface ButtonSegmentProps<T> extends Omit<PressableProps, 'onPress'> {
 const DEFAULT_ICON_SIZE = 18;
 
 export const ButtonSegment = React.memo(
-  <T extends any>({
+  <T extends any, U extends IconProps>({
     value,
     selected,
     disabled,
@@ -54,7 +54,7 @@ export const ButtonSegment = React.memo(
     rippleColor,
     style,
     ...props
-  }: ButtonSegmentProps<T>) => {
+  }: ButtonSegmentProps<T, U>) => {
     const {labelLarge} = useTypography();
     const {surface, secondaryContainer} = useTheme();
 
@@ -63,6 +63,7 @@ export const ButtonSegment = React.memo(
 
     const defaultIconColor = selected ? secondaryContainer.text : iconColor ?? surface.text;
     const appliedIconColor = disabled ? labelDisabledColor : defaultIconColor;
+    const iconProps = {size: iconSize, color: appliedIconColor} as U;
 
     useEffect(() => {
       fill.value = withTiming(Number(selected));
@@ -101,7 +102,7 @@ export const ButtonSegment = React.memo(
     const renderIconConditionally = () =>
       Icon ? (
         <Animated.View layout={LinearTransition} entering={FadeIn} exiting={FadeOut}>
-          <Icon size={iconSize} color={appliedIconColor} />
+          <Icon {...iconProps} />
         </Animated.View>
       ) : null;
 
diff --git a/src/icons/edit-icon/EditIcon.component.tsx b/src/icons/edit-icon/EditIcon.component.tsx
diff --git a/src/icons/icon-props.ts b/src/icons/icon-props.ts
diff --git a/src/index.tsx b/src/index.tsx
