feat: implemented filter chip

Author: computools-anastasiia-nahaiska

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

@@ -16,13 +16,15 @@ export interface AssistChipProps<T extends IconProps> extends BaseChipProps {
   LeadingIcon?: React.FC<T>;
   leadingIconType?: LeadingIconType;
   leadingIconProps?: T;
+  iconSize?: number;
 }
 
 export const AssistChip = <T extends IconProps>({
   elevated = false,
   LeadingIcon,
   leadingIconType = LeadingIconType.COMMON,
   leadingIconProps = {} as T,
+  iconSize = 18,
   style,
   labelStyle,
   disabled = false,
@@ -32,16 +34,17 @@ export const AssistChip = <T extends IconProps>({
   const colorStyles = useMemo(() => getColorStyles(elevated, disabled, theme), [disabled, elevated, theme]);
 
   const leadingIconPropsMap: Record<LeadingIconType, IconProps> = {
-    [LeadingIconType.COMMON]: {size: 18, color: colorStyles.icon.color},
-    [LeadingIconType.FAVICON]: {size: 18},
-    [LeadingIconType.BRANDED]: {size: 18, style: {opacity: 0.38}},
+    [LeadingIconType.COMMON]: {size: iconSize, color: colorStyles.icon.color},
+    [LeadingIconType.FAVICON]: {size: iconSize},
+    [LeadingIconType.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}
+      disabled={disabled}
       {...props}
     />
   );

src/chips/base-chip/BaseChip.component.tsx

@@ -12,13 +12,13 @@ export interface BaseChipProps extends TouchableOpacityProps {
   labelStyle?: StyleProp<TextStyle>;
 }
 
-export const BaseChip: React.FC<BaseChipProps> = ({label, leadingIcon, trailingIcon, style, ...props}) => {
+export const BaseChip: React.FC<BaseChipProps> = ({label, leadingIcon, trailingIcon, labelStyle, style, ...props}) => {
   const {labelLarge} = useTypography();
 
   return (
-    <TouchableOpacity style={[styles.container, style]} hitSlop={8} {...props} disabled>
+    <TouchableOpacity style={[styles.container, style]} hitSlop={8} {...props}>
       {leadingIcon}
-      <Text style={[[styles.label, labelLarge]]}>{label}</Text>
+      <Text style={[[styles.label, labelLarge, labelStyle]]}>{label}</Text>
       {trailingIcon}
     </TouchableOpacity>
   );

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

@@ -0,0 +1,59 @@
+import React, {useMemo} from 'react';
+
+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 {
+  elevated?: boolean;
+  selected?: boolean;
+  loading?: boolean;
+  LeadingIcon?: React.FC<T>;
+  leadingIconProps?: T;
+  iconSize?: number;
+  activityIndicatorSize?: number;
+}
+
+export const FilterChip = <T extends IconProps>({
+  elevated = false,
+  selected = false,
+  loading = false,
+  LeadingIcon,
+  leadingIconProps = {} as T,
+  iconSize = 18,
+  activityIndicatorSize = 38,
+  style,
+  labelStyle,
+  disabled = false,
+  ...props
+}: FilterChipProps<T>) => {
+  const theme = useTheme();
+  const dynamicStyles = useMemo(() => getDynamicStyles(selected, elevated, disabled, theme), [disabled, elevated, selected, theme]);
+
+  const renerCustomLeadingIcon = () =>
+    LeadingIcon ? (
+      <Animated.View entering={FadeIn} exiting={FadeOut}>
+        <LeadingIcon size={iconSize} color={dynamicStyles.leadingIcon.color} {...leadingIconProps} />
+      </Animated.View>
+    ) : null;
+
+  const renderLeadingIcon = () => (selected ? <DoneIcon size={iconSize} color={dynamicStyles.selectedIcon.color} /> : renerCustomLeadingIcon());
+
+  return (
+    <Animated.View layout={LinearTransition}>
+      <BaseChip
+        style={[elevated && !disabled ? styles.elevatedContainer : styles.outlinedContainer, dynamicStyles.container, style]}
+        labelStyle={[dynamicStyles.label, labelStyle]}
+        leadingIcon={
+          loading ? <CircularActivityIndicator size={activityIndicatorSize} style={{height: iconSize, width: iconSize}} /> : renderLeadingIcon()
+        }
+        disabled={disabled}
+        {...props}
+      />
+    </Animated.View>
+  );
+};

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

@@ -0,0 +1,64 @@
+import {StyleSheet} from 'react-native';
+
+import {type Theme} from '../../theme/theme.types';
+import {convertToRGBA} from '../../utils/convert-to-rgba';
+
+export const styles = StyleSheet.create({
+  outlinedContainer: {
+    borderWidth: 1,
+  },
+  elevatedContainer: {
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    elevation: 1,
+  },
+});
+
+export const getDynamicStyles = (selected: boolean, elevated: boolean, disabled: boolean, theme: Theme) => {
+  const labelDisabledColor = convertToRGBA(theme.surface.text as string, 0.38);
+  const containerDisabledColor = convertToRGBA(theme.surface.textVariant as string, 0.12);
+
+  const [disabledUnselectedBackgroundColorByType, disabledUnselectedBorderColorByType] = elevated
+    ? [containerDisabledColor, 'transparent']
+    : ['transparent', containerDisabledColor];
+  const enabledBackgroundColorByType = elevated ? theme.surfaceContainer.backgroundLow : 'transparent';
+
+  return StyleSheet.create(
+    disabled
+      ? {
+          label: {
+            color: labelDisabledColor,
+          },
+          container: {
+            borderColor: selected ? 'transparent' : disabledUnselectedBorderColorByType,
+            backgroundColor: selected ? containerDisabledColor : disabledUnselectedBackgroundColorByType,
+          },
+          leadingIcon: {
+            color: labelDisabledColor,
+          },
+          selectedIcon: {
+            color: labelDisabledColor,
+          },
+        }
+      : {
+          label: {
+            color: theme.surface.text,
+          },
+          container: {
+            borderColor: theme.outline,
+            borderWidth: Number(!selected && !elevated),
+            backgroundColor: selected ? theme.secondaryContainer.background : enabledBackgroundColorByType,
+          },
+          leadingIcon: {
+            color: theme.primary.background,
+          },
+          selectedIcon: {
+            color: theme.secondaryContainer.text,
+          },
+        }
+  );
+};

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

@@ -13,6 +13,7 @@ export interface InputChipProps<T extends IconProps> extends BaseChipProps {
   LeadingIcon?: React.FC<T>;
   leadingIconProps?: T;
   hasTrailingIcon?: boolean;
+  iconSize?: number;
 }
 
 export const InputChip = <T extends IconProps>({
@@ -23,6 +24,7 @@ export const InputChip = <T extends IconProps>({
   leadingIconProps = {} as T,
   style,
   labelStyle,
+  iconSize = 18,
   ...props
 }: InputChipProps<T>) => {
   const {surface, secondaryContainer, outline, primary} = useTheme();
@@ -50,8 +52,8 @@ export const InputChip = <T extends IconProps>({
     <BaseChip
       style={[dynamicStyles.container, imageUrl ? styles.chipWithAvatarContainer : [], style]}
       labelStyle={[dynamicStyles.label, labelStyle]}
-      leadingIcon={LeadingIcon ? <LeadingIcon size={18} color={primary.background} {...leadingIconProps} /> : renderLeadingAvatar()}
-      trailingIcon={hasTrailingIcon ? <CloseIcon size={18} color={onContainerColor} /> : null}
+      leadingIcon={LeadingIcon ? <LeadingIcon size={iconSize} color={primary.background} {...leadingIconProps} /> : renderLeadingAvatar()}
+      trailingIcon={hasTrailingIcon ? <CloseIcon size={iconSize} color={onContainerColor} /> : null}
       {...props}
     />
   );

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

@@ -30,6 +30,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}
+      disabled={disabled}
       {...props}
     />
   );

src/icons/done-icon/DoneIcon.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Svg, {Path} from 'react-native-svg';
+
+import {path} from './path.json';
+import type {IconProps} from '../icon-props';
+
+const DEFAULT_SIZE = 24;
+const DEFAULT_COLOR = '#000';
+
+export const DoneIcon = ({color = DEFAULT_COLOR, size = DEFAULT_SIZE, ...props}: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} {...props}>
+    <Path fill={color} d={path} />
+  </Svg>
+);

src/icons/done-icon/path.json

@@ -0,0 +1,3 @@
+{
+  "path": "M9 16.17l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+}

src/icons/index.tsx

@@ -1,3 +1,4 @@
+export {DoneIcon} from './done-icon/DoneIcon.component';
 export {EditIcon} from './edit-icon/EditIcon.component';
 export {PlusIcon} from './plus-icon/PlusIcon.component';
 export {TodayIcon} from './today-icon/TodayIcon.component';

src/index.tsx

@@ -5,6 +5,7 @@ export {Badge, type BadgeProps} from './badge/Badge.component';
 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';