Merge pull request #202 from hearti-lab/master

Custom scroll in year picker and allow editing button

Author: RichardLindhout

src/Date/DatePickerModalContent.tsx

@@ -165,6 +165,7 @@ export function DatePickerModalContent(
           locale={locale}
           editIcon={props?.editIcon}
           calendarIcon={props.calendarIcon}
+          allowEditing={props.allowEditing || true}
         />
       </DatePickerModalHeaderBackground>
       <AnimatedCrossView

src/Date/DatePickerModalContentHeader.tsx

@@ -19,6 +19,7 @@ export interface HeaderPickProps {
   editIcon?: string
   calendarIcon?: string
   closeIcon?: string
+  allowEditing?: boolean
 }
 
 export interface HeaderContentProps extends HeaderPickProps {
@@ -62,19 +63,18 @@ export default function DatePickerModalContentHeader(
     editIcon,
     calendarIcon,
     inputDate,
+    allowEditing,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
-  const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
-  let allowEditing = mode !== 'multiple'
 
-  if (inputDate !== undefined) {
-    allowEditing = inputDate
-  }
+  const isAllowEditing = allowEditing && mode !== 'multiple' && inputDate !== undefined
+
+  const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
 
-  let textFont = theme?.isV3
+  const textFont = theme?.isV3
     ? theme.fonts.labelMedium
     : (theme as any as MD2Theme).fonts.medium
 
@@ -103,7 +103,7 @@ export default function DatePickerModalContentHeader(
         </View>
       </View>
       <View style={styles.fill} />
-      {allowEditing ? (
+      {isAllowEditing ? (
         <IconButton
           icon={
             collapsed

src/Date/YearPicker.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FlatList, StyleSheet, View } from 'react-native'
+import { FlatList, StyleSheet, View, ScrollView } from 'react-native'
 import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../utils'
 
@@ -50,6 +50,9 @@ export default function YearPicker({
         ref={flatList}
         style={styles.list}
         data={years}
+        renderScrollComponent={(sProps) => {
+          return <ScrollView {...sProps} />
+        }}
         renderItem={({ item }) => (
           <Year
             year={item}