From 467df4085247b240de9ba7794a3c761b2331713e Mon Sep 17 00:00:00 2001
From: irekrog <irek.rog@mobilereality.pl>
Date: Fri, 19 Nov 2021 14:03:54 +0100
Subject: [PATCH] fix: clear option button

---
 src/components/select-control/index.tsx | 21 +++++++++++++++--
 src/components/select/index.tsx         |  6 +++++
 src/types/index.ts                      | 30 ++++++++++++++++++++++++-
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/components/select-control/index.tsx b/src/components/select-control/index.tsx
index cd39f5a5..ebdddb46 100644
--- a/src/components/select-control/index.tsx
+++ b/src/components/select-control/index.tsx
@@ -32,6 +32,9 @@ type FromSelectComponentProps = Pick<
     | 'selectControlOpenDropdownA11yLabel'
     | 'selectControlCloseDropdownA11yLabel'
     | 'selectControlTextStyle'
+    | 'selectControlClearOptionButtonStyle'
+    | 'selectControlClearOptionButtonHitSlop'
+    | 'selectControlClearOptionImageStyle'
 >;
 
 type SelectControlProps = OptionalToRequired<
@@ -57,6 +60,9 @@ export const SelectControl = forwardRef<View, SelectControlProps>(
             disabled,
             placeholderText,
             selectControlDisabledStyle,
+            selectControlClearOptionButtonHitSlop,
+            selectControlClearOptionButtonStyle,
+            selectControlClearOptionImageStyle,
             selectControlClearOptionA11yLabel,
             selectControlOpenDropdownA11yLabel,
             selectControlCloseDropdownA11yLabel,
@@ -117,10 +123,16 @@ export const SelectControl = forwardRef<View, SelectControlProps>(
                                 selectControlClearOptionA11yLabel || 'Clear a chosen option'
                             }
                             disabled={disabled}
-                            onPress={onPressRemove}>
+                            hitSlop={
+                                selectControlClearOptionButtonHitSlop
+                                    ? selectControlClearOptionButtonHitSlop
+                                    : { right: 3, left: 3 }
+                            }
+                            onPress={onPressRemove}
+                            style={[styles.xIconWrapper, selectControlClearOptionButtonStyle]}>
                             <Image
                                 source={require('./../../assets/icons/x.png')}
-                                style={styles.xIcon}
+                                style={[styles.xIcon, selectControlClearOptionImageStyle]}
                             />
                         </TouchableOpacity>
                     )}
@@ -151,6 +163,7 @@ type Styles = {
     arrowIconOpened: ImageStyle;
     arrowIconClosed: ImageStyle;
     xIcon: ImageStyle;
+    xIconWrapper: ViewStyle;
 };
 
 const styles = StyleSheet.create<Styles>({
@@ -195,6 +208,10 @@ const styles = StyleSheet.create<Styles>({
         height: 25,
         zIndex: -1,
     },
+    xIconWrapper: {
+        height: '100%',
+        justifyContent: 'center',
+    },
     xIcon: {
         width: 20,
         height: 20,
diff --git a/src/components/select/index.tsx b/src/components/select/index.tsx
index c4bd05c5..d78f2687 100644
--- a/src/components/select/index.tsx
+++ b/src/components/select/index.tsx
@@ -41,6 +41,9 @@ export const Select = forwardRef((props: SelectProps, ref: ForwardedRef<SelectRe
         placeholderText = 'Select...',
         selectContainerStyle,
         selectControlButtonsContainerStyle,
+        selectControlClearOptionButtonStyle,
+        selectControlClearOptionImageStyle,
+        selectControlClearOptionButtonHitSlop,
         selectControlClearOptionA11yLabel,
         selectControlOpenDropdownA11yLabel,
         selectControlCloseDropdownA11yLabel,
@@ -170,6 +173,9 @@ export const Select = forwardRef((props: SelectProps, ref: ForwardedRef<SelectRe
                 ref={containerRef}
                 selectControlButtonsContainerStyle={selectControlButtonsContainerStyle}
                 selectControlClearOptionA11yLabel={selectControlClearOptionA11yLabel}
+                selectControlClearOptionButtonHitSlop={selectControlClearOptionButtonHitSlop}
+                selectControlClearOptionButtonStyle={selectControlClearOptionButtonStyle}
+                selectControlClearOptionImageStyle={selectControlClearOptionImageStyle}
                 selectControlCloseDropdownA11yLabel={selectControlCloseDropdownA11yLabel}
                 selectControlDisabledStyle={selectControlDisabledStyle}
                 selectControlOpenDropdownA11yLabel={selectControlOpenDropdownA11yLabel}
diff --git a/src/types/index.ts b/src/types/index.ts
index c126fe24..9a2b87ad 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,11 @@
-import type { FlatListProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type {
+    FlatListProps,
+    ImageStyle,
+    Insets,
+    StyleProp,
+    TextStyle,
+    ViewStyle,
+} from 'react-native';
 
 export type OptionType = {
     label: string;
@@ -74,6 +81,27 @@ export interface SelectProps {
      */
     selectControlButtonsContainerStyle?: StyleProp<ViewStyle>;
 
+    /**
+     *  Style of clear option button
+     *
+     *  @category Styles
+     */
+    selectControlClearOptionButtonStyle?: StyleProp<ViewStyle>;
+
+    /**
+     *  Hit Slop for clear option button
+     *
+     *  @category Styles
+     */
+    selectControlClearOptionButtonHitSlop?: Insets;
+
+    /**
+     *  Style of clear option image
+     *
+     *  @category Styles
+     */
+    selectControlClearOptionImageStyle?: ImageStyle;
+
     /**
      * Style of container select control
      *