react-native-paper-dates 0.21.0 → 0.21.2

package/src/Date/DatePickerModalHeader.tsx

@@ -7,7 +7,6 @@ import { getTranslation } from '../translations/utils'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export interface DatePickerModalHeaderProps {
-  disableSafeTop?: boolean
   saveLabel?: string
   saveLabelDisabled?: boolean
   uppercase?: boolean
@@ -21,43 +20,43 @@ export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
   const theme = useTheme()
-  const { disableSafeTop, locale, closeIcon = 'close' } = props
+  const { locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
   const insets = useSafeAreaInsets()
 
   return (
-    <Animated.View
-      style={[
-        styles.animated,
-        // eslint-disable-next-line react-native/no-inline-styles
-        {
-          paddingTop: disableSafeTop ? 0 : insets.top,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-        },
-      ]}
-    >
-      <Appbar style={styles.appbarHeader}>
-        <Appbar.Action
-          icon={closeIcon}
-          accessibilityLabel={getTranslation(locale, 'close')}
-          onPress={props.onDismiss}
-          color={color}
-          testID="react-native-paper-dates-close"
-        />
-        <Appbar.Content title={''} />
-        <Button
-          textColor={theme.isV3 ? theme.colors.primary : color}
-          onPress={props.onSave}
-          disabled={props.saveLabelDisabled ?? false}
-          uppercase={props.uppercase ?? true}
-          testID="react-native-paper-dates-save"
-        >
-          {saveLabel}
-        </Button>
-      </Appbar>
-    </Animated.View>
+    <>
+      <Animated.View
+        style={[
+          styles.animated,
+          {
+            paddingLeft: insets.left,
+            paddingRight: insets.right,
+          },
+        ]}
+      >
+        <Appbar style={styles.appbarHeader}>
+          <Appbar.Action
+            icon={closeIcon}
+            accessibilityLabel={getTranslation(locale, 'close')}
+            onPress={props.onDismiss}
+            color={color}
+            testID="react-native-paper-dates-close"
+          />
+          <Appbar.Content title={''} />
+          <Button
+            textColor={theme.isV3 ? theme.colors.primary : color}
+            onPress={props.onSave}
+            disabled={props.saveLabelDisabled ?? false}
+            uppercase={props.uppercase ?? true}
+            testID="react-native-paper-dates-save"
+          >
+            {saveLabel}
+          </Button>
+        </Appbar>
+      </Animated.View>
+    </>
   )
 }
 

package/src/Date/DatePickerModalStatusBar.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useHeaderBackgroundColor } from '../utils'
+import Color from 'color'
+import { Platform, Animated, StatusBar, StatusBarStyle } from 'react-native'
+
+function DatePickerModalStatusBar({
+  disableSafeTop,
+  disableStatusBar,
+  statusBarOnTopOfBackdrop,
+}: {
+  disableSafeTop: boolean
+  disableStatusBar: boolean
+  statusBarOnTopOfBackdrop: boolean
+}) {
+  const insets = useSafeAreaInsets()
+  const headerBackgroundColor = useHeaderBackgroundColor()
+  const onDarkBackground =
+    Color(headerBackgroundColor).isDark() || statusBarOnTopOfBackdrop
+  const statusBarTheme: StatusBarStyle = onDarkBackground
+    ? 'light-content'
+    : 'dark-content'
+  const statusBarBackground = statusBarOnTopOfBackdrop
+    ? 'transparent'
+    : Platform.select({
+        android: headerBackgroundColor,
+        ios: headerBackgroundColor,
+        web: headerBackgroundColor,
+      })
+
+  return (
+    <>
+      {!disableStatusBar && (
+        <StatusBar
+          barStyle={statusBarTheme}
+          backgroundColor={statusBarBackground}
+          translucent={true}
+        />
+      )}
+      {!disableSafeTop && !statusBarOnTopOfBackdrop && (
+        <Animated.View
+          style={[
+            {
+              backgroundColor: statusBarBackground,
+              height: insets.top || StatusBar.currentHeight,
+            },
+          ]}
+        />
+      )}
+    </>
+  )
+}
+
+export default React.memo(DatePickerModalStatusBar)

package/src/Date/Month.tsx

@@ -305,6 +305,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             <View style={isHorizontal ? styles.opacity1 : styles.opacity0}>
               <IconButton
                 onPress={isHorizontal ? () => onPressYear(year) : undefined}
+                disabled
                 icon={
                   selectingYear
                     ? theme.isV3