react-native-paper-dates 0.11.5 → 0.11.7

package/src/Time/TimeInput.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { View, TextInput, TextInputProps, StyleSheet } from 'react-native'
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  StyleSheet,
+  Platform,
+} from 'react-native'
 import { useTheme, TouchableRipple } from 'react-native-paper'
 
 import Color from 'color'
@@ -68,10 +74,17 @@ function TimeInput(
         ref={ref}
         style={[
           styles.input,
+          // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
             backgroundColor,
-            borderRadius: theme.roundness,
+            borderRadius: theme.roundness * 2,
+            borderColor:
+              theme.isV3 && highlighted
+                ? theme.colors.onPrimaryContainer
+                : undefined,
+            borderWidth: theme.isV3 && highlighted ? 2 : 0,
+            height: inputType === inputTypes.keyboard ? 72 : 80,
           },
         ]}
         value={formattedValue}
@@ -89,11 +102,14 @@ function TimeInput(
             StyleSheet.absoluteFill,
             styles.buttonOverlay,
             {
-              // backgroundColor: 'blue',
               borderRadius: theme.roundness,
             },
           ]}
-          rippleColor={Color(theme.colors.primary).fade(0.7).hex()}
+          rippleColor={
+            Platform.OS !== 'ios'
+              ? Color(theme.colors.onSurface).fade(0.7).hex()
+              : undefined
+          }
           onPress={() => onPress(clockType)}
           borderless={true}
         >
