react-native-paper-dates 0.11.15 → 0.14.0

package/lib/typescript/Time/TimePickerModal.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours, minutes, label, uppercase, cancelLabel, confirmLabel, animationType, locale, keyboardIcon, clockIcon, }: {
+export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours, minutes, label, uppercase, cancelLabel, confirmLabel, animationType, locale, keyboardIcon, clockIcon, use24HourClock, inputFontSize, }: {
     locale?: undefined | string;
     label?: string;
     uppercase?: boolean;
@@ -16,6 +16,8 @@ export declare function TimePickerModal({ visible, onDismiss, onConfirm, hours,
     animationType?: 'slide' | 'fade' | 'none';
     keyboardIcon?: string;
     clockIcon?: string;
+    use24HourClock?: boolean;
+    inputFontSize?: number;
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TimePickerModal>;
 export default _default;

package/lib/typescript/index.d.ts

@@ -13,6 +13,7 @@ export { default as en } from './translations/en';
 export { default as enGB } from './translations/enGB';
 export { default as es } from './translations/es';
 export { default as fr } from './translations/fr';
+export { default as he } from './translations/he';
 export { default as it } from './translations/it';
 export { default as ko } from './translations/ko';
 export { default as nl } from './translations/nl';

package/lib/typescript/translations/he.d.ts

@@ -0,0 +1,3 @@
+import type { TranslationsType } from './utils';
+declare const he: TranslationsType;
+export default he;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-paper-dates",
-  "version": "0.11.15",
+  "version": "0.14.0",
   "description": "Performant Date Picker for React Native Paper",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -50,37 +50,37 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.0.3",
-    "@react-native-community/eslint-config": "^3.1.0",
-    "@release-it/conventional-changelog": "^5.1.0",
-    "@testing-library/jest-native": "^5.3.3",
-    "@testing-library/react-native": "^11.5.0",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@release-it/conventional-changelog": "^5.1.1",
+    "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-native": "^11.5.2",
     "@types/color": "^3.0.3",
-    "@types/jest": "^29.2.4",
-    "@types/react": "^18.0.26",
-    "@types/react-native": "^0.70.8",
-    "@types/react-native-vector-icons": "^6.4.12",
-    "babel-loader": "^8.2.5",
-    "commitlint": "^17.0.3",
-    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-native": "^0.70.11",
+    "@types/react-native-vector-icons": "^6.4.13",
+    "babel-loader": "^8.3.0",
+    "commitlint": "^17.4.4",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "expo-cli": "^6.0.8",
-    "husky": "^8.0.1",
-    "jest": "^29.0.0",
+    "expo-cli": "^6.3.2",
+    "husky": "^8.0.3",
+    "jest": "^29.4.3",
     "pod-install": "^0.1.38",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.4",
     "react": "^18.2.0",
-    "react-native": "^0.70.6",
+    "react-native": "^0.70.7",
     "react-native-builder-bob": "^0.18.3",
-    "react-native-paper": "^5.0.2",
-    "react-native-safe-area-context": "^4.4.1",
+    "react-native-paper": "^5.2.0",
+    "react-native-safe-area-context": "^4.5.0",
     "react-native-vector-icons": "^9.2.0",
-    "release-it": "^15.4.0",
-    "typescript": "^4.9.4",
+    "release-it": "^15.7.0",
+    "typescript": "^4.9.5",
     "react-test-renderer": "^18.2.0",
     "@types/react-test-renderer": "^18.0.0",
-    "caniuse-lite": "^1.0.30001383"
+    "caniuse-lite": "^1.0.30001458"
   },
   "peerDependencies": {
     "react": "*",
@@ -141,7 +141,8 @@
     "lib/",
     "example/node_modules",
     "example/web-build",
-    "docusaurus"
+    "docusaurus",
+    "coverage"
   ],
   "prettier": {
     "quoteProps": "consistent",

package/src/Date/CalendarEdit.tsx

@@ -21,6 +21,7 @@ function CalendarEdit({
   onChange,
   validRange,
   locale,
+  inputEnabled,
 }: {
   mode: ModeType
   label?: string
@@ -31,6 +32,7 @@ function CalendarEdit({
   onChange: (s: LocalState) => any
   validRange: ValidRangeType | undefined
   locale: string
+  inputEnabled?: boolean
 }) {
   const dateInput = React.useRef<TextInputNative | null>(null)
   const startInput = React.useRef<TextInputNative | null>(null)
@@ -88,6 +90,7 @@ function CalendarEdit({
           locale={locale}
           withModal={false}
           autoComplete={'off'}
+          inputEnabled={inputEnabled}
         />
       ) : null}
       {mode === 'range' ? (
@@ -104,6 +107,7 @@ function CalendarEdit({
             locale={locale}
             withModal={false}
             autoComplete={'off'}
+            inputEnabled={inputEnabled}
           />
           <View style={styles.separator} />
           <DatePickerInputWithoutModal
@@ -117,6 +121,7 @@ function CalendarEdit({
             locale={locale}
             withModal={false}
             autoComplete="off"
+            inputEnabled={inputEnabled}
           />
         </View>
       ) : null}

package/src/Date/DatePickerInput.shared.tsx

@@ -20,7 +20,8 @@ export type DatePickerInputProps = {
   startYear?: number
   endYear?: number
   onChangeText?: (text: string | undefined) => void
+  inputEnabled?: boolean
 } & Omit<
   React.ComponentProps<typeof TextInput>,
-  'value' | 'onChange' | 'onChangeText'
+  'value' | 'onChange' | 'onChangeText' | 'inputMode'
 >

package/src/Date/DatePickerInput.tsx

@@ -54,6 +54,7 @@ function DatePickerInput(
         uppercase,
         startYear,
         endYear,
+        inputEnabled,
       }) =>
         withModal ? (
           <DatePickerModal
@@ -70,6 +71,7 @@ function DatePickerInput(
             uppercase={uppercase ?? true}
             startYear={startYear ?? 1800}
             endYear={endYear ?? 2200}
+            inputEnabled={inputEnabled}
           />
         ) : null
       }

package/src/Date/DatePickerInputWithoutModal.tsx

@@ -27,6 +27,7 @@ function DatePickerInputWithoutModal(
     startYear,
     endYear,
     onChangeText,
+    inputEnabled,
     ...rest
   }: DatePickerInputProps & {
     modal?: (params: {
@@ -39,6 +40,7 @@ function DatePickerInputWithoutModal(
       uppercase: DatePickerInputProps['uppercase']
       startYear: DatePickerInputProps['startYear']
       endYear: DatePickerInputProps['endYear']
+      inputEnabled: DatePickerInputProps['inputEnabled']
     }) => any
     inputButtons?: any
   },
@@ -59,6 +61,16 @@ function DatePickerInputWithoutModal(
     onValidationError,
   })
 
+  let disabled
+
+  if (inputEnabled !== undefined) {
+    disabled = !inputEnabled
+  }
+
+  if (rest.disabled) {
+    disabled = rest.disabled
+  }
+
   return (
     <>
       <View style={styles.root}>
@@ -75,6 +87,7 @@ function DatePickerInputWithoutModal(
             value={formattedValue}
             keyboardType={rest.keyboardType ?? 'number-pad'}
             mask={inputFormat}
+            disabled={disabled}
             onChangeText={onDateInputChangeText}
             onChange={(e) => onChangeText && onChangeText(e.nativeEvent.text)}
             keyboardAppearance={theme.dark ? 'dark' : 'default'}
@@ -99,6 +112,7 @@ function DatePickerInputWithoutModal(
         uppercase,
         startYear,
         endYear,
+        inputEnabled,
       })}
     </>
   )

package/src/Date/DatePickerModal.tsx

@@ -22,6 +22,7 @@ interface DatePickerModalProps {
   animationType?: 'slide' | 'fade' | 'none'
   disableStatusBar?: boolean
   disableStatusBarPadding?: boolean
+  inputEnabled?: boolean
 }
 
 export interface DatePickerModalSingleProps
@@ -49,6 +50,7 @@ export function DatePickerModal(
     animationType,
     disableStatusBar,
     disableStatusBarPadding,
+    inputEnabled,
     ...rest
   } = props
   const animationTypeCalculated =
@@ -112,6 +114,7 @@ export function DatePickerModal(
               )}
               <DatePickerModalContent
                 {...rest}
+                inputEnabled={inputEnabled}
                 disableSafeTop={disableStatusBar}
               />
             </View>

package/src/Date/DatePickerModalContent.tsx

@@ -32,6 +32,7 @@ interface DatePickerModalContentBaseProps {
   disableSafeTop?: boolean
   saveLabelDisabled?: boolean
   uppercase?: boolean
+  inputEnabled?: boolean
 }
 
 export interface DatePickerModalContentRangeProps
@@ -164,6 +165,7 @@ export function DatePickerModalContent(
           locale={locale}
           editIcon={props?.editIcon}
           calendarIcon={props.calendarIcon}
+          allowEditing={props.allowEditing || true}
         />
       </DatePickerModalHeaderBackground>
       <AnimatedCrossView
@@ -195,6 +197,7 @@ export function DatePickerModalContent(
             onChange={onInnerChange}
             validRange={validRange}
             locale={locale}
+            inputEnabled={props.inputEnabled}
           />
         }
       />

package/src/Date/DatePickerModalContentHeader.tsx

@@ -19,6 +19,7 @@ export interface HeaderPickProps {
   editIcon?: string
   calendarIcon?: string
   closeIcon?: string
+  allowEditing?: boolean
 }
 
 export interface HeaderContentProps extends HeaderPickProps {
@@ -27,6 +28,7 @@ export interface HeaderContentProps extends HeaderPickProps {
   collapsed: boolean
   onToggle: () => any
   locale: string | undefined
+  inputDate?: boolean
 }
 
 function getLabel(
@@ -60,15 +62,19 @@ export default function DatePickerModalContentHeader(
     uppercase,
     editIcon,
     calendarIcon,
+    inputDate,
+    allowEditing,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
+
+  const isAllowEditing = allowEditing && mode !== 'multiple' && inputDate !== undefined
+
   const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
-  const allowEditing = mode !== 'multiple'
 
-  let textFont = theme?.isV3
+  const textFont = theme?.isV3
     ? theme.fonts.labelMedium
     : (theme as any as MD2Theme).fonts.medium
 
@@ -97,7 +103,7 @@ export default function DatePickerModalContentHeader(
         </View>
       </View>
       <View style={styles.fill} />
-      {allowEditing ? (
+      {isAllowEditing ? (
         <IconButton
           icon={
             collapsed

package/src/Date/Swiper.native.tsx

@@ -175,6 +175,7 @@ function SwiperInner({
             ? new Array(visibleIndexes.length).fill(undefined).map((_, vi) => (
                 <View
                   key={vi}
+                  // eslint-disable-next-line react-native/no-inline-styles
                   style={{
                     top: isHorizontal
                       ? 0

package/src/Date/Swiper.tsx

@@ -94,7 +94,6 @@ function VerticalScroller({
   const [visibleIndexes, setVisibleIndexes] = React.useState<number[]>(
     visibleArray(initialIndex)
   )
-  // eslint-disable-next-line no-undef
   const parentRef = React.useRef<HTMLDivElement | null>(null)
 
   useIsomorphicLayoutEffect(() => {
@@ -132,6 +131,7 @@ function VerticalScroller({
   return (
     <div
       ref={parentRef}
+      // eslint-disable-next-line react-native/no-inline-styles
       style={{
         height,
         width,
@@ -140,6 +140,7 @@ function VerticalScroller({
       onScroll={onScroll}
     >
       <div
+        // eslint-disable-next-line react-native/no-inline-styles
         style={{
           height: estimatedHeight * totalMonths,
           position: 'relative',
@@ -148,6 +149,7 @@ function VerticalScroller({
         {[0, 1, 2, 3, 4].map((vi) => (
           <div
             key={vi}
+            // eslint-disable-next-line react-native/no-inline-styles
             style={{
               willChange: 'transform',
               transform: `translateY(${getVerticalMonthsOffset(

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

package/src/TextInputMask.tsx

@@ -72,6 +72,7 @@ function TextInputWithMask(
     onChange,
     value,
     mask,
+    disabled,
     ...rest
   }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },
   ref: any
@@ -100,6 +101,7 @@ function TextInputWithMask(
     <TextInput
       ref={ref}
       {...rest}
+      disabled={disabled}
       value={controlledValue}
       onChangeText={onInnerChange}
       onChange={(e) => {

package/src/Time/AnalogClock.tsx

@@ -43,7 +43,7 @@ function AnalogClock({
   const theme = useTheme()
   const { mode } = React.useContext(DisplayModeContext)
   // used to make pointer shorter if hours are selected and above 12
-  const shortPointer = (hours === 0 || hours > 12) && is24Hour
+  const shortPointer = hours >= 12 && is24Hour
   const clockRef = React.useRef<View | null>(null)
   // Hooks are nice, sometimes... :-)..
   // We need the latest values, since the onPointerMove uses a closure to the function
@@ -74,17 +74,18 @@ function AnalogClock({
         if (hours12AndPm || hours24AndPM) {
           pickedHours += 12
         }
-        if (modeRef.current === 'AM' && pickedHours === 12) {
+        if ((modeRef.current === 'AM' || hours24) && pickedHours === 12) {
           pickedHours = 0
         }
 
-        if (
-          (!hours24 && modeRef.current === 'AM' && pickedHours === 12) ||
-          pickedHours === 24
-        ) {
+        if (!hours24 && modeRef.current === 'AM' && pickedHours === 12) {
           pickedHours = 0
         }
 
+        if (pickedHours === 24) {
+          pickedHours = 12
+        }
+
         if (hoursRef.current !== pickedHours || final) {
           onChangeRef.current({
             hours: pickedHours,

package/src/Time/AnalogClockHours.tsx

@@ -3,7 +3,6 @@ import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './timeUtils'
 import { useTextColorOnPrimary } from '../utils'
-import { DisplayModeContext } from './TimePicker'
 
 function AnalogClockHours({
   is24Hour,
@@ -12,7 +11,6 @@ function AnalogClockHours({
   is24Hour: boolean
   hours: number
 }) {
-  const { mode } = React.useContext(DisplayModeContext)
   const outerRange = getHourNumbers(false, circleSize, 12, 12)
   const innerRange = getHourNumbers(true, circleSize, 12, 12)
   const color = useTextColorOnPrimary()
@@ -34,11 +32,17 @@ function AnalogClockHours({
           <View style={styles.outerHourInner}>
             {/* Display 00 instead of 12 for AM hours */}
             <Text
-              style={hours === i + 1 ? { color } : null}
+              style={
+                (!is24Hour && i + 1 === hours) ||
+                (hours === i + 1 && hours !== 12) ||
+                (i + 1 === 12 && hours === 0)
+                  ? { color }
+                  : null
+              }
               variant="bodyLarge"
               selectable={false}
             >
-              {mode === 'AM' && is24Hour && i + 1 === 12 ? '00' : i + 1}
+              {is24Hour && i + 1 === 12 ? '00' : i + 1}
             </Text>
           </View>
         </View>
@@ -60,13 +64,13 @@ function AnalogClockHours({
                 <Text
                   selectable={false}
                   style={[
-                    i + 13 === hours || (i + 13 === 24 && hours === 0)
+                    i + 13 === hours || (i + 13 === 24 && hours === 12)
                       ? { color }
                       : null,
                   ]}
                   variant="bodyLarge"
                 >
-                  {i + 13 === 24 ? '00' : i + 13}
+                  {i + 13 === 24 ? '12' : i + 13}
                 </Text>
               </View>
             </View>

package/src/Time/TimeInput.tsx

@@ -24,6 +24,7 @@ interface TimeInputProps
   pressed: boolean
   onChanged: (n: number) => any
   inputType: PossibleInputTypes
+  inputFontSize?: number
 }
 
 function TimeInput(
@@ -34,6 +35,7 @@ function TimeInput(
     onPress,
     onChanged,
     inputType,
+    inputFontSize = 57,
     ...rest
   }: TimeInputProps,
   ref: any
@@ -77,6 +79,7 @@ function TimeInput(
           // eslint-disable-next-line react-native/no-inline-styles
           {
             color,
+            fontSize: inputFontSize,
             backgroundColor,
             borderRadius: theme.roundness * 2,
             borderColor:
@@ -123,7 +126,6 @@ function TimeInput(
 const styles = StyleSheet.create({
   root: { position: 'relative', height: 80, width: 96 },
   input: {
-    fontSize: 57,
     textAlign: 'center',
     textAlignVertical: 'center',
     width: 96,

package/src/Time/TimeInputs.tsx

@@ -27,6 +27,7 @@ function TimeInputs({
   inputType,
   onChange,
   is24Hour,
+  inputFontSize,
 }: {
   inputType: PossibleInputTypes
   focused: PossibleClockTypes
@@ -39,6 +40,7 @@ function TimeInputs({
     focused?: undefined | PossibleClockTypes
   }) => any
   is24Hour: boolean
+  inputFontSize?: number
 }) {
   const startInput = React.useRef<TextInputNative | null>(null)
   const endInput = React.useRef<TextInputNative | null>(null)
@@ -78,6 +80,7 @@ function TimeInputs({
       <View style={styles.column}>
         <TimeInput
           ref={startInput}
+          inputFontSize={inputFontSize}
           placeholder={'00'}
           value={toHourInputFormat(hours, is24Hour)}
           clockType={clockTypes.hours}
@@ -145,6 +148,7 @@ function TimeInputs({
       <View style={styles.column}>
         <TimeInput
           ref={endInput}
+          inputFontSize={inputFontSize}
           placeholder={'00'}
           value={minutes}
           clockType={clockTypes.minutes}

package/src/Time/TimePicker.tsx

@@ -36,6 +36,8 @@ function TimePicker({
   inputType,
   onChange,
   locale,
+  use24HourClock,
+  inputFontSize,
 }: {
   locale?: undefined | string
   inputType: PossibleInputTypes
@@ -44,6 +46,8 @@ function TimePicker({
   minutes: number
   onFocusInput: (type: PossibleClockTypes) => any
   onChange: onChangeFunc
+  use24HourClock?: boolean
+  inputFontSize?: number
 }) {
   const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>(
     undefined
@@ -53,6 +57,9 @@ function TimePicker({
 
   // method to check whether we have 24 hours in clock or 12
   const is24Hour = React.useMemo(() => {
+    if (use24HourClock !== undefined) {
+      return use24HourClock
+    }
     const formatter = new Intl.DateTimeFormat(locale, {
       hour: '2-digit',
       minute: '2-digit',
@@ -60,7 +67,7 @@ function TimePicker({
     })
     const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23)))
     return formatted.includes('23')
-  }, [locale])
+  }, [locale, use24HourClock])
 
   // Initialize display Mode according the hours value
   React.useEffect(() => {
@@ -104,6 +111,7 @@ function TimePicker({
       >
         <TimeInputs
           inputType={inputType}
+          inputFontSize={inputFontSize}
           hours={hours}
           minutes={minutes}
           is24Hour={is24Hour}

package/src/Time/TimePickerModal.tsx

@@ -55,6 +55,8 @@ export function TimePickerModal({
   locale,
   keyboardIcon = 'keyboard-outline',
   clockIcon = 'clock-outline',
+  use24HourClock,
+  inputFontSize,
 }: {
   locale?: undefined | string
   label?: string
@@ -69,6 +71,8 @@ export function TimePickerModal({
   animationType?: 'slide' | 'fade' | 'none'
   keyboardIcon?: string
   clockIcon?: string
+  use24HourClock?: boolean
+  inputFontSize?: number
 }) {
   const theme = useTheme()
 
@@ -188,6 +192,8 @@ export function TimePickerModal({
                 <TimePicker
                   locale={locale}
                   inputType={inputType}
+                  use24HourClock={use24HourClock}
+                  inputFontSize={inputFontSize}
                   focused={focused}
                   hours={localHours}
                   minutes={localMinutes}

package/src/index.tsx

@@ -14,6 +14,7 @@ export { default as en } from './translations/en'
 export { default as enGB } from './translations/enGB'
 export { default as es } from './translations/es'
 export { default as fr } from './translations/fr'
+export { default as he } from './translations/he'
 export { default as it } from './translations/it'
 export { default as ko } from './translations/ko'
 export { default as nl } from './translations/nl'

package/src/translations/he.ts

@@ -0,0 +1,21 @@
+import type { TranslationsType } from './utils'
+
+const he: TranslationsType = {
+  save: 'שמור',
+  selectSingle: 'בחר תאריך',
+  selectMultiple: 'בחר תאריכים',
+  selectRange: 'בחר טווח',
+  notAccordingToDateFormat: (inputFormat) =>
+    `פורמט של תאריך צריך להיות ${inputFormat}`,
+  mustBeHigherThan: (date) => `חייב להיות אחרי ${date}`,
+  mustBeLowerThan: (date) => `חייב להיות לפני ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `חייב להיות בין ${startDate} - ${endDate}`,
+  dateIsDisabled: 'יום לא מורשה',
+  previous: 'הקודם',
+  next: 'הבא',
+  typeInDate: 'הקש תאריך',
+  pickDateFromCalendar: 'בחר תאריך מהלוח שנה',
+  close: 'סגור',
+}
+export default he