From a6b49cf9868af17dce9ab1555802f8096b4600cf Mon Sep 17 00:00:00 2001
From: YingFeiZhou <YingFeiZhou@boyaa.com>
Date: Mon, 3 Mar 2025 16:31:34 +0800
Subject: [PATCH] feat: Pass to render a custom clear button

---
 src/components/textField/ClearButton.tsx | 31 +++++++++++++++---------
 src/components/textField/index.tsx       |  3 +++
 src/components/textField/types.ts        |  7 ++++++
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/textField/ClearButton.tsx b/src/components/textField/ClearButton.tsx
index 3fd8f03a01..5e3c772c6c 100644
--- a/src/components/textField/ClearButton.tsx
+++ b/src/components/textField/ClearButton.tsx
@@ -17,7 +17,7 @@ const TIMING_CONFIG = {
   easing: Easing.bezier(0.33, 1, 0.68, 1)
 };
 
-const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearButtonProps) => {
+const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle,ClearButtonContentComponent}: ClearButtonProps) => {
   const {hasValue} = useContext(FieldContext);
   const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
   const animatedOpacity = useSharedValue(hasValue ? 1 : 0);
@@ -49,16 +49,25 @@ const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearBut
 
   return (
     <View reanimated style={style} testID={`${testID}.container`}>
-      <Button
-        link
-        iconSource={Assets.icons.xFlat}
-        iconStyle={styles.clearIcon}
-        onPress={clear}
-        hitSlop={hitSlop}
-        accessible={hasValue}
-        accessibilityLabel={'clear'}
-        testID={testID}
-      />
+
+      {ClearButtonContentComponent? 
+        <ClearButtonContentComponent 
+          onPress={clear} 
+          hitSlop={hitSlop}
+          accessible={hasValue}
+          accessibilityLabel={'clear'}
+          testID={testID}/> :
+        <Button
+          link
+          iconSource={Assets.icons.xFlat}
+          iconStyle={styles.clearIcon}
+          onPress={clear}
+          hitSlop={hitSlop}
+          accessible={hasValue}
+          accessibilityLabel={'clear'}
+          testID={testID}
+      />}
+     
     </View>
   );
 };
diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx
index 1e61189909..8dc902300a 100644
--- a/src/components/textField/index.tsx
+++ b/src/components/textField/index.tsx
@@ -76,6 +76,7 @@ const TextField = (props: InternalTextFieldProps) => {
     topTrailingAccessory,
     bottomAccessory,
     showClearButton,
+    ClearButtonContentComponent,
     onClear,
     // Validation
     enableErrors, // TODO: rename to enableValidation
@@ -210,11 +211,13 @@ const TextField = (props: InternalTextFieldProps) => {
             </View>
           )}
           {showClearButton && (
+          
             <ClearButton
               onClear={onClear}
               testID={`${props.testID}.clearButton`}
               onChangeText={onChangeText}
               clearButtonStyle={clearButtonStyle}
+              ClearButtonContentComponent={ClearButtonContentComponent}
             />
           )}
           {trailingAccessory}
diff --git a/src/components/textField/types.ts b/src/components/textField/types.ts
index 1f98fe7874..309b92c25d 100644
--- a/src/components/textField/types.ts
+++ b/src/components/textField/types.ts
@@ -78,6 +78,8 @@ export interface ClearButtonProps extends Pick<TextInputProps, 'testID' | 'onCha
    * The style of the clear button
    */
   clearButtonStyle?: StyleProp<ViewStyle>;
+  /** Pass to render a custom clear button */
+  ClearButtonContentComponent?: ReactElement;
 }
 
 export interface LabelProps extends MandatoryIndication, Pick<ValidationMessageProps, 'enableErrors'> {
@@ -226,6 +228,11 @@ export type TextFieldProps = MarginModifiers &
      * Should show a clear button when there is a value
      */
     showClearButton?: boolean;
+
+    /**
+     * Pass to render a custom clear button
+     */
+    ClearButtonContentComponent?: ReactElement;
     /**
      * Text to display under the input
      */