@@ -107,11 +123,10 @@ function TimeInput(
 const styles = StyleSheet.create({
   root: { position: 'relative', height: 80, width: 96 },
   input: {
-    fontSize: 50,
+    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96,
-    height: 80,
   },
   buttonOverlay: { overflow: 'hidden' },
 })

package/src/Time/TimeInputs.tsx

@@ -1,6 +1,3 @@
-// @typescript-eslint/no-unused-vars
-// WORK IN PROGRESS
-
 import * as React from 'react'
 import {
   View,
@@ -8,7 +5,7 @@ import {
   useWindowDimensions,
   TextInput as TextInputNative,
 } from 'react-native'
-import { MD2Theme, useTheme } from 'react-native-paper'
+import { MD2Theme, Text, useTheme } from 'react-native-paper'
 
 import {
   clockTypes,
@@ -78,41 +75,56 @@ function TimeInputs({
         isLandscape && styles.inputContainerLandscape,
       ]}
     >
-      <TimeInput
-        ref={startInput}
-        placeholder={'00'}
-        value={toHourInputFormat(hours, is24Hour)}
-        clockType={clockTypes.hours}
-        pressed={focused === clockTypes.hours}
-        onPress={onFocusInput}
-        inputType={inputType}
-        selectionColor={
-          theme.dark
-            ? Color(theme.colors.primary).darken(0.2).hex()
-            : theme.colors.primary
-        }
-        returnKeyType={'next'}
-        onSubmitEditing={onSubmitStartInput}
-        blurOnSubmit={false}
-        onChanged={(newHoursFromInput) => {
-          let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour)
-          if (newHoursFromInput > 24) {
-            newHours = 24
+      <View style={styles.column}>
+        <TimeInput
+          ref={startInput}
+          placeholder={'00'}
+          value={toHourInputFormat(hours, is24Hour)}
+          clockType={clockTypes.hours}
+          pressed={focused === clockTypes.hours}
+          onPress={onFocusInput}
+          inputType={inputType}
+          selectionColor={
+            theme.dark
+              ? Color(theme.colors.primary).darken(0.2).hex()
+              : theme.colors.primary
           }
-          onChange({
-            hours: newHours,
-            minutes,
-          })
-        }}
-      />
-      <View style={styles.hoursAndMinutesSeparator}>
+          returnKeyType={'next'}
+          onSubmitEditing={onSubmitStartInput}
+          blurOnSubmit={false}
+          onChanged={(newHoursFromInput) => {
+            let newHours = toHourOutputFormat(
+              newHoursFromInput,
+              hours,
+              is24Hour
+            )
+            if (newHoursFromInput > 24) {
+              newHours = 24
+            }
+            onChange({
+              hours: newHours,
+              minutes,
+            })
+          }}
+        />
+        {inputType === 'keyboard' ? (
+          <Text variant="bodySmall">Hour</Text>
+        ) : null}
+      </View>
+      <View
+        style={[
+          styles.hoursAndMinutesSeparator,
+          // eslint-disable-next-line react-native/no-inline-styles
+          { marginBottom: inputType === 'keyboard' ? 24 : 0 },
+        ]}
+      >
         <View style={styles.spaceDot} />
         <View
           style={[
             styles.dot,
             {
               backgroundColor: theme?.isV3
-                ? theme.colors.onBackground
+                ? theme.colors.onSurface
                 : (theme as any as MD2Theme).colors.text,
             },
           ]}
@@ -123,42 +135,51 @@ function TimeInputs({
             styles.dot,
             {
               backgroundColor: theme?.isV3
-                ? theme.colors.onBackground
+                ? theme.colors.onSurface
                 : (theme as any as MD2Theme).colors.text,
             },
           ]}
         />
         <View style={styles.spaceDot} />
       </View>
-      <TimeInput
-        ref={endInput}
-        placeholder={'00'}
-        value={minutes}
-        clockType={clockTypes.minutes}
-        pressed={focused === clockTypes.minutes}
-        onPress={onFocusInput}
-        inputType={inputType}
-        selectionColor={
-          theme.dark
-            ? Color(theme.colors.primary).darken(0.2).hex()
-            : theme.colors.primary
-        }
-        onSubmitEditing={onSubmitEndInput}
-        onChanged={(newMinutesFromInput) => {
-          let newMinutes = newMinutesFromInput
-          if (newMinutesFromInput > 59) {
-            newMinutes = 59
+      <View style={styles.column}>
+        <TimeInput
+          ref={endInput}
+          placeholder={'00'}
+          value={minutes}
+          clockType={clockTypes.minutes}
+          pressed={focused === clockTypes.minutes}
+          onPress={onFocusInput}
+          inputType={inputType}
+          selectionColor={
+            theme.dark
+              ? Color(theme.colors.primary).darken(0.2).hex()
+              : theme.colors.primary
           }
-          onChange({
-            hours,
-            minutes: newMinutes,
-          })
-        }}
-      />
+          onSubmitEditing={onSubmitEndInput}
+          onChanged={(newMinutesFromInput) => {
+            let newMinutes = newMinutesFromInput
+            if (newMinutesFromInput > 59) {
+              newMinutes = 59
+            }
+            onChange({
+              hours,
+              minutes: newMinutes,
+            })
+          }}
+        />
+        {inputType === 'keyboard' ? (
+          <Text variant="bodySmall">Minute</Text>
+        ) : null}
+      </View>
       {!is24Hour && (
         <>
           <View style={styles.spaceBetweenInputsAndSwitcher} />
-          <AmPmSwitcher hours={hours} onChange={onChangeHours} />
+          <AmPmSwitcher
+            hours={hours}
+            onChange={onChangeHours}
+            inputType={inputType}
+          />
         </>
       )}
     </View>
@@ -166,6 +187,9 @@ function TimeInputs({
 }
 
 const styles = StyleSheet.create({
+  column: {
+    flexDirection: 'column',
+  },
   spaceBetweenInputsAndSwitcher: { width: 12 },
   inputContainer: {
     flexDirection: 'row',

package/src/Time/TimePicker.tsx

@@ -84,7 +84,24 @@ function TimePicker({
     <DisplayModeContext.Provider
       value={{ mode: displayMode, setMode: setDisplayMode }}
     >
-      <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>
+      <View
+        style={
+          isLandscape
+            ? [
+                styles.rootLandscape,
+                {
+                  width:
+                    24 * 3 +
+                    96 * 2 +
+                    52 +
+                    (inputType === inputTypes.picker
+                      ? circleSize
+                      : -circleSize),
+                },
+              ]
+            : styles.rootPortrait
+        }
+      >
         <TimeInputs
           inputType={inputType}
           hours={hours}
@@ -115,7 +132,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 24 * 3 + 96 * 2 + 52 + circleSize,
   },
   rootPortrait: {
     alignItems: 'center',

package/src/Time/TimePickerModal.tsx

@@ -27,7 +27,13 @@ import {
   reverseInputTypes,
 } from './timeUtils'
 
-const supportedOrientations: any[] = [
+const supportedOrientations: (
+  | 'portrait'
+  | 'portrait-upside-down'
+  | 'landscape'
+  | 'landscape-left'
+  | 'landscape-right'
+)[] = [
   'portrait',
   'portrait-upside-down',
   'landscape',
@@ -67,9 +73,10 @@ export function TimePickerModal({
   const theme = useTheme()
 
   let textFont
+  let labelText = label
 
   if (theme.isV3) {
-    textFont = theme.fonts.bodyMedium
+    textFont = theme.fonts.labelMedium
   } else {
     textFont = (theme as any as MD2Theme)?.fonts.medium
   }
@@ -85,6 +92,10 @@ export function TimePickerModal({
     getMinutes(minutes)
   )
 
+  if (inputType === inputTypes.keyboard && !label) {
+    labelText = 'Enter time'
+  }
+
   React.useEffect(() => {
     setLocalHours(getHours(hours))
   }, [setLocalHours, hours])
@@ -120,7 +131,6 @@ export function TimePickerModal({
       onRequestClose={onDismiss}
       presentationStyle="overFullScreen"
       supportedOrientations={supportedOrientations}
-      //@ts-ignore
       statusBarTranslucent={true}
     >
       <>
@@ -133,7 +143,6 @@ export function TimePickerModal({
             ]}
           />
         </TouchableWithoutFeedback>
-
         <View
           style={[StyleSheet.absoluteFill, styles.modalRoot]}
           pointerEvents="box-none"
@@ -146,10 +155,17 @@ export function TimePickerModal({
               style={[
                 styles.modalContent,
                 {
-                  backgroundColor: theme.dark
-                    ? overlay(10, theme.colors.surface)
-                    : theme.colors.surface,
-                  borderRadius: theme.roundness,
+                  backgroundColor:
+                    theme.dark && theme.isV3
+                      ? theme.colors.elevation.level3
+                      : theme.isV3
+                      ? theme.colors.surface
+                      : theme.dark
+                      ? overlay(10, theme.colors.surface)
+                      : theme.colors.surface,
+                  borderRadius: theme.isV3
+                    ? theme.roundness * 6
+                    : theme.roundness,
                 },
               ]}
             >
@@ -160,12 +176,12 @@ export function TimePickerModal({
                     {
                       ...textFont,
                       color: theme?.isV3
-                        ? theme.colors.onBackground
+                        ? theme.colors.onSurfaceVariant
                         : (theme as any as MD2Theme).colors.text,
                     },
                   ]}
                 >
-                  {uppercase ? label.toUpperCase() : label}
+                  {uppercase ? labelText.toUpperCase() : labelText}
                 </Text>
               </View>
               <View style={styles.timePickerContainer}>
@@ -242,21 +258,26 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.34,
     shadowRadius: 6.27,
-    elevation: 10,
+    elevation: 3,
     minWidth: 287,
+    paddingVertical: 8,
   },
   labelContainer: {
-    height: 28,
     justifyContent: 'flex-end',
     paddingLeft: 24,
     paddingRight: 24,
-    marginTop: 8,
+    paddingTop: 16,
   },
   label: {
     letterSpacing: 1,
     fontSize: 13,
   },
-  timePickerContainer: { padding: 24 },
+  timePickerContainer: {
+    paddingLeft: 24,
+    paddingTop: 20,
+    paddingBottom: 16,
+    paddingRight: 24,
+  },
   bottom: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/Time/timeUtils.ts

@@ -2,8 +2,7 @@ import * as React from 'react'
 import Color from 'color'
 import { MD2Theme, useTheme } from 'react-native-paper'
 
-// 250? when bigger?
-export const circleSize = 215
+export const circleSize = 256
 
 export type PossibleHourTypes = 'am' | 'pm'
 export type HourTypeMap = {
@@ -161,10 +160,9 @@ export function useSwitchColors(highlighted: boolean) {
   const backgroundColor = React.useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
-        return Color(theme.colors.primary).hex()
-      }
-      if (theme.isV3) {
-        return Color(theme.colors.surface).lighten(1.4).hex()
+        return theme.isV3
+          ? theme.colors.tertiaryContainer
+          : Color(theme.colors.primary).hex()
       }
       return theme.colors.backdrop
     }
@@ -181,10 +179,12 @@ export function useSwitchColors(highlighted: boolean) {
 
   const color = React.useMemo<string>(() => {
     if (highlighted && !theme.dark) {
-      return theme.colors.primary
+      return theme.isV3 ? theme.colors.onSurfaceVariant : theme.colors.primary
     }
     if (highlighted && theme.dark) {
-      return theme.colors.background
+      return theme.isV3
+        ? theme.colors.onTertiaryContainer
+        : theme.colors.background
     }
     if (theme.isV3) {
       return theme.colors.onSurfaceVariant
@@ -201,33 +201,39 @@ export function useInputColors(highlighted: boolean) {
   const backgroundColor = React.useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
-        return Color(theme.colors.primary).hex()
+        return theme.isV3
+          ? theme.colors.primaryContainer
+          : Color(theme.colors.primary).hex()
       }
-      return Color(theme.colors.surface).lighten(1.4).hex()
+      return theme.isV3
+        ? theme.colors.surfaceVariant
+        : Color(theme.colors.surface).lighten(1.4).hex()
     }
 
     if (highlighted) {
       if (theme.isV3) {
-        return Color(theme.colors.primaryContainer).hex()
+        return theme.colors.secondaryContainer
       }
       return Color(theme.colors.primary).lighten(1).hex()
     }
     if (theme.isV3) {
-      return Color(theme.colors.outline).lighten(0.9).hex()
+      return theme.colors.surfaceVariant
     }
     return Color(theme.colors.surface).darken(0.1).hex()
   }, [highlighted, theme])
 
   const color = React.useMemo<string>(() => {
-    if (highlighted && !theme.dark) {
-      return theme.colors.primary
-    }
     if (theme.isV3) {
       if (!highlighted) {
-        return theme.colors.onBackground
+        return theme.isV3 ? theme.colors.onSurface : theme.colors.onBackground
       }
-      return theme.colors.background
+      return theme.isV3
+        ? theme.colors.onPrimaryContainer
+        : theme.colors.onBackground
     } else {
+      if (highlighted && !theme.dark) {
+        return theme.colors.primary
+      }
       return (theme as any as MD2Theme).colors.text
     }
   }, [highlighted, theme])

package/src/index.tsx

@@ -13,3 +13,4 @@ export { default as pl } from './translations/pl'
 export { default as pt } from './translations/pt'
 export { default as enGB } from './translations/enGB'
 export { default as de } from './translations/de'
+export { default as tr } from './translations/tr'

package/src/translations/tr.ts

@@ -0,0 +1,21 @@
+import type { TranslationsType } from './utils'
+
+const tr: TranslationsType = {
+  save: 'Kaydet',
+  selectSingle: 'Tarih seç',
+  selectMultiple: 'Tarihleri seç',
+  selectRange: 'Periyot seç',
+  notAccordingToDateFormat: (inputFormat) =>
+    `Tarih formatı ${inputFormat} olmalı`,
+  mustBeHigherThan: (date) => `${date} tarihinden sonra olmalı`,
+  mustBeLowerThan: (date) => `${date} tarihinden önce olmalı`,
+  mustBeBetween: (startDate, endDate) =>
+    `${startDate} - ${endDate} tarihleri arasında olmalı`,
+  dateIsDisabled: 'Gün seçilemez',
+  previous: 'Önceki',
+  next: 'Sonraki',
+  typeInDate: 'Tarihi yazın',
+  pickDateFromCalendar: 'Takvimden tarih seçin',
+  close: 'Kapat',
+}
+export default tr

package/src/utils.ts

@@ -39,6 +39,15 @@ export function useHeaderTextColor() {
 export function useTextColorOnPrimary() {
   const theme = useTheme()
   const isDark = !Color(theme.colors.primary).isLight()
+
+  if (theme.isV3) {
+    if (isDark && theme.dark) {
+      return theme.colors.onSurface
+    } else {
+      return theme.colors.onPrimary
+    }
+  }
+
   return isDark ? '#fff' : '#000'
 }