feat: add clear all on ChipSelect

changelogs/unreleased/87396.json

@@ -0,0 +1,5 @@
+{
+  "title": "ChipSelect: add showClearButton prop to clear all selected chips",
+  "type": "feat",
+  "packages": "ui"
+}

packages/ui/__tests__/components/organisms/ChipSelect.test.js

@@ -19,7 +19,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {shallow} from 'enzyme';
-import {Chip, ChipSelect} from '@axelor/aos-mobile-ui';
+import {Button, Chip, ChipSelect} from '@axelor/aos-mobile-ui';
 import {getGlobalStyles, getDefaultThemeColors} from '../../tools';
 
 describe('ChipSelect Component', () => {
@@ -218,4 +218,20 @@ describe('ChipSelect Component', () => {
       );
     }
   });
+
+  it('should clear all selected chips when Clear All button is pressed', () => {
+    const onChangeValue = jest.fn();
+
+    const wrapper = shallow(
+      <ChipSelect
+        {...props}
+        onChangeValue={onChangeValue}
+        showClearButton={true}
+      />,
+    );
+
+    wrapper.find(Button).simulate('press');
+
+    expect(onChangeValue).toHaveBeenCalledWith([]);
+  });
 });

packages/ui/src/components/organisms/ChipSelect/ChipSelect.tsx

@@ -18,8 +18,8 @@
 
 import React, {useEffect, useMemo, useState} from 'react';
 import {Dimensions, StyleSheet, View, ScrollView} from 'react-native';
-import {Color} from '../../../theme/themes';
-import {Chip} from '../../molecules';
+import {useThemeColor, Color} from '../../../theme';
+import {Button, Chip} from '../../molecules';
 
 const CHIP_CONTAINER_MARGIN = 16;
 const CHIP_MARGIN = 2;
@@ -46,6 +46,7 @@ interface ChipSelectProps {
   readonly?: boolean;
   chipNumberOfLines?: number;
   onChangeValue?: (value: any) => void;
+  showClearButton?: boolean;
 }
 
 const ChipSelect = ({
@@ -58,7 +59,10 @@ const ChipSelect = ({
   readonly = false,
   chipNumberOfLines,
   onChangeValue = () => {},
+  showClearButton = false,
 }: ChipSelectProps) => {
+  const Colors = useThemeColor();
+
   const [selectedChip, setSelectedChip] = useState<Item[]>(
     selectionItems.filter(item => item.isActive === true),
   );
@@ -127,6 +131,11 @@ const ChipSelect = ({
     );
   };
 
+  const clearAllChips = () => {
+    setSelectedChip([]);
+    onChangeValue([]);
+  };
+
   if (
     selectionItems.length < 2 ||
     (mode !== MODES.multi && mode !== MODES.switch)
@@ -136,7 +145,25 @@ const ChipSelect = ({
 
   return (
     <View style={[styles.chipContainer, style]}>
-      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+      <ScrollView
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContainer}>
+        {showClearButton && (
+          <Button
+            iconName="trash"
+            color={
+              selectedChip.length > 0
+                ? Colors.primaryColor
+                : Colors.secondaryColor
+            }
+            onPress={clearAllChips}
+            disabled={selectedChip.length === 0}
+            iconSize={18}
+            width={40}
+            style={styles.clearButton}
+          />
+        )}
         {selectionItems?.map((item, index) => (
           <Chip
             key={index}
@@ -163,6 +190,13 @@ const styles = StyleSheet.create({
     marginHorizontal: CHIP_CONTAINER_MARGIN,
     marginVertical: 2,
   },
+  scrollContainer: {
+    alignItems: 'center',
+  },
+  clearButton: {
+    marginRight: 5,
+    height: 40,
+  },
 });
 
 export default ChipSelect;

packages/ui/stories/organisms/ChipSelect.stories.tsx

@@ -44,6 +44,7 @@ export const ChipSelect: Story<typeof Component> = {
     option2_color: 'plannedColor',
     option3_title: 'Option 3',
     option3_color: 'infoColor',
+    showClearButton: false,
   },
   argTypes: {
     option1_color: colorPicker,
@@ -76,5 +77,5 @@ export const ChipSelect: Story<typeof Component> = {
       onChangeValue={() => {}}
       {...args}
     />
-  )
+  ),
 };