react-native-paper-dates 0.4.5 → 0.6.0

package/src/Time/TimePicker.tsx

@@ -9,9 +9,15 @@ import {
   toHourOutputFormat,
 } from './timeUtils'
 
-import AnalogClock, { circleSize } from './AnalogClock'
+import AnalogClock from './AnalogClock'
+import { circleSize } from './timeUtils'
 import TimeInputs from './TimeInputs'
 
+export const DisplayModeContext = React.createContext<{
+  mode: 'AM' | 'PM' | undefined
+  setMode: React.Dispatch<React.SetStateAction<'AM' | 'PM' | undefined>>
+}>({ mode: 'AM', setMode: () => {} })
+
 type onChangeFunc = ({
   hours,
   minutes,
@@ -39,6 +45,9 @@ function TimePicker({
   onFocusInput: (type: PossibleClockTypes) => any
   onChange: onChangeFunc
 }) {
+  const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(
+    undefined
+  )
   const dimensions = useWindowDimensions()
   const isLandscape = dimensions.width > dimensions.height
 
@@ -53,6 +62,16 @@ function TimePicker({
     return formatted.includes('23')
   }, [locale])
 
+  // Initialize display Mode according the hours value
+  React.useEffect(() => {
+    if (hours >= 12) {
+      setDisplayMode('PM')
+    } else {
+      setDisplayMode('AM')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const onInnerChange = React.useCallback<onChangeFunc>(
     (params) => {
       params.hours = toHourOutputFormat(params.hours, hours, is24Hour)
@@ -62,28 +81,32 @@ function TimePicker({
   )
 
   return (
-    <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>
-      <TimeInputs
-        inputType={inputType}
-        hours={hours}
-        minutes={minutes}
-        is24Hour={is24Hour}
-        onChange={onChange}
-        onFocusInput={onFocusInput}
-        focused={focused}
-      />
-      {inputType === inputTypes.picker ? (
-        <View style={styles.clockContainer}>
-          <AnalogClock
-            hours={toHourInputFormat(hours, is24Hour)}
-            minutes={minutes}
-            focused={focused}
-            is24Hour={is24Hour}
-            onChange={onInnerChange}
-          />
-        </View>
-      ) : null}
-    </View>
+    <DisplayModeContext.Provider
+      value={{ mode: displayMode, setMode: setDisplayMode }}
+    >
+      <View style={isLandscape ? styles.rootLandscape : styles.rootPortrait}>
+        <TimeInputs
+          inputType={inputType}
+          hours={hours}
+          minutes={minutes}
+          is24Hour={is24Hour}
+          onChange={onChange}
+          onFocusInput={onFocusInput}
+          focused={focused}
+        />
+        {inputType === inputTypes.picker ? (
+          <View style={styles.clockContainer}>
+            <AnalogClock
+              hours={toHourInputFormat(hours, is24Hour)}
+              minutes={minutes}
+              focused={focused}
+              is24Hour={is24Hour}
+              onChange={onInnerChange}
+            />
+          </View>
+        ) : null}
+      </View>
+    </DisplayModeContext.Provider>
   )
 }
 

package/src/Time/TimePickerModal.tsx

@@ -48,7 +48,7 @@ export function TimePickerModal({
   minutes?: number | undefined
   visible: boolean | undefined
   onDismiss: () => any
-  onConfirm: ({ hours, minutes }: { hours: number; minutes: number }) => any
+  onConfirm: (hoursAndMinutes: { hours: number; minutes: number }) => any
   animationType?: 'slide' | 'fade' | 'none'
 }) {
   const theme = useTheme()
@@ -155,6 +155,9 @@ export function TimePickerModal({
                   size={24}
                   style={styles.inputTypeToggle}
                   accessibilityLabel="toggle keyboard"
+                  // RN types bug
+                  hasTVPreferredFocus={undefined}
+                  tvParallaxProperties={undefined}
                 />
                 <View style={styles.fill} />
                 <Button onPress={onDismiss}>{cancelLabel}</Button>

package/src/Time/timeUtils.ts

@@ -2,6 +2,9 @@ import * as React from 'react'
 import Color from 'color'
 import { useTheme } from 'react-native-paper'
 
+// 250? when bigger?
+export const circleSize = 215
+
 export type PossibleHourTypes = 'am' | 'pm'
 export type HourTypeMap = {
   [hourType in PossibleHourTypes]: PossibleHourTypes
@@ -196,6 +199,9 @@ export function useInputColors(highlighted: boolean) {
 }
 
 export function toHourInputFormat(hours: number, is24Hour: boolean): number {
+  if (hours === 24) {
+    return 0
+  }
   if (is24Hour) {
     return hours
   }
@@ -213,7 +219,7 @@ export function toHourOutputFormat(
   if (is24Hour) {
     return newHours
   }
-  if (previousHours > 12 && newHours <= 12) {
+  if (previousHours > 12 && newHours < 12) {
     return newHours + 12
   }
   return newHours

package/src/index.tsx

@@ -4,3 +4,10 @@ export * from './Date/DatePickerModal'
 export { default as DatePickerModalContent } from './Date/DatePickerModalContent'
 export { default as TimePickerModal } from './Time/TimePickerModal'
 export { default as TimePicker } from './Time/TimePicker'
+export { default as DatePickerInput } from './Date/DatePickerInput'
+export type { TranslationsType } from './translations/utils'
+export { registerTranslation, getTranslation } from './translations/utils'
+export { default as nl } from './translations/nl'
+export { default as en } from './translations/en'
+export { default as pl } from './translations/pl'
+export { default as enGB } from './translations/enGB'

package/src/translations/en.ts

@@ -0,0 +1,15 @@
+import type { TranslationsType } from './utils'
+
+const en: TranslationsType = {
+  save: 'Save',
+  selectSingle: 'Select date',
+  selectMultiple: 'Select dates',
+  selectRange: 'Select period',
+  notAccordingToDateFormat: (inputFormat: string) =>
+    `Date format must be ${inputFormat}`,
+  mustBeHigherThan: 'Must be later then',
+  mustBeLowerThan: 'Must be earlier then',
+  mustBeBetween: 'Must be between',
+  dateIsDisabled: 'Day is not allowed',
+}
+export default en

package/src/translations/enGB.ts

@@ -0,0 +1,15 @@
+import type { TranslationsType } from './utils'
+
+const enGB: TranslationsType = {
+  save: 'Save',
+  selectSingle: 'Select date',
+  selectMultiple: 'Select dates',
+  selectRange: 'Select period',
+  notAccordingToDateFormat: (inputFormat: string) =>
+    `Date format must be ${inputFormat}`,
+  mustBeHigherThan: 'Must be later then',
+  mustBeLowerThan: 'Must be earlier then',
+  mustBeBetween: 'Must be between',
+  dateIsDisabled: 'Day is not allowed',
+}
+export default enGB

package/src/translations/nl.ts

@@ -0,0 +1,15 @@
+import type { TranslationsType } from './utils'
+
+const nl: TranslationsType = {
+  save: 'Opslaan',
+  selectSingle: 'Selecteer datum',
+  selectMultiple: 'Selecteer datums',
+  selectRange: 'Selecteer periode',
+  notAccordingToDateFormat: (inputFormat: string) =>
+    `Datumformaat moet ${inputFormat} zijn`,
+  mustBeHigherThan: 'Moet later dan',
+  mustBeLowerThan: 'Moet eerder dan',
+  mustBeBetween: 'Moet tussen',
+  dateIsDisabled: 'Deze dag mag niet',
+}
+export default nl

package/src/translations/pl.ts

@@ -0,0 +1,15 @@
+import type { TranslationsType } from './utils'
+
+const pl: TranslationsType = {
+  save: 'Zapisz',
+  selectSingle: 'Wybierz datę',
+  selectMultiple: 'Wybierz daty',
+  selectRange: 'Wybierz zakres',
+  notAccordingToDateFormat: (inputFormat: string) =>
+    `Data musi mieć format ${inputFormat}`,
+  mustBeHigherThan: 'Nie wcześniej niż',
+  mustBeLowerThan: 'Nie później niż',
+  mustBeBetween: 'Pomiędzy',
+  dateIsDisabled: 'Niedozwolona data',
+}
+export default pl

package/src/translations/utils.ts

@@ -0,0 +1,42 @@
+export type TranslationsType = {
+  selectSingle: string
+  selectMultiple: string
+  selectRange: string
+  save: string
+  notAccordingToDateFormat: (inputFormat: string) => string
+  mustBeHigherThan: string
+  mustBeLowerThan: string
+  mustBeBetween: string
+  dateIsDisabled: string
+}
+
+let translationsPerLocale: Record<string, TranslationsType> = {}
+
+export function getTranslation(
+  locale: string | undefined,
+  key: keyof TranslationsType,
+  fallback?: any
+) {
+  const l = locale || 'en'
+  const translationForLocale = translationsPerLocale[l]
+  if (!translationForLocale) {
+    console.warn(
+      `[react-native-paper-dates] ${locale} is not registered, key: ${key}`
+    )
+    return fallback || key
+  }
+  const translation = translationsPerLocale[l][key]
+  if (!translationForLocale) {
+    console.warn(
+      `[react-native-paper-dates] ${locale} is registered, but ${key} is missing`
+    )
+  }
+  return translation || fallback || key
+}
+
+export function registerTranslation(
+  locale: string,
+  translations: TranslationsType
+) {
+  translationsPerLocale[locale] = translations
+}

package/src/utils.ts

@@ -3,11 +3,9 @@ import { overlay, useTheme } from 'react-native-paper'
 import Color from 'color'
 
 export function useLatest<T>(value: T) {
-  const valueRef = React.useRef<T>(value)
-  React.useEffect(() => {
-    valueRef.current = value
-  }, [value])
-  return valueRef
+  const ref = React.useRef(value)
+  ref.current = value
+  return ref
 }
 
 export function useHeaderBackgroundColor() {
@@ -42,3 +40,13 @@ export function range(start: number, end: number) {
     .fill(null)
     .map((_, i) => start + i)
 }
+
+export function lightenBy(color: Color, ratio: number) {
+  const lightness = color.lightness()
+  return color.lightness(lightness + (100 - lightness) * ratio)
+}
+
+export function darkenBy(color: Color, ratio: number) {
+  const lightness = color.lightness()
+  return color.lightness(lightness - lightness * ratio)
+}

package/lib/typescript/src/Date/DatePickerInput.d.ts

@@ -1 +0,0 @@
-export default function DatePickerInput(): JSX.Element;

package/lib/typescript/src/Date/DateRangeInput.d.ts

@@ -1 +0,0 @@
-export default function DateRangeInput(): JSX.Element;

package/lib/typescript/src/TextInputMask.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
-export default _default;

package/lib/typescript/src/Time/AmPmSwitcher.d.ts

@@ -1,4 +0,0 @@
-export default function AmPmSwitcher({ hours, onChange, }: {
-    hours: number;
-    onChange: (hours: number) => any;
-}): JSX.Element;

package/lib/typescript/src/index.d.ts

@@ -1,6 +0,0 @@
-export { default as Calendar } from './Date/Calendar';
-export { default as DatePickerModal } from './Date/DatePickerModal';
-export * from './Date/DatePickerModal';
-export { default as DatePickerModalContent } from './Date/DatePickerModalContent';
-export { default as TimePickerModal } from './Time/TimePickerModal';
-export { default as TimePicker } from './Time/TimePicker';

package/lib/typescript/src/utils.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export declare function useLatest<T>(value: T): React.MutableRefObject<T>;
-export declare function useHeaderBackgroundColor(): string;
-export declare function useHeaderColorIsLight(): boolean;
-export declare function useHeaderTextColor(): "#fff" | "#000";
-export declare function useTextColorOnPrimary(): "#fff" | "#000";
-export declare function range(start: number, end: number): number[];