Merge pull request #1 from TVGSoft/feature/feat-year-calendar-independent-scroll

feat: add custom scroll and allow editing button

Author: TVGSOFT

src/Date/DatePickerModalContent.tsx

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

src/Date/DatePickerModalContentHeader.tsx

@@ -19,6 +19,7 @@ export interface HeaderPickProps {
   editIcon?: string
   calendarIcon?: string
   closeIcon?: string
+  allowEditing?: boolean
 }
 
 export interface HeaderContentProps extends HeaderPickProps {
@@ -60,12 +61,13 @@ export default function DatePickerModalContentHeader(
     uppercase,
     editIcon = 'pencil',
     calendarIcon = 'calendar',
+    allowEditing,
   } = props
 
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
-  const allowEditing = mode !== 'multiple'
+  const isAllowEditing = allowEditing && mode !== 'multiple'
   return (
     <View style={[styles.header]}>
       <View>
@@ -89,7 +91,7 @@ export default function DatePickerModalContentHeader(
         </View>
       </View>
       <View style={styles.fill} />
-      {allowEditing ? (
+      {isAllowEditing ? (
         <IconButton
           icon={collapsed ? editIcon : calendarIcon}
           accessibilityLabel={

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 { Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { range } from '../utils'
 
@@ -47,6 +47,9 @@ export default function YearPicker({
         ref={flatList}
         style={styles.list}
         data={years}
+        renderScrollComponent={(sProps) => {
+          return <ScrollView {...sProps} />
+        }}
         renderItem={({ item }) => (
           <Year
             year={item}