react-native-paper-dates 0.23.12 → 0.23.13

package/src/Date/DayName.tsx

@@ -13,7 +13,7 @@ function DayName({ label }: { label: string }) {
         maxFontSizeMultiplier={1.5}
         style={[
           styles.dayNameLabel,
-          { ...textFont, color: theme.colors.onSurface },
+          { ...textFont, color: theme.colors.onSurfaceVariant },
         ]}
         selectable={false}
       >
@@ -30,7 +30,6 @@ const styles = StyleSheet.create({
   },
   dayNameLabel: {
     fontSize: 14,
-    opacity: 0.7,
   },
 })
 

package/src/Date/DayNames.tsx

@@ -39,7 +39,10 @@ function DayNames({
 
   return (
     <View
-      style={[styles.dayNames, { backgroundColor: theme.colors.surface }]}
+      style={[
+        styles.dayNames,
+        { backgroundColor: theme.colors.elevation.level3 },
+      ]}
       pointerEvents="none"
     >
       {shortDayNames
@@ -53,7 +56,6 @@ function DayNames({
 const styles = StyleSheet.create({
   dayNames: {
     alignItems: 'center',
-    backgroundColor: '#fff',
     flexDirection: 'row',
     height: dayNamesHeight,
   },

package/src/Date/YearPicker.tsx

@@ -44,7 +44,7 @@ export default function YearPicker({
       style={[
         StyleSheet.absoluteFill,
         styles.root,
-        { backgroundColor: theme.colors.surface },
+        { backgroundColor: theme.colors.elevation.level3 },
         selectingYear ? sharedStyles.opacity1 : sharedStyles.opacity0,
       ]}
       pointerEvents={selectingYear ? 'auto' : 'none'}

package/src/Time/AmPmSwitcher.tsx

@@ -9,29 +9,34 @@ export default function AmPmSwitcher({
   onChange,
   hours,
   inputType,
+  direction = 'vertical',
 }: {
   hours: number
   onChange: (newHours: number) => any
   inputType: PossibleInputTypes
+  direction?: 'vertical' | 'horizontal'
 }) {
   const theme = useTheme()
 
   const { setMode, mode } = useContext(DisplayModeContext)
 
   const backgroundColor = theme.colors.outline
-
+  const isHorizontal = direction === 'horizontal'
   const isAM = mode === 'AM'
 
+  const height = isHorizontal ? 38 : inputType === inputTypes.keyboard ? 72 : 80
+
   return (
     <View
       style={[
-        styles.root,
+        isHorizontal ? styles.rootHorizontal : styles.rootVertical,
         // eslint-disable-next-line react-native/no-inline-styles
         {
           borderColor: backgroundColor,
           borderRadius: theme.roundness * 2,
-          height: inputType === inputTypes.keyboard ? 72 : 80,
-          marginBottom: inputType === 'keyboard' ? 16 : 0,
+          height,
+          marginBottom:
+            !isHorizontal && inputType === inputTypes.keyboard ? 16 : 0,
         },
       ]}
     >
@@ -46,7 +51,12 @@ export default function AmPmSwitcher({
         selected={isAM}
         disabled={isAM}
       />
-      <View style={[styles.switchSeparator, { backgroundColor }]} />
+      <View
+        style={[
+          isHorizontal ? styles.separatorHorizontal : styles.separatorVertical,
+          { backgroundColor },
+        ]}
+      />
       <SwitchButton
         label="PM"
         onPress={() => {
@@ -111,15 +121,25 @@ function SwitchButton({
 }
 
 const styles = StyleSheet.create({
-  root: {
+  rootVertical: {
     width: 52,
     borderWidth: 1,
     overflow: 'hidden',
   },
-  switchSeparator: {
+  rootHorizontal: {
+    width: 216,
+    flexDirection: 'row',
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  separatorVertical: {
     height: 1,
     width: 52,
   },
+  separatorHorizontal: {
+    width: 1,
+    alignSelf: 'stretch',
+  },
   switchButtonInner: {
     flex: 1,
     alignItems: 'center',

package/src/Time/TimeInputs.tsx

@@ -8,6 +8,7 @@ import { Text, useTheme } from 'react-native-paper'
 
 import {
   clockTypes,
+  inputTypes,
   PossibleClockTypes,
   PossibleInputTypes,
   toHourInputFormat,
@@ -52,6 +53,8 @@ function TimeInputs({
   const endInput = useRef<TextInputNative | null>(null)
   const dimensions = useWindowDimensions()
   const isLandscape = dimensions.width > dimensions.height
+  const useHorizontalAmPm =
+    !is24Hour && isLandscape && inputType === inputTypes.picker
   const minutesRef = useLatest(minutes)
 
   const onSubmitStartInput = useCallback(() => {
@@ -75,8 +78,8 @@ function TimeInputs({
     [onChange, minutesRef]
   )
 
-  return (
-    <View style={[styles.inputContainer, isLandscape && sharedStyles.root]}>
+  const hourMinuteRow = (
+    <View style={styles.inputContainer}>
       <View style={styles.column}>
         <TimeInput
           ref={startInput}
@@ -178,18 +181,37 @@ function TimeInputs({
           </Text>
         ) : null}
       </View>
-      {!is24Hour && (
+      {!is24Hour && !useHorizontalAmPm ? (
         <>
           <View style={styles.spaceBetweenInputsAndSwitcher} />
           <AmPmSwitcher
             hours={hours}
             onChange={onChangeHours}
             inputType={inputType}
+            direction="vertical"
           />
         </>
-      )}
+      ) : null}
     </View>
   )
+
+  if (useHorizontalAmPm) {
+    return (
+      <View style={styles.landscapeColumn}>
+        {hourMinuteRow}
+        <View style={styles.landscapeSwitcherSpacing}>
+          <AmPmSwitcher
+            hours={hours}
+            onChange={onChangeHours}
+            inputType={inputType}
+            direction="horizontal"
+          />
+        </View>
+      </View>
+    )
+  }
+
+  return hourMinuteRow
 }
 
 const styles = StyleSheet.create({
@@ -213,6 +235,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  landscapeColumn: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  landscapeSwitcherSpacing: {
+    marginTop: 16,
+  },
   spaceBetweenInputsAndSwitcher: {
     width: 12,
   },

package/src/Time/TimePicker.tsx

@@ -84,6 +84,14 @@ function TimePicker({
     [onChange, hours, is24Hour]
   )
 
+  const inputsWidth =
+    96 * 2 +
+    24 +
+    (is24Hour || (isLandscape && inputType === inputTypes.picker) ? 0 : 12 + 52)
+
+  const clockWidth =
+    inputType === inputTypes.picker ? circleSize + (isLandscape ? 64 : 0) : 0
+
   return (
     <DisplayModeContext.Provider
       value={{ mode: displayMode, setMode: setDisplayMode }}
@@ -91,18 +99,7 @@ function TimePicker({
       <View
         style={
           isLandscape
-            ? [
-                styles.rootLandscape,
-                {
-                  width:
-                    24 * 3 +
-                    96 * 2 +
-                    52 +
-                    (inputType === inputTypes.picker
-                      ? circleSize
-                      : -circleSize),
-                },
-              ]
+            ? [styles.rootLandscape, { width: inputsWidth + clockWidth }]
             : styles.rootPortrait
         }
       >
@@ -118,7 +115,12 @@ function TimePicker({
           locale={locale}
         />
         {inputType === inputTypes.picker ? (
-          <View style={styles.clockContainer}>
+          <View
+            style={[
+              styles.clockContainer,
+              isLandscape && styles.clockContainerLandscape,
+            ]}
+          >
             <AnalogClock
               hours={toHourInputFormat(hours, is24Hour)}
               minutes={minutes}
@@ -139,6 +141,11 @@ const styles = StyleSheet.create({
     paddingLeft: 12,
     paddingRight: 12,
   },
+  clockContainerLandscape: {
+    paddingTop: 0,
+    paddingLeft: 64,
+    paddingRight: 0,
+  },
   rootLandscape: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/Time/TimePickerModal.tsx

@@ -104,9 +104,7 @@ export function TimePickerModal({
     labelText = 'Enter time'
   }
 
-  const color = theme.dark
-    ? theme.colors.elevation.level3
-    : theme.colors.surface
+  const color = theme.colors.elevation.level3
 
   return (
     <Modal
@@ -140,6 +138,10 @@ export function TimePickerModal({
                 {
                   backgroundColor: color,
                   borderRadius: 28,
+                  minWidth: inputType === inputTypes.picker ? 328 : 280,
+                  ...(inputType === inputTypes.keyboard
+                    ? { height: 252 }
+                    : null),
                 },
               ]}
             >
@@ -172,7 +174,7 @@ export function TimePickerModal({
               </View>
               <View style={styles.bottom}>
                 <IconButton
-                  iconColor={theme.colors.onBackground}
+                  iconColor={theme.colors.onSurface}
                   icon={getTimeInputTypeIcon(inputType, {
                     keyboard: keyboardIcon,
                     picker: clockIcon,
@@ -220,7 +222,8 @@ const styles = StyleSheet.create({
   bottom: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 8,
+    paddingHorizontal: 24,
+    paddingVertical: 8,
   },
   center: {
     justifyContent: 'center',
@@ -228,7 +231,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   inputTypeToggle: {
-    margin: 4,
+    margin: 0,
   },
   labelContainer: {
     justifyContent: 'flex-end',
@@ -249,8 +252,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.34,
     shadowRadius: 6.27,
     elevation: 3,
-    minWidth: 328,
     paddingVertical: 8,
+    justifyContent: 'space-between',
   },
   timePickerContainer: {
     paddingLeft: 24,

package/src/Time/timeUtils.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react'
 import { useTheme } from 'react-native-paper'
 
 export const circleSize = 256
@@ -155,55 +154,25 @@ export function getAngle(left: number, top: number, size: number) {
 
 export function useSwitchColors(highlighted: boolean) {
   const theme = useTheme()
-  const backgroundColor = useMemo<string>(() => {
-    if (theme.dark) {
-      if (highlighted) {
-        return theme.colors.tertiaryContainer
-      }
-      return theme.colors.backdrop
-    }
-
-    if (highlighted) {
-      return theme.colors.primaryContainer
-    }
-    return theme.colors.surface
-  }, [highlighted, theme])
-
-  const color = useMemo<string>(() => {
-    if (highlighted && !theme.dark) {
-      return theme.colors.onSurfaceVariant
-    }
-    if (highlighted && theme.dark) {
-      return theme.colors.onTertiaryContainer
-    }
-    return theme.colors.onSurfaceVariant
-  }, [highlighted, theme])
+  const backgroundColor = highlighted
+    ? theme.colors.tertiaryContainer
+    : 'transparent'
+  const color = highlighted
+    ? theme.colors.onTertiaryContainer
+    : theme.colors.onSurfaceVariant
 
   return { backgroundColor, color }
 }
 
 export function useInputColors(highlighted: boolean) {
   const theme = useTheme()
-  const backgroundColor = useMemo<string>(() => {
-    if (theme.dark) {
-      if (highlighted) {
-        return theme.colors.primaryContainer
-      }
-      return theme.colors.surfaceVariant
-    }
-
-    if (highlighted) {
-      return theme.colors.secondaryContainer
-    }
-    return theme.colors.surfaceVariant
-  }, [highlighted, theme])
-
-  const color = useMemo<string>(() => {
-    if (!highlighted) {
-      return theme.colors.onSurface
-    }
-    return theme.colors.onPrimaryContainer
-  }, [highlighted, theme])
+  // M3: primaryContainer / surfaceContainerHighest (Paper: surfaceVariant)
+  const backgroundColor = highlighted
+    ? theme.colors.primaryContainer
+    : theme.colors.surfaceVariant
+  const color = highlighted
+    ? theme.colors.onPrimaryContainer
+    : theme.colors.onSurface
 
   return { backgroundColor, color }
 }

package/src/shared/utils.ts

@@ -26,7 +26,7 @@ export function useLatest<T>(value: T) {
 
 export function useHeaderBackgroundColor() {
   const theme = useTheme()
-  return theme.colors.surface
+  return theme.colors.elevation.level3
 }
 
 export function useHeaderTextColor() {