react-native-paper-dates 0.12.0 → 0.14.0

package/lib/typescript/TextInputMask.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<import("react-native").TextInputProps & React.RefAttributes<import("react-native").TextInput> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps & React.RefAttributes<import("react-native").TextInput> & {
     mode?: "flat" | "outlined" | undefined;
     left?: React.ReactNode;
     right?: React.ReactNode;
@@ -22,8 +22,9 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<import("react-
     render?: ((props: import("react-native-paper/lib/typescript/components/TextInput/types").RenderProps) => React.ReactNode) | undefined;
     value?: string | undefined;
     style?: import("react-native").StyleProp<import("react-native").TextStyle>;
-    theme: import("react-native-paper/lib/typescript/types").InternalTheme;
+    theme?: import("react-native-paper/lib/typescript/types").ThemeProp | undefined;
     testID?: string | undefined;
+    contentStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     outlineStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     underlineStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & React.RefAttributes<{
@@ -32,10 +33,8 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<import("react-
     blur: () => void;
     isFocused: () => boolean;
     setNativeProps: (nativeProps: object) => void;
-}>, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "disabled" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "ref" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "value" | "mode" | "error" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onKeyPress" | "onScroll" | "defaultValue" | "spellCheck" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoComplete" | "maxLength" | "textAlign" | "textAlignVertical" | "multiline" | "onContentSizeChange" | "scrollEnabled" | "textColor" | "dense" | "render" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "keyboardType" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "textContentType" | "cursorColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "outlineStyle" | "underlineStyle"> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<unknown> | undefined;
-} & {
+}> & {
     mask: string;
     value: string;
-}, "label" | "style" | "children" | "pointerEvents" | "allowFontScaling" | "numberOfLines" | "onLayout" | "onPressIn" | "onPressOut" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "disabled" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "left" | "right" | "key" | "hitSlop" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "value" | "mode" | "error" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "onKeyPress" | "onScroll" | "defaultValue" | "spellCheck" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoComplete" | "maxLength" | "textAlign" | "textAlignVertical" | "multiline" | "onContentSizeChange" | "scrollEnabled" | "textColor" | "dense" | "render" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "editable" | "keyboardType" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "textContentType" | "cursorColor" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "underlineColor" | "activeUnderlineColor" | "outlineColor" | "activeOutlineColor" | "outlineStyle" | "underlineStyle" | "mask" | "theme"> & React.RefAttributes<unknown>>;
+}, "ref"> & React.RefAttributes<unknown>>;
 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.12.0",
+  "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/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