fix: ability to override padding in select (#196)

MobileReality · Mar 1, 2023 · 50840ad · 50840ad
1 parent a8acf08
commit 50840ad
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 82 deletions.
diff --git a/.changeset/stale-crabs-add.md b/.changeset/stale-crabs-add.md
@@ -0,0 +1,5 @@
+---
+'@mobile-reality/react-native-select-pro': patch
+---
+
+ability to override padding in select
diff --git a/...react-native-select-pro/src/__tests__/__snapshots__/react-native-select-pro.test.tsx.snap b/...react-native-select-pro/src/__tests__/__snapshots__/react-native-select-pro.test.tsx.snap
@@ -43,8 +43,12 @@ exports[`Select should generate Select snapshot 1`] = `
             "borderWidth": 1,
             "flexDirection": "row",
             "height": 40,
+            "paddingHorizontal": 12,
             "width": "100%",
           },
+          {
+            "paddingRight": 55,
+          },
           false,
           undefined,
           false,
@@ -53,17 +57,11 @@ exports[`Select should generate Select snapshot 1`] = `
     >
       <View
         style={
-          [
-            {
-              "flex": 1,
-              "height": "100%",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            {
-              "paddingRight": 55,
-            },
-          ]
+          {
+            "flex": 1,
+            "height": "100%",
+            "justifyContent": "center",
+          }
         }
       >
         <Text
@@ -173,8 +171,12 @@ exports[`Select with custom left icon should generate Select with custom left ic
             "borderWidth": 1,
             "flexDirection": "row",
             "height": 40,
+            "paddingHorizontal": 12,
             "width": "100%",
           },
+          {
+            "paddingRight": 55,
+          },
           false,
           undefined,
           false,
@@ -210,17 +212,11 @@ exports[`Select with custom left icon should generate Select with custom left ic
       </View>
       <View
         style={
-          [
-            {
-              "flex": 1,
-              "height": "100%",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            {
-              "paddingRight": 55,
-            },
-          ]
+          {
+            "flex": 1,
+            "height": "100%",
+            "justifyContent": "center",
+          }
         }
       >
         <Text
@@ -330,8 +326,12 @@ exports[`Select with custom select control arrow icon should generate Select wit
             "borderWidth": 1,
             "flexDirection": "row",
             "height": 40,
+            "paddingHorizontal": 12,
             "width": "100%",
           },
+          {
+            "paddingRight": 55,
+          },
           false,
           undefined,
           false,
@@ -340,17 +340,11 @@ exports[`Select with custom select control arrow icon should generate Select wit
     >
       <View
         style={
-          [
-            {
-              "flex": 1,
-              "height": "100%",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            {
-              "paddingRight": 55,
-            },
-          ]
+          {
+            "flex": 1,
+            "height": "100%",
+            "justifyContent": "center",
+          }
         }
       >
         <Text
@@ -460,8 +454,12 @@ exports[`Select with multi selection and searchable should generate Select with
             "borderWidth": 1,
             "flexDirection": "row",
             "height": 40,
+            "paddingHorizontal": 12,
             "width": "100%",
           },
+          {
+            "paddingRight": 40,
+          },
           false,
           undefined,
           false,
@@ -470,17 +468,11 @@ exports[`Select with multi selection and searchable should generate Select with
     >
       <View
         style={
-          [
-            {
-              "flex": 1,
-              "height": "100%",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            {
-              "paddingRight": 40,
-            },
-          ]
+          {
+            "flex": 1,
+            "height": "100%",
+            "justifyContent": "center",
+          }
         }
       >
         <RCTScrollView
@@ -603,8 +595,12 @@ exports[`Select with multi selection should generate Select with multi selection
             "borderWidth": 1,
             "flexDirection": "row",
             "height": 40,
+            "paddingHorizontal": 12,
             "width": "100%",
           },
+          {
+            "paddingRight": 40,
+          },
           false,
           undefined,
           false,
@@ -613,17 +609,11 @@ exports[`Select with multi selection should generate Select with multi selection
     >
       <View
         style={
-          [
-            {
-              "flex": 1,
-              "height": "100%",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            {
-              "paddingRight": 40,
-            },
-          ]
+          {
+            "flex": 1,
+            "height": "100%",
+            "justifyContent": "center",
+          }
         }
       >
         <RCTScrollView
@@ -746,8 +736,12 @@ exports[`Select with searchable enabled should generate Select with searchable e
             "borderWidth": 1,
             "flexDirection": "row",
             "height": 40,
+            "paddingHorizontal": 12,
             "width": "100%",
           },
+          {
+            "paddingRight": 55,
+          },
           false,
           undefined,
           false,
@@ -756,17 +750,11 @@ exports[`Select with searchable enabled should generate Select with searchable e
     >
       <View
         style={
-          [
-            {
-              "flex": 1,
-              "height": "100%",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            {
-              "paddingRight": 55,
-            },
-          ]
+          {
+            "flex": 1,
+            "height": "100%",
+            "justifyContent": "center",
+          }
         }
       >
         <TextInput

diff --git a/packages/react-native-select-pro/src/components/select-control/select-control.hooks.ts b/packages/react-native-select-pro/src/components/select-control/select-control.hooks.ts
@@ -81,5 +81,6 @@ export const useSelectControl = () => {
         leftIconStyles,
         containerStyles,
         disabledStyles,
+        multiple,
     };
 };
diff --git a/packages/react-native-select-pro/src/components/select-control/select-control.tsx b/packages/react-native-select-pro/src/components/select-control/select-control.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import type { ViewStyle } from 'react-native';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
-import { BORDER_WIDTH, COLORS, SHAPE } from '../../constants';
+import { BORDER_WIDTH, COLORS, PADDING, SHAPE } from '../../constants';
 import { Arrow } from '../arrow';
 import { ClearOption } from '../clear-option';
 import { SelectFieldType } from '../select-field-type';
@@ -28,6 +28,7 @@ export const SelectControl = forwardRef<View>((_, ref) => {
         leftIconStyles,
         containerStyles,
         disabledStyles,
+        multiple,
     } = useSelectControl();
 
     const clearOption = <ClearOption />;
@@ -43,6 +44,7 @@ export const SelectControl = forwardRef<View>((_, ref) => {
                 accessibilityLabel={accessibilityLabel}
                 style={[
                     styles.container,
+                    multiple ? styles.multiSelect : styles.singleSelect,
                     isOpened && (aboveSelectControl ? styles.openedAbove : styles.opened),
                     containerStyles,
                     disabled && [styles.disabled, disabledStyles],
@@ -78,6 +80,8 @@ type Styles = {
     disabled: ViewStyle;
     openedAbove: ViewStyle;
     opened: ViewStyle;
+    multiSelect: ViewStyle;
+    singleSelect: ViewStyle;
 };
 
 const styles = StyleSheet.create<Styles>({
@@ -114,6 +118,7 @@ const styles = StyleSheet.create<Styles>({
         borderRadius: SHAPE,
         borderWidth: BORDER_WIDTH,
         backgroundColor: COLORS.WHITE,
+        paddingHorizontal: PADDING,
     },
     disabled: {
         backgroundColor: COLORS.DISABLED,
@@ -126,6 +131,12 @@ const styles = StyleSheet.create<Styles>({
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
     },
+    multiSelect: {
+        paddingRight: 40,
+    },
+    singleSelect: {
+        paddingRight: 55,
+    },
 });
 
 SelectControl.displayName = 'SelectControl';
diff --git a/packages/react-native-select-pro/src/components/select-field-type/select-field-type.tsx b/packages/react-native-select-pro/src/components/select-field-type/select-field-type.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet, View } from 'react-native';
 
-import { PADDING } from '../../constants';
 import { MultiSelect } from '../multi-select';
 import { SelectInput } from '../select-input';
 import { SelectText } from '../select-text';
@@ -24,30 +23,17 @@ export const SelectFieldType = () => {
         return <SelectText selectedOptionLabel={selectedOptionLabel} />;
     };
 
-    return (
-        <View style={[styles.container, multiple ? styles.multiSelect : styles.singleSelect]}>
-            {renderSelectFieldType()}
-        </View>
-    );
+    return <View style={styles.container}>{renderSelectFieldType()}</View>;
 };
 
 type Styles = {
     container: ViewStyle;
-    multiSelect: ViewStyle;
-    singleSelect: ViewStyle;
 };
 
 const styles = StyleSheet.create<Styles>({
     container: {
         flex: 1,
         height: '100%',
-        paddingHorizontal: PADDING,
         justifyContent: 'center',
     },
-    multiSelect: {
-        paddingRight: 40,
-    },
-    singleSelect: {
-        paddingRight: 55,
-    },
 });