Merge pull request #42 from lad-tech/fix-inputField

fix(InputField): changed styles for click-through rate
lad-tech · Jan 12, 2024 · e381d26 · e381d26
2 parents 461d2c6 + 517023c
commit e381d26
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 65 deletions.
diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap
@@ -62,13 +62,11 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly 1`] = `
               "flexDirection": "row",
               "justifyContent": "space-between",
               "marginVertical": 12,
-              "paddingLeft": 27,
-              "paddingRight": 24,
-              "paddingVertical": 18,
             },
             {
               "minHeight": 120,
             },
+            null,
             [
               {
                 "alignItems": "center",
@@ -97,10 +95,17 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly 1`] = `
           style={
             [
               {
+                "borderRadius": 12,
                 "flex": 1,
                 "padding": 0,
+                "paddingLeft": 27,
+                "paddingRight": 24,
+                "paddingVertical": 18,
                 "textAlignVertical": "top",
               },
+              {
+                "minHeight": 120,
+              },
               {
                 "color": "#20242D",
                 "fontFamily": "Inter-Regular",
@@ -240,13 +245,11 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly android 1`] = `
               "flexDirection": "row",
               "justifyContent": "space-between",
               "marginVertical": 12,
-              "paddingLeft": 27,
-              "paddingRight": 24,
-              "paddingVertical": 18,
             },
             {
               "minHeight": 120,
             },
+            null,
             [
               {
                 "alignItems": "center",
@@ -275,10 +278,17 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly android 1`] = `
           style={
             [
               {
+                "borderRadius": 12,
                 "flex": 1,
                 "padding": 0,
+                "paddingLeft": 27,
+                "paddingRight": 24,
+                "paddingVertical": 18,
                 "textAlignVertical": "top",
               },
+              {
+                "minHeight": 120,
+              },
               [
                 {
                   "color": "#20242D",
@@ -423,13 +433,11 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly with containerStyle
               "flexDirection": "row",
               "justifyContent": "space-between",
               "marginVertical": 12,
-              "paddingLeft": 27,
-              "paddingRight": 24,
-              "paddingVertical": 18,
             },
             {
               "minHeight": 120,
             },
+            null,
             [
               {
                 "alignItems": "center",
@@ -458,10 +466,17 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly with containerStyle
           style={
             [
               {
+                "borderRadius": 12,
                 "flex": 1,
                 "padding": 0,
+                "paddingLeft": 27,
+                "paddingRight": 24,
+                "paddingVertical": 18,
                 "textAlignVertical": "top",
               },
+              {
+                "minHeight": 120,
+              },
               {
                 "color": "#20242D",
                 "fontFamily": "Inter-Regular",

diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap
@@ -31,13 +31,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly 1`] = `
           "flexDirection": "row",
           "justifyContent": "space-between",
           "marginVertical": 12,
-          "paddingLeft": 27,
-          "paddingRight": 24,
-          "paddingVertical": 18,
         },
         {
           "minHeight": 120,
         },
+        null,
         [
           {
             "alignItems": "center",
@@ -67,10 +65,17 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly 1`] = `
       style={
         [
           {
+            "borderRadius": 12,
             "flex": 1,
             "padding": 0,
+            "paddingLeft": 27,
+            "paddingRight": 24,
+            "paddingVertical": 18,
             "textAlignVertical": "top",
           },
+          {
+            "minHeight": 120,
+          },
           {
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
@@ -124,13 +129,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 1
           "flexDirection": "row",
           "justifyContent": "space-between",
           "marginVertical": 12,
-          "paddingLeft": 27,
-          "paddingRight": 24,
-          "paddingVertical": 18,
         },
         {
           "minHeight": 120,
         },
+        null,
         [
           {
             "alignItems": "center",
@@ -159,10 +162,17 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 1
       style={
         [
           {
+            "borderRadius": 12,
             "flex": 1,
             "padding": 0,
+            "paddingLeft": 27,
+            "paddingRight": 24,
+            "paddingVertical": 18,
             "textAlignVertical": "top",
           },
+          {
+            "minHeight": 120,
+          },
           {
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
@@ -215,13 +225,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 2
           "flexDirection": "row",
           "justifyContent": "space-between",
           "marginVertical": 12,
-          "paddingLeft": 27,
-          "paddingRight": 24,
-          "paddingVertical": 18,
         },
         {
           "minHeight": 120,
         },
+        null,
         [
           {
             "alignItems": "center",
@@ -250,10 +258,17 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 2
       style={
         [
           {
+            "borderRadius": 12,
             "flex": 1,
             "padding": 0,
+            "paddingLeft": 27,
+            "paddingRight": 24,
+            "paddingVertical": 18,
             "textAlignVertical": "top",
           },
+          {
+            "minHeight": 120,
+          },
           {
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
@@ -306,13 +321,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly with props 1`]
           "flexDirection": "row",
           "justifyContent": "space-between",
           "marginVertical": 12,
-          "paddingLeft": 27,
-          "paddingRight": 24,
-          "paddingVertical": 18,
         },
         {
           "minHeight": 120,
         },
+        null,
         [
           {
             "alignItems": "center",
@@ -344,10 +357,17 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly with props 1`]
       style={
         [
           {
+            "borderRadius": 12,
             "flex": 1,
             "padding": 0,
+            "paddingLeft": 27,
+            "paddingRight": 24,
+            "paddingVertical": 18,
             "textAlignVertical": "top",
           },
+          {
+            "minHeight": 120,
+          },
           {
             "color": "#20242D",
             "fontFamily": "Inter-Regular",

diff --git a/packages/core/src/inputs/components/InputField/InputField.tsx b/packages/core/src/inputs/components/InputField/InputField.tsx
@@ -87,18 +87,28 @@ const InputField = forwardRef<ITextInput, IInputFieldsProps>((props, ref) => {
   const getHeight = () => {
     return multiline ? {minHeight: rem(80)} : {height: rem(48)};
   };
+
+  const getPadding = useCallback(() => {
+    return rightIcon ? {paddingRight: rem(16)} : null;
+  }, [rightIcon]);
+
   return (
     <View style={[styles.container, containerStyle]}>
       {title && (
         <InputTitle title={title} titleProps={titleProps} required={required} />
       )}
 
       <View
-        style={[styles.inputContainer, getHeight(), textInputContainerStyle]}>
+        style={[
+          styles.inputContainer,
+          getHeight(),
+          getPadding(),
+          textInputContainerStyle,
+        ]}>
         <TextInput
           ref={ref}
           testID={Constants.testID}
-          style={[styles.textInput, getStyle, style]}
+          style={[styles.textInput, getHeight(), getStyle, style]}
           placeholderTextColor={theme.colors.TextMuted}
           editable={!disabled}
           numberOfLines={1}