Merge pull request #315 from SoyDiego/fix-alignment-calendar

fix alignment calendar icon

Author: iM-GeeKy

src/Date/DatePickerInput.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 
-import { IconButton } from 'react-native-paper'
-import { StyleSheet } from 'react-native'
+import { TextInput } from 'react-native-paper'
 import DatePickerModal from './DatePickerModal'
 import { useLatest } from '../utils'
 import type { DatePickerInputProps } from './DatePickerInput.shared'
@@ -32,11 +31,10 @@ function DatePickerInput(
     <DatePickerInputWithoutModal
       ref={ref}
       {...rest}
-      inputButtons={
+      inputButton={
         withModal ? (
-          <IconButton
+          <TextInput.Icon
             size={24}
-            style={styles.calendarButton}
             icon={calendarIcon}
             disabled={rest.disabled}
             onPress={() => setVisible(true)}
@@ -79,8 +77,4 @@ function DatePickerInput(
   )
 }
 
-const styles = StyleSheet.create({
-  calendarButton: { position: 'absolute', right: 0, zIndex: 10 },
-})
-
 export default React.forwardRef(DatePickerInput)

src/Date/DatePickerInputWithoutModal.tsx

@@ -20,7 +20,7 @@ function DatePickerInputWithoutModal(
     hideValidationErrors,
     onValidationError,
     modal,
-    inputButtons,
+    inputButton,
     saveLabel,
     saveLabelDisabled,
     uppercase,
@@ -42,7 +42,7 @@ function DatePickerInputWithoutModal(
       endYear: DatePickerInputProps['endYear']
       inputEnabled: DatePickerInputProps['inputEnabled']
     }) => any
-    inputButtons?: any
+    inputButton?: React.ReactNode
   },
   ref: any
 ) {
@@ -93,8 +93,8 @@ function DatePickerInputWithoutModal(
             keyboardAppearance={theme.dark ? 'dark' : 'default'}
             error={(!!error && !hideValidationErrors) || !!hasError}
             style={[styles.input, style]}
+            inputButton={inputButton}
           />
-          {inputButtons}
         </View>
         {error && !hideValidationErrors ? (
           <HelperText type="error" visible={!!error}>
@@ -136,6 +136,8 @@ function getLabel({
 const styles = StyleSheet.create({
   root: {
     flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
   },
   inputContainer: {
     flexGrow: 1,

src/TextInputMask.tsx

@@ -13,13 +13,18 @@ function escapeForRegExp(value: string): string {
 
 function TextInputWithMask(
   {
+    inputButton,
     onChangeText,
     onChange,
     value,
     mask,
     disabled,
     ...rest
-  }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },
+  }: React.ComponentProps<typeof TextInput> & {
+    mask: string
+    value: string
+    inputButton: React.ReactNode
+  },
   ref: any
 ) {
   const [controlledValue, setControlledValue] = React.useState<string>(
@@ -79,6 +84,7 @@ function TextInputWithMask(
         onChange && onChange(e)
       }}
       maxLength={10}
+      right={inputButton}
     />
   )
 }

src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap

@@ -3859,7 +3859,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
       <View
         style={
           {
+            "alignItems": "flex-start",
             "flexGrow": 1,
+            "justifyContent": "center",
           }
         }
       >

src/__tests__/Date/__snapshots__/CalendarEdit.test.tsx.snap

@@ -11,7 +11,9 @@ exports[`renders CalendarEdit 1`] = `
   <View
     style={
       {
+        "alignItems": "flex-start",
         "flexGrow": 1,
+        "justifyContent": "center",
       }
     }
   >

src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap

@@ -4,7 +4,9 @@ exports[`renders DatePickerInput 1`] = `
 <View
   style={
     {
+      "alignItems": "flex-start",
       "flexGrow": 1,
+      "justifyContent": "center",
     }
   }
 >