chore: added TrailingIcon prop

Author: computools-anastasiia-nahaiska

src/chips/assist-chip/AssistChip.component.tsx

@@ -5,25 +5,31 @@ import {type IconProps} from '../../icons/icon-props';
 import {getColorStyles, styles} from './assist-chip.styles';
 import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
 
-export enum LeadingIconType {
+export enum IconType {
   COMMON = 'COMMON',
   FAVICON = 'FAVICON',
   BRANDED = 'BRANDED',
 }
 
-export interface AssistChipProps<T extends IconProps> extends BaseChipProps {
+export interface AssistChipProps<T extends IconProps> extends Omit<BaseChipProps, 'leadingIcon' | 'trailingIcon'> {
   elevated?: boolean;
   LeadingIcon?: React.FC<T>;
-  leadingIconType?: LeadingIconType;
+  TrailingIcon?: React.FC<T>;
+  leadingIconType?: IconType;
+  trailingIconType?: IconType;
   leadingIconProps?: T;
+  trailingIconProps?: T;
   iconSize?: number;
 }
 
 export const AssistChip = <T extends IconProps>({
   elevated = false,
   LeadingIcon,
-  leadingIconType = LeadingIconType.COMMON,
+  TrailingIcon,
+  leadingIconType = IconType.COMMON,
+  trailingIconType = IconType.COMMON,
   leadingIconProps = {} as T,
+  trailingIconProps = {} as T,
   iconSize = 18,
   style,
   labelStyle,
@@ -33,17 +39,18 @@ export const AssistChip = <T extends IconProps>({
   const theme = useTheme();
   const colorStyles = useMemo(() => getColorStyles(elevated, disabled, theme), [disabled, elevated, theme]);
 
-  const leadingIconPropsMap: Record<LeadingIconType, IconProps> = {
-    [LeadingIconType.COMMON]: {size: iconSize, color: colorStyles.icon.color},
-    [LeadingIconType.FAVICON]: {size: iconSize},
-    [LeadingIconType.BRANDED]: {size: iconSize, style: {opacity: 0.38}},
+  const iconPropsMap: Record<IconType, IconProps> = {
+    [IconType.COMMON]: {size: iconSize, color: colorStyles.icon.color},
+    [IconType.FAVICON]: {size: iconSize},
+    [IconType.BRANDED]: {size: iconSize, style: {opacity: 0.38}},
   };
 
   return (
     <BaseChip
       style={[elevated && !disabled ? styles.elevatedContainer : styles.outlinedContainer, colorStyles.container, style]}
       labelStyle={[colorStyles.label, labelStyle]}
-      leadingIcon={LeadingIcon ? <LeadingIcon {...leadingIconPropsMap[leadingIconType]} {...leadingIconProps} /> : null}
+      leadingIcon={LeadingIcon ? <LeadingIcon {...iconPropsMap[leadingIconType]} {...leadingIconProps} /> : null}
+      trailingIcon={TrailingIcon ? <TrailingIcon {...iconPropsMap[trailingIconType]} {...trailingIconProps} /> : null}
       disabled={disabled}
       {...props}
     />

src/chips/filter-chip/FilterChip.component.tsx

@@ -1,19 +1,21 @@
 import React, {useMemo} from 'react';
+import Animated, {FadeIn, FadeOut, LinearTransition} from 'react-native-reanimated';
 
+import {DoneIcon} from '../../icons';
 import {useTheme} from '../../theme/useTheme.hook';
 import {type IconProps} from '../../icons/icon-props';
 import {getDynamicStyles, styles} from './filter-chip.styles';
 import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
-import {DoneIcon} from '../../icons';
 import {CircularActivityIndicator} from '../../activity-indicators/circular-activity-indicator/CircularActivityIndicator.component';
-import Animated, {FadeIn, FadeOut, LinearTransition} from 'react-native-reanimated';
 
-export interface FilterChipProps<T extends IconProps> extends BaseChipProps {
+export interface FilterChipProps<T extends IconProps> extends Omit<BaseChipProps, 'leadingIcon' | 'trailingIcon'> {
   elevated?: boolean;
   selected?: boolean;
   loading?: boolean;
   LeadingIcon?: React.FC<T>;
+  TrailingIcon?: React.FC<T>;
   leadingIconProps?: T;
+  trailingIconProps?: T;
   iconSize?: number;
   activityIndicatorSize?: number;
 }
@@ -23,7 +25,9 @@ export const FilterChip = <T extends IconProps>({
   selected = false,
   loading = false,
   LeadingIcon,
+  TrailingIcon,
   leadingIconProps = {} as T,
+  trailingIconProps = {} as T,
   iconSize = 18,
   activityIndicatorSize = 38,
   style,
@@ -37,11 +41,18 @@ export const FilterChip = <T extends IconProps>({
   const renerCustomLeadingIcon = () =>
     LeadingIcon ? (
       <Animated.View entering={FadeIn} exiting={FadeOut}>
-        <LeadingIcon size={iconSize} color={dynamicStyles.leadingIcon.color} {...leadingIconProps} />
+        <LeadingIcon size={iconSize} color={dynamicStyles.icon.color} {...leadingIconProps} />
       </Animated.View>
     ) : null;
 
-  const renderLeadingIcon = () => (selected ? <DoneIcon size={iconSize} color={dynamicStyles.selectedIcon.color} /> : renerCustomLeadingIcon());
+  const renderLeadingIcon = () =>
+    selected ? (
+      <Animated.View entering={FadeIn} exiting={FadeOut}>
+        <DoneIcon size={iconSize} color={dynamicStyles.selectedIcon.color} />
+      </Animated.View>
+    ) : (
+      renerCustomLeadingIcon()
+    );
 
   return (
     <Animated.View layout={LinearTransition}>
@@ -51,6 +62,7 @@ export const FilterChip = <T extends IconProps>({
         leadingIcon={
           loading ? <CircularActivityIndicator size={activityIndicatorSize} style={{height: iconSize, width: iconSize}} /> : renderLeadingIcon()
         }
+        trailingIcon={TrailingIcon ? <TrailingIcon size={18} color={dynamicStyles.icon.color} {...trailingIconProps} /> : null}
         disabled={disabled}
         {...props}
       />

src/chips/filter-chip/filter-chip.styles.ts

@@ -25,7 +25,13 @@ export const getDynamicStyles = (selected: boolean, elevated: boolean, disabled:
   const [disabledUnselectedBackgroundColorByType, disabledUnselectedBorderColorByType] = elevated
     ? [containerDisabledColor, 'transparent']
     : ['transparent', containerDisabledColor];
+  const [disabledBackgroundColor, disabledBorderColor] = selected
+    ? [containerDisabledColor, 'transparent']
+    : [disabledUnselectedBackgroundColorByType, disabledUnselectedBorderColorByType];
   const enabledBackgroundColorByType = elevated ? theme.surfaceContainer.backgroundLow : 'transparent';
+  const [enabledBackgroundColor, enabledBorderColor] = selected
+    ? [theme.secondaryContainer.background, theme.secondaryContainer.background]
+    : [enabledBackgroundColorByType, theme.outline];
 
   return StyleSheet.create(
     disabled
@@ -34,10 +40,10 @@ export const getDynamicStyles = (selected: boolean, elevated: boolean, disabled:
             color: labelDisabledColor,
           },
           container: {
-            borderColor: selected ? 'transparent' : disabledUnselectedBorderColorByType,
-            backgroundColor: selected ? containerDisabledColor : disabledUnselectedBackgroundColorByType,
+            borderColor: disabledBorderColor,
+            backgroundColor: disabledBackgroundColor,
           },
-          leadingIcon: {
+          icon: {
             color: labelDisabledColor,
           },
           selectedIcon: {
@@ -49,11 +55,11 @@ export const getDynamicStyles = (selected: boolean, elevated: boolean, disabled:
             color: theme.surface.text,
           },
           container: {
-            borderColor: theme.outline,
-            borderWidth: Number(!selected && !elevated),
-            backgroundColor: selected ? theme.secondaryContainer.background : enabledBackgroundColorByType,
+            borderColor: enabledBorderColor,
+            borderWidth: 1,
+            backgroundColor: enabledBackgroundColor,
           },
-          leadingIcon: {
+          icon: {
             color: theme.primary.background,
           },
           selectedIcon: {

src/chips/input-chip/InputChip.component.tsx

@@ -7,21 +7,25 @@ import {useTheme} from '../../theme/useTheme.hook';
 import {type IconProps} from '../../icons/icon-props';
 import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
 
-export interface InputChipProps<T extends IconProps> extends BaseChipProps {
+export interface InputChipProps<T extends IconProps> extends Omit<BaseChipProps, 'leadingIcon' | 'trailingIcon'> {
   selected?: boolean;
   imageUrl?: string;
   LeadingIcon?: React.FC<T>;
+  TrailingIcon?: React.FC<T>;
   leadingIconProps?: T;
-  hasTrailingIcon?: boolean;
+  trailingIconProps?: T;
+  hasDefaultTrailingIcon?: boolean;
   iconSize?: number;
 }
 
 export const InputChip = <T extends IconProps>({
   selected = false,
   LeadingIcon,
+  TrailingIcon,
   imageUrl,
-  hasTrailingIcon = true,
   leadingIconProps = {} as T,
+  trailingIconProps = {} as T,
+  hasDefaultTrailingIcon = true,
   style,
   labelStyle,
   iconSize = 18,
@@ -47,13 +51,14 @@ export const InputChip = <T extends IconProps>({
   );
 
   const renderLeadingAvatar = () => (imageUrl ? <Image style={styles.leadingImage} source={{uri: imageUrl}} /> : null);
+  const renderDefaultTrailingIcon = () => (hasDefaultTrailingIcon ? <CloseIcon size={iconSize} color={onContainerColor} /> : null);
 
   return (
     <BaseChip
       style={[dynamicStyles.container, imageUrl ? styles.chipWithAvatarContainer : [], style]}
       labelStyle={[dynamicStyles.label, labelStyle]}
       leadingIcon={LeadingIcon ? <LeadingIcon size={iconSize} color={primary.background} {...leadingIconProps} /> : renderLeadingAvatar()}
-      trailingIcon={hasTrailingIcon ? <CloseIcon size={iconSize} color={onContainerColor} /> : null}
+      trailingIcon={TrailingIcon ? <TrailingIcon size={iconSize} color={onContainerColor} {...trailingIconProps} /> : renderDefaultTrailingIcon()}
       {...props}
     />
   );

src/chips/suggestion-chip/SuggestionChip.component.tsx

@@ -5,18 +5,22 @@ import {type IconProps} from '../../icons/icon-props';
 import {getDynamicStyles, styles} from './suggestion-chip.styles';
 import {BaseChip, type BaseChipProps} from '../base-chip/BaseChip.component';
 
-export interface SuggestionChipProps<T extends IconProps> extends BaseChipProps {
+export interface SuggestionChipProps<T extends IconProps> extends Omit<BaseChipProps, 'leadingIcon' | 'trailingIcon'> {
   elevated?: boolean;
   selected?: boolean;
   LeadingIcon?: React.FC<T>;
+  TrailingIcon?: React.FC<T>;
   leadingIconProps?: T;
+  trailingIconProps?: T;
 }
 
 export const SuggestionChip = <T extends IconProps>({
   elevated = false,
   selected = false,
   LeadingIcon,
+  TrailingIcon,
   leadingIconProps = {} as T,
+  trailingIconProps = {} as T,
   style,
   labelStyle,
   disabled = false,
@@ -30,6 +34,7 @@ export const SuggestionChip = <T extends IconProps>({
       style={[elevated && !disabled ? styles.elevatedContainer : styles.outlinedContainer, dynamicStyles.container, style]}
       labelStyle={[dynamicStyles.label, labelStyle]}
       leadingIcon={LeadingIcon ? <LeadingIcon size={18} color={dynamicStyles.icon.color} {...leadingIconProps} /> : null}
+      trailingIcon={TrailingIcon ? <TrailingIcon size={18} color={dynamicStyles.icon.color} {...trailingIconProps} /> : null}
       disabled={disabled}
       {...props}
     />

src/index.tsx

@@ -7,7 +7,7 @@ export {Divider, type DividerProps} from './divider/Divider.component';
 export {InputChip, type InputChipProps} from './chips/input-chip/InputChip.component';
 export {FilterChip, type FilterChipProps} from './chips/filter-chip/FilterChip.component';
 export {SuggestionChip, type SuggestionChipProps} from './chips/suggestion-chip/SuggestionChip.component';
-export {AssistChip, type AssistChipProps, LeadingIconType} from './chips/assist-chip/AssistChip.component';
+export {AssistChip, type AssistChipProps, IconType} from './chips/assist-chip/AssistChip.component';
 
 export {
   CenterAlignedTopAppBar